http://stackoverflow.com/a/78943380
has body: I'm not sure what you are trying to achieve. If you want the rows to all have the same number of boxes, you have 12 rows that can be split into 2, 3, 4, or 6. By calculating the padding and margin of the parent and weather boxes, you can use a grid display layout and show them in more rows based on the viewport width. What I did was set the display of the weather-container to grid, change the width of the weather-box to auto, and then, by calculating the minimum size of each layout (120 * n + 24 + 16), create multiple grid layouts based on screen size and hide the separator at the end of each row: body { font-family: Arial, sans-serif; text-align: center; margin-top: 50px; } .weather-container { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: auto; justify-items: center; margin: 0 auto; padding: 10px; border-radius: 15px; border: 2px solid #000; /* Curved black border */ max-width: 100%; background-color: #fff; /* Ensure white background inside the border */ } .weather-box { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px 20px; width: auto; background-color: #fff; position: relative; } .weather-icon { font-size: 36px; } .temperature { display: flex; justify-content: space-between; width: 100%; margin-top: 5px; font-size: 18px; } .temperature span { width: 45%; text-align: center; } .month-label { font-size: 14px; font-weight: bold; margin-bottom: 5px; } .separator { position: absolute; top: 0; right: 0; width: 2px; height: 100%; background-color: #000; } /* Remove separator from the last box */ .weather-box:last-child .separator { display: none; } @media (max-width: 1480px) and (min-width: 760px) { .weather-container { grid-template-columns: repeat(6, 1fr); } .weather-box:nth-child(6n) .separator { display: none; } } @media (max-width: 760px) and (min-width: 520px) { .weather-container { grid-template-columns: repeat(4, 1fr); } .weather-box:nth-child(4n) .separator { display: none; } } @me…
type: Answer
score: 0
answers question: http://stackoverflow.com/q/78943090

http://stackoverflow.com/a/78931901
answers question: http://stackoverflow.com/q/78931768
type: Answer
score: 0
has body: You can look into using CSS properties/variables to define the different styles for your themes (this way you can avoid defining the styles 3 times for each theme for every class that you have), and then apply the theme with the variable definitions to a root element such as your body: const btn = document.querySelector("#change-theme-btn"); let themeIdx = 0; const themes = ["theme1", "theme2", "theme3"]; function setTheme() { document.body.classList.remove(...themes); const nextTheme = themes[themeIdx++ % themes.length]; document.body.classList.add(nextTheme); } btn.addEventListener("click", setTheme); setTheme(); .theme1 { --primary-bg-color: yellow; --primary-text-color: red; } .theme2 { --primary-bg-color: black; --primary-text-color: white; } .theme3 { --primary-bg-color: cyan; --primary-text-color: black; } body { background-color: var(--primary-bg-color); } .text { color: var(--primary-text-color); } Text Change theme

http://stackoverflow.com/comment/139121686
type: QuestionComment
comment on: http://stackoverflow.com/q/78906838
has text: If you're referring to OS-level mouse events (such as those that bring the window into focus), I don't think that can be done via JavaFX; you would somehow need to manage it at the native OS level. Calling `setMouseTransparent(true)` will prevent mouse events being propagated to the JavaFX event handling system, but it doesn't sound like that's what you are looking for.
score: 2
type: Comment

http://stackoverflow.com/a/78944228
upvote count: 1
has body: You didn't share the Javascript code you used to set/unset the shrink class when the scroll event occurs. So it's not clear what's the actual behaviour you are experiencing as a way of comparison with any proposed solution. By the way since you already had the css transitions defined, I just changed one selector to better match the logo and added a minimum javascript needed to add/remove the shrink class to the .navbar element. It works correctly according to the expectation: //on DOM ready $(document).ready(function() { //adds the window scroll event handler $(window).scroll(function() { //that will add/remove the shrink class to the .navbar according to the scrollbar relative to threshold const threshold = 50; if ($(this).scrollTop() > threshold) { $('.navbar').addClass('shrink'); } else { $('.navbar').removeClass('shrink'); } }); }); #logo { font-size: 2.5rem; transition: font-size 0.3s ease-in-out, padding 0.3s ease-in-out; padding: 10px 0; } .shrink #logo{ font-size: 1.5rem; padding: 5px 0; } .navbar { transition: padding 0.3s ease-in-out, box-shadow 0.3s ease-in-out; padding: 20px 0; } .navbar.shrink { padding: 10px 0; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } section { height: 2000px; } Mahyar ART GALERIE Home About Services Contact ...PAGE CONTENT...
score: 1
type: AcceptedAnswer
answers question: http://stackoverflow.com/q/78944147
downvote count: 0
type: Answer
accepted answer of: http://stackoverflow.com/q/78944147

http://stackoverflow.com/q/79048994
has answer: http://stackoverflow.com/a/79049111
tagged with: twitter-bootstrap
tagged with: bootstrap-5
type: UnansweredQuestion
tagged with: saas
type: Question
answer count: 1
has title: Subtle and Emphasis classes on Bootstrap 5.3 new color theme SASS
has body: I'm adding a new color theme on my Bootstrap SASS. I have a custom file with my mods and the new color (GOLD). After reading and searching a LOT, I was able to create the new theme and almost all elements, including backgrounds and borders. I.E: text-gold, border-gold, btn-gold, bg-gold, etc But even following examples and BS docs, I'm not able to create "subtle" and "emphasis" classes. No "border-gold-subtle, text-gold-emphasis, bg-gold-subtle, etc" Is there a way to accomplish that? My code (I removed other code blocks not related to the color theme) @import "functions"; $primary: #2B4261 !default; $secondary: #9FA6B2 !default; $success: #14A44D !default; $info: #54B4D3 !default; $warning: #E4A11B !default; $danger: #DC4C64 !default; $light: #FBFBFB !default; $dark: #332D2D !default; $gold: #AC863C !default; $gold-bg-subtle: tint-color($gold, 80%) !default; $gold-border-subtle: tint-color($gold, 60%) !default; $gold-bg-subtle-dark: shade-color($danger, 80%) !default; $gold-border-subtle-dark: shade-color($primary, 40%) !default; @import "variables"; @import "variables-dark"; $custom-colors: ( "primary": $primary, "secondary": $secondary, "success": $success, "info": $info, "warning": $warning, "danger": $danger, "light": $light, "dark": $dark, "gold": $gold ); $theme-colors: map-merge($theme-colors, $custom-colors); @import "maps"; @import "mixins"; @import "utilities"; $custom-colors-text: ("gold": $gold); $custom-colors-bg-subtle: ("gold": $gold-bg-subtle); $custom-colors-border-subtle: ("gold": $gold-border-subtle); $theme-colors-text: map-merge($theme-colors-text, $custom-colors-text); $theme-colors-bg-subtle: map-merge($theme-colors-bg-subtle, $custom-colors-bg-subtle); $theme-colors-border-subtle: map-merge($theme-colors-border-subtle, $custom-colors-border-subtle); $custom-colors-text-dark: ("gold": $gold); $custom-colors-bg-subtle-dark: ("gold": $gold-bg-subtle-dark); $custom-colors-border-subtle-dark: ("gold": $gold-border-subtle-dark); $theme-colors-text…
score: 0
tagged with: css

http://stackoverflow.com/comment/139354082
type: Comment
comment on: http://stackoverflow.com/a/79033554
score: 0
type: AnswerComment
has text: Thanks (also for the suggested improvements). But how can you pass the ```console.log``` (```const``` value) to a modal dialog?

http://stackoverflow.com/a/78955732
upvote count: 5
type: AcceptedAnswer
type: Answer
answers question: http://stackoverflow.com/q/78955699
downvote count: 0
score: 5
accepted answer of: http://stackoverflow.com/q/78955699
has body: The navbar in Bootstrap uses Flexbox. The direction is controlled through flex-direction. Having that in mind you could know, that you should not add margin to space the list items apart. Instead, use the gap property on the list container. remove mb-2 from the add gap-2 to the Register Log in

http://stackoverflow.com/comment/139181326
comment on: http://stackoverflow.com/q/78938496
score: 1
type: Comment
has text: If your real life example is as simple as your given code you could just size it using vmin.
type: QuestionComment

http://stackoverflow.com/q/78920122
has answer: http://stackoverflow.com/a/79546630
tagged with: tailwind-css
possible better answer: http://stackoverflow.com/a/79546630
has comment: http://stackoverflow.com/comment/140240008
has title: when I updated my angular application to v18, tailwind intellisense extension stop works
answer count: 2
has body: I was updating my angular application v17 to v18 and I was using tailwind intellisense extension, but after update, tailwind intellisense extension stop works, I've tried all the solutions on offer, but nothing has worked. exemple: classes autocomplete doesn't work.
tagged with: css
tagged with: vscode-extensions
upvote count: 2
has answer: http://stackoverflow.com/a/78922499
tagged with: angular
accepted answer: http://stackoverflow.com/a/78922499
favorite count: 0
type: Question
has comment: http://stackoverflow.com/comment/140283135
score: 2
downvote count: 0
linked to: http://stackoverflow.com/q/79394239
type: AnsweredQuestion

http://stackoverflow.com/comment/139379929
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/79044837
has text: @Beast80K i added my tailwind code in my question and i'm using page router because when i was creating the project on warp there was a question are you going to use app router then i selected "No" is that causing a problem ?

http://stackoverflow.com/comment/139141022
has text: Hi, code was updated for sticky footer.
type: Comment
comment on: http://stackoverflow.com/a/78916977
score: 0
type: AnswerComment

http://stackoverflow.com/comment/139405423
score: 0
comment on: http://stackoverflow.com/q/79060548
type: QuestionComment
has text: I'm not clear on the requirement - what happens if you need more than 800px to fit everything in? I see you have set no-wrap - but do you mean that on the container? And I assume that the longest text will at least fit into the 800px (?)
type: Comment

http://stackoverflow.com/q/78927044
has comment: http://stackoverflow.com/comment/139158871
score: 0
answer count: 0
has comment: http://stackoverflow.com/comment/139158782
tagged with: css
has title: Side content at the same Y position, but stackable
has body: I would like to create a sidebar with comments to the main text like in Google Docs. I would like the comments to be at the same Y position as text, BUT if text is too long, or there are multiple comments they should not overlap but stack one under the other. The best I could come up with is this: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sagittis metus sit amet purus dapibus iaculis. Aenean facilisis malesuada orci, tincidunt bibendum erat. Proin vel nisl lacinia, facilisis velit cursus, eleifend turpis. Phasellus ac imperdiet erat. Donec egestas aliquam augue a mattis. Pellentesque congue nunc vel scelerisque eleifend. Fusce orci odio, ultricies posuere mi ac, elementum blandit dolor. Praesent non velit bibendum est feugiat egestas et nec urna. Etiam volutpat eu massa sed porttitor. Aliquam et pulvinar metus. Maecenas nec enim felis. Ut mattis eros vitae risus scelerisque ornare ac tincidunt nibh. Suspendisse vitae ipsum porttitor, interdum nisl ut, sagittis arcu. In pretium, nulla vitae tincidunt vestibulum, odio neque convallis lacus, sit amet auctor leo tortor non nunc. Curabitur in dui at lorem mollis malesuada eget eget velit. Etiam vel neque vitae enim semper consequat lacinia id urna. Nulla commodo tellus et nunc commodo, et vulputate nunc auctor. Curabitur nec gravida risus. Aliquam neque nulla, faucibus non ante sed, pharetra euismod purus. Pellentesque molestie ante in sapien varius facilisis. Fusce nec cursus diam. Ut ut viverra nisi. Integer imperdiet at nibh at bibendum. Etiam commodo, purus eget gravida faucibus, ipsum mi maximus magna, eu tincidunt arcu arcu nec elit. Quisque ligula nibh, imperdiet hendrerit laoreet et, rhoncus vitae libero. Ut ornare leo sed nisl eleifend pretium non nec arcu. Aenean quis sollicitudin arcu, ac fermentum sem. Proin vitae velit a est ornare vestibulum. Vivamus finibus dui aliquam, ultricies quam eget, egestas eros. Cras ut nunc ac nunc pharetra gravida. Morbi pulvinar blandit justo id interdum. S…
type: UnansweredQuestion
type: Question
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139158809

http://stackoverflow.com/comment/139292243
has text: My pleasure. In fact the mask and clip-path implementations are quite confusing. A lot of properties are still not working consistantly and in case of clip-path we don't have something like `clip-size`. Hopefully we'll get better ways to mask/clip elements in CSS
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78963183

blogger
type: Tag
tags question: http://stackoverflow.com/q/79023748
tag name: blogger

http://stackoverflow.com/comment/139294735
has text: It’s not so evident to me that it’s not properly faded. What effect did you want?
type: Comment
score: 0
comment on: http://stackoverflow.com/q/79000303
type: QuestionComment

http://stackoverflow.com/a/79056373
has body: use this style on the container flex-wrap: wrap-reverse;
downvote count: 1
upvote count: 0
answers question: http://stackoverflow.com/q/79056369
type: Answer
score: -1

http://stackoverflow.com/comment/139128866
score: 0
type: Comment
comment on: http://stackoverflow.com/a/78908435
type: AnswerComment
has text: THANKS SO MUCH. But I wanted to ask something. Why do we set the display to block two times and I am a beginner so I don't have much experience. Could u also explain what this ~ means?

http://stackoverflow.com/comment/139182384
type: Comment
score: 4
type: QuestionComment
has text: https://developer.mozilla.org/en-US/docs/Web/CSS/:has#syntax: _"The `:has()` pseudo-class cannot be nested within another `:has()`."_
comment on: http://stackoverflow.com/q/78939815

http://stackoverflow.com/comment/139165699
type: AnswerComment
type: Comment
score: 0
has text: Right idea but the inner "border" does not have round points. A `path` is required, not `polygons` as polygons don't have curves.
comment on: http://stackoverflow.com/a/78930396

http://stackoverflow.com/comment/139221828
type: Comment
has text: what doesn't work ? edit your question to give more details, the css rule that doesn't act as expected, etc. you can help you of the developer tools of your browser, e.g. in firefox : https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/index.html
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78960395

http://stackoverflow.com/comment/139400972
score: 0
type: Comment
type: AnswerComment
has text: I have added html code(no change in css) in codesandbox,and added demo link(you can see code as well in codesandbox) everything works as expected. If you implemented exactly this,i need more context to help(maybe something else is overriding), or you can check difference between my code in codesandbox and your
comment on: http://stackoverflow.com/a/79058981

http://stackoverflow.com/comment/139383307
score: 0
type: AnswerComment
has text: Wrapping an additional `container` looks great. Just a side note: The class name `container` MIGHT get in conflict with default bootstrap class names. But anyway your idea helps and thx.
comment on: http://stackoverflow.com/a/79048188
type: Comment

http://stackoverflow.com/q/78936069
answer count: 1
type: AnsweredQuestion
downvote count: 1
has comment: http://stackoverflow.com/comment/139175544
has comment: http://stackoverflow.com/comment/139176483
favorite count: 0
score: 0
has comment: http://stackoverflow.com/comment/139190437
has body: See the following snipped: Item 4 and 4.2 have sub-UL. Optically, I want to apply the padding just to the text-node, which is (as of now) not possible in CSS. I tried to give the sublists a negatve margin, but then I cant get them to fill the LI-element horizontally. What I want is that all items get the size of the largest visible items, that all horizontal paddings are --menu-padding and that LIs that have ULs inside don't have horizontal padding. But that their text-note has a (optical) --menu-padding-margin to its border. Somehow, I cant get all three working. Is there a way? I am not looking for a javascript-solution or a change in the html. :root { --menu-clr-item-bk:#84744dff; --menu-clr-item-tx:#ddddddff; --menu-clr-item-tx-hov:#84744dff; --menu-clr-item-bk-hov:#ddddddff; --menu-clr-item-tx-clildhov:#ccccccff; --menu-clr-item-bk-clildhov:#847b65ff; --menu-h-clr-tile-bk:#ddddddff; --menu-h-clr-item-bk:var(--menu-clr-item-bk); --menu-h-clr-item-bk-hov:var(--menu-clr-item-bk-hov); --menu-h-clr-item-tx:var(--menu-clr-item-tx); --menu-h-clr-item-tx-hov:var(--menu-clr-item-tx-hov); --menu-h-separator:0; --menu-h-shadow:none; --menu-v-clr-tile-bk:#ddddddff; --menu-v-clr-item-bk:var(--menu-clr-item-bk); --menu-v-clr-item-bk-hov:var(--menu-clr-item-bk-hov); --menu-v-clr-item-tx:var(--menu-clr-item-tx); --menu-v-clr-item-tx-hov:var(--menu-clr-item-tx-hov); --menu-v-separator:1px; --menu-v-shadow:0.1em 0.1em 0.1em #0008; --menu-padding:0.5em; --menu-checkmargin:0.5em; --menu-checksize:1em; } * { box-sizing: border-box; } body, html { height: 100%; } nav > h1 { display: none; } /* all menues and items */ nav ul { position: absolute; white-space: nowrap; display: flex; width: fit-content; list-style-type: none; margin: 0; padding: 0; } nav ul > li:has(> a) { padding: 0; } nav ul > li:has(> a) > a { display: inline-block; padding: var(--menu-padding); } nav ul li:focus-within > ul { display: flex; } nav li { position: relative; align-items: left; display: flex; box-sizing…
has title: Margin and padding of sub-ULs inside LIs, how can I get around the (still) missing ::text-pseudoelement?
accepted answer: http://stackoverflow.com/a/78938039
has comment: http://stackoverflow.com/comment/139175356
upvote count: 1
type: Question
tagged with: menu
tagged with: css
has answer: http://stackoverflow.com/a/78938039

http://stackoverflow.com/q/78917706
tagged with: css
linked to: http://stackoverflow.com/q/15335926
has answer: http://stackoverflow.com/a/78917969
possible better answer: http://stackoverflow.com/a/78917969
score: 1
has comment: http://stackoverflow.com/comment/139141015
tagged with: web-frontend
has body: body { margin: 0vh 0vw; } .header { position: relative; width: 100%; height: 12vh; background-color: #004d40; display: flex; align-items: center; justify-content: center; overflow: hidden; top: 0; } .line { position: absolute; left: 0; top: calc(50%); width: 100%; height: 0.25vh; background-color: white; z-index: 1; } svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, 0%); z-index: 2; } SVG Header with Half Circle <path d="M0,0 A50,50 0 0,0 100,0" fill="#004d40" stroke="white" stroke-width="3"/> Hello, when the svg object goes to mobile view, the svg gets distorted and a gap occurs between the semicircle and the line. Why is this caused and how can we solve it. on dekstop: on mobie emulation: Expected Result: I was expecting it to look the same on mobile as on desktop.
has title: Appearance of svg object in mobile view is different from desktop view
favorite count: 0
has comment: http://stackoverflow.com/comment/139141102
has answer: http://stackoverflow.com/a/78917895
type: Question
accepted answer: http://stackoverflow.com/a/78917895
has comment: http://stackoverflow.com/comment/139141071
has comment: http://stackoverflow.com/comment/139141055
tagged with: http://stackoverflow.com/tag/html
downvote count: 0
type: AnsweredQuestion
tagged with: http://stackoverflow.com/tag/svg
answer count: 2
upvote count: 1
has comment: http://stackoverflow.com/comment/139142284
tagged with: frontend

http://stackoverflow.com/q/79012618
has answer: http://stackoverflow.com/a/79012651
has comment: http://stackoverflow.com/comment/139315898
has body: I have a site that I am building https://azalea-fiddle-5ha9.squarespace.com/ pwd: USTAX2024 On desktop, my site is fine, but when I view in mobile, the section the title THE SOLUTION is appearing before THE PROBLEM. This should not be the case. On the desktop site, the order is fine, but on mobile it is switching up. How can I fix this? This is what I have tried to add as Custom CSS to no avail: @media (max-width: 600px) { #yui_3_17_2_1_1727035450177_100 { display: flex !important; flex-direction: column-reverse !important; } }
type: Question
tagged with: squarespace
answer count: 1
downvote count: 1
has comment: http://stackoverflow.com/comment/139315922
has comment: http://stackoverflow.com/comment/139315908
upvote count: 0
score: -1
has title: Squarespace section content getting reversed and order is changed in mobile view
has comment: http://stackoverflow.com/comment/139315873
tagged with: css
has comment: http://stackoverflow.com/comment/139315896
has comment: http://stackoverflow.com/comment/139315871
has comment: http://stackoverflow.com/comment/139315903
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139315919
favorite count: 0

http://stackoverflow.com/comment/139420329
comment on: http://stackoverflow.com/a/79068753
has text: Thanks for the attempt, this could be a solution if not for the borders I have in my table; and it is in fact a correct solution if I hide them. Comments have shown me how the example was incomplete.
score: 0
type: Comment
type: AnswerComment

http://stackoverflow.com/q/78935245
type: UnansweredQuestion
type: Question
tagged with: http://stackoverflow.com/tag/html
answer count: 1
tagged with: tailwind-css
has body: I have two files. One is the layout and the other the button. The code works as intended but now the pushes down the <SomeDiv />. To solve this I can use absolute but then my sticky does not work anymore. How to solve that my current behaviour stays the same yet the does not push down the <SomeDiv />? The other way around I also do not want of course, i.e. <SomeDiv /> pushes down . //layout <Menu /> <SomeDiv /> {children} //Button <Image />
has comment: http://stackoverflow.com/comment/139173670
score: 0
tagged with: css
has comment: http://stackoverflow.com/comment/139173715
has title: Use sticky and absolute CSS
has answer: http://stackoverflow.com/a/78935317

http://stackoverflow.com/q/78921797
type: AnsweredQuestion
score: 0
has body: I tried to remove the intersection of the base of the semicircle and the line by using clip-path in .line, but it did not work. Is this the correct method or is there another way? I tried to remove the intersection of the base of the semicircle and the line by using clip-path in .line, but it did not work. Is this the correct method or is there another way? How can we solve this problem? How can we remove the part mentioned in the image? body { margin: 0vh 0vw; } .header { position: relative; width: 100%; height: 12vh; background-color: #004d40; display: flex; align-items: center; justify-content: center; overflow: hidden; top: 0; } .line { position: absolute; left: 0; top: calc(50%); width: 100%; height: 0.25vh; background-color: white; z-index: 1; } svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, 0%); z-index: 2; } SVG Header with Half Circle <path d="M0,0 A50,50 0 0,0 100,0" fill="none" stroke="white" stroke-width="3"/>
accepted answer: http://stackoverflow.com/a/78924920
answer count: 2
possible better answer: http://stackoverflow.com/a/78922158
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139150524
tagged with: http://stackoverflow.com/tag/svg
has title: Problem removing part of svg element that intersects line
has answer: http://stackoverflow.com/a/78924920
has answer: http://stackoverflow.com/a/78922158
tagged with: css
type: Question

blazor-server-side
type: Tag
tag name: blazor-server-side
tags question: http://stackoverflow.com/q/78932108
tags question: http://stackoverflow.com/q/79052687
tags question: http://stackoverflow.com/q/79188006
tags question: http://stackoverflow.com/q/79245215
tags question: http://stackoverflow.com/q/79395143
tags question: http://stackoverflow.com/q/79325278
tags question: http://stackoverflow.com/q/79245111

http://stackoverflow.com/comment/139227937
has text: The solution worked for plain text but in my case where I am getting words from another file and displaying it in the form of words and characters it didn't work
comment on: http://stackoverflow.com/a/78963199
type: Comment
score: 0
type: AnswerComment

http://stackoverflow.com/q/78959643
type: AnsweredQuestion
has answer: http://stackoverflow.com/a/78959684
possible better answer: http://stackoverflow.com/a/78959684
has comment: http://stackoverflow.com/comment/139227552
has comment: http://stackoverflow.com/comment/139235246
tagged with: button
has answer: http://stackoverflow.com/a/78959690
score: 0
tagged with: javascript
has answer: http://stackoverflow.com/a/78959685
accepted answer: http://stackoverflow.com/a/78959685
answer count: 3
tagged with: css
has body: We all know you can change the colour of a button when you hover over it in CSS alone. But, what would I do to make a label within it show up when I hover over it? Effectively, my button just has an icon/image in it when it is in normal mode. But, when the user hovers over the button it will show a text label as well. I realise you can put a title into the button with gives a text description of what the button does, but can you put a label into a button when you hover over it? Is that a good idea, or should I just stick to using title? Ie, here is my button in normal state: &lt;button&gt; &lt;img src=&quot;./images/iconok.png&quot; alt=&quot;Submit&quot; /&gt; &lt;label style=&quot;display: none&quot;&gt;&amp;nbsp;Submit&lt;/label&gt; &lt;/button&gt; and in my hovered state &lt;button&gt; &lt;img src=&quot;./images/iconok.png&quot; alt=&quot;Submit&quot; /&gt; &lt;label style=&quot;display: inline-block&quot;&gt;&amp;nbsp;Submit&lt;/label&gt; &lt;/button&gt; How do I implement this? Note: When the button is not being hovered over, I do not want any space being allocated to the label at all, as if it was not even there. EDIT: I have made a mistake in my original question that affected the answer. I had display: block; on my label, which caused the label to appear below the image, but should have been display: inline-block; to make it appear at the side.
tagged with: label
type: Question
has comment: http://stackoverflow.com/comment/139235289
tagged with: hover
has title: How to Show a Hidden Label When Hovering Over a Button?

http://stackoverflow.com/a/79021263
downvote count: 1
type: Answer
upvote count: 0
score: -1
answers question: http://stackoverflow.com/q/79021126
has body: The updated code seems correct. Define the width of the sidebar and give same padding from left to the content div

twitter-bootstrap
tags question: http://stackoverflow.com/q/78949090
tags question: http://stackoverflow.com/q/79052887
tags question: http://stackoverflow.com/q/79042220
tags question: http://stackoverflow.com/q/78986796
tag name: twitter-bootstrap
tags question: http://stackoverflow.com/q/79048994
tags question: http://stackoverflow.com/q/78910644
tags question: http://stackoverflow.com/q/78913676
tags question: http://stackoverflow.com/q/78912380
tags question: http://stackoverflow.com/q/79049909
tags question: http://stackoverflow.com/q/78912015
tags question: http://stackoverflow.com/q/79030517
type: Tag
tags question: http://stackoverflow.com/q/79004360
tags question: http://stackoverflow.com/q/79213307
tags question: http://stackoverflow.com/q/79195479
tags question: http://stackoverflow.com/q/79094021
tags question: http://stackoverflow.com/q/79196038
tags question: http://stackoverflow.com/q/79132852
tags question: http://stackoverflow.com/q/79194635
tags question: http://stackoverflow.com/q/79239758
tags question: http://stackoverflow.com/q/79239551
tags question: http://stackoverflow.com/q/79082926
tags question: http://stackoverflow.com/q/79189709
tags question: http://stackoverflow.com/q/79121102
tags question: http://stackoverflow.com/q/79343238
tags question: http://stackoverflow.com/q/79305822
tags question: http://stackoverflow.com/q/79316519
tags question: http://stackoverflow.com/q/79261192
tags question: http://stackoverflow.com/q/79395246
tags question: http://stackoverflow.com/q/79324126
tags question: http://stackoverflow.com/q/79253853
tags question: http://stackoverflow.com/q/79346081
tags question: http://stackoverflow.com/q/79402842
tags question: http://stackoverflow.com/q/79323965
tags question: http://stackoverflow.com/q/79385074
tags question: http://stackoverflow.com/q/79339144
tags question: http://stackoverflow.com/q/79364123
tags question: http://stackoverflow.com/q/79339166
tags question: http://stackoverflow.com/q/79433985
tags question: http://stackoverflow.com/q/79422870
tags question: http://stackoverflow.com/q/79527701
tags question: http://stackoverflow.com/q/79525453
tags question: http://stackoverflow.com/q/79527728

http://stackoverflow.com/comment/139300183
has text: I was under the assumption that I needed to put the a around the entire div in order to get the padding as part of the hyperlink and not just the text? But I may be wrong.
comment on: http://stackoverflow.com/a/79004004
type: Comment
score: 0
type: AnswerComment

http://stackoverflow.com/q/78946409
has answer: http://stackoverflow.com/a/78948436
has title: How to code a Material-UI TextField component so the background-color does not overflow the border?
type: AnsweredQuestion
tagged with: background-color
accepted answer: http://stackoverflow.com/a/78948436
tagged with: border
score: 0
has body: I have been attempting to style a Material-UI TextField to have a background-color when a user hovers or the component is focused. My component code is: import React from "react"; import TextField, { TextFieldProps } from "@mui/material/TextField"; import { styled } from "@mui/material/styles"; import { Input, InputBase, InputBaseProps } from "@mui/material"; export const SearchBar = styled(TextField)<TextFieldProps>(({ theme }) => ({ "& .MuiOutlinedInput-root": { color: "var(--grey-30)", marginRight: "10px", "& .MuiOutlinedInput-notchedOutline": { borderRadius: "30px", borderColor: "var(--primary)", borderSize: "1px", height: "56px", color: "var(--primary)", }, "&:hover:not(.Mui-focused)": { color: "var(--grey-30)", borderColor: "var(--primary)", backgroundColor: "var(--primary-99)", borderRadius: "30px", }, "&.Mui-focused": { color: "var(--primary)", backgroundColor: "var(--primary-99)", borderRadius: "30px", borderColor: "var(--primary)", "& .MuiInputAdornment-outlined": { color: "var(--primary)", }, }, }, })); And my instance of the component code as pictured below is: <SearchBar id="search-input" placeholder="Search" type="search" InputProps={{ startAdornment: ( <SearchIcon /> ), }} value={searchParam} onChange={onSearch} /> Image of TextField styled as a Search Bar with background-color overshooting the border I have searched everywhere but have not come across a post addressing this particular issue. Any advice would be appreciated. I have tried not using "& .MuiOutlinedInput-notchedOutline" but that did not work. I tried adding the notchedOutline to the hover and .MuiFocused. That made the background appear correctly, but the text was no longer visible (as well as the adornment).
tagged with: material-ui
tagged with: css
tagged with: textfield
type: Question
answer count: 1

http://stackoverflow.com/q/78926760
tagged with: css
tagged with: canvas
type: Question
has comment: http://stackoverflow.com/comment/139158148
has comment: http://stackoverflow.com/comment/139158162
linked to: http://stackoverflow.com/q/4472891
score: 0
has comment: http://stackoverflow.com/comment/139171928
answer count: 2
has body: I am creating a game using JavaScript an HTML canvas on my webpage. I want to make the experience as smooth as possible, so I want to try and prevent any user actions, eg. scrolling, zooming, selection. I also want it to work across different browsers. My experience with trying to fix this is that HTML &lt;meta&gt; tags haven't really helped and JavaScript solutions have most been pretty clunky, which is not really the solution I'm after. Here is some CSS code that I have tried to use. Some of it works but there are still lots of issues with scrolling, zooming etc. and lots of other edge cases. body, html, #canvas { width: 100%; height: 100%; pointer-events: none; touch-action: none; zoom: none; -webkit-zoom-in: none; -webkit-zoom-out: none; scroll: none; scrollbar: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; -webkit-user-select: none; user-select: none; } Is there any way to just disable all user interactions and then start again from scratch?
has comment: http://stackoverflow.com/comment/139171921
has answer: http://stackoverflow.com/a/78927318
tagged with: http://stackoverflow.com/tag/html
has answer: http://stackoverflow.com/a/78928402
has comment: http://stackoverflow.com/comment/139160548
has title: Prevent unwanted user interactions on HTML canvas
tagged with: javascript
type: UnansweredQuestion

http://stackoverflow.com/a/79068289
has body: The error occurred because the theme-switch functionality also updates an image on the homepage. Since the image is only present on the homepage, attempting to modify it on another page where it doesn't exist resulted in a null value being returned. Here is the updated code: // DarkMode let darkmode = localStorage.getItem("darkmode") const themeSwitch = document.getElementById("theme-switch") const enableDarkmode = () => { document.body.classList.add("darkmode") localStorage.setItem("darkmode", "active") // document.getElementById("logo").src="../Imgs/logo-white.png" } const disableDarkmode = () => { document.body.classList.remove("darkmode") localStorage.setItem("darkmode", null) // document.getElementById("logo").src="../Imgs/logo-blue.png"; } if (darkmode ==="active") enableDarkmode() themeSwitch.addEventListener("click", () => { darkmode = localStorage.getItem("darkmode") darkmode !== "active" ? enableDarkmode() : disableDarkmode() darkmode === "active" ? document.getElementById("logo").src="../Imgs/logo-blue.png" : document.getElementById("logo").src="../Imgs/logo-white.png"; }) Thanks everyone for your time and sorry for wasting it
type: Answer
answers question: http://stackoverflow.com/q/79068052
score: 0

http://stackoverflow.com/q/79048767
tagged with: css-transforms
has comment: http://stackoverflow.com/comment/139383536
type: UnansweredQuestion
score: 1
has comment: http://stackoverflow.com/comment/139384057
favorite count: 0
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139384031
type: Question
tagged with: perspective
downvote count: 0
has body: I'm designing a website that takes advantage of the CSS transform3D feature which allows me to position divs in 3D space with hardware-accelerated 3D transformation such as perspective and scaling. I followed Keith Clark's "Pure CSS Parallax Websites" guide as a starting point, as well as a Medium article from "Daily Fire". I modified the technique to allow me to place multiple layers of fullscreen background images on my website, which makes for a very cool effect. You can see it live, in action on my personal website. My problem is that despite my best efforts, these very large background elements cause the page to scroll past the bounds of my main content in Chrome. Firefox and Safari have no trouble rendering this page correctly. Chrome allows the user to scroll waaaaaaaaaay past the bottom of my webpage instead of respecting my overflow settings. Screenshot from Chrome: Screenshot from Safari: Here's some pseudo-code: /* Formatting and parallax stuff */ html, body { background: #000; height: 100vh; margin: 0; overflow: hidden scroll; /* (x y) */ padding: 0; perspective: 1px; /* Desines "strength" of 3D effect */ transform-style: preserve-3d; /* Tells browser to render page as 3D */ width: 100vw; } .content { /* uncomment following line if you want to work around deleting bgcontainer div */ /*margin-top: 80vh;*/ background: #111C; border: yellow 2px solid; height: 1600px; transform: translateZ(0px); width: 100%; } /* Background elements */ .bgcontainer { /* if we contain the parallax elements in a parent div, */ /* chrome just renders the page weird. This is where the bug is. */ height: 80vh; transform-style: preserve-3d; width: 100vw; } .bglayer { bottom: 0px; display: block; left: 0px; position: fixed; /* if set to absolute, breaks WebKit */ right: 0px; top: 0px; } .bg1 { background-color: red; width: 95%; height: 95%; transform: scale(21) translateZ(-20px); /* translateZ & translate3D can define a layer's depth */ /* we need to scale it to compensate for pers…
tagged with: chromium
has title: Using 3D CSS transforms on large background elements breaks scrolling overflow in Chromium browsers
upvote count: 1
answer count: 0
tagged with: css
has comment: http://stackoverflow.com/comment/139383982

http://stackoverflow.com/q/78988683
has comment: http://stackoverflow.com/comment/139272217
has title: I need solution for overlapping item image on top of another?
tagged with: http://stackoverflow.com/tag/html
type: Question
has answer: http://stackoverflow.com/a/79006314
score: 0
answer count: 2
has comment: http://stackoverflow.com/comment/139272684
has body: I'm trying to make a streaming service website as practice, but the problem is when I put images, titles and episode lists in a way like columns and rows. For the image on top over I, tried changing the margin or other things but it didn't work. I tried to change the margin, and perhaps put a container on it but it didn't work, I want it to be like this: existing streaming service It ended up lining up. Likes this: My Streaming Service I want to line up at least four columns containing a poster, title and episode. At first, the row is ok but the second and further overlaps on top of the first. This is the code: .column { background-color: rgb(249, 215, 142); float: left; width: 200px; padding: 20px; height: 200px; grid-template-columns: 1fr 1fr 1fr; } .row:after { content: ""; display: grid; clear: both; } Oshi No Ko Season 2 Episode 1 Sub Failure Frame Season 1 Episode 1 Sub Vanguard Divinez Season 2 Episode 1 Sub Alya Sometimes Hides Her Feelings in Russian Season 1 Episode 1 Dub|Sub 7th Time Loop The Villainess Enjoys a Carefree Life Married to Her Worst Enemy Season 1 Episode 1 Sub As A Reincarnated Aristocrat I'll Use My Appraisal Skill to Rise in The World Season 1 Episode 1 Dub|Sub Chillin' in Another World with Level 2 Cheats Season 1 Episode 1 Dub|Sub Fairy Tail 100 Years Quest Season 1 Episode 1 Dub|Sub I Parry Everything Season 1 Episode 1 Dub|Sub Anyone know how to fix it.
has comment: http://stackoverflow.com/comment/139272091
tagged with: css
has answer: http://stackoverflow.com/a/78992532
type: UnansweredQuestion

http://stackoverflow.com/comment/139278721
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78987974
type: QuestionComment
has text: could you pls share a minimal sample for reproducing the issue?

http://stackoverflow.com/comment/139219705
type: QuestionComment
score: 1
comment on: http://stackoverflow.com/q/78960206
has text: This is why it's always a good idea to start a question with a small reproducible example (preferably a runnable snippet), here your snippet works fine on mobile. I'm currently flagging as not reproducible.
type: Comment

http://stackoverflow.com/q/78935921
has body: Consider this case: Hello When the user visits the page with a device with screen size larger than lg. They won't see the text hello. However, if the user tries to print the page, the print still includes the text Hello. The issue is caused when we use the responsive style prefixes like lg:
upvote count: 3
type: UnansweredQuestion
favorite count: 0
tagged with: tailwind-ui
type: Question
downvote count: 0
answer count: 1
tagged with: tailwind-css
has answer: http://stackoverflow.com/a/78935948
score: 3
tagged with: tailwind-3
tagged with: css
has title: Tailwind printed view does not apply responsive styles

http://stackoverflow.com/q/79031966
favorite count: 0
score: -4
has answer: http://stackoverflow.com/a/79032020
answer count: 1
tagged with: user-interface
has body: I have set the font-family property of CSS to: font-family: Cubano, sans-serif,Arial. Now, how i set the font of a &lt;p&gt; element to sans-serif. I tried asking ChatGPT (no good answer) finding questions on Q&amp;A websites, reading blog posts and more
tagged with: http://stackoverflow.com/tag/html
type: Question
accepted answer: http://stackoverflow.com/a/79032020
type: AnsweredQuestion
tagged with: css
tagged with: fonts
has title: How i set the secondary font in HTML?
downvote count: 5
upvote count: 1

http://stackoverflow.com/a/78946996
has comment: http://stackoverflow.com/comment/139195422
has body: Set the SVG to display block and then replace the widht and the height on the button with a margin in the SVG. #search-button { padding: 0; margin: 0; } #search-button-svg { outline: 1px dotted red; width: 2em; height: 2em; display: block; margin: calc(.5em - 2px); /* subtract the width of the border of the button */ } &lt;button type="submit" id="search-button"&gt; &lt;svg id="search-button-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"&gt; &lt;path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/&gt; &lt;/svg&gt; &lt;/button&gt;
accepted answer of: http://stackoverflow.com/q/78946570
has comment: http://stackoverflow.com/comment/139195288
type: AcceptedAnswer
has comment: http://stackoverflow.com/comment/139205092
type: Answer
has comment: http://stackoverflow.com/comment/139201697
has comment: http://stackoverflow.com/comment/139200992
answers question: http://stackoverflow.com/q/78946570
score: 0

http://stackoverflow.com/q/78992567
has comment: http://stackoverflow.com/comment/139281534
tagged with: next.js
answer count: 0
tagged with: css
has comment: http://stackoverflow.com/comment/139281583
has comment: http://stackoverflow.com/comment/139280511
tagged with: css-modules
has comment: http://stackoverflow.com/comment/139279817
has comment: http://stackoverflow.com/comment/139281461
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139281620
has comment: http://stackoverflow.com/comment/139280096
type: Question
has comment: http://stackoverflow.com/comment/139280935
has comment: http://stackoverflow.com/comment/139281552
has comment: http://stackoverflow.com/comment/139281556
has comment: http://stackoverflow.com/comment/139280471
has comment: http://stackoverflow.com/comment/139280571
has title: Font size is uneven in different components of next js 14 app
has comment: http://stackoverflow.com/comment/139281667
has comment: http://stackoverflow.com/comment/139280501
has body: I need some help with an issue. The font sizes are uneven in different components of my portfolio website, which I developed using Next.js 14 App Router. I'm using CSS modules. I have a single CSS module called default.module.css that contains all the font styles and breakpoints. Please take a look and guide me on how to fix this issue. Feel free to ask if you need any further details. default.module.css: .defaultBg { background-color: var(--dark); width: 100%; height: 100%; min-height: 100dvh; } .containerSpace { width: 80.5%; margin-left: auto; margin-right: auto; } @media screen and (max-width: 600px) { .containerSpace { width: calc(100% - 2.75rem); } } @media screen and (min-width: 601px) and (max-width: 1000px) { .containerSpace { width: calc(100% - 12rem); } } @media screen and (min-width: 1001px) and (max-width: 1400px) { .containerSpace { width: 79.5%; } } .headingSpace { margin: auto auto 1.45vw auto; } .textSpaceSmall { margin: auto auto 0.75vw auto; } .textSpace { margin: auto auto 1.25vw auto; } .textSpaceLarge { margin: auto auto 1.25vw auto; } @media screen and (max-width: 1000px) { .headingSpace { margin-bottom: 1rem; } .textSpaceSmall { margin-bottom: 0.75rem; } .textSpace { margin-bottom: 1rem; } .textSpaceLarge { margin-bottom: 1rem; } } .headingStandard { font-size: 1.25vw; font-weight: 600; } @media screen and (max-width: 400px) { .headingStandard { font-size: 16px; } } @media screen and (min-width: 401px) and (max-width: 1000px) { .headingStandard { font-size: 17px; } } .headingMedium { font-size: 1vw; font-weight: 600; color: var(--white); } @media screen and (max-width: 1000px) { .headingMedium { font-size: 16px; } } .textLarge { line-height: 1.75vw; color: var(--white); font-weight: 500; } .textExtraLarge, .text2XL { font-weight: 500; color: var(--white); line-height: 2vw; } .textNormal { line-height: 1.85vw; } .textExtraLarge { font-size: 1.2vw; } @media screen and (max-width: 1000px) { .textNormal { line-height: 24px; } .textLarge, .textExt…
has comment: http://stackoverflow.com/comment/139279827
has comment: http://stackoverflow.com/comment/139281525
has comment: http://stackoverflow.com/comment/139280493
score: 0

http://stackoverflow.com/q/78911737
score: 1
favorite count: 0
tagged with: safari
type: Question
downvote count: 0
upvote count: 1
has comment: http://stackoverflow.com/comment/139130980
has comment: http://stackoverflow.com/comment/139130943
has body: I have such a counter transition which doesn't work only on safari. @property --total { syntax: '&lt;integer&gt;'; initial-value: 0; inherits: false; } #total { transition: --total 3s; counter-set: num var(--total); } #total::after{ content: counter(num); } I'm updating the property with document.getElementById('total').style.setProperty('--total', total)
has comment: http://stackoverflow.com/comment/139130917
answer count: 0
has title: css counter transition doesn't work on safari
tagged with: css
type: UnansweredQuestion

http://stackoverflow.com/a/78983721
score: 1
has comment: http://stackoverflow.com/comment/139265042
has body: Working through what those three selectors do, &[data-active="true"] says, “Match me when I have [data-active="true"]. Simple enough. &:hover:not(:has(+ [data-active="true"])) says, “Match me when I’m hovered and when my immediate next sibling doesn’t have [data-active="true"]. &:hover:not(:has(~ [data-active="true"])) is very similar. It says, “Match me when I’m hovered and when any subsequent sibling doesn’t have [data-active="true"]. Based on the behavior you’re going for, you may be mistaking the ~ subsequent sibling combinator for something like an any sibling combinator. However, no such thing exists. You can go about this by checking the parent to make sure it doesn’t have any children with the data attribute, and only then apply the hover. &[data-active="true"], :not(:has([data-active="true"])) > &:hover .boxes { margin-block: 8px; height: 80px; display: flex; gap: 20px; } .box { background-color: royalblue; border-radius: 20px; flex: 1 auto; transition: flex-grow 200ms; &[data-active="true"], :not(:has([data-active="true"])) > &:hover { flex: 2 auto; } }
answers question: http://stackoverflow.com/q/78983131
accepted answer of: http://stackoverflow.com/q/78983131
type: AcceptedAnswer
downvote count: 0
type: Answer
upvote count: 1

pyqt
type: Tag
tags question: http://stackoverflow.com/q/78957189
tag name: pyqt

http://stackoverflow.com/a/78937598
type: AcceptedAnswer
has comment: http://stackoverflow.com/comment/139178197
has body: The issue is that the two texts have different lengths, and since you haven’t set a fixed height, the container will automatically adjust its size as the text doesn't fit. Try using max-height to prevent the container from growing beyond a certain height.
type: Answer
score: 0
answers question: http://stackoverflow.com/q/78937508
accepted answer of: http://stackoverflow.com/q/78937508

http://stackoverflow.com/a/79029926
score: -1
answers question: http://stackoverflow.com/q/79027028
downvote count: 1
upvote count: 0
type: Answer
has body: It appears that while the hashchange is fired, it is fired too late. The navigation by the browser due to the link happens first, leading to the vertical scrolling without any behavior: "smooth". To solve this, one can add the event handler to the link instead: document.addEventListener("DOMContentLoaded", function () { document.body.classList.add("js-ready"); // on load if (location.hash) horizontal_anchor(); // on URL change window.addEventListener("hashchange", function (event) { event.preventDefault(); horizontal_anchor(); return false; }); // on click document.querySelectorAll(".slider-nav").forEach(function (a) { a.addEventListener("click", function (event) { event.preventDefault(); history.pushState(null, null, a.getAttribute("href")); horizontal_anchor(); }); }); });

http://stackoverflow.com/comment/139374879
comment on: http://stackoverflow.com/q/79044610
type: Comment
score: 0
has text: (and of course: when used as element in HTML, just style things with CSS, rather than using the XML styling attributes. Saves a _lot_ of text, so your document is smaller, and it makes your code much easier to both read and maintain)
type: QuestionComment

http://stackoverflow.com/comment/139180168
type: Comment
score: 0
type: AnswerComment
has text: what does `box-sizing: border-box;` do, and why does it need to be applied to everything?
comment on: http://stackoverflow.com/a/78938633

http://stackoverflow.com/comment/139287330
comment on: http://stackoverflow.com/q/78996939
type: Comment
has text: Please could you make a runnable snippet within the question (use <> icon in the editor) as external sites can disappear so rendering your question useless for future readers.
score: 1
type: QuestionComment

http://stackoverflow.com/comment/139403114
has text: the "string" value is not yet supported by all the browser so don't use it
score: 1
type: Comment
comment on: http://stackoverflow.com/q/79060298
type: QuestionComment

http://stackoverflow.com/q/78918262
favorite count: 0
type: Question
tagged with: http://stackoverflow.com/tag/html
downvote count: 0
answer count: 1
type: AnsweredQuestion
has title: Including CSS when writing HTML file to OutputStream in Java
score: 1
accepted answer: http://stackoverflow.com/a/78922037
upvote count: 1
has comment: http://stackoverflow.com/comment/139142058
tagged with: server
has comment: http://stackoverflow.com/comment/139143771
tagged with: css
has comment: http://stackoverflow.com/comment/139143025
has body: I'm trying to import a pre-written index.html file and parse it to a client from a host server. I am using a StringBuilder to load up the HTML file into a string and then write it to the client. My code for the server is below: import java.io.BufferedReader; import java.io.FileReader; import java.io.IOException; import java.io.InputStream; import java.io.OutputStream; import java.net.ServerSocket; import java.net.Socket; public class HTTPServer { public static void main(String[] args) throws IOException { // start server on port 8080 ServerSocket server = new ServerSocket(8080); System.out.println("Listening for connection on port 8080..."); while (true) { try { // accept connection from a client Socket socket = server.accept(); InputStream in = socket.getInputStream(); OutputStream out = socket.getOutputStream(); // load HTML file from file directory StringBuilder contentBuilder = new StringBuilder(); try { BufferedReader webpage = new BufferedReader(new FileReader("index.html")); String str; while ((str = webpage.readLine()) != null) { contentBuilder.append(str); } webpage.close(); } catch (IOException e) { e.printStackTrace(); } String html = contentBuilder.toString(); // construct valid HTML response message final String CRLF = "\r\n"; // 13, 10 String response = "HTTP/1.1 200 OK" + CRLF + // status line: HTTP_VERSION RESPONSE_CODE RESPONSE_MESSAGE "Content-Length: " + html.getBytes().length + CRLF + // header CRLF + html + CRLF + CRLF; // write HTML message to the client out.write(response.getBytes()); } catch (IOException e) { e.printStackTrace(); } } } } My index.html file references a style.css file that I have also written previously, but when I start this server, the HTML page on localhost is not formatted according to the aforementioned CSS file. For reference, here is what the index.html page looks like when opened normally (this is a fake church by the way!). Does anyone know how I can get my Java server to keep intact the styling? Thanks! I have tried …
has answer: http://stackoverflow.com/a/78922037
tagged with: java

http://stackoverflow.com/comment/139227476
type: QuestionComment
comment on: http://stackoverflow.com/q/78964335
type: Comment
score: 1
has text: That's not how CSS-Grid works or is supposed to work. What you're looking for is called "Masonry Grid" or "Masonry Layout".

http://stackoverflow.com/q/79063149
answer count: 1
type: AnsweredQuestion
tagged with: emotion
has title: CSS transition is not working on emotion styled component
tagged with: typescript
score: 0
has body: I have a problem with css transition. When the selected state value changes, the CSS width changes. I want to apply a transition effect to the width, but if I use a styled component, the transition does not work. Here is my styled component code: const Bar = styled.div<{ selected: boolean }>` width: 28px; height: 6px; cursor: pointer; border-radius: 8px; background-color: #ffffff66; transition: width 1s ease; ${({ selected }) => selected && ` width: 40px; background-color: #fff; ` } `; This code does not use styled components (It worked): I have no idea why transition is not applied when using styled components. please help me.
tagged with: reactjs
accepted answer: http://stackoverflow.com/a/79064079
tagged with: css
tagged with: styled-components
has answer: http://stackoverflow.com/a/79064079
type: Question

http://stackoverflow.com/comment/139160546
score: 0
has text: The top of the cake is not a perfect circle but an oval shape, so a simple distance check won't work. You'll need a slightly more complex calculation to detect if a point falls inside an ellipse. https://math.stackexchange.com/a/76463
type: QuestionComment
comment on: http://stackoverflow.com/q/78927953
type: Comment

http://stackoverflow.com/a/79058734
has body: The changed css custom property only works inside of its own context, not the parents context. :root { --primary: black; } .outer, .inner { background-color: var(--primary, black); } .foo { width: 100px; height: 100px; background: var(--primary); border: 1px solid #ddd; } p { padding: .5rem; color: #ddd } label { color: var(--primary); } .checkbox:checked ~ * { --primary: rebeccapurple; } this wont change this will change If you want to change the css custom property globally, you have to use javascript document.documentElement.style.setProperty('--primary', 'lime'); EDIT: As @a-haworth correctly said, you don't have to use javascript. You can manipulate the root css properties with :has. :root { --primary: black; } :root:has(.checkbox:checked) { --primary: rebeccapurple; } EDIT 2: I totally forgot that you can store css custom properties inside css custom properties. This makes it possible to change a css custom property value, as long as the value is also defined in the :root :root { --color1: black; --color2: rebeccapurple; --primary: var(--color1); } .outer, .inner { background-color: var(--primary); } .foo { width: 100px; height: 100px; background: var(--primary); border: 1px solid #ddd; } p { padding: .5rem; color: #ddd } label { color: var(--primary); } .checkbox:checked ~ * { --primary: var(--color2); } this wont change this will change This way you could define your style guide inside the :root and only use the other css variables as values. You also do not have to use :has() for this.
has comment: http://stackoverflow.com/comment/139399996
has comment: http://stackoverflow.com/comment/139400011
type: AcceptedAnswer
downvote count: 0
type: Answer
answers question: http://stackoverflow.com/q/79058673
score: 1
upvote count: 1
accepted answer of: http://stackoverflow.com/q/79058673

css
tags question: http://stackoverflow.com/q/79066820
tags question: http://stackoverflow.com/q/78906077
tags question: http://stackoverflow.com/q/79013945
tags question: http://stackoverflow.com/q/78930649
tags question: http://stackoverflow.com/q/79016259
tags question: http://stackoverflow.com/q/78960395
tags question: http://stackoverflow.com/q/79053527
tags question: http://stackoverflow.com/q/78990560
tags question: http://stackoverflow.com/q/78991117
tags question: http://stackoverflow.com/q/78979629
tags question: http://stackoverflow.com/q/78966204
tags question: http://stackoverflow.com/q/78959474
tags question: http://stackoverflow.com/q/79058934
tags question: http://stackoverflow.com/q/79024915
tags question: http://stackoverflow.com/q/79056012
tags question: http://stackoverflow.com/q/78997818
tags question: http://stackoverflow.com/q/78995412
tags question: http://stackoverflow.com/q/79047851
tags question: http://stackoverflow.com/q/79054198
tags question: http://stackoverflow.com/q/78961311
tags question: http://stackoverflow.com/q/78996044
tags question: http://stackoverflow.com/q/78938496
tags question: http://stackoverflow.com/q/78965453
tags question: http://stackoverflow.com/q/79016625
tags question: http://stackoverflow.com/q/78962975
tags question: http://stackoverflow.com/q/79068052
tags question: http://stackoverflow.com/q/78912182
tags question: http://stackoverflow.com/q/79038954
tags question: http://stackoverflow.com/q/78991516
tags question: http://stackoverflow.com/q/79035604
tags question: http://stackoverflow.com/q/78933097
tags question: http://stackoverflow.com/q/79034459
tags question: http://stackoverflow.com/q/78936855
tags question: http://stackoverflow.com/q/79008222
tags question: http://stackoverflow.com/q/78946720
tags question: http://stackoverflow.com/q/78969855
tags question: http://stackoverflow.com/q/79033331
tags question: http://stackoverflow.com/q/78991187
tags question: http://stackoverflow.com/q/78936069
tags question: http://stackoverflow.com/q/79052687
tags question: http://stackoverflow.com/q/78928681
tags question: http://stackoverflow.com/q/78926909
tags question: http://stackoverflow.com/q/78944941
tags question: http://stackoverflow.com/q/79004380
tags question: http://stackoverflow.com/q/79009556
tags question: http://stackoverflow.com/q/78957279
tags question: http://stackoverflow.com/q/79059000
tags question: http://stackoverflow.com/q/78922065
tags question: http://stackoverflow.com/q/78921073
tags question: http://stackoverflow.com/q/78917311
tags question: http://stackoverflow.com/q/78925071
tags question: http://stackoverflow.com/q/79007191
tags question: http://stackoverflow.com/q/78998768
tags question: http://stackoverflow.com/q/78980674
tags question: http://stackoverflow.com/q/78945359
tags question: http://stackoverflow.com/q/79005724
tags question: http://stackoverflow.com/q/78923710
tags question: http://stackoverflow.com/q/79030620
tags question: http://stackoverflow.com/q/78954572
tags question: http://stackoverflow.com/q/78948123
tags question: http://stackoverflow.com/q/78947618
tags question: http://stackoverflow.com/q/79044235
tags question: http://stackoverflow.com/q/79038945
tags question: http://stackoverflow.com/q/79029035
tags question: http://stackoverflow.com/q/78936697
tags question: http://stackoverflow.com/q/78966857
tags question: http://stackoverflow.com/q/78914182
tags question: http://stackoverflow.com/q/79002045
tags question: http://stackoverflow.com/q/79064359
tags question: http://stackoverflow.com/q/78986745
tags question: http://stackoverflow.com/q/78952690
tags question: http://stackoverflow.com/q/78989748
tags question: http://stackoverflow.com/q/79003152
tags question: http://stackoverflow.com/q/79059550
tags question: http://stackoverflow.com/q/79021574
tags question: http://stackoverflow.com/q/78976713
tags question: http://stackoverflow.com/q/79052911
tags question: http://stackoverflow.com/q/79063526
tags question: http://stackoverflow.com/q/78979042
tags question: http://stackoverflow.com/q/78998815

http://stackoverflow.com/comment/139418771
has text: How does this work when I want the container to have the full (remaining) height of the viewport? I thought the flexbox 'flex-grow: 1' would take care of this.
type: AnswerComment
comment on: http://stackoverflow.com/a/79067779
type: Comment
score: 0

http://stackoverflow.com/comment/139195740
score: 0
type: QuestionComment
has text: Your HTML is invalid. The ` ` tag does not use a closing tag and you have a ` ` within a ` `. There may be more errors. Learn to use the W3C HTML Validator.
comment on: http://stackoverflow.com/q/78946665
type: Comment

http://stackoverflow.com/q/78913099
score: 0
answer count: 2
has comment: http://stackoverflow.com/comment/139133055
tagged with: css
has answer: http://stackoverflow.com/a/78913190
accepted answer: http://stackoverflow.com/a/78913190
has comment: http://stackoverflow.com/comment/139132885
tagged with: node.js
has title: UIncaught ReferenceError: db is not defined at HTMLButtonElement.<anonymous> (VM586 editor.js:66:9)
has answer: http://stackoverflow.com/a/78913342
possible better answer: http://stackoverflow.com/a/78913342
type: Question
tagged with: http://stackoverflow.com/tag/html
has body: I'm building a blog website using Firebase Firestore and JavaScript. I'm trying to save blog posts to Firestore, but I'm encountering an issue where db is not defined when I attempt to use it in my editor.js file. Here’s a brief overview of what I’m trying to do: User Interface: I have an input field for the blog title and a text area for the article content. There's also an option to upload an image for the banner, which gets displayed at the top of the blog post. Publishing the Post: When the user clicks the "Publish" button, I want to generate a unique document ID, gather the input data, and store it in Firestore under a new document in the "blogs" collection. Problem: Despite setting up Firebase and Firestore correctly (or so I think), when I try to use the db variable to interact with Firestore, I get a ReferenceError: db is not defined. this is my editor.js const blogTitleField = document.querySelector('.title'); const articleField = document.querySelector('.article'); // banner const bannerImage = document.querySelector('#banner-upload'); const banner = document.querySelector(".banner"); let bannerPath; const publishBtn = document.querySelector('.publish-btn'); const uploadInput = document.querySelector('#image-upload'); bannerImage.addEventListener('change', () => { uploadImage(bannerImage, "banner"); }) uploadInput.addEventListener('change', () => { uploadImage(uploadInput, "image"); }) const uploadImage = (uploadFile, uploadType) => { const [file] = uploadFile.files; if (file && file.type.includes("image")) { const formdata = new FormData(); formdata.append('image', file); fetch('/upload', { method: 'post', body: formdata }).then(res => res.json()) .then(data => { if (uploadType == "image") { addImage(data, file.name); } else { bannerPath = `${location.origin}/${data}`; banner.style.backgroundImage = `url("${bannerPath}")`; } }) } else { alert("upload Image only"); } } const addImage = (imagePath, alt) => { let curPos = articleField.selectionStart; let tex…
type: AnsweredQuestion
tagged with: javascript

http://stackoverflow.com/q/79050871
has comment: http://stackoverflow.com/comment/139411570
upvote count: 1
has body: Evenly spacing for box 2 and 3 works fine when they reach to their max-width because they reach first. But box 1 and 4 still waits to reach to their max-width. This leads to a weird looking gap spacing while resizing. Is there any workaround to start adjusting gap spacing evenly after any of the items starts to auto adjust itself? (in this case 2 and 3) So the desired result would be, if boxes are smaller than 150px, keep 10px gap. Whenever any of them reach to 150px, keep the spacing on both ends but begin to open the gap between boxes evenly. .grid-container { display: grid; height: 100%; grid-template-columns: 15% 25% 25% 15%; gap: 10px; background-color: #2196F3; padding: 10px; justify-content: center; align-content: space-evenly; } .grid-container>div { background-color: rgba(255, 255, 255, 0.8); text-align: center; padding: 20px 0; font-size: 30px; max-width: 150px; } 1 2 3 4 Edit:
tagged with: css
has title: Adjust grid gap of other items if an item reaches to its max-width
tagged with: css-grid
type: UnansweredQuestion
favorite count: 0
score: 1
type: Question
answer count: 1
downvote count: 0
has answer: http://stackoverflow.com/a/79051207

http://stackoverflow.com/comment/139324476
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/79017211
has text: Using tabindex="1" will override default tab order. With other focusable elements like form, inputs and buttons this might not play nicely, so its always best practice to keep natural flow of tab nav
type: Comment

http://stackoverflow.com/comment/139178197
type: AnswerComment
comment on: http://stackoverflow.com/a/78937598
type: Comment
has text: I'll add max height or ill change the min height to max height?
score: 0

http://stackoverflow.com/comment/139401955
type: QuestionComment
comment on: http://stackoverflow.com/q/79059752
type: Comment
has text: object-position is what you look for: https://developer.mozilla.org/en-US/docs/Web/CSS/object-position
score: 0

http://stackoverflow.com/q/78921718
has comment: http://stackoverflow.com/comment/139164474
downvote count: 1
type: UnansweredQuestion
upvote count: 0
has answer: http://stackoverflow.com/a/78941061
has comment: http://stackoverflow.com/comment/139154971
favorite count: 0
has title: Image doesn't change on src above media query 993px
type: Question
has body: I'm building a SPA and on one page, I have products with color icons below. When clicking on the icons, the image above should change to the color indicated by the button (using JS, onclick). It works on all media queries 992px and below. Once I hit 993px, it no longer changes the image. What am I missing? Snippet: Light version of site with product issue Please note: There are other formatting issues that I am aware of. I've made a lot of &quot;experimental&quot; changes in an effort to fix this issue. TIA! &lt;!DOCTYPE html&gt; &lt;html lang=&quot;EN&quot;&gt; &lt;head&gt; &lt;title&gt;All American Mailboxes of Houston&lt;/title&gt; &lt;link href=&quot;assets/AAM.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt; &lt;link rel=&quot;shortcut icon&quot; type=&quot;image/x-icon&quot; href=&quot;/assets/flagcon.ico&quot; /&gt; &lt;link rel=&quot;canonical&quot; href=&quot;https://www.allamericanmailboxesofhouston.com&quot; /&gt; &lt;meta name=&quot;robots&quot; content=&quot;index, follow&quot;&gt; &lt;meta charset=&quot;utf-16&quot;&gt; &lt;meta name=&quot;copyright&quot; content=&quot;©2021 All American Mailboxes of Houston&quot;&gt; &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt; &lt;meta http-equiv=&quot;Cache-control&quot; content=&quot;no-cache&quot;&gt; &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css&quot;&gt; &lt;link rel=&quot;stylesheet&quot; href=&quot;https://allamericanmailboxesofhouston.com/assets/AAM.css&quot; type=&quot;text/css&quot;&gt; &lt;link rel=&quot;stylesheet&quot; href=&quot;https://www.w3schools.com/w3css/4/w3.css&quot;&gt; &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js&quot;&gt;&lt;/script&gt; &lt;/head&gt; &lt;body class=&quot;mainPage&quot;&gt; &lt;header style=&quot;text-align:center;&quot; id=&quot;header&quot;&gt;&lt;img src=&quot;https://allamericanmailb…
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139148933
answer count: 1
has comment: http://stackoverflow.com/comment/139155233
tagged with: javascript
score: -1
has comment: http://stackoverflow.com/comment/139148973
tagged with: css

http://stackoverflow.com/q/78997951
has comment: http://stackoverflow.com/comment/139289124
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139289210
type: Question
tagged with: http://stackoverflow.com/tag/html
score: 0
has body: I’m trying to create a webpage where the background-image is larger than the viewport and allows for overflow in all directions when users pull the screen (for example, when using elastic scrolling). However, the default behavior is cropping the background image to the viewport size, causing white space when the user pulls the screen. What I would like to achieve : I want the elastic scrolling effect to reveal more of the background image instead of empty space. Here’s a simplified example of what I have so far: {% load static %} Title Can someone suggest a working example of this feature ? Below an example of the white spaces that appear when pulling the screen (on this screenshot I'm pulling down left). EDIT It seems that the browser does not load what's outside the viewport explaining why it creates white spaces when I scroll beyond boundaries. The only solution I found for now is to allowing scrolling (overflow: scroll;) and then to use javascript to automatically place the viewport in the middle of the image. From here I just disable scrolling with javascript (different from applying overflow: hidden;) and it display the desired effect. BUT it's buggy
has title: How to allow background image overflow beyond viewport boundaries for elastic scrolling?
tagged with: css
answer count: 0

http://stackoverflow.com/q/79014379
tagged with: metronic
downvote count: 1
tagged with: bootstrap-5
has answer: http://stackoverflow.com/a/79017534
accepted answer: http://stackoverflow.com/a/79017534
favorite count: 0
type: Question
tagged with: http://stackoverflow.com/tag/html
answer count: 1
type: AnsweredQuestion
upvote count: 0
has title: Dropdown menu duplicates Hover
score: -1
tagged with: drop-down-menu
has body: I have a problem with the hover event in my metronic dropdown menu, when I have the cursor over the menu button the hover is correct, but when entering the options the menu turns white, I suppose it may be caused by them being launched two button activations at the same time but when you delete one or the other it still happens or the activation is deactivated when entering the menu options. The cursor is over the menu button The cursor is over some option in the drop-down menu This is the code: <a href="<?= site_url('calendar') ?>" class="menu-link px-3 py-2"> Local Outlook Google I have this other drop-down menu that was already done and works correctly: the first hover is maintained when entering the options. This is the code: <?= lang('General.light') ?> <?= lang('General.dark') ?> thank you all very much!
tagged with: css

http://stackoverflow.com/comment/139361083
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/79028709
has text: *"...unrelated links inside the container..."* - @Fitzkrieg Really? The `` covers the entire container edge to edge. What you really want is a parent element with an `[href]` that has children elements that have their own `[href]` with unique urls. That's bad UX and essentially invalid HTML for a good reason. If the user hovers over any `` (or ` `) with a `[href]`, the behavior while hovering (`cursor: pointer`) indicates that clicking it should take the user elsewhere. Obscuring that ability makes accidental clicks send the user somewhere they most likely never wanted to go to.

http://stackoverflow.com/comment/139341314
type: AnswerComment
comment on: http://stackoverflow.com/a/78992319
has text: Thanks for your answer! Using a shadow image works for me instead of using box-shadow.
score: 1
type: Comment

http://stackoverflow.com/comment/139280332
type: Comment
comment on: http://stackoverflow.com/a/78993261
score: 0
type: AnswerComment
has text: i mean you could put the trigger function where you need it

http://stackoverflow.com/q/78953159
has body: I'm using Nice Select, https://github.com/hernansartorio/jquery-nice-select. How do I keep the background color of the selected option when I hover to another option? Because when I hover to another option, the background of the selected option disappears. Here's my code: jQuery(document).ready(function() { jQuery('select').niceSelect(); }); .nice-select .option:hover, .nice-select .option.selected { color: #000 !important; background-color: #999 !important; } The quick brown fox jumps over a lazy dog Quizzical twins proved my hijack-bug fix Cozy sphinx waves quart jug of bad milk Fix problem quickly with galvanized jets Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp... But it doesn't work.
has comment: http://stackoverflow.com/comment/139206442
has comment: http://stackoverflow.com/comment/139206453
upvote count: 1
tagged with: jquery
score: 1
type: Question
has comment: http://stackoverflow.com/comment/139206199
answer count: 1
tagged with: css
has title: Jquery Nice Select: Keep Background Color When Hover to Another Option
has answer: http://stackoverflow.com/a/78953349
type: AnsweredQuestion
has comment: http://stackoverflow.com/comment/139206181
favorite count: 0
has comment: http://stackoverflow.com/comment/139206517
tagged with: http://stackoverflow.com/tag/html
downvote count: 0
accepted answer: http://stackoverflow.com/a/78953349

http://stackoverflow.com/a/79067325
answers question: http://stackoverflow.com/q/79067314
has comment: http://stackoverflow.com/comment/139423141
score: 1
has body: For starters, you seem to be confusing the class active and active-tab. Which one is it? Start by changing the initial active-tab class to simply active: <button class="tablinks active" id="logo-1" ... Additionally, these operations are making things unnecessarily difficult: tablinks[i].className = tablinks[i].className.replace(" active", ""); //... evt.currentTarget.className += " active"; Use classList instead: tablinks[i].classList.remove("active"); //... evt.currentTarget.classList.add("active"); Putting these suggestions together: function openCity(evt, cityName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].classList.remove("active"); } document.getElementById(cityName).style.display = "block"; evt.currentTarget.classList.add("active"); } .tab { overflow: hidden; display:flex; flex-basis: 0; } .tab button { background-color: #E5ECF3; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; flex-basis:100% } .active-tab{ background-color: #fff !important; } .tab button:hover { background-color: #fff; } .tab button.active { background-color: #fff; } .logo-button{ display: inline-flex; align-items: center; justify-content: center; } .lbtn1, .lbtn2, .lbtn3{ width: 100px; } /* Tab Content Style */ .tabcontent { display: none; padding: 6px 12px; background: #fff; } .tabcontent-active{ display: block; } .tab-child-elements{ display: inline-flex; width: 100%; height: 300px; flex-flow: column wrap; align-items: center; justify-content: center; p{ text-align: center; width:50% } } /* Button Styles */ #logo-1{ border-right: solid 3px #fff; } #logo-2{ border: solid 0 3px 0 3px #fff; } #logo-3{ border-left: solid 3px #fff; } .btn-1{ background: #5AB540; border: 2px solid #5AB540; } .btn-1:hover{ color:#…
downvote count: 0
type: Answer
upvote count: 1

http://stackoverflow.com/comment/139386768
score: 0
has text: If you temporarily eliminate the hover's, active's and media queries, what happens?
type: QuestionComment
comment on: http://stackoverflow.com/q/79051072
type: Comment

http://stackoverflow.com/comment/139174556
type: AnswerComment
has text: Nice hack, not sure it will suit the OP's requirements but I like it.
comment on: http://stackoverflow.com/a/78935743
type: Comment
score: 0

http://stackoverflow.com/q/79008485
has body: I have a project I am working on and my css styling doesn't appear when i go live. I have linked it to my html however the styling still doessn't appear on the browser when I am live I have inspected the webpage itself and the css is there however I can't seem to figure out the problem Mind Connect *{ margin: 0px; padding: 0px; box-sizing: border-box; font-family: poppins; } a{ text-decoration: none; } ul{ list-style: none; } #hero{ background-color: #f5f7fb; display: flex; flex-direction: column; min-height: 600px; } .navigation{ display: flex; justify-content: space-between; align-items: center; max-width: 1200px; width: 90%; margin: 0px auto; padding: 30px 0px;
has comment: http://stackoverflow.com/comment/139308398
has title: trouble linking css to html
type: UnansweredQuestion
linked to: http://stackoverflow.com/q/9518646
has answer: http://stackoverflow.com/a/79008579
type: Question
has comment: http://stackoverflow.com/comment/139308737
tagged with: http://stackoverflow.com/tag/html
answer count: 1
has comment: http://stackoverflow.com/comment/139308446
score: 0
tagged with: css

http://stackoverflow.com/comment/139415979
comment on: http://stackoverflow.com/q/79067314
has text: I have a hunch that it's related to your `className.replace()`. I'm seeing both `active` and `active-tab` as class names. I would recommend using `classList.add()`, `classList.remove()`, or `classList.toggle()` which make working with css classes much easier.
type: QuestionComment
score: 2
type: Comment

http://stackoverflow.com/comment/139163590
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78929444
has text: Thanks, @David for your suggestion to use elements with flexbox instead of a . I realize now that it's a much more flexible and responsive approach for what I need. I appreciate you thinking outside the box and sharing this idea!

http://stackoverflow.com/comment/139207086
type: QuestionComment
has text: @Danny'365CSI'Engelman Agree. As you say, this is about buttons with SVG, not text in a div.
type: Comment
comment on: http://stackoverflow.com/q/78946570
score: 0

http://stackoverflow.com/comment/139134474
type: QuestionComment
comment on: http://stackoverflow.com/q/78913738
type: Comment
has text: *"anything that is not ul in any number including nothing at all"* — `li > ul, li :not(ul) ul`…?
score: 0

http://stackoverflow.com/q/78908954
tagged with: django
has comment: http://stackoverflow.com/comment/139125383
answer count: 2
tagged with: css
has title: how do i set django up? and fix this error?
score: -2
upvote count: 0
type: UnansweredQuestion
favorite count: 0
type: Question
has answer: http://stackoverflow.com/a/78908965
tagged with: http://stackoverflow.com/tag/html
downvote count: 2
has answer: http://stackoverflow.com/a/78911196
has body: 127.0.0.1/:1 Refused to execute script from 'http://127.0.0.1:8000/scripts/scripts.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled. error i got... how do i even fix this? i have generated a template from django and they look messy so i want to organise files like .css files and pages files... i tried to add my .css file and routed the html to use this .css. later i discovered that i gotta add {% load static %} to load static files i have added this too and still not working.... this s the image guys in the image i made a styles folder and wanted to use that but not the site.css file, i think i need to edit some things in the settings.py can you guys instruct me?
tagged with: django-templates
tagged with: python

http://stackoverflow.com/comment/139140494
comment on: http://stackoverflow.com/q/78913129
type: Comment
score: 0
type: QuestionComment
has text: It's _viable_, but if you look in your browser's console you will see that quite a lot of xhr requests need to be made to set up the request that would ultimately return the json file that contains the actual image urls. You could work through it if you have the time. Hit F12 in your browser, open the network panel , clear it and navigate to the page. You will see the requests you will need to emulate to get the data.

http://stackoverflow.com/comment/139166946
type: QuestionComment
comment on: http://stackoverflow.com/q/78931488
type: Comment
score: 0
has text: Ah. I was instructed to replace it with flexbox. I'll look at CSS grid instead. Thanks for the input.

angular-material
tags question: http://stackoverflow.com/q/78940243
tags question: http://stackoverflow.com/q/79007402
tags question: http://stackoverflow.com/q/78994423
type: Tag
tags question: http://stackoverflow.com/q/78979629
tags question: http://stackoverflow.com/q/78985003
tag name: angular-material
tags question: http://stackoverflow.com/q/79146996
tags question: http://stackoverflow.com/q/79195746
tags question: http://stackoverflow.com/q/79132221
tags question: http://stackoverflow.com/q/79205530
tags question: http://stackoverflow.com/q/79090950
tags question: http://stackoverflow.com/q/79095698
tags question: http://stackoverflow.com/q/79157831
tags question: http://stackoverflow.com/q/79203057
tags question: http://stackoverflow.com/q/79141738
tags question: http://stackoverflow.com/q/79124873
tags question: http://stackoverflow.com/q/79076675
tags question: http://stackoverflow.com/q/79339305
tags question: http://stackoverflow.com/q/79353388
tags question: http://stackoverflow.com/q/79378339
tags question: http://stackoverflow.com/q/79411181
tags question: http://stackoverflow.com/q/79386201
tags question: http://stackoverflow.com/q/79404036
tags question: http://stackoverflow.com/q/79271570
tags question: http://stackoverflow.com/q/79338412
tags question: http://stackoverflow.com/q/79412026
tags question: http://stackoverflow.com/q/79410996
tags question: http://stackoverflow.com/q/79382569
tags question: http://stackoverflow.com/q/79315126
tags question: http://stackoverflow.com/q/79445405
tags question: http://stackoverflow.com/q/79509405
tags question: http://stackoverflow.com/q/79535776
tags question: http://stackoverflow.com/q/79490678
tags question: http://stackoverflow.com/q/79480332
tags question: http://stackoverflow.com/q/79489569
tags question: http://stackoverflow.com/q/79488521
tags question: http://stackoverflow.com/q/79517633
tags question: http://stackoverflow.com/q/79522000

http://stackoverflow.com/comment/139270375
type: Comment
score: 0
type: QuestionComment
has text: Hi, please post the entire code. You mentioned two div boxes but on your code there is only one. Also you use clases on your css that are not used on the html
comment on: http://stackoverflow.com/q/78987841

http://stackoverflow.com/comment/139376275
type: QuestionComment
type: Comment
has text: You know the billboards in front of Broadway theaters that show what's playing, sometimes in a scrolling line like ticker tape? Those are marquees.
score: 3
comment on: http://stackoverflow.com/q/79045395

http://stackoverflow.com/comment/139130890
has text: Also, you have issues with your rotation, for some panes/faces, If you use i.e: `backface-visibility: hidden;` you'll understand which are the ones in conflict. PS- my suggestion anyways would be to first use `translate` and then `rotate`. Also, `.backward` is better called just `.back`
type: QuestionComment
type: Comment
comment on: http://stackoverflow.com/q/78911856
score: 0

http://stackoverflow.com/comment/139169648
has text: Hello ! It worked on my friend Iphone 13 but not on my Iphone 14 and it is on Safari
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78932696

http://stackoverflow.com/a/78925469
answers question: http://stackoverflow.com/q/78925434
downvote count: 0
type: Answer
upvote count: 1
has comment: http://stackoverflow.com/comment/139156037
score: 1
has body: My proposed solution is to use Flexbox to align the elements at the same level and center the text vertically. We can make a few adjustments to your CSS. For the div container: changed display to flex to use flexbox layout, for the counter changed display to flex. Added align-items: center and justify-content: center to center the text both vertically and horizontally. for the buttons removed display: inline-block as it's not needed in a flex container. HTML 100 CSS .ContainerDiv { display: flex; align-items: center; justify-content: center; } .PlusButton, .MinusButton { background-color: blue; width: 100px; height: 100px; border: none; } .Counter { display: flex; align-items: center; justify-content: center; background-color: white; width: 200px; height: 100px; color: #282c34; font-size: 24px; margin: 0 10px; }

frontend
tags question: http://stackoverflow.com/q/78929676
tags question: http://stackoverflow.com/q/79050057
tags question: http://stackoverflow.com/q/78966903
tags question: http://stackoverflow.com/q/78912357
tags question: http://stackoverflow.com/q/78993272
tags question: http://stackoverflow.com/q/78912182
tags question: http://stackoverflow.com/q/79028695
tag name: frontend
type: Tag
tags question: http://stackoverflow.com/q/78909194
tags question: http://stackoverflow.com/q/78913859
tags question: http://stackoverflow.com/q/78990043
tags question: http://stackoverflow.com/q/79021145
tags question: http://stackoverflow.com/q/78917706
tags question: http://stackoverflow.com/q/78941674
tags question: http://stackoverflow.com/q/79172763
tags question: http://stackoverflow.com/q/79121721
tags question: http://stackoverflow.com/q/79157684
tags question: http://stackoverflow.com/q/79215487
tags question: http://stackoverflow.com/q/79119746
tags question: http://stackoverflow.com/q/79078975
tags question: http://stackoverflow.com/q/79196823
tags question: http://stackoverflow.com/q/79201094
tags question: http://stackoverflow.com/q/79087333
tags question: http://stackoverflow.com/q/79195479
tags question: http://stackoverflow.com/q/79088720
tags question: http://stackoverflow.com/q/79129133
tags question: http://stackoverflow.com/q/79084620
tags question: http://stackoverflow.com/q/79334579
tags question: http://stackoverflow.com/q/79359549
tags question: http://stackoverflow.com/q/79252618
tags question: http://stackoverflow.com/q/79327385
tags question: http://stackoverflow.com/q/79275879
tags question: http://stackoverflow.com/q/79374286
tags question: http://stackoverflow.com/q/79269227
tags question: http://stackoverflow.com/q/79390339
tags question: http://stackoverflow.com/q/79291037
tags question: http://stackoverflow.com/q/79303715
tags question: http://stackoverflow.com/q/79420387
tags question: http://stackoverflow.com/q/79445243
tags question: http://stackoverflow.com/q/79469681
tags question: http://stackoverflow.com/q/79527484
tags question: http://stackoverflow.com/q/79499961
tags question: http://stackoverflow.com/q/79519338
tags question: http://stackoverflow.com/q/79460167
tags question: http://stackoverflow.com/q/79436596
tags question: http://stackoverflow.com/q/79481639

http://stackoverflow.com/comment/139150492
type: QuestionComment
has text: What does _content/App.Shared/galaxy.jpg look like?
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78920988

http://stackoverflow.com/q/79057467
has comment: http://stackoverflow.com/comment/139397790
has body: I'm building a to-do list website and for some reason all the tasks created have too much space around the checkbox. screenshot of the tasks added. I tried styling the checkbox to have 0 padding, 0 margin, changing the justify-content and align-items of the task but nothing seems to work. Here's the html, relevant part of css and javascript: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;task-ify - by livia&lt;/title&gt; &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt; &lt;/head&gt; &lt;body&gt; &lt;header&gt; &lt;h2 id=&quot;website-title&quot;&gt;task-ify&lt;/h2&gt; &lt;/header&gt; &lt;div class=&quot;screen&quot;&gt; &lt;form&gt; &lt;p id=&quot;newtask&quot;&gt;new task&lt;/p&gt; &lt;input type=&quot;text&quot; id=&quot;task&quot; maxlength=&quot;27&quot;&gt; &lt;button type=&quot;button&quot; id=&quot;savebttn&quot; onclick=&quot;saveTask()&quot;&gt;save&lt;/button&gt; &lt;/form&gt; &lt;div class=&quot;todofield&quot;&gt; &lt;nav&gt; &lt;p&gt;filters:&lt;/p&gt; &lt;button type=&quot;button&quot; id=&quot;filter&quot; onclick=&quot;viewAll()&quot;&gt;ALL&lt;/button&gt; &lt;button type=&quot;button&quot; id=&quot;filter&quot; onclick=&quot;viewToDo()&quot;&gt;TO-DO&lt;/button&gt; &lt;button type=&quot;button&quot; id=&quot;filter&quot; onclick=&quot;viewDone()&quot;&gt;DONE&lt;/button&gt; &lt;/nav&gt; &lt;div class=&quot;taskgallery&quot; id=&quot;taskgallery&quot;&gt; &lt;div class=&quot;taskview&quot; id=&quot;taskview&quot;&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;footer&gt;&lt;p&gt;made by livia&amp;copy;&lt;/p&gt;&lt;/footer&gt; &lt;script src=&quot;script.js&quot;&gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt; .taskgallery{ box-sizing: border-box; border-radius: 8px; border: 0.1em solid #49311d; width: 90%; height: 80%; display: flex; flex-direction: column; justify-content: center; align-items: center; margin-left: 3em; padding: 20px; } .taskview{ display: flex; justify-content: flex-start; align-items: cen…
has answer: http://stackoverflow.com/a/79057513
accepted answer: http://stackoverflow.com/a/79057513
favorite count: 0
upvote count: 1
downvote count: 2
tagged with: http://stackoverflow.com/tag/html
type: Question
has comment: http://stackoverflow.com/comment/139397668
answer count: 1
has comment: http://stackoverflow.com/comment/139397698
type: AnsweredQuestion
tagged with: input
tagged with: javascript
score: -1
tagged with: checkbox
has title: Too much clickable space around checkbox
tagged with: css

http://stackoverflow.com/comment/139185720
score: 0
has text: I made this change but sadly it did not work. The problem persists on mobile.
type: Comment
type: AnswerComment
comment on: http://stackoverflow.com/a/78941750

http://stackoverflow.com/comment/139400973
comment on: http://stackoverflow.com/q/79059314
type: Comment
type: QuestionComment
has text: What are you asking? How to structure that input in HTML? How to implement those dynamic features in JavaScript? Hot to add the icons in CSS? Please [edit] your question to focus it on one clearly identified issue.
score: 1

http://stackoverflow.com/q/78912066
type: Question
has body: I can't unwrap menu in mobile version of my site. I don't know what is wrong in my code. I added the code for the JavaScript file and I wanted to unwrap menu, when a user click on the menu button. It seemed to me that I styled it proper for my CSS file. const navbar = document.querySelector("nav"); const openMenu = document.getElementById("menu-button"); const closeMenu = document.getElementById("menu-close"); openMenu.addEventListener("click", function() { navbar.classList.add("open"); }) closeMenu.addEventListener("click", function() { navbar.classList.remove("open"); }) .attribution { font-size: 11px; text-align: center; } .attribution a { color: hsl(228, 45%, 44%); } .body { font-size: 15px; font-family: "Inter", sans-serif; min-height: 100vh; margin: 0; box-sizing: border-box; } ul { list-style-type: none; display: flex; width: 100%; padding-right: 40px; } #menu-close { display: none; border: none; background: none; } header { display: flex; justify-content: space-between; padding-left: 60px; box-sizing: border-box; width: 100% } nav { margin-left: auto; } a { margin-right: 20px; text-decoration: none; color: rgb(73, 72, 72) } .container { display: grid; grid-template-rows: auto auto 1fr; grid-template-columns: 2fr 1fr; gap: 20px; padding: 60px; } .news { background-color: hsl(240, 100%, 5%); grid-row: 1 / 3; grid-column: 2; padding: 15px } .news h2 { color: hsl(36, 100%, 99%); } .news p { color: hsl(36, 100%, 99%); text-align: justify } input[type="submit"] { background: hsl(5, 85%, 63%); border: 0.75px; text-transform: uppercase; font-weight: 700; padding: 14px; width: 50% } a h2:hover { color: hsl(35, 77%, 62%) } li a:hover { color: hsl(5, 85%, 63%) } input[type="submit"]:hover { background-color: black; color: white; cursor: pointer } .main-image-desktop { margin: 0; width: 100%; height: auto } .additional { display: flex; grid-row: 3; grid-column: 1 / 3; flex: 1; gap: 20px; margin: 0 } .news h1 { color: hsl(35, 77%, 62%); font-weight: 700; font-size: 2rem;…
tagged with: media-queries
answer count: 1
score: 0
tagged with: javascript
has title: lack of the drop-down menu after click on the button
tagged with: css
has answer: http://stackoverflow.com/a/78912348
has comment: http://stackoverflow.com/comment/139131674
type: UnansweredQuestion
tagged with: http://stackoverflow.com/tag/html

http://stackoverflow.com/a/79008579
answers question: http://stackoverflow.com/q/79008485
has body: Your href attribute is using a path relative to your HTML file. Is the css folder located in a folder where you serve public assets, typically called assets or public? If so, to correctly reference the file the href must start with a slash, so /css/styles.css. If that is not the problem, then it may be because the css folder is not exposed to the client, so you would need to put it in a static assets folder that is exposed to the client. (I would have just written a comment, but I don't have enough reputation yet.)
score: 1
downvote count: 0
type: Answer
upvote count: 1

http://stackoverflow.com/q/79013255
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139324895
has comment: http://stackoverflow.com/comment/139318093
answer count: 1
has comment: http://stackoverflow.com/comment/139317942
type: AnsweredQuestion
has comment: http://stackoverflow.com/comment/139317745
tagged with: javascript
has comment: http://stackoverflow.com/comment/139317308
has comment: http://stackoverflow.com/comment/139317338
score: -1
has comment: http://stackoverflow.com/comment/139317801
has comment: http://stackoverflow.com/comment/139317889
has comment: http://stackoverflow.com/comment/139317924
has comment: http://stackoverflow.com/comment/139324783
accepted answer: http://stackoverflow.com/a/79014575
tagged with: css
has title: Option to have two month on air-datepicker library with pure HTML, CSS, JS
has comment: http://stackoverflow.com/comment/139317280
has comment: http://stackoverflow.com/comment/139317890
has comment: http://stackoverflow.com/comment/139317705
downvote count: 1
has comment: http://stackoverflow.com/comment/139317759
upvote count: 0
favorite count: 0
type: Question
has body: I'm trying to setup the air-datepicker for two month view on desktop and one month view on mobile but it's not succeeded, any recommendation how to achieve that? // Initialize the Datepicker only once if (!pickerInitialized) { picker = new AirDatepicker('#datepicker-input', { inline: true, // Display inline range: true, // Enable range selection multipleDatesSeparator: ' - ', // Separator for date range showOtherMonths: true, // Show adjacent month days numberOfMonths: 2, // Show two months at the same time locale: englishLocale, // Set to English locale explicitly minDate: new Date(), // Disable past dates, onSelect({date, formattedDate}) { // Get the start and end date of the range selectedStartDate = date[0]; selectedEndDate = date[1];
has answer: http://stackoverflow.com/a/79014575

http://stackoverflow.com/q/78937749
has comment: http://stackoverflow.com/comment/139178977
has body: I'm working to create this: It has to support labels along a slider that are non-linear e.g. 400K, 500K, 750K, 1M but be visually evenly spaced apart. I got close with this but I can't get the labels in the middle to space as intended. The middle label are correctly positioned when there are 3 options, but middle labels are misaligned with the dots when there are 4 or more steps.
tagged with: slider
favorite count: 0
type: Question
answer count: 1
tagged with: http://stackoverflow.com/tag/html
downvote count: 1
has comment: http://stackoverflow.com/comment/139178459
score: 0
has comment: http://stackoverflow.com/comment/139179238
has answer: http://stackoverflow.com/a/78944928
has comment: http://stackoverflow.com/comment/139178739
tagged with: css
has title: Accurately positioning labels under steps in an HTML range slider
type: UnansweredQuestion
upvote count: 1

http://stackoverflow.com/a/79040866
score: 0
answers question: http://stackoverflow.com/q/79040651
has body: Workaround: If you replace the .sticky-top class with .fixed-top it would fix the navbar to the top consistently. However in that case you would need to add some padding to the body in order to push the content below the navbar. body { padding-top: 56px; }
type: Answer

http://stackoverflow.com/comment/139234232
has text: @tacoshy Thanks, I have now edited the steps I changed there, please check now.
type: AnswerComment
comment on: http://stackoverflow.com/a/78968040
type: Comment
score: 0

http://stackoverflow.com/comment/139280375
score: 1
type: Comment
has text: Please clarify the problem. What makes you think the scrollbar should be at 100vh, when the parent container is 150vh high?
type: QuestionComment
comment on: http://stackoverflow.com/q/78993016

http://stackoverflow.com/q/78957177
has body: enter image description here I need a layout where there are 3 columns with each containing a header section and content section. The headers of all 3 column has to be equal based on dynamic content length. The content section height can be based on its content. Note: on smaller screen / if one column wraps only the first 2 column header should have the equal height. Since last header is below it can have content height to avoid white space. I have tried with flex, grid and I dont want to use JS as there is jerk on applying the css. Below is the css I have tried with &lt;style&gt; .container { display: flex; flex-wrap: wrap; justify-content: space-between; } .column { flex: 1 0 30.33%; border: 1px solid #ccc; padding: 10px; display: flex; flex-direction: column; } .header { font-weight: bold; text-align: center; display: flex; flex-direction: column; align-items: stretch; min-height: 100px; /* Adjust this value based on your needs */ border:1px solid red; } .details { text-align: center; flex: 1 0 auto; border:1px solid red; } .header &gt; p { flex: 0 0 auto; } &lt;/style&gt;
tagged with: css
answer count: 0
tagged with: flexbox
type: UnansweredQuestion
has title: Column headers with equal height based on dynamic content
type: Question
duplicate of: http://stackoverflow.com/q/56711501
has comment: http://stackoverflow.com/comment/139213777
linked to: http://stackoverflow.com/q/56711501
score: 0

http://stackoverflow.com/q/78908058
upvote count: 0
has comment: http://stackoverflow.com/comment/139123861
has title: Issue with flowbite-svelte
score: -1
tagged with: flowbite-svelte
tagged with: css
type: UnansweredQuestion
has body: I'm relatively new to using flowbite and i just started using flowbite-svelte but for some reason the template isn't working, the hamburger menu works fine but the design isnt reflecting, any ways to fix this? I deleted everything reinstalled the libary but no changes.
has answer: http://stackoverflow.com/a/78956647
favorite count: 0
tagged with: flowbite
type: Question
downvote count: 1
tagged with: tailwind-css
answer count: 1

http://stackoverflow.com/q/79041478
has answer: http://stackoverflow.com/a/79076430
score: 4
tagged with: http://stackoverflow.com/tag/html
downvote count: 0
has comment: http://stackoverflow.com/comment/139368976
has title: How to write multipe math equations inline on a single line in Sphinx
has answer: http://stackoverflow.com/a/79041940
has comment: http://stackoverflow.com/comment/139368892
type: Question
tagged with: css
tagged with: restructuredtext
accepted answer: http://stackoverflow.com/a/79076430
type: AnsweredQuestion
tagged with: python-sphinx
has body: I want to write a simple line as below in my Sphinx reST document: To write the line using :math: flag: We know that :math:`A \to B \vdash A \to \forall x B`, provided that :math:`x` is not free in :math:`A`. The appearance shown in browser after make html: How can make it a one line without line break? I want to tune the line with restructuredtext grammar to get the desired appearnce ,instead of tune the html or css code. I have installed Furo as my default theme, try to write logic formula : math formula =================== p1: We know that :math:`A \to B \vdash A \to \forall x B`, provided that :math:`x` is not free in :math:`A`. p2: .. raw:: html MathJax example We know that `A \to B \vdash A \to \forall x B`, provided that `x` is not free in `A`. The appearance: If i delete the p2 part,all multipe math equations inline can't be on a single line shown in my browser: How can fix it then?
favorite count: 0
has comment: http://stackoverflow.com/comment/139369101
possible better answer: http://stackoverflow.com/a/79041940
has comment: http://stackoverflow.com/comment/139369551
answer count: 2
has comment: http://stackoverflow.com/comment/139369540
upvote count: 4

http://stackoverflow.com/q/78939673
has comment: http://stackoverflow.com/comment/139182323
has comment: http://stackoverflow.com/comment/139182141
has title: vertical scrollbar showing up even when total height is 100%
tagged with: flexbox
has answer: http://stackoverflow.com/a/78939727
has comment: http://stackoverflow.com/comment/139182238
type: UnansweredQuestion
tagged with: http://stackoverflow.com/tag/html
type: Question
answer count: 1
has body: I have simple HTML/CSS code, that have 3 divs , Header, content and footer.Header and footer are of fixed height(170px) and content is expected to take remaining vertical space. all threes are placed vertically with the help of diplay:flex and content block is forced to take remaining space with flex-grow:1. The problem is appearance of vertical scrollbar. I am not able to understand why it is happening as according to my understanding, total height will always be [170px + (atmost remaining) + 170px] , that will always be 100%. Code: * { box-sizing: border-box; margin: 0; } html, body { height: 100%; } .main { display: flex; flex-direction: column; height: 100vh; } .header { background-color: lightyellow; height: 170px; } .content { background-color: lightpink; flex-grow: 1; } .footer { background-color: lightgreen; height: 170px; } this is header Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis, This is footer Someone help me understand why it is happening,also the correct way to achieve the required result. I have tried adding overflow:hidden to body , but i don't think that is best way to do it, as it is clipping the overflow.
score: 0
tagged with: overflow
tagged with: css

http://stackoverflow.com/q/78954897
has comment: http://stackoverflow.com/comment/139210054
tagged with: flexbox
type: UnansweredQuestion
type: Question
has title: Centering a loading spinner
has answer: http://stackoverflow.com/a/78955191
has answer: http://stackoverflow.com/a/78956336
has comment: http://stackoverflow.com/comment/139209631
score: 0
answer count: 2
has body: I want to ensure my loading spinner is always centered when used, in a table, a button, ... .th-loader { .progress { top: calc(50% - (var(--loading-indicator-border)/2)); left: calc(50% - (var(--loading-indicator-border)/2)); width: var(--loading-indicator-border); aspect-ratio: 1; background: #006edb; border-radius: 50%; transform: rotate(0deg) translateY(calc((var(--loading-indicator-size) * -0.5) + (var(--loading-indicator-border) * 0.5))); animation: spin 1s infinite linear; &.mini{ --loading-indicator-size: 24px; --loading-indicator-border: 4px; } } @keyframes spin { to{transform: rotate(360deg) translateY(calc((var(--loading-indicator-size) * -0.5) + (var(--loading-indicator-border) * 0.5)))} } .progress:after { position: absolute; content: ''; width: var(--loading-indicator-size); aspect-ratio: 1; top: 0%; left: 50%; translate: -50% 0; background: conic-gradient(transparent 10%, #006edb); border-radius: 50%; mask: radial-gradient(transparent calc(((var(--loading-indicator-size) * 0.5) - var(--loading-indicator-border)) - 1px), #006edb calc((var(--loading-indicator-size) * 0.5) - var(--loading-indicator-border))); } } Click Me but the spinner doesn't stay in the middle relative to other siblings. Any idea if it's possible to ensure that an element is always centered?
has comment: http://stackoverflow.com/comment/139209525
tagged with: css

http://stackoverflow.com/comment/139126415
score: 1
type: Comment
has text: @Dai there is ☐ ☑ ☒. And in this case, it is for a menu, so the unchecked state would me no mark at all.
comment on: http://stackoverflow.com/q/78909592
type: QuestionComment

http://stackoverflow.com/q/79024264
has answer: http://stackoverflow.com/a/79025283
score: 0
type: Question
has body: Here is an example of such mechanics: enter image description here I tried to implement such mechanics, but there is a problem with the fact that when you hover over the link "Hello" a window appears with the links "Bye" and "See you soon" but when we hover over the links that are in the yellow square, they close and work intermittently, it is difficult to use. I can't find the error: let linksTimeout; function showLinks(event) { let linksContainer = document.getElementById("linksContainer"); linksContainer.style.display = "block"; linksContainer.addEventListener("mouseover", () => clearTimeout(linksTimeout)); linksContainer.addEventListener("mouseout", () => { linksTimeout = setTimeout(() => { linksContainer.style.display = "none"; }, 0); }); } function hideLinks(event) { let linksContainer = document.getElementById("linksContainer"); linksTimeout = setTimeout(() => { linksContainer.style.display = "none"; }, 0); } .container p { background: green; padding: 16px; text-align: center; } .links-container { display: none; position: absolute; width: 100%; background-color: #fff; border: 1px solid #000; } .links-container a { display: flex; background: yellow; } Hover Effect hello Bye See you soon
tagged with: window
tagged with: http://stackoverflow.com/tag/html
has title: How do I make a link when hovering over which a content window appears with text or links as in the site header menu?
tagged with: javascript
answer count: 2
tagged with: css
type: UnansweredQuestion
has answer: http://stackoverflow.com/a/79024283

http://stackoverflow.com/tag/html
tags question: http://stackoverflow.com/q/78970177
tags question: http://stackoverflow.com/q/78978054
tags question: http://stackoverflow.com/q/79028709
tags question: http://stackoverflow.com/q/78948544
tags question: http://stackoverflow.com/q/78990433
tags question: http://stackoverflow.com/q/79014379
tags question: http://stackoverflow.com/q/78925225
tags question: http://stackoverflow.com/q/78953159
tags question: http://stackoverflow.com/q/79044837
tags question: http://stackoverflow.com/q/78991837
tags question: http://stackoverflow.com/q/78921098
tags question: http://stackoverflow.com/q/79004164
tags question: http://stackoverflow.com/q/78941057
tags question: http://stackoverflow.com/q/78941096
tags question: http://stackoverflow.com/q/78988200
tags question: http://stackoverflow.com/q/79068036
tags question: http://stackoverflow.com/q/78910644
tags question: http://stackoverflow.com/q/78976005
tags question: http://stackoverflow.com/q/79009802
tags question: http://stackoverflow.com/q/79064419
tags question: http://stackoverflow.com/q/79051473
tags question: http://stackoverflow.com/q/79012154
tags question: http://stackoverflow.com/q/78973373
tags question: http://stackoverflow.com/q/79036624
tags question: http://stackoverflow.com/q/78912045
tags question: http://stackoverflow.com/q/79024254
tags question: http://stackoverflow.com/q/78968754
tags question: http://stackoverflow.com/q/78944147
tags question: http://stackoverflow.com/q/78929676
tags question: http://stackoverflow.com/q/78929926
tags question: http://stackoverflow.com/q/78906308
tags question: http://stackoverflow.com/q/78915026
tags question: http://stackoverflow.com/q/78950013
tags question: http://stackoverflow.com/q/79013054
tags question: http://stackoverflow.com/q/78914768
tags question: http://stackoverflow.com/q/79062969
tags question: http://stackoverflow.com/q/78993739
tags question: http://stackoverflow.com/q/78936071
tags question: http://stackoverflow.com/q/79047361
tags question: http://stackoverflow.com/q/79060918
tags question: http://stackoverflow.com/q/79045034
tags question: http://stackoverflow.com/q/78913676
tags question: http://stackoverflow.com/q/78985736
tags question: http://stackoverflow.com/q/78994346
tags question: http://stackoverflow.com/q/78971420
tags question: http://stackoverflow.com/q/79048616
tags question: http://stackoverflow.com/q/79054875
tags question: http://stackoverflow.com/q/79024535
tags question: http://stackoverflow.com/q/79025462
tags question: http://stackoverflow.com/q/78982161
tags question: http://stackoverflow.com/q/78957679
tags question: http://stackoverflow.com/q/79039316
tags question: http://stackoverflow.com/q/79007601
tags question: http://stackoverflow.com/q/78984431
tags question: http://stackoverflow.com/q/78954173
tags question: http://stackoverflow.com/q/78993438
tags question: http://stackoverflow.com/q/79001690
tags question: http://stackoverflow.com/q/79009313
tags question: http://stackoverflow.com/q/78925311
tags question: http://stackoverflow.com/q/78973195
tags question: http://stackoverflow.com/q/78950959
tags question: http://stackoverflow.com/q/78963317
tags question: http://stackoverflow.com/q/78936245
tags question: http://stackoverflow.com/q/79063788
tags question: http://stackoverflow.com/q/78910515
tags question: http://stackoverflow.com/q/78920407
tags question: http://stackoverflow.com/q/79003079
tags question: http://stackoverflow.com/q/78911856
tags question: http://stackoverflow.com/q/79008374
tags question: http://stackoverflow.com/q/78939673
tags question: http://stackoverflow.com/q/78999352
tags question: http://stackoverflow.com/q/78970641
tags question: http://stackoverflow.com/q/78919468
tags question: http://stackoverflow.com/q/78938572
tags question: http://stackoverflow.com/q/79040192
tags question: http://stackoverflow.com/q/79053527
tags question: http://stackoverflow.com/q/78990560
tags question: http://stackoverflow.com/q/79057913
tags question: http://stackoverflow.com/q/78911259
tags question: http://stackoverflow.com/q/78966204

http://stackoverflow.com/q/79006570
tagged with: css
type: UnansweredQuestion
favorite count: 0
has title: How to Mask a DIV with a SVG path
type: Question
has body: I try to create a HTML/CSS/JS funnel graph, with a simple front-end structure, in order to do so, I place funnel segments as a flex row: document.addEventListener( 'DOMContentLoaded', function() { let funnels = document.getElementsByClassName( 'funnel' ); for( let i = 0; i < funnels.length; i++ ) { let segments = funnels[i].children[1].children; for( let j = 0; j < segments.length; j++ ) { const from = parseFloat( segments[j].getAttribute( 'data-from' ) ); const to = parseFloat( segments[j].getAttribute( 'data-to' ) ); const difference = ( from - to ) / 2; const d = `M 0 ${50 - from * 50} Q 25 ${50 - from * 50} 50 ${50 - ( ( to + difference ) * 50 )} T 100 ${50 - to * 50} V 100 ${50 + to * 50} Q 75 ${50 + to * 50} 50 ${50 + ( ( to + difference ) * 50 )} T 0 ${50 + from * 50} V ${50 - from * 50} Z`; const svg = ' '; segments[j].style.setProperty( '--mask', ( 'url( #fcm-' + i + '-' + j + ' )' ) ); segments[j].innerHTML = svg; } } } ); .funnel > div:last-child { display: flex; flex-direction: row; height: 300px; } .funnel > div:last-child div { background: green; height: 100%; position: relative; width: 100%; } .funnel:not( .no-mask ) > div:last-child div { mask-image: var( --mask ); mask-size: cover; mask-repeat: no-repeat; } Funnel (Mask) Funnel (No Mask) For each segment in the funnel, a script will draw the relevant SVG path for this segment, and add it (with a generated ID) into the DIV. The new ID will be passed to the DIV as a CSS variable (an attribute like style="--mask: url( #fcm-0-0 );"). The issue I'm facing, is that when I try using the black area of the SVG to mask the parent DIV, it seems not working and all colors are disappearing. My goal is to mask the green background of my DIV with the SVG shape for now, so later I can replace the background with a gradient. I'm adding in my snippet 2x examples: The first one, is my issued code. The second one is an example of my graph result (without masking) so you can see the SVG funnel segments. Can you help wit…
upvote count: 3
has answer: http://stackoverflow.com/a/79007002
has answer: http://stackoverflow.com/a/79007631
score: 3
tagged with: http://stackoverflow.com/tag/svg
linked to: http://stackoverflow.com/q/48055893
answer count: 2
linked to: http://stackoverflow.com/q/78948434
tagged with: css-mask
downvote count: 0

http://stackoverflow.com/a/78921792
type: Answer
score: 0
answers question: http://stackoverflow.com/q/78921533
has body: The issue with the sticky header in Chrome is likely due to improper stacking context or insufficient height. Adjusting the z-index ensures the header stays on top, and adding padding prevents content from overlapping. I have had the same issue here but got it fixed. Simply adjust the 'z-index' and add padding to the 'th' elements.

http://stackoverflow.com/comment/139118949
comment on: http://stackoverflow.com/q/78905381
score: 0
has text: Do you havae a typo? Should D2DFFF be #D2DFFF? Also, using your browser devtools inspect facility, could you find the exact CSS that is being applied and show us?
type: QuestionComment
type: Comment

http://stackoverflow.com/q/78929318
has comment: http://stackoverflow.com/comment/139169724
tagged with: css-grid
upvote count: 1
has comment: http://stackoverflow.com/comment/139169978
type: UnansweredQuestion
score: 1
favorite count: 0
has title: aspect-ratio in grid container is ignored by other columns
has body: I'm encountering an issue with a CSS Grid layout that works as expected in Chrome but exhibits a problem in Firefox. Specifically, the second column of the grid seems to ignore the first column in Firefox. Codepen .gallery-card-feature { display: grid; grid-template-columns: auto 1fr; gap: 1.14rem; .gallery-card-feature__image-container { background-color: #f8f8f8; position: relative; height: 100%; aspect-ratio: 1 / 1; } .gallery-card-feature__image { position: absolute; top: 50%; left: 50%; width: 75%; height: 75%; transform: translate(-50%, -50%); object-fit: cover; } .gallery-card-feature__text { padding: 0.43rem 0; font-size: 1rem; line-height: 1.6rem; letter-spacing: -0.01em; } .gallery-card-feature__title { font-weight: 500; } .gallery-card-feature__subtitle { font-weight: 400; margin-top: 8px; opacity: 0.4; } } Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iure, nemo facere. Modi alias a qui at doloribus iste nisi delectus, dolores magnam, deleniti architecto vero nemo tenetur omnis, ab eum. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Delectus, quasi rem exercitationem nisi ratione autem error, mollitia ipsam commodi qui cupiditate labore. Amet quam similique perspiciatis provident eaque ea voluptatum. I expected same result as in Chrome. The main goal was to make the first column be 1x1 (which happens thanks to aspect-ratio: 1 / 1), but apparently for some reason the block width is ignored by the second column in FireFox. Chrome Works as Expected Firefox Error
has answer: http://stackoverflow.com/a/78933172
type: Question
tagged with: http://stackoverflow.com/tag/html
answer count: 1
downvote count: 0
tagged with: css
tagged with: aspect-ratio
has comment: http://stackoverflow.com/comment/139163657

http://stackoverflow.com/a/78958022
has body: You could iterate over the table rows and tabulate like so const recalculate = (ev) => { document.querySelectorAll('tbody > tr').forEach(row => { const cells = row.children; // formule is:length x width x height x 200 let length = Number(cells.item(2).innerText); let width = Number(cells.item(3).innerText); let height = Number(cells.item(4).innerText); row.lastElementChild.innerText = length * width * height * 200; }); }; document.querySelectorAll('[contenteditable="true"]').forEach(el => { el.addEventListener("input",recalculate); }); table td { border: 1px dotted gray; } Volume weight = L X W X H * 200 Packages Weight (kg) Length (cm) Width (cm) Height (cm) Split (%) *Volume weight 1 2 3 4 5
type: Answer
score: 0
has comment: http://stackoverflow.com/comment/139215788
has comment: http://stackoverflow.com/comment/139215997
answers question: http://stackoverflow.com/q/78957954

http://stackoverflow.com/q/79022190
has title: Selector to match all similar elements with the same class after an element?
type: Question
has answer: http://stackoverflow.com/a/79022246
has answer: http://stackoverflow.com/a/79022254
type: AnsweredQuestion
possible better answer: http://stackoverflow.com/a/79022246
accepted answer: http://stackoverflow.com/a/79022254
answer count: 2
downvote count: 0
tagged with: css
has body: I am trying to get a CSS selector to match the elements with the .disabled class name, but only after the element with .today class name. It should match Day 11, Day 12 & Day 13 elements in below example. Here is my HTML: Day 1 Day 2 Day 3 Day 4 Day 5 Day 6 Day 7 Day 8 Day 9 Day 10 Day 11 Day 12 Day 13 Day 14 I have tried this selector, but it will only work on elements in the same level as .today class: .today ~ .disabled: { background: red } Any idea if this can be done?
tagged with: css-selectors
score: 1
favorite count: 0
upvote count: 1

http://stackoverflow.com/comment/139316071
type: AnswerComment
comment on: http://stackoverflow.com/a/79012651
type: Comment
score: 0
has text: I don't think you can add custom classes to elements in SquareSpace. Is it possible?

http://stackoverflow.com/q/79010036
type: UnansweredQuestion
type: Question
has body: Chat&Book English Tamil Hindi Hindi English Tamil Send * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; } body { width: 100vw; height: 100vh; background-color: #E9EFEC; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 10px; font-family: 'Nunito Sans', sans-serif; } .msgarea { width: 100%; height: 85vh; border-radius: 10px; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-end; /* Align messages from the top */ gap: 10px; background-color: white; padding: 10px; overflow-y: auto; /* Enable scrolling */ } .msgarea p { max-width: 80%; display: block; /* Change this */ min-height: 40px; /* Keep this */ background-color: #478CCF; padding: 10px; border-radius: 10px; color: white; margin-bottom: 10px; margin-top: 10px; word-wrap: break-word; box-sizing: border-box; overflow-wrap: break-word; /* Ensure long words wrap */ } .lang { position: fixed; top: 20px; left: 20px; } .typebar { width: 100vw; height: 10vh; background-color: #E9EFEC; display: flex; justify-content: flex-start; align-items: center; gap: 5%; position: fixed; bottom: 0; } .msgbox { width: 80%; height: 80%; margin-left: 20px; border-radius: 25px; border: 1px solid black; background: white; padding-left: 15px; box-sizing: border-box; font-family: 'Nunito Sans', sans-serif; position: relative; font-size: 16px; } .sendbtn { border: 1px solid black; background-color: #478CCF; color: white; width: 10%; height: 80%; border-radius: 25px; margin-right: 20px; cursor: pointer; font-size: 16px; } @media (max-width:700px) { .msgarea { height: 80vh; border: 2px solid #478CCF; } .msgarea p{ min-height: 40px; margin-top: 20px; } .msgbox { width: 70%; height: 70%; } .sendbtn { width: 30%; height: 70%; } } Here I set the height of the 'msgarea p' to 40px minimum. This works fine if there are few messages inside the 'msgarea'.I also added overflow property to 'msgarea' to ensure that it becomes scrollable once th…
answer count: 1
tagged with: http://stackoverflow.com/tag/html
score: 0
has title: Is there anything that can cause the element with 'min-height' property to misbehave?
has answer: http://stackoverflow.com/a/79010120
tagged with: height
tagged with: overflow
tagged with: css

http://stackoverflow.com/comment/139184038
type: Comment
has text: @mplungjan Yeah, I just copied the OP's code. The first-child for the OP's is the ` ` and is the reason your works, another good reason not to use inline scripts.. :)
type: AnswerComment
comment on: http://stackoverflow.com/a/78940190
score: 1

http://stackoverflow.com/q/79040155
has body: I need to migrate primeng 9 to primeng 17, and I ran into a problem. Since they changed how the table works and it is not separate anymore for frozen columns/rows. It causes a problem where you can't have frozen columns and a sticky header. I want to be able to have a table that has an internal horizontal scrollbar -&gt; meaning a max-width. But i also want the table to have no max-height, meaning the headers would be sticky. This stackblitz explains what scrolling behaviour I want when scrolling vertically. The problem is the scrolling behaviour horizontally. I want the navbar to stay in place, without setting it to fixed. https://stackblitz.com/edit/5h7dfz?file=src%2Fapp%2Ftable-frozen-columns-demo.html If i delete this code from the styles.scss, i get the correct horizontal scrolling behavior. But not the correct vertical behaviour. .p-datatable-wrapper { overflow: visible; }
type: UnansweredQuestion
type: Question
score: 0
tagged with: css
answer count: 0
has title: PrimeNG table FrozenColumns and Sticky Header don't work well together
tagged with: primeng
tagged with: angular

http://stackoverflow.com/q/78915498
tagged with: css
type: Question
has answer: http://stackoverflow.com/a/78915845
downvote count: 1
has title: CSS - hiding resize handle on resizable element
score: 0
favorite count: 0
answer count: 2
tagged with: http://stackoverflow.com/tag/html
has body: I have a resizable element, for which some browsers render one style of the resize "handle", other browsers a different style and some… well, one browser (yes, looking at you Apple) doesn't render it at all these days. In order to provide consistent styling and visual clue that the element is resizable I can add my own graphics for that handle. This renders nicely and consistently on all browsers. The problem is that "original" handle is still there on browsers, which happen to include their own. I'd like to make it disappear and I found similar older questions, also including answers that might have worked at the time, like https://stackoverflow.com/a/47100141/2428025 https://stackoverflow.com/a/11777737/2428025 "covering" the handle with an :after pseudo element that no longer (?) works or the ::webkit-resizer that still works, albeit not on Firefox https://caniuse.com/mdn-css_selectors_-webkit-resizer So I am still looking for a cross-browser solution that would work in 2024.
tagged with: webkit
linked to: http://stackoverflow.com/q/47099538
type: UnansweredQuestion
has answer: http://stackoverflow.com/a/78915849
upvote count: 1
linked to: http://stackoverflow.com/q/11777504

http://stackoverflow.com/q/78933097
tagged with: responsive-design
tagged with: css
has answer: http://stackoverflow.com/a/78933247
type: UnansweredQuestion
has title: CSS responsive design scrolling horizontally and there is white space out of content
type: Question
has body: When I made a website design using HTML and CSS it was working for large screens but when it comes to media query to make it responsive for small screens and medium it showed a lot of white space and it's scrolling horizontally until no content still there. I tried to recoding it again and instead of writing a width of parent div in pixels I write it in percentage. It's better then pixels but it's still scrolling out of content and showed white space. I just need to know what I am doing wrong in code that keep the white space with smaller screens and how could solve the horizontally scrolling body { margin: 0; padding: 0; } .page { display: flex; align-content: center; flex-direction: column; position: relative; width: 100%; font-family: "Poppins", sans-serif; } .head { position: relative; display: inline-flex; flex-direction: row; justify-content: space-between; width: 100%; background: linear-gradient(90deg, rgba(15, 34, 60) 0%, rgba(16, 25, 37) 100%); } .head img { width: 200px; } .head::before { display: inline-flex; content: ""; position: absolute; width: 100%; height: 1px; background: linear-gradient(90deg, rgba(217, 217, 217, 0) 0%, #D9D9D9 35%, #D9D9D9 65%, rgba(217, 217, 217, 0) 100%); top: 100%; z-index: 1; } .head ul { position: relative; display: inline-flex; list-style: none; width: 30%; justify-content: space-between; color: white; font-size: 16px; align-items: center; } .con { position: relative; display: inline-flex; width: 20%; justify-content: space-between; align-items: center; } .con button { border: none; background-color: #58B3C8; font-size: 16px; color: white; width: 135px; height: 36px; border-radius: 2px; } .con i { display: inline-flex; align-self: center; justify-content: flex-start; color: white; margin-left: 20px; } .con p { color: white; margin-right: 40px; } .intro { position: relative; display: flex; width: 100%; align-items: center; justify-content: center; height: 525px; background: linear-gradient(90deg, rgba(15, 34, 60) 0%, rgba(1…
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139169911
tagged with: media-queries
score: 0
answer count: 2
tagged with: display
has answer: http://stackoverflow.com/a/78933256

http://stackoverflow.com/a/78934131
has body: Your col definitions are incorrect. Your table has 14 columns but only 10 elements. Instead define all 14 columns Art. Descrição dos Trabalhos Un Qtd P.Un P.Total Faturado Saldo Auto 1 Auto 2 Qtd Valor % Qtd Valor % No items.
score: 4
has comment: http://stackoverflow.com/comment/139172937
answers question: http://stackoverflow.com/q/78934033
type: AcceptedAnswer
upvote count: 4
downvote count: 0
accepted answer of: http://stackoverflow.com/q/78934033
type: Answer
has comment: http://stackoverflow.com/comment/139172885

http://stackoverflow.com/comment/139195942
has text: What happens if he fixes his broken HTML and your solution no longer works?
type: Comment
type: AnswerComment
comment on: http://stackoverflow.com/a/78947295
score: 0

http://stackoverflow.com/comment/139258902
has text: The SVG image simply isn't high enough. It's 1475 by 1000 pixels and you force it to fit the space you leave for it by using `width: 100%; height: 100%;`.
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78981277
type: Comment

http://stackoverflow.com/q/79023414
tagged with: php
tagged with: css
downvote count: 1
tagged with: mobile
type: UnansweredQuestion
has answer: http://stackoverflow.com/a/79025726
favorite count: 0
type: Question
has body: I made a website where I basically hide and correspondingly show an element on mobile screen sizes. This seems to work just fine with any browser and size but somehow Instagram apparently renders it very differently... (see attached screenshots). It basically shows both elements. The one I want to hide and the one I want to show. (You can test the site yourself on https://cato-sports.com/events/berlin-marathon-2024) Here is how it should look:iPhone Screenshot showing the correct layout of the site Here is how it looks opened in the Instagram App:enter image description here Here's a dulled down snippet for this subpage: .event-container-full { height: 100%; width: 100%; } .event-header { height: 100vh; width: 100%; position: absolute; z-index: -2; background-color: black; } .event-image-container { grid-column: 1 / span 2; border-radius: 7px; } .event-header-img { height: 100%; display: block; object-fit: cover; filter: blur(10px); -webkit-filter: blur(10px); opacity: 70%; } .event-infobox { grid-column: 3 / span 7; display: grid; gap: 1rem; grid-template-columns: repeat(5, 1fr); grid-auto-rows: min-content; } .event-form { position: absolute; translate: -50% -50%; width: 80%; left: 50%; top: 50%; padding: 1rem; border-radius: 7px; background-color: rgba(255, 255, 255, 0.2); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); display: grid; grid-template-columns: repeat(7, 1fr); gap: 1rem; z-index: -1; } @media only screen and (max-width:800px) { .event-form { display: flex; position: relative !important; flex-direction: column; width: 100%; height: auto; translate: unset; justify-self: end; left: unset; pointer-events: all; } .event-infobox { display: flex; flex-direction: column; } .event-container-full { pointer-events: none; position: relative !important; display: flex; flex-direction: column; gap: 1rem; padding: 1rem; height: auto; } .form-container-m { display: block !important; padding: 1rem !important; padding-top: 0 !important; } .form-contai…
tagged with: http://stackoverflow.com/tag/html
answer count: 1
has title: Website displaying differently on Instagrams internal browser
upvote count: 1
has comment: http://stackoverflow.com/comment/139336036
score: 0
has comment: http://stackoverflow.com/comment/139336406
tagged with: instagram

http://stackoverflow.com/q/78996817
has comment: http://stackoverflow.com/comment/139287347
has body: I'm experiencing a challenging issue with Safari concerning the page load animation. Specifically, when I first open the main page, the load animation doesn't initiate. However, if I navigate away to another page and then return to the main page, the animation starts functioning as expected. I don't believe the animation properties is the problem, as the animation plays correctly after navigating to another page and then returning to the main page. Intriguingly, this problem does not occur in Chrome, where the page load animation works perfectly from the first visit. Safari Version I am testing on: Safari 17.6 (19618.3.11.11.5) I also checked on old safari versions on browserstack. The issue is consistent on all safari on all devices (ios, macOs, ipad). Below is the animation properties I am using .slideUp { animation: slide-up 20s alternate linear infinite; -webkit-animation: slide-up 20s alternate linear infinite; } @keyframes slide-up { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } } I found similar threads regarding this issue, But none of them seemed to work for me: https://www.framer.community/c/support/safari-page-load-animation-issues-on-first-access https://github.com/michalsnik/aos/issues/140
score: 0
tagged with: javascript
tagged with: mobile-safari
has comment: http://stackoverflow.com/comment/139287840
answer count: 0
has comment: http://stackoverflow.com/comment/139287205
tagged with: css
type: UnansweredQuestion
type: Question
tagged with: safari
has title: Safari Page Load Animation Issue on First Access
has comment: http://stackoverflow.com/comment/139287848
tagged with: css-animations

prismjs
tags question: http://stackoverflow.com/q/78997269
type: Tag
tag name: prismjs

http://stackoverflow.com/q/79030341
has comment: http://stackoverflow.com/comment/139348657
has comment: http://stackoverflow.com/comment/139348180
type: UnansweredQuestion
score: 1
favorite count: 0
tagged with: react-aria
type: Question
has title: Unexpected CSS behavior when using React Aria Checkbox inside a container with combination of max width, auto margin and overflow hidden
downvote count: 0
tagged with: reactjs
upvote count: 1
answer count: 0
tagged with: css
has body: I've raised issue on the React Spectrum GitHub in #7108. An unexpected behavior on the rendered document where the React Aria Checkbox contained in a container that resides outside the container max height bound still take space in the page that cause additional blank space after the container rendered. Such issue occurred when the container have CSS properties of max-width, margin-left: auto, margin-right: auto and overflow: hidden, and containing overflowing React Aria Checkbox, but not with other component such React Aria TextField. Can someone explain the reason this is happening? is it a bug that should be reported to React Aria maintainer? As for the workaround, I use the React Aria Hooks as it's included in the replication code repo. Here's the link to replication code. The instruction on starting the web app on local machine documented in the README of the project. Here's the snippet of the container CSS, .container { width: 100vw; max-width: 80vw; height: 100vh; max-height: 100vh; margin-left: auto; margin-right: auto; overflow: hidden; background-color: lightsteelblue; } Here's the comparison of the rendered page with same CSS properties but containing different component (React Aria Checkbox and TextField), With Checkbox With TextField And here's the code snippet of the React component implementation, import { Checkbox, CheckboxGroup, Input, Label, TextField } from 'react-aria-components' import './App.css' import WorkaroundChecbox from './components/WorkaroundCheckbox' export default function App({ type }: { type: 'normal' | 'anomaly' | 'workaround' }) { return ( Filler { Array.from(Array(200).keys()) .map((_, index) => ( <> {type === 'normal' && ( <Label>{index} <Input /> )} {type === 'anomaly' && ( {index} )} {type === 'workaround' && ( {index} )} </> )) } ) } !Update The root cause was spotted, it was due to the usage of VisuallyHidden wrapper component in the following code. I managed to replicate the behavior by adding the VisuallyHidden wrapper int…

http://stackoverflow.com/comment/139416504
comment on: http://stackoverflow.com/a/79057991
type: Comment
score: 0
type: AnswerComment
has text: To avoid CSS injection attacks. See https://owasp.org/www-project-web-security-testing-guide/v41/4-Web_Application_Security_Testing/11-Client_Side_Testing/05-Testing_for_CSS_Injection

http://stackoverflow.com/q/79004380
type: Question
accepted answer: http://stackoverflow.com/a/79006465
tagged with: http://stackoverflow.com/tag/html
type: AnsweredQuestion
score: 0
tagged with: javascript
has title: Highchart vertical and horizontal scrollbar
possible better answer: http://stackoverflow.com/a/79004766
answer count: 2
tagged with: css
has answer: http://stackoverflow.com/a/79006465
has body: I have dependency information that I would like to show on a web page using Highcharts. I chose Treegraph chart as I think it's more suitable for what I need it for. This is the link to a demo https://www.highcharts.com/demo/highcharts/treegraph-chart. The issue I have and I couldn't overcome on my own is that when there are lots of branches and Leaves then the whole graph will get squeezed to show everything in one view. jsfiddle for code below is available in the link above. Highcharts.chart('container', { chart: { spacingBottom: 30, marginRight: 120, height: 1200, scrollablePlotArea: { minWidth: 1500, // Set minimum width for horizontal scrolling minHeight: 1200 // Set minimum height for vertical scrolling } }, title: { text: 'Phylogenetic language tree' }, series: [ { type: 'treegraph', keys: ['parent', 'id', 'level', 'color'], // Add color to keys clip: false, data: [ [undefined, 'Proto Indo-European'], ['Proto Indo-European', 'Balto-Slavic'], ['Proto Indo-European', 'Germanic'], ['Proto Indo-European', 'Celtic'], ['Proto Indo-European', 'Italic'], ['Proto Indo-European', 'Hellenic'], ['Proto Indo-European', 'Anatolian'], ['Proto Indo-European', 'Indo-Iranian'], ['Proto Indo-European', 'Tocharian'], ['Indo-Iranian', 'Dardic'], ['Indo-Iranian', 'Indic'], ['Indo-Iranian', 'Iranian'], ['Iranian', 'Old Persian'], ['Old Persian', 'Middle Persian'], ['Indic', 'Sanskrit'], ['Italic', 'Osco-Umbrian'], ['Italic', 'Latino-Faliscan'], ['Latino-Faliscan', 'Latin'], ['Celtic', 'Brythonic'], ['Celtic', 'Goidelic'], ['Germanic', 'North Germanic'], ['Germanic', 'West Germanic'], ['Germanic', 'East Germanic'], ['North Germanic', 'Old Norse'], ['North Germanic', 'Old Swedish'], ['North Germanic', 'Old Danish'], ['West Germanic', 'Old English'], ['West Germanic', 'Old Frisian'], ['West Germanic', 'Old Dutch'], ['West Germanic', 'Old Low German'], ['West Germanic', 'Old High German'], ['Old Norse', 'Old Icelandic'], ['Old Norse', 'Old Norwegian'], ['Old Swedish', 'Middle Swedish']…
has answer: http://stackoverflow.com/a/79004766
tagged with: highcharts

scroll
tags question: http://stackoverflow.com/q/79021145
tags question: http://stackoverflow.com/q/78955207
type: Tag
tags question: http://stackoverflow.com/q/78926774
tags question: http://stackoverflow.com/q/79031849
tags question: http://stackoverflow.com/q/78955166
tags question: http://stackoverflow.com/q/79045395
tag name: scroll
tags question: http://stackoverflow.com/q/78950411
tags question: http://stackoverflow.com/q/78937309
tags question: http://stackoverflow.com/q/78944147
tags question: http://stackoverflow.com/q/78993924
tags question: http://stackoverflow.com/q/78969855
tags question: http://stackoverflow.com/q/78959027
tags question: http://stackoverflow.com/q/78962936
tags question: http://stackoverflow.com/q/78997557
tags question: http://stackoverflow.com/q/79040516
tags question: http://stackoverflow.com/q/78993557
tags question: http://stackoverflow.com/q/79123811
tags question: http://stackoverflow.com/q/79136997
tags question: http://stackoverflow.com/q/79136564
tags question: http://stackoverflow.com/q/79101985
tags question: http://stackoverflow.com/q/79114153
tags question: http://stackoverflow.com/q/79209919
tags question: http://stackoverflow.com/q/79106450
tags question: http://stackoverflow.com/q/79215727
tags question: http://stackoverflow.com/q/79123439
tags question: http://stackoverflow.com/q/79152697
tags question: http://stackoverflow.com/q/79392115
tags question: http://stackoverflow.com/q/79381669
tags question: http://stackoverflow.com/q/79360431
tags question: http://stackoverflow.com/q/79273415
tags question: http://stackoverflow.com/q/79355528
tags question: http://stackoverflow.com/q/79339409
tags question: http://stackoverflow.com/q/79343424
tags question: http://stackoverflow.com/q/79268338
tags question: http://stackoverflow.com/q/79495040
tags question: http://stackoverflow.com/q/79526088

http://stackoverflow.com/comment/139243505
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78972066
type: QuestionComment
has text: @Dai Yes, it is an ESLint error.

http://stackoverflow.com/comment/139158216
score: 1
comment on: http://stackoverflow.com/a/78925060
type: Comment
type: AnswerComment
has text: Brilliant thanks this works well. The only issue i have with using keyframes is they need to specify a time value, which means the longer the text, the quicker the animation. Is there a way of the speed of movement being the same no matter the character length?

http://stackoverflow.com/q/78964809
has comment: http://stackoverflow.com/comment/139228172
has comment: http://stackoverflow.com/comment/139231138
has comment: http://stackoverflow.com/comment/139228854
score: 0
has comment: http://stackoverflow.com/comment/139235127
has comment: http://stackoverflow.com/comment/139228306
has title: Styling HTML5 audio player hover issues
tagged with: html5-audio
answer count: 0
tagged with: css
has body: sorry i know this might be a bit of a duplicate post - but im desperate! I am trying to style the HTML5 audio player for a laytheme / wordpress website and getting stuck with some unwanted hover styling. I can't pin down what is causing a layer to show when mousing over the player. Ideally I just want this to be a play button. As this is Laytheme for Wordpress I'm a bit limited with what I can implement - I cant build anything from scratch so will have to make do just editing CSS. The play button has a semi-transparent background appear when moused over and there is another element just to the right which also appears when you mouse over - I can't figure out what that is, I think it must be either the volume slider or the menu as those are the only two elements that have the semi-transparent background show on the full player. any help would be greatly appreciated. Code is a bit hectic - I'm hitting and hoping! This has all the CSS tags But I can't pin down .audio-music-page::-webkit-media-controls-timeline { display: none !important; } .audio-music-page::-webkit-media-controls-time-remaining-display { display: none !important; background-color: transparent !important; } .audio-music-page::-webkit-media-controls-mute-button { display: none !important; background-color: transparent !important; } .audio-music-page::-webkit-media-controls-volume-slider { display: none !important; background-color: transparent !important; } .audio-music-page::-webkit-media-controls-current-time-display { display: none !important; background-color: transparent !important; } .audio-music-page::-webkit-media-controls-volume-slider-container { display: none !important; background-color: transparent !important; } .audio-music-page::-webkit-media-controls-enclosure { background-color: transparent !important; } .audio-music-page::-webkit-media-controls-panel { background-color: transparent; } .audio-music-page { width: 100px; height: 25px; margin: auto; display: block; } I've tried making thin…
has comment: http://stackoverflow.com/comment/139228383
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139228715
type: Question
has comment: http://stackoverflow.com/comment/139228900
has comment: http://stackoverflow.com/comment/139228256

html-email
tags question: http://stackoverflow.com/q/78994346
tag name: html-email
tags question: http://stackoverflow.com/q/79043462
tags question: http://stackoverflow.com/q/78971720
type: Tag
tags question: http://stackoverflow.com/q/79164255
tags question: http://stackoverflow.com/q/79374567
tags question: http://stackoverflow.com/q/79264958
tags question: http://stackoverflow.com/q/79515731
tags question: http://stackoverflow.com/q/79510502

http://stackoverflow.com/comment/139324489
type: AnswerComment
has text: I've edited my answer with alternative way
comment on: http://stackoverflow.com/a/79017211
type: Comment
score: 0

http://stackoverflow.com/a/78972046
has body: You have minor styling issue for modal. If you use dev tools you can see that modal is displaying but at bottom of red section and that's happening because you have not properly positioned your modal. To fix the issue add position: absolute with z-index: 10. Below is all newly added code with live example. .popUp { position: absolute; /* Newly added */ top: 0px; /* Newly added */ z-index: 10; /* Newly added */ } document.addEventListener('DOMContentLoaded', function() { const input = document.querySelector('.sent3'); const optional = document.querySelector('.optional'); const mainTv = document.querySelector('.tv-frame'); const animatedElements = document.querySelectorAll('.leftTV, .rightTV, .topTV, .bottomTV'); const textElement = document.querySelector('.sent1'); const textElement2 = document.querySelector('.sent2'); const textElement3 = document.querySelector('.sent3'); const popUp = document.getElementById("pop-up"); const close = document.querySelector(".close"); const done = document.getElementById("done"); const open = document.getElementById("pop-open"); const text1 = "Hello Dear,"; const text2 = "Welcome to our World"; const text3 = "What was your Name again?"; function typeWriter(element, text, speed = 200, isPlaceholder = false, callback = null) { let index = 0; function type() { if (index &lt; text.length) { if (isPlaceholder) { element.placeholder += text.charAt(index); } else { element.textContent += text.charAt(index); } index++; setTimeout(type, speed); } else if (callback) { callback(); } } type(); } typeWriter(textElement, text1, 200, false, function() { typeWriter(textElement2, text2, 200, false, function() { typeWriter(textElement3, text3, 200, true, function() { input.focus(); }); }); }); if (input) { input.addEventListener('input', () =&gt; { if (input.value.trim() !== '' &amp;&amp; input.value.length &gt;= 4) { optional.style.visibility = 'visible'; optional.style.animationPlayState = "running"; } else { optional.style.visibility = 'hidden'; op…
score: 0
has comment: http://stackoverflow.com/comment/139249043
answers question: http://stackoverflow.com/q/78971889
accepted answer of: http://stackoverflow.com/q/78971889
type: AcceptedAnswer
type: Answer

http://stackoverflow.com/comment/139364388
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/79038098
type: Comment
has text: @zer00ne yes and no. `&.d-none` technically is a preprocessor syntax but it is also a [Level 4 CSS Selector Module Level 4: CSS Nesting](https://www.w3.org/TR/css-nesting-1/). As such it works in every major browser without SASS/LESS.

http://stackoverflow.com/comment/139327468
type: QuestionComment
has text: Please provide enough code so others can better understand or reproduce the problem.
comment on: http://stackoverflow.com/q/79018918
type: Comment
score: 0

http://stackoverflow.com/q/79059761
has title: How To change active item's color in floating links or icon in wordpress
upvote count: 1
favorite count: 0
has comment: http://stackoverflow.com/comment/139401860
has answer: http://stackoverflow.com/a/79065494
has comment: http://stackoverflow.com/comment/139401778
type: Question
accepted answer: http://stackoverflow.com/a/79065494
tagged with: hyperlink
answer count: 1
type: AnsweredQuestion
tagged with: wordpress
has comment: http://stackoverflow.com/comment/139401941
has comment: http://stackoverflow.com/comment/139401800
score: 0
has comment: http://stackoverflow.com/comment/139401817
tagged with: css
has body: I m new to wordpress and using floating menu plugin to float some links (links to same page).. It is working fine anyways but there is no option to highlight the active link.. is there anyway to change active link's color or icon's icon.. my purpose is just to highlight the active item (by any possible way - background color change or link color change or icon color change even if text size change is fine ) link to the website in i working on Website I have tried this with help of mozilla inspect tool.. tried many css solution available on stack overflow and others but no luck. Still could not find how to make current item active.. any help will be appreciated,
downvote count: 1

http://stackoverflow.com/comment/139269321
type: QuestionComment
comment on: http://stackoverflow.com/q/78987305
type: Comment
score: 0
has text: localestorage can be tested on top of the page (head and before style to set the mode choosen)

http://stackoverflow.com/q/78952466
has comment: http://stackoverflow.com/comment/139205189
has comment: http://stackoverflow.com/comment/139205452
favorite count: 0
linked to: http://stackoverflow.com/q/52015737
type: Question
tagged with: http://stackoverflow.com/tag/html
downvote count: 0
has body: Given the following code, the text color is correctly changed in the nested element after updating the root css variable. Is there a way to avoid repeating the color prop twice and get it automatically re-evaluated inside the nested element? ::root { --text-color-primary: black; } body { color: var(--text-color-primary); } .myElement { --text-color-primary: blue; color: var(--text-color-primary); //can we avoid this??? } This is the body text. This is my element EDIT: The use case for this is the following. We maintain a design system, that comes with a core theme that defines default values for all variables and a list of components and styles that consume them. We want to enable users to customize their components' look and feel by simply overriding all - or part - of those variables in a scoped way, i.e. without affecting their behaviour outside, without the cognitive load of knowing all their usages and without the burden of replacing all of them, which in some cases, can be tedious and ultimately become error-prone (if we add/remove a style that consumes a variable in the DS, users should update their code accordingly).
tagged with: css-variables
has comment: http://stackoverflow.com/comment/139204933
duplicate of: http://stackoverflow.com/q/52015737
upvote count: 1
answer count: 0
has comment: http://stackoverflow.com/comment/139205212
tagged with: css
has title: Override root CSS variable without repeating al properties declarations that consume them
has comment: http://stackoverflow.com/comment/139208164
type: UnansweredQuestion
score: 1

http://stackoverflow.com/a/78990469
type: Answer
accepted answer of: http://stackoverflow.com/q/78990433
has body: It's commendable that you're writing the carousel element yourself. I see that you're using the CSS transform property to shift the elements from their original positions. If you calculate with better values here, your element will be centered. // Changed 75 / 3 to 100 / 3 slider.style.transform = `translateX(-${(currentIndex - 1) * (100 / 3)}%)`; An element needs to take up one-third of 100% (33.33 %), so you will shift it by exactly that amount (depending on the index of the element). The 75% here seems a bit unexplained to me as a starting value. const slider = document.querySelector('.flag-slider'); const flags = document.querySelectorAll('.flag'); let currentIndex = 2; // Middle flag function updateFlags() { flags.forEach((flag, index) => { flag.classList.remove('active'); if (index === currentIndex - 1) { flag.classList.add('active'); } }); } function slideFlags() { // Slide to the left slider.style.transform = `translateX(-${(currentIndex - 1) * (100 / 3)}%)`; currentIndex++; if (currentIndex > flags.length) { console.log('reset'); currentIndex = 2; slider.style.transform = `translateX(0%)`; } updateFlags(); } // Initial flag setup updateFlags(); // Auto-slide every 2 seconds setInterval(slideFlags, 2000); * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; background-color: #f0f0f0; } .countries { display: flex; flex-direction: column; justify-content: center; width: 300px; padding: 20px; } .slider-container { width: 100%; margin: 50px auto; overflow: hidden; position: relative; } .flag-slider { display: flex; transition: transform 0.5s ease-in-out; } .flag, .last_flag { width: 33.33%; padding: 10px; display: flex; justify-content: center; align-items: center; transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; } .flag img { width: 100%; object-fit: contain; } .flag.active { transform: scale(1.2); } Different countries
score: 3
upvote count: 3
type: AcceptedAnswer
downvote count: 0
answers question: http://stackoverflow.com/q/78990433

http://stackoverflow.com/a/79055908
type: AcceptedAnswer
has body: You can try like this to change border style of google translator. I provide the CSS. I already tested it and it worked very well. Hope it helps you. .goog-te-combo { border: 1px solid #ccc !important; outline: none !important; padding: 5px !important; font-size: 14px !important; } .goog-te-combo:focus { outline: none !important; }
type: Answer
accepted answer of: http://stackoverflow.com/q/79055622
score: 0
answers question: http://stackoverflow.com/q/79055622

http://stackoverflow.com/a/78922935
answers question: http://stackoverflow.com/q/78922736
has body: It’s because the &lt;body&gt; element has a default margin (which acts like padding does on other element types). Just set this margin to zero and you’ll be sweet. body { margin: 0; } iframe { height: 100%; width: 100%; position: absolute; } &lt;iframe src="https://www.bla-bla.de/folder/subfolder/application/" frameborder="0"&gt; Alternatively, you could set top: 0 and left: 0 on the &lt;iframe&gt;.
has comment: http://stackoverflow.com/comment/139151099
type: Answer
score: 0
has comment: http://stackoverflow.com/comment/139151136

http://stackoverflow.com/a/79013090
accepted answer of: http://stackoverflow.com/q/79012948
upvote count: 1
score: 1
has body: It is not visible because you have used 1px in background-image its soo small that its not visible so try to use higher properties like 10% which I have used in below example ( See in full page view ). If I have misunderstood or missed something then do share. body { background-size: 500px 500px; background-image: radial-gradient(circle, #000000 10%, rgba(0, 0, 0, 0) 10%); } &lt;h2&gt; CleanCodeEditor &lt;/h2&gt;
type: AcceptedAnswer
answers question: http://stackoverflow.com/q/79012948
downvote count: 0
type: Answer

http://stackoverflow.com/comment/139214198
comment on: http://stackoverflow.com/q/78957189
type: QuestionComment
score: 0
type: Comment
has text: Thanks for the quick feedback @musicamante. It's a bummer that the functionality is limited that way. I created a work around that suits my needs by creating a template SVG file with the same tags as the stylesheet. I then just watch for the appropriate tag to modify the down-arrow color, use the color to modify the SVG and save to a temp file, then add the path to the temp file to the stylesheet. I did have to modify my python code for this (which I was trying to avoid), but it didn't take much and I have the functionality I was looking for.

http://stackoverflow.com/comment/139315374
comment on: http://stackoverflow.com/a/79011555
score: 0
type: AnswerComment
has text: I knew that difference, but `vertical-align: 2px;` would be the center/middle better than the `text-bottom` value.
type: Comment

http://stackoverflow.com/q/78933545
tagged with: deployment
has title: How to make list items in a slide menu of a website be on top of each other?
type: Question
has body: I've been trying to fix this issue for days now, nothing seems to work and I'm beginning to think of scratching the whole project and start over again. I decided to add a slide hamburger menu to my website and the options inside said menu are positioned exactly next to each other. html: Homepage Menu Profile Cart Wishlist Home Store Community Login Sign Up SSSS css: ul { list-style-type: none; margin: 0; padding: 0; background-color: #212121; height: 70px; display: flex; justify-content: center; align-items: center; } li { display: flex; align-items: center; margin: 0 15px; } .spacer { flex-grow: 1; } a { display: block; padding: 11px; color: #fff; text-align: center; font-size: 1.2em; text-decoration: none; } li a:hover { background-color: #353535; max-width: 200px; } .active { background-color: #389261; } .icon { font-size: 1.5em; color: #fff; } body { background-color: #1c2841; background-size: cover; background-position: center; background-repeat: no-repeat; height: 100vh; margin: 0; padding: 0; backdrop-filter: blur(4px); overflow-x: hidden; } .modal { border-radius: 5px; font-family: sans-serif; line-height: 1.5; max-width: 100%; padding: 1rem 2rem; max-height: 100%; height: 1000px; } .logo-img{ margin-top:0.3px; margin-bottom:-5px; margin-left: 70px; width: 70px; height: 50px; } .login-form-container{ background-color: black; background: transparent; width: 680px; height: 75%; margin-left: 375px; justify-content: center ; margin-top: 150px; margin-left: 500px; } .entryarea{ position: relative; height:80px; line-height: 80px; } input[type=text]{ position:absolute; width:70%; outline:none; font-size: 1.5em; padding: 0 30px; line-height: 80px; border-radius: 10px; border: 2px solid #ffffff ; background: transparent; transition: 0.1s ease; z-index: 1111; } input[type=password]{ position:absolute; width:70%; outline:none; font-size: 1.5em; padding: 0 30px; line-height: 80px; border-radius: 10px; border: 2px solid #ffffff ; background: transparent; transition: 0.1s…
tagged with: margin
answer count: 1
type: AnsweredQuestion
tagged with: http://stackoverflow.com/tag/html
score: 0
has answer: http://stackoverflow.com/a/78933614
tagged with: marginal-effects
tagged with: css
accepted answer: http://stackoverflow.com/a/78933614

http://stackoverflow.com/comment/139152494
score: 0
type: QuestionComment
has text: @JeffZeitlin, Thanks! It seems to be exactly the cause of treating Helvetica as Arial
comment on: http://stackoverflow.com/q/78923710
type: Comment

http://stackoverflow.com/comment/139164539
has text: Can you link to the original webpage?
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78930122
type: QuestionComment

http://stackoverflow.com/comment/139398130
type: QuestionComment
has text: If you put the remove button definition inside the forEach it should work. Otherwise there is only one button total, and appending it to a new place will indeed move it.
comment on: http://stackoverflow.com/q/79057749
type: Comment
score: 5

http://stackoverflow.com/a/78918300
answers question: http://stackoverflow.com/q/78918002
accepted answer of: http://stackoverflow.com/q/78918002
upvote count: 2
has comment: http://stackoverflow.com/comment/139148470
type: AcceptedAnswer
has body: Can you try this? I thought it would be simple... I was more concerned about style than I thought The add row button is for testing, so don't care too much. // for test let mainDiv = document.querySelector(".mainDiv"); let btnAdd = document.querySelector("#button-add"); let tbody = document.querySelector(".mainDiv table tbody"); let emptyRow = document.querySelector(".empty-row"); let totalRow = tbody.querySelector("tr:nth-last-child(2)"); btnAdd.addEventListener("click", () => { if(mainDiv.clientHeight > Math.ceil(window.innerHeight * 0.9)) { emptyRow.remove(); totalRow = tbody.querySelector("tr:nth-last-child(1)"); } let newRow = document.createElement("tr"); newRow.innerHTML = ` 1. 26-8-24 Maths B2 ( 60-70 Percentage ) `; tbody.insertBefore(newRow, totalRow); }); body, html { background-color: white; margin: 0; padding: 0; height: 100%; } table { width: 80%; min-height: 90vh; border-collapse: collapse; table-layout: fixed; } tr:nth-last-child(2) { height: 100%; } th, td { border: 1px solid black; text-align: center; padding: 5px; font-size: 14px; } td { border-bottom: none; } tr:last-child td { border-bottom: 1px solid black; } th { background-color: #f2f2f2; } .subject-column { width: 50%; } .marks-column { width: 30%; } Document ADD ROW Sr no Date Subject Marks 1. 26-8-24 Maths B2 ( 60-70 Percentage ) 1. 26-8-24 Maths B2 ( 60-70 Percentage ) Total B2
score: 2
downvote count: 0
type: Answer
has comment: http://stackoverflow.com/comment/139148392
has comment: http://stackoverflow.com/comment/139148476

http://stackoverflow.com/q/78907119
has body: I am looking for a way to locate CSS class names that HTML elements and ASP controls reference in their "class" and "CssClass" properties, but where the class that is referenced doesn't exist in any referenced CSS files. For example, if I have elements defined as: Apple Car Tomato But the CSS files referenced only have definitions for class_apple and class_tomato, then I need to know that "class_car" is being referenced, but it doesn't exist. This could be with a visual indicator in Visual Studio or even a list that would include "class_car" since it's not defined in any style sheets. I thought Visual Studio 2022 would put squiggly lines under a bad CSS reference, but evidently it doesn't. I'm not worried about definitions in the stylesheet files not being used, I'm only worried about references to classes that don't exist. I don't need a list of the elements with the bad references, just the class name. I can find the elements with the find tool in Visual Studio. I'm willing to do some work to find these bad references, but any tools out there that might exist would be very helpful. I imagine this would be something that would be needed for projects that have been maintained for quite a while. Not sure I'm willing to pay a lot for an extension that could do this, but I might be willing to throw a few bones to an extension creator for something like this. Even adding just the squiggly line under the references would be helpful, if not a list.
has title: How to find HTML elements and ASP controls that have CSS class references that have no definition in Visual Studio
accepted answer: http://stackoverflow.com/a/78907914
tagged with: css
tagged with: asp.net
tagged with: visual-studio
tagged with: visual-studio-2022
type: Question
has answer: http://stackoverflow.com/a/78907914
tagged with: http://stackoverflow.com/tag/html
answer count: 1
type: AnsweredQuestion
score: 0
has comment: http://stackoverflow.com/comment/139122332

http://stackoverflow.com/q/79036624
has title: Use ellipsis to hide overflow, but also allow wordwrapping, if there is vertical space
tagged with: http://stackoverflow.com/tag/html
type: Question
score: 0
answer count: 0
tagged with: css
has body: I have boxes in various sizes and want to display a name in them, as good as possible. Here is some code I use for testing purposes: div { display:flex; background:yellow; border: 2px solid orange; box-sizing: border-box; height:30px; width:100px; vertical-align:middle; justify-content:center; align-items:center; text-align:center; overflow:hidden; text-overflow:ellipsis; margin:20px; } div > span { display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } Short Name Long Name, very very long Name This will not fit and should be ellipsed like "T..." In this version I really like how the very short "T..." displays. It makes sense for super short boxes to be truncated after the first letter like that. However, the middle one would have enough space to wrap and display. If I remove the white-space:nowrap, then the middle one looks good, but the bottom one looks very bad (displaying something like "a..." from the middle of the name, instead of using the start). Is there a way to combine the best of both worlds, to get the bottom one show as "T..." like in the first fiddle, and let the middle one wrap like in the second fiddle? (The top box looks equally good in both versions, full name in center) jsfiddle 1 (with white-space:nowrap) jsfiddle 2 (without white-space:nowrap) To clarify, something like this would be the desired output:
has comment: http://stackoverflow.com/comment/139359764
type: UnansweredQuestion

http://stackoverflow.com/comment/139265830
score: 0
type: QuestionComment
has text: @Muhammad Zeeshan Yes, it should behave normally as a sticky element would, just add the class as well.
type: Comment
comment on: http://stackoverflow.com/q/78984963

http://stackoverflow.com/a/78953900
downvote count: 1
has body: Put the text in a span inside the button and the reverse the animation on the span .buttonrot { padding: 50px; border-radius: 10px; animation: rotateinf 10s linear infinite; position: relative; display: inline-block; cursor: pointer; overflow: hidden; } .buttonrot span { display: inline-block; animation: rotateinf 10s linear reverse infinite; } @keyframes rotateinf { 100% { transform: rotate(360deg); } } All About Me
type: AcceptedAnswer
accepted answer of: http://stackoverflow.com/q/78953791
has comment: http://stackoverflow.com/comment/139207912
has comment: http://stackoverflow.com/comment/139207855
type: Answer
score: 0
upvote count: 1
answers question: http://stackoverflow.com/q/78953791

http://stackoverflow.com/comment/139265538
type: Comment
has text: intersectionObserver IS vanilla JS
score: 5
type: QuestionComment
comment on: http://stackoverflow.com/q/78984963

http://stackoverflow.com/comment/139375799
type: QuestionComment
type: Comment
comment on: http://stackoverflow.com/q/79044377
has text: I have found the problem. I changed the codepen to use the correct background color for what I am talking about (to a very light grey). This is causing the original green to turn into a purple color. This is revealing that the `mix-blend-mode` set on the `.nav-header` cannot be overridden by rewriting the `mix-blend-mode` on the `.nav-header a` to normal, so I am not sure how to approach this.
score: 0

http://stackoverflow.com/q/78928449
tagged with: css
answer count: 0
has comment: http://stackoverflow.com/comment/139162779
type: UnansweredQuestion
type: Question
tagged with: typescript
score: 0
has comment: http://stackoverflow.com/comment/139165554
linked to: http://stackoverflow.com/q/78881580
tagged with: http://stackoverflow.com/tag/svg
tagged with: reactjs
has body: I'm working on a React application where I need to fetch SVG icons from a URL and apply a custom color to them based on a value from my Redux store. Additionally, I want to ensure that the SVG scales correctly within its container without overflowing or distorting. Here's what I've tried so far: const svgRef = useRef<SVGSVGElement>(null); const colorFromStore = useSelector(getUserColor); const fetchSvgIcon = async (url: string) => { try { const response = await axios.get(`https://corsproxy.io/?${url}`, { headers: { 'Content-Type': 'application/xhtml+xml; charset=UTF-8', }, responseType: 'text', }); const parser = new DOMParser(); const xmlDoc = parser.parseFromString(response.data, 'text/xml'); const svg = xmlDoc.getElementsByTagName('svg')[0]; if (svg && svgRef.current) { svgRef.current.innerHTML = svg.innerHTML; } } catch (error) { console.error("Error fetching SVG:", error); } }; However, I'm facing a couple of issues: Variable SVG Sizes: Each SVG I fetch has a different size, and I'm struggling to keep them within the boundaries of their container. I tried manipulating the size using CSS, inline styles, and even adjusting the viewBox, but I'm still facing issues. When I use small values for viewBox, the SVG becomes larger, and vice versa. It seems like each SVG requires a different viewBox to fit correctly. Applying Custom Color: While I'm trying to apply the color using the color property, I'm not sure if this is the best approach for modifying the SVG's fill or stroke color dynamically. Can someone guide me on how I can: Correctly inject my custom color into the fetched SVG? Ensure the SVG scales properly within its container without distorting or overflowing? Thanks in advance for your help!
has title: How to Inject Color and Control Size of Dynamically Fetched SVGs in React?
has comment: http://stackoverflow.com/comment/139162004

http://stackoverflow.com/a/78935950
downvote count: 0
type: Answer
answers question: http://stackoverflow.com/q/78930262
has body: SVG to the rescue As commented by Paulie_D – CSS polygons can at best approximate rounded corners (e.g by adding many vertices to emulate a smooth curve). A workaround could be adding a SVG element of a rounded hexagon as an overlay :root { --hexfront: url("data:image/svg+xml, <path fill='none' stroke='white' stroke-width='3' transform='scale(0.75)' transform-origin='50%' d='M38.97 2.5q4.33-2.5 8.66 0l34.64 20q4.33 2.5 4.33 7.5l0 40q0 5-4.33 7.5l-34.64 20q-4.33 2.5-8.66 0l-34.64-20q-4.33-2.5-4.33-7.5l0-40q0-5 4.33-7.5l34.64-20z'/> "); } .hexagon { width: 200px; display: inline-block; margin: 0 5px; line-height: 0; filter: url("#goo"); } img { aspect-ratio: 1/1.15; width: 100%; height: 100%; } .mask { position: relative; display: block; clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%); } .mask:after { content: ""; display: block; position: absolute; inset: 0%; height: 100%; width: 100%; background-image: var(--hexfront); } SVG Overlay <path fill='none' stroke='black' stroke-width='3' transform='scale(0.75)' transform-origin='50%' d='M38.97 2.5q4.33-2.5 8.66 0l34.64 20q4.33 2.5 4.33 7.5l0 40q0 5-4.33 7.5l-34.64 20q-4.33 2.5-8.66 0l-34.64-20q-4.33-2.5-4.33-7.5l0-40q0-5 4.33-7.5l34.64-20z'/> <feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" /> <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo" /> <feComposite in="SourceGraphic" in2="goo" operator="atop" /> I've created the hex path with this customized version of Varun Vachhar's "SVG Polygon Generator" (no support for rounded corners). Replace CSS-clip path with a mask When we already have a "proper" <path> element we can as well replace the filtered hexagon with a <mask> to avoid some cross-browser (... safari) issues related to the goo filter. :root{ --mask : url("data:image/svg+xml, <path id='hex' d='M38.97 2.5q4.33-2.5 8.66 0l34.64 20q4.33 2.5 4.33 7.5l0 40q0 5-4.33 7.5l-34.64 20q-4.33 2.5-8.66 0l-34.64-20q-4.33-2.5-4.33-7.5l…
upvote count: 2
accepted answer of: http://stackoverflow.com/q/78930262
type: AcceptedAnswer
score: 2

http://stackoverflow.com/a/78997611
score: 1
answers question: http://stackoverflow.com/q/78997521
type: AcceptedAnswer
accepted answer of: http://stackoverflow.com/q/78997521
downvote count: 0
type: Answer
has comment: http://stackoverflow.com/comment/139293736
upvote count: 1
has body: You already have the image so use it as a mask: img { mask: url(https://i.sstatic.net/cWfRcqyg.png) center/contain no-repeat; } body { background: pink; } &lt;img src="https://picsum.photos/id/114/300/300"&gt; I would edit the image to make it fully black but it doesn't really matter as long as you have the transparent/non-transparent parts.

http://stackoverflow.com/comment/139135568
score: 1
type: Comment
has text: I'd hazard a guess that it's because you have applied the `position: absolute` and `z-index: 10` rules to the dialog, causing it to always be displayed on top of everything, no matter what. Try commenting out all the styling rules you've applied to the dialog box and let the default HTML styling rules show/hide the dialog
type: QuestionComment
comment on: http://stackoverflow.com/q/78914728

http://stackoverflow.com/comment/139332194
type: Comment
comment on: http://stackoverflow.com/q/79021456
type: QuestionComment
score: 1
has text: Please [edit] and change the snippet I made into a [mcve]

http://stackoverflow.com/a/78941783
upvote count: 2
type: Answer
score: 2
has comment: http://stackoverflow.com/comment/139185792
has comment: http://stackoverflow.com/comment/139186615
answers question: http://stackoverflow.com/q/78941752
has comment: http://stackoverflow.com/comment/139185730
accepted answer of: http://stackoverflow.com/q/78941752
downvote count: 0
has body: Without changing your current layout, it can be fixed by adding the z-index property on the .menu-toggle. .menu-toggle { z-index: 50; } Old JSFiddle Demo Update "use strict"; // Hamburger navigation const menuToggle = document.querySelector(".menu-toggle"); const nav = menuToggle.parentElement; menuToggle.addEventListener("click", event => { event.preventDefault(); nav.classList.toggle("open"); }); :root { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } body { margin: 0; padding: 0; } .grid-container { display: grid; grid-gap: 10px; grid-template-areas: "header" "nav"; } header { grid-area: header; } .nav { grid-area: nav; position: relative; display: flex; flex-direction: column; align-items: flex-end; } .menu-toggle { width: 50px; height: 50px; cursor: pointer; position: relative; z-index: 100; } .hamburger, .hamburger::before, .hamburger::after { position: absolute; content: ""; height: 3px; width: 30px; background: #0c0c0c; border-radius: 0.5626em; transition: all 0.4s ease-in-out; } .hamburger { top: 50%; left: 50%; transform: translate(-50%, -50%); } .hamburger::before { top: -8px; } .hamburger::after { top: 8px; } .nav.open .hamburger { background: rgba(0, 0, 0, 0); } .nav.open .hamburger::before { top: 0; transform: rotate(45deg); } .nav.open .hamburger::after { top: 0; transform: rotate(135deg); } .menu-dropdown { position: absolute; top: 100%; right: 0; width: 100%; background: #fff; overflow: hidden; max-height: 0; transition: max-height 0.6s ease-in-out; } .nav-menu { white-space: nowrap; list-style: none; padding: 0; margin: 0; } .nav-menu > li + li { margin-top: 0; border-top: 1px solid #ccc; } .nav-menu > li > a { display: block; font-size: 1.3rem; padding: 0.8em 0.5em; text-decoration: none; text-transform: uppercase; } .nav.open .menu-dropdown { max-height: 300px; } @media (min-width: 52em) { .grid-container { grid-template-columns: minmax(300px, 800px); justify-content: center; } .tags { grid-template-columns: repeat(3, 1f…
has comment: http://stackoverflow.com/comment/139185920
type: AcceptedAnswer
has comment: http://stackoverflow.com/comment/139185852

http://stackoverflow.com/a/78962197
type: AcceptedAnswer
has comment: http://stackoverflow.com/comment/139223208
score: -3
type: Answer
upvote count: 1
has body: Cause more ID selectors with same name are not semantic. Use: Using nth-child: HTML: text text text CSS: #container .box(nth-child).... or #container div(nth-child)....
downvote count: 4
accepted answer of: http://stackoverflow.com/q/78962162
has comment: http://stackoverflow.com/comment/139223110
has comment: http://stackoverflow.com/comment/139223365
has comment: http://stackoverflow.com/comment/139223196
has comment: http://stackoverflow.com/comment/139223124
has comment: http://stackoverflow.com/comment/139223130
has comment: http://stackoverflow.com/comment/139223383
has comment: http://stackoverflow.com/comment/139223354
has comment: http://stackoverflow.com/comment/139223255
has comment: http://stackoverflow.com/comment/139223325
answers question: http://stackoverflow.com/q/78962162

http://stackoverflow.com/q/78975340
has title: Why is my order of transformation applied affecting the way my code behaves?
has comment: http://stackoverflow.com/comment/139248662
type: Question
answer count: 1
tagged with: http://stackoverflow.com/tag/html
score: 0
tagged with: javascript
has body: I created this simple cursor for fun, it's a circle div that follows the mouse with some bounciness (spring and damping). I also wanted it to stretch and squeeze based on the velocity of the mouse so I added that as well, and both works. Now I also added rotation based on the velocity direction of the mouse, now that works too (individually). however when I put them all together it doesn't work as expected, for example: if I put the final transform like so : circle.style.transform = `${translateElement} ${scaleElement} ${rotateElement}`; everything technically works, but the stretch and squeeze is applied on the same axis after the rotation which means it's always squeezing from top to bottom (visually) and stretching from right to left (again visually). So it doesn't look like it's being stretched towards the mouse, which was the desired effect I was going for now if I put the transform like this : circle.style.transform = `${translateElement} ${rotateElement} ${scaleElement}`; the circle div does not move or scale at all (basically the code is not working without console error), Can anyone help me figure out why? const circle = document.querySelector('.circle'); const mousePos = { x: 0, y: 0 }; const prevMousePos = { x: 0, y: 0 }; let mouseSpeed = 0; const circlePos = { x: 0, y: 0 }; const circleVelocity = { x: 0, y: 0 }; const spring = 0.025; const damping = 0.845; const maxSqueeze = 0.5; const maxStretch = 1.5; const maxMouseSpeed = 5; let lowSpeedStartTime = 0; let lowSpeedDuration = 0; const lowSpeedThreshold = 0.5; // 0.5 seconds document.addEventListener('mousemove', (e) => { const currentMousePos = { x: e.clientX, y: e.clientY }; const dx = currentMousePos.x - prevMousePos.x; const dy = currentMousePos.y - prevMousePos.y; // Calculate the speed as the magnitude of the velocity vector mouseSpeed = Math.sqrt(dx * dx + dy * dy); // Update previous mouse position prevMousePos.x = currentMousePos.x; prevMousePos.y = currentMousePos.y; // Update the current mouse…
has comment: http://stackoverflow.com/comment/139249357
duplicate of: http://stackoverflow.com/q/53671968
has comment: http://stackoverflow.com/comment/139250850
has answer: http://stackoverflow.com/a/78975360
tagged with: css
has comment: http://stackoverflow.com/comment/139249333
has comment: http://stackoverflow.com/comment/139249732
linked to: http://stackoverflow.com/q/53671968
type: UnansweredQuestion

http://stackoverflow.com/q/79026458
has answer: http://stackoverflow.com/a/79027100
has answer: http://stackoverflow.com/a/79030977
tagged with: http://stackoverflow.com/tag/html
type: Question
has comment: http://stackoverflow.com/comment/139345497
type: AnsweredQuestion
has body: I have two SVG files, they are a transparent outlined oval and a colored oval without an outline. I want to cover the colored oval completely with the transparent outlined oval, but it keeps on not aligning with the sides of the oval. Here's my CSS code and the result: .character { position: relative; width: 200px; /* Adjust the size as needed */ height: 400px; /* Adjust the size as needed */ } .part { position: absolute; } .head { animation: float 2s ease-in-out infinite; } .headcolor { z-index: 1; margin-top: -200px; position: relative; top: 0; left: 0; } .headoutline { z-index: 2; position: relative; top: 0; left: 0; width: 100%; height: 100%; } @keyframes float { 0%, 100% { transform: translateY(0); /* Starting position */ } 50% { transform: translateY(-5px); /* Float up by 10 pixels */ } } Upon changing the margin-top of .headcolor to -500px, nothing changes: And here is what my result is supposed to look like, my two svg files, and my HTML code. https://svgshare.com/i/1Aqg.svg https://svgshare.com/i/1ArY.svg Character Assembly UPDATE 9/26: I edited this part of the CSS: .headoutline { z-index: 2; position: relative; margin width: 100%; height: 100%; } And now the svgs are closer. But the outline still won't cover the whole colored oval...
tagged with: http://stackoverflow.com/tag/svg
score: 0
upvote count: 1
possible better answer: http://stackoverflow.com/a/79027100
answer count: 2
has title: Putting an object in front of another one (and covering the whole other object)
accepted answer: http://stackoverflow.com/a/79030977
tagged with: css
has comment: http://stackoverflow.com/comment/139341889
downvote count: 1
favorite count: 0

http://stackoverflow.com/a/79060053
accepted answer of: http://stackoverflow.com/q/79059436
has body: There are some ways to achieve this. First of all, did you declare this styling inside tag of the component? If yes, then add scoped to it; (scoped styles apply stylings only to the current component) To make sure it will target only this q-select tag, the best solution is to add a custom class to the QSelect tag <q-select class="custom-selector" .....> , and then inside or your styling file, add: .custom-selector { //your code here }
type: AcceptedAnswer
type: Answer
score: 0
answers question: http://stackoverflow.com/q/79059436

http://stackoverflow.com/comment/139405365
type: AnswerComment
comment on: http://stackoverflow.com/a/79058183
score: 1
type: Comment
has text: Note your update still is verbose: **load CSS from lightDOM -> create a new StyleSheet -> add CSS to it -> add new StyleSheet to shadowDOM** That whole adoptedstylesheet is verbose because you do **not** use its _link_ magical powers. Might as well do: **Move from lightDOM to shadowDOM** with ``.append()``

http://stackoverflow.com/q/78940746
accepted answer: http://stackoverflow.com/a/78940897
has answer: http://stackoverflow.com/a/78940776
answer count: 2
tagged with: css
upvote count: 1
possible better answer: http://stackoverflow.com/a/78940776
tagged with: validation
has comment: http://stackoverflow.com/comment/139183789
favorite count: 0
has title: CSS 2.2: Where to validate it? And why W3C validator provides an option to validate 2.1 but not 2.2?
type: Question
downvote count: 1
type: AnsweredQuestion
has comment: http://stackoverflow.com/comment/139183802
score: 0
has answer: http://stackoverflow.com/a/78940897
has body: There are two questions here. I hope at least the second one is not off-topic for Stack Overflow. The second question is very short: Where can I validate CSS 2.2? The first question is longer. Could anybody explain why CSS 2.2, compared to 2.1, feels like a "second-class citizen"? For example, the Wikipedia article about CSS mentions CSS 2.1 fifteen times, whereas CSS 2.2 only once https://css-validator.org/ and https://jigsaw.w3.org/css-validator/ provides an option to validate 2.1, but not 2.2 According to this: https://github.com/w3c/csswg-drafts/issues/2008 discussion, CSS 2.2 is merely 2.1 with incorporated errata, but this doesn't answer why 2.2 didn't gain any traceable, on the Web, mentions.

http://stackoverflow.com/a/79008657
has body: You were so close. To make it work you just needed to add position: relative to .wrap. For the psuedo-element to be included in the stacking context its parent element must be positioned, then the only z-index you need is a -1 for the pseudo-element. (I changed the height and width of the pseudo-element to px instead of % for even "border" thickness all around, and I also removed some unnecessary CSS properties.) .knap { width: 250px; height: 50px; border-radius: 200px; background-color: #161a20; color: white; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; font-size: 17px; position: relative; display: flex; justify-content: center; align-items: center; } .knap::after { content: ""; position: absolute; height: 60px; width: 260px; border-radius: 200px; background-image: linear-gradient(to bottom left, #008cff, #e100ff); z-index: -1; } .wrap { display: flex; justify-content: center; align-items: center; position: relative; } #b1 { margin-top: 50px; } About me
answers question: http://stackoverflow.com/q/79008567
type: Answer
score: 0

http://stackoverflow.com/comment/139174008
type: QuestionComment
has text: Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/) using the `<>` icon. See [**How to create a Minimal, Reproducible Example**](http://stackoverflow.com/help/reprex)
type: Comment
comment on: http://stackoverflow.com/q/78935425
score: 0

http://stackoverflow.com/a/78986079
score: 0
answers question: http://stackoverflow.com/q/78985952
has body: You can do by validating option value selected for the siblings. For this HTML structure should have the select dropdown and the questions elements/HTML tags on same level, as in they should be siblings. Check below: label { display: block; margin: 40px 0 10px; } #dlc { display: none; } .dlc:has(option[value="yes"]:checked) ~ #dlc { display: block; } Select One Yes No New Question Hope this helps, using JUST CSS.
type: Answer

http://stackoverflow.com/q/78975874
downvote count: 0
tagged with: javascript
has comment: http://stackoverflow.com/comment/139248806
has body: I'm building an HTML/CSS/JavaScript + jQuery web-application. I have a page that calls an API, which returns a string with HTML code. Here's an example: // Data returned by server data = { text: "Here is some example text followed by line breaks <br", }; I need to implement live typing animation to display the data. I've got that working (see code below), but when there's an HTML tag such as or , the < characters briefly flash on the screen before the element is properly displayed. Is there some kind of decoding function I need to run before calling the function to display the text? // The text we want to animate let text = "Here is some example text followed by a line break and another line break as well as some bold text."; // The current position of the animation let index = 0; // Function to trigger the live typing animation function typingAnimation(id) { setTimeout(() => { index++; updateText(id); if (index < text.length) { typingAnimation(id); } }, 50); } // Function to update the text function updateText(id) { // Get the element with our id const typing = document.getElementById(id); // Split our text into lines based on newline characters or tags const lines = text.substring(0, index).split(/\n| /); // Check if our element exists before updating it if (typing == null) { return; } //------> EDIT:: Attach click listener for text div so the user can click to skip animation $("#skipAnimationBtn").on("click", () => { index = text.length; }); // Update the element with our new lines typing.innerHTML = lines .map((line, index) => { // Check if this is the last line in our text const isLastLine = index === lines.length - 1; // Add a line break if this isn't the last line of text const lineBreak = isLastLine ? "" : " "; // Return our line of text with or without a line break return `${line}${lineBreak}`; }) .join(""); } typingAnimation("typing-animation"); #parent { display: block; } Click to Skip Animation
has comment: http://stackoverflow.com/comment/139263013
upvote count: 1
tagged with: jquery
answer count: 2
tagged with: css
accepted answer: http://stackoverflow.com/a/78976989
possible better answer: http://stackoverflow.com/a/78975924
score: 1
favorite count: 0
type: Question
tagged with: animation
has answer: http://stackoverflow.com/a/78975924
tagged with: http://stackoverflow.com/tag/html
has title: Javascript live typing animation that handles HTML tags
has answer: http://stackoverflow.com/a/78976989
type: AnsweredQuestion

http://stackoverflow.com/comment/139258621
comment on: http://stackoverflow.com/q/78981277
type: QuestionComment
has text: Unfortunately not, as I adds a mrgin-bottom below the header element and not below the SVG:. Tus removing the class mb-3 still results in the same phenomenon.
type: Comment
score: 0

textfield
tags question: http://stackoverflow.com/q/78946409
type: Tag
tags question: http://stackoverflow.com/q/78938339
tag name: textfield
tags question: http://stackoverflow.com/q/79546019

http://stackoverflow.com/comment/139343459
score: 0
comment on: http://stackoverflow.com/q/79027340
type: QuestionComment
has text: Indeed, inches, cm or points would be better than `px` - https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units
type: Comment

http://stackoverflow.com/comment/139317889
type: QuestionComment
comment on: http://stackoverflow.com/q/79013255
type: Comment
score: 0
has text: here on [github issue](https://github.com/t1m0n/air-datepicker/issues/8) describing an attempt at showing multiple calendars based on configuration. Things said there are pretty confusing and don't seem aligned with the current release. As far as I can say, to do what you are aiming to, you need to have 2 pickers and than handle their events so that you can deal with showing a custom range overriding the automatic behaviour and at the same time also override the whole logic filling the input field with the selected range.

http://stackoverflow.com/a/79049248
downvote count: 0
type: Answer
upvote count: 2
has body: The li::before selector targets too many elements within your document. You could wrap your list with custom bullets inside a div with a dedicated class, e.g. ::: {.myList} * List item A * List item B ::: and within the css you only apply the style on children of this class: .myList > ul > li::before { /* styles */ } Complete example: quarto.qmd --- title: "Line Feed No Bueno" execute: echo: false warning: false format: html: css: mystyle.css toc: true --- ```{r} library(knitr) library(rmarkdown) ``` ::: {.myList} * List item A * List item B ::: # References This document was generated using the R[^1] software environment and employs rmarkdown[^2] for formatting. [^1]: R Core Team (2024). _R: A Language and Environment for Statistical Computing_. R Foundation for Statistical Computing, Vienna, Austria. URL <https://www.R-project.org/>. [^2]: JJ Allaire, et al (2024). _rmarkdown: Dynamic Documents for R_. R package version 2.27. <https://github.com/rstudio/rmarkdown>. mystyle.css ul { list-style: none; /* Remove list bullets */ padding: 0; margin: 0; padding-bottom: 0px; font-size: 11pt; font-family: 'Aktiv Grotesk'; } li { padding-left: 0px; padding-bottom: 0px; padding-top: 0px; font-size: 11pt; font-family: 'Aktiv Grotesk'; } .myList > ul > li::before { content: "/"; /* Insert content that looks like bullets */ padding-right: 8px; padding-top: 0px; padding-bottom: 0px; color: red; /* Or a color you prefer */ }
answers question: http://stackoverflow.com/q/79048771
accepted answer of: http://stackoverflow.com/q/79048771
type: AcceptedAnswer
score: 2

http://stackoverflow.com/comment/139176704
type: Comment
has text: As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer).
comment on: http://stackoverflow.com/a/78922079
score: 0
type: AnswerComment

http://stackoverflow.com/q/78923550
has comment: http://stackoverflow.com/comment/139152195
has title: How to prevent text selection from showing up when it's scrolled out of view?
type: UnansweredQuestion
score: 1
favorite count: 0
has body: On IOS, I noticed that the selection box shows up when text is selected, even when the selection is scrolled out of view. Is there a way to prevent that? This screenshot was achieved with a setup like this: #scrollable { background: #EEE; width: 200px; height: 200px; overflow: scroll; } &lt;div id="scrollable"&gt; abcdefb&lt;br /&gt; abcdefb&lt;br /&gt; abcdefb&lt;br /&gt; abcdefb&lt;br /&gt;abcdefb&lt;br /&gt; abcdefb&lt;br /&gt; abcdefb&lt;br /&gt;abcdefb&lt;br /&gt; abcdefb&lt;br /&gt; abcdefb&lt;br /&gt; abcdefb&lt;br /&gt; abcdefb&lt;br /&gt; abcdefb&lt;br /&gt; abcdefb&lt;br /&gt; abcdefb&lt;br /&gt; abcdefb&lt;br /&gt; abcdefb&lt;br /&gt; abcdefb&lt;br /&gt; abcdefb&lt;br /&gt; abcdefb&lt;br /&gt; abcdefb&lt;br /&gt; &lt;/div&gt; I've tried adding something like #scrollable::selection { z-index: 0; } but that doesn't work
has comment: http://stackoverflow.com/comment/139153611
has comment: http://stackoverflow.com/comment/139152015
has comment: http://stackoverflow.com/comment/139153474
type: Question
has comment: http://stackoverflow.com/comment/139155216
tagged with: http://stackoverflow.com/tag/html
downvote count: 0
has comment: http://stackoverflow.com/comment/139152330
upvote count: 1
answer count: 0
tagged with: css

http://stackoverflow.com/q/78967491
has comment: http://stackoverflow.com/comment/139236975
has body: The code is a react component with tailwind. The first image is the one of the design, it happens to have a rounded edge for that reason I can't use box-shadow, so I try with filter: drop-shadow but the drawback is that it also extends into the component, this would not be a problem but the style of the card I have is semi-transparent because it has a linear background to 0% so I need something that can do a drop-shadow but from the edge of the element outwards, Thanks for reading <3 <Image className="w-[6.25vw] h-[6.25vw]" width={120} height={120} src={'/streaming_perfil.png'}/> Streaming ```
has title: I'm looking for a way to make the dropshadow visible only from the edge to the outside of a div, since I have a semi-transparent background
tagged with: next.js
has comment: http://stackoverflow.com/comment/139235178
tagged with: css
type: Question
answer count: 1
type: AnsweredQuestion
tagged with: http://stackoverflow.com/tag/html
has answer: http://stackoverflow.com/a/78985551
accepted answer: http://stackoverflow.com/a/78985551
tagged with: tailwind-css
tagged with: reactjs
score: 0

http://stackoverflow.com/q/78966204
tagged with: http://stackoverflow.com/tag/html
type: Question
score: 0
tagged with: freemarker
tagged with: printing
tagged with: css
answer count: 0
has body: I have been beating my head into the wall trying to get this form to format correctly when printed. The problem I have is that when I try to tell it where to insert page breaks manually, it still does things like breaking in the middle of tables as well as inserting blank pages randomly. I am sure it must be something simple i am missing but after a week of tinkering- I am finally reaching out to the community. first off- I am only a novice programer and my HTML CSS skills are pretty limited. I have tried adding the following style with almost no effect. .page-break { break-after: always; break-before: always; margin-top: 40px; /* Optional: to add some space before the new page content starts */ } /* Table handling */ table { page-break-inside: auto; border-collapse: collapse; /* Ensure proper table rendering */ } tr { break-inside: avoid; /* Avoid breaking inside rows */ break-after: auto; /* Allow break after rows */ } /* Handling dividers and spacing */ hr { margin: 0; padding: 0; page-break-after: avoid; } .divider { margin: 0; padding: 0; break-after: avoid; } /* General page break avoidance for divs */ div { break-inside: avoid; break-after: auto; } } And here is the full HTML in it's current state where I am now trying to use inline style adding divs specifically to attempt a forced page break... &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt; &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt; &lt;title&gt;Termite Inspection Report&lt;/title&gt; &lt;style&gt; /* Centering the entire content of the body */ body { display: flex; flex-direction: column; /* Vertically centers the content */ align-items: center; /* Horizontally centers the content */ min-height: 100vh; /* Ensures the content is centered within the full viewport height */ margin: 0; padding: 20px; font-family: Arial, sans-serif; background-color: #f9f9f9; text-align: center; /* Centers text insi…
has title: CSS for Page break when generating a form using FTL
type: UnansweredQuestion
tagged with: http://stackoverflow.com/tag/pdf

http://stackoverflow.com/comment/139147454
type: AnswerComment
has text: Then add more codes. Think more about planning. Then I can help you more. @braxton
type: Comment
comment on: http://stackoverflow.com/a/78920877
score: 0

http://stackoverflow.com/comment/139225069
comment on: http://stackoverflow.com/a/78945844
type: Comment
type: AnswerComment
has text: Instead of overflow-wrap: anywhere; it's better to use overflow-wrap: break-word; maybe. @SaigalAmatya you can use break-word for export doc, hopefully it will work for your issue.
score: 0

http://stackoverflow.com/q/78941752
has answer: http://stackoverflow.com/a/78941789
has body: I created a simple hamburger menu. The base layout of the website needs to use grid. The menu works fine, but when you reduce the browser window size and the hamburger icon appears, clicking on it causes the menu to overlap the bottom half of the hamburger icon. "use strict"; // Hamburger navigation const menuToggle = document.querySelector(".menu-toggle"); const nav = menuToggle.parentElement; menuToggle.addEventListener("click", event => { event.preventDefault(); nav.classList.toggle("open"); }); :root { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } body { margin: 0; padding: 0; } .grid-container { display: grid; grid-gap: 10px; grid-template-areas: "header" "nav" } header { grid-area: header; } .nav { grid-area: nav; position: relative; } /* Hamburger icon */ .menu-toggle { position: absolute; right: 0; top: 50%; width: 80px; height: 80px; cursor: pointer; transform: translateY(-50%); } .hamburger { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .hamburger, .hamburger::before, .hamburger::after { position: absolute; content: ""; height: 3px; width: 30px; background: #0c0c0c; border-radius: 0.5626em; transition: all .4s ease-in-out; } .hamburger::before { top: -8px; } .hamburger::after { top: 8px; } /* Hamburger animation */ .nav.open .hamburger { background: rgba(0, 0, 0, 0); } .nav.open .hamburger::before { top: 0; transform: rotate(45deg); } .nav.open .hamburger::after { top: 0; transform: rotate(135deg); } /* Dropdown */ .menu-dropdown { position: absolute; max-height: 0; top: 100%; width: 100%; background: #fff; overflow: hidden; transition: max-height 0.6s ease-in-out; } .nav-menu { white-space: nowrap; list-style: none; padding: 0; margin: 0; } .nav-menu > li + li { margin-top: 0; border-top: 1px solid #ccc; } .nav-menu > li > a { display: block; font-size: 1.3rem; padding: .8em .5em; text-decoration: none; text-transform: uppercase; } .nav.open .menu-dropdown { max-height: 100vh; } @media (min-width…
accepted answer: http://stackoverflow.com/a/78941783
type: Question
type: AnsweredQuestion
possible better answer: http://stackoverflow.com/a/78941789
has title: Why is the menu overlapping the hamburger icon?
score: 0
has answer: http://stackoverflow.com/a/78941783
answer count: 3
tagged with: css
has answer: http://stackoverflow.com/a/78941800

http://stackoverflow.com/a/79049354
type: AcceptedAnswer
type: Answer
score: 0
answers question: http://stackoverflow.com/q/79027165
accepted answer of: http://stackoverflow.com/q/79027165
has body: Thanks @Flacuchentxox After few attempts finally I got it the way I wanted @media print { overflow: visible; position: absolute; transform-origin: top left; @media (orientation: portrait) { transform: scale(0.7); } }

http://stackoverflow.com/a/78976656
has body: I don't know if you're confusing fr for percentages, but from the spec: &lt;flex&gt; values between 0fr and 1fr have a somewhat special behavior: when the sum of the flex factors is less than 1, they will take up less than 100% of the leftover space. A track’s &lt;flex&gt; value is effectively a request for some proportion of the leftover space, with 1fr meaning “100% of the leftover space”; then if the tracks in that axis are requesting more than 100% in total, the requests are rebalanced to keep the same ratio but use up exactly 100% of it. However, if the tracks request less than the full amount (such as three tracks that are each .25fr) then they’ll each get exactly what they request (25% of the leftover space to each, with the final 25% left unfilled). By default, your grid div is 0px high. Its contents then push it to 100px height. And then you request 50% of that. So that's what you get.
has comment: http://stackoverflow.com/comment/139250219
has comment: http://stackoverflow.com/comment/139251030
downvote count: 1
type: Answer
upvote count: 0
score: -1
has comment: http://stackoverflow.com/comment/139251101
answers question: http://stackoverflow.com/q/78976538
has comment: http://stackoverflow.com/comment/139250177

http://stackoverflow.com/comment/139348789
type: QuestionComment
has text: Can you add the possibility of a color background to the td into your example so we have the more general picture? Plus the cross always being black may be helpful.
score: 0
comment on: http://stackoverflow.com/q/79030490
type: Comment

http://stackoverflow.com/comment/139268036
type: Comment
comment on: http://stackoverflow.com/a/78986440
type: AnswerComment
score: 1
has text: @AlvaroMontoro you are correct! With a quick glimpse I thought there was used additional HTML elements to group the 3rd, 4th, 5th items! I'll give it a try and report back!

http://stackoverflow.com/comment/139234606
type: QuestionComment
score: 1
type: Comment
comment on: http://stackoverflow.com/q/78968270
has text: Thanks for the suggestion. I added the screenshots as well. @KIKOSoftware

http://stackoverflow.com/comment/139371610
type: Comment
comment on: http://stackoverflow.com/a/79034068
type: AnswerComment
score: 1
has text: Oh, I see. Yes, the reason is that you have not assigned the variable to anything as you said. A workaround could be to assign it to a dummy element and read the CSS from that.

http://stackoverflow.com/q/78986745
type: UnansweredQuestion
type: Question
answer count: 1
tagged with: reactjs
score: 0
has answer: http://stackoverflow.com/a/78989532
tagged with: css
has body: I have a bootstrap navbar and have placed a coloured div above it. Both of these are set to width:100%. However, when I test the page at different screen widths, the navbar and div will fall below 100% width when screen width <887px and >720px screen width < 464px I can't figure out why this happens at these particular widths. I had a similar issue with a different container, and was able to fix it by using media queries to set the width to 100% at particular widths, but that's not working here. That is, code like what's below isn't working. @media screen and (min-width: 720px) and (max-width: 887px) { display: grid; width:100%;} ; I've also tried using multiple media queries to set the width in pixels. Code similar to what's below doesn't work. @media screen and (max-width: 887px) { display: grid; width:887px;} @media screen and (max-width: 886px) { display: grid; width:886px;} @media screen and (max-width: 885px) { display: grid; width:885px;} @media screen and (max-width: 884px) { display: grid; width:884px;} Does anyone know why my navbar and div isn't always occupying 100% of the screen width? This is the code for it. import React, { useEffect } from 'react'; import { Link } from 'react-router-dom'; import Example from './Modal'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faPhone } from '@fortawesome/free-solid-svg-icons'; import { useGlobals } from '../../Globals'; import "./BNavbar.css"; import logo from "../../images/MJNNavbarlogo.png"; import styled from 'styled-components'; const Parent = styled.div` width:100vw; @media screen and (max-width: 887px) { display: grid; width:100%;} @media screen and (max-width: 464px) { display: grid; width:100%;} `; const Banner = styled.div` display:grid; height: 80px; width: 100%; width:100vw; background: rgba(255, 0, 0, 0.5); /* Red with 50% opacity */ @media screen and (max-width: 887px) { display: grid; width:100%;} @media screen and (max-width: 464px) { display: grid; width:100%;} `; con…
has comment: http://stackoverflow.com/comment/139271428
has comment: http://stackoverflow.com/comment/139268356
has title: Why does my container shrink to <100% width at random points?

http://stackoverflow.com/q/78997366
downvote count: 0
tagged with: tailwind-css
tagged with: reactjs
has body: I'm experiencing an issue with Tailwind CSS in my Next.js 14 project using the App Router. After nav to other route and come back to home page and do a hard refresh of the browser, the Tailwind styles are not being applied to my pages. tried to make the page client side by adding use client on top the page the issue still the same Next.js version: 14.2.11 Tailwind CSS version: 3.4.12 Using App Router: Yes Node.js version:20.10.0 here is my code files // src/app/page.tsx 'use client' import Footer from "@/components/footer/Footer"; import Header from "@/components/header/Header"; import { GET_All_Courses } from "@/server/API"; import GCard from "@/components/Card/GCard"; import Link from "next/link"; import { COURSES } from "@/server/models/course"; async function CourseList() { try { const courses = await GET_All_Courses(); if (!courses || courses.length === 0) { return No courses found ; } return ( {courses.map((course: COURSES) => ( <GCard course={course} /> ))} ); } catch (error) { console.error('Error in CourseList:', error); return Error loading courses. Please try again later. ; } } export default async function Home() { return ( <> <CourseList /> </> ); } // src/app/layout.tsx import "./globals.css"; import { Providers } from "@/context/providers"; import type { Metadata } from "next"; import { Almarai } from "next/font/google"; import { Suspense } from "react"; import Loading from "./loading"; const almarai = Almarai({ subsets: ['arabic'], weight: ['300', '400', '700', '800'], }); export const metadata: Metadata = { title: "أكادميه بناء التعليميه", description: "أكادميه بناء التعليميه", }; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( <Suspense fallback={<Loading />}> {children} </Suspense> ); } // tailwindcss.config.js import type { Config } from "tailwindcss"; const config: Config = { content: [ // "./src/pages/**/*.{js,ts,jsx,tsx,mdx}", "./src/components/**/*.{js,ts,jsx,tsx,mdx}", "./src/app/**/*.{j…
tagged with: next.js
tagged with: css
upvote count: 2
answer count: 0
type: UnansweredQuestion
tagged with: app-router
favorite count: 0
type: Question
score: 2
has title: Tailwind CSS styles not loading after hard refresh in Next.js 14 with App Router

http://stackoverflow.com/a/79052824
answers question: http://stackoverflow.com/q/79000858
type: Answer
score: 0

http://stackoverflow.com/comment/139318474
type: AnswerComment
comment on: http://stackoverflow.com/a/79013936
type: Comment
has text: Sorry, I made a mistake, it's word-break:break-all;
score: 0

http://stackoverflow.com/a/79033554
accepted answer of: http://stackoverflow.com/q/79033531
downvote count: 0
type: Answer
has comment: http://stackoverflow.com/comment/139354117
has comment: http://stackoverflow.com/comment/139356573
has comment: http://stackoverflow.com/comment/139354082
has comment: http://stackoverflow.com/comment/139358007
score: 1
has comment: http://stackoverflow.com/comment/139354436
upvote count: 1
has comment: http://stackoverflow.com/comment/139358030
has comment: http://stackoverflow.com/comment/139358064
has body: Here is a more efficient code that returns the number of toggled active cells cache the regular expression so it is only created once cache the text so it is only read once use toggleClass to set the class instead of addClass so we can use the result of the match use filter so we do not have to run twice Use jQuery UI to show the modal const re1 = /^[0-9][A-Z]/; const re2 = /^c[0-9]/; // // Create the dialog once and keep it hidden initially const $dialog = $(' ').dialog({ autoOpen: false, // Do not open immediately title: 'Active Element Count', modal: true, buttons: { Ok: function() { $(this).dialog('close'); } } }); $("#show").on('click', () => { const actives = $('td').filter(function() { const text = $(this).text(); const makeActive = text.match(re1) !== null; $(this).toggleClass('active', makeActive); $(this).toggleClass('null', text.match(re2) !== null); return makeActive; }).length; // Update the dialog content and open it $dialog.html(`Active elements: ${actives}`); $dialog.dialog('open'); }); 1A c1 1B Something else c2 Here it is not at the start 1A c3 Click for # active
has comment: http://stackoverflow.com/comment/139356044
type: AcceptedAnswer
answers question: http://stackoverflow.com/q/79033531

http://stackoverflow.com/comment/139358280
has text: If the link covers the entirety of the ` `, then when a user clicks to expand the ` `, they will be taken to the `<Link>`. This doesn't seem optimal if the user only wants to expand the submenu and not go to `<Link>`.
comment on: http://stackoverflow.com/q/79035771
type: QuestionComment
score: 1
type: Comment

http://stackoverflow.com/q/79040690
type: Question
linked to: http://stackoverflow.com/q/12991164
tagged with: http://stackoverflow.com/tag/html
tagged with: css-animations
tagged with: animation
has title: How do I end all animations on their last frame?
duplicate of: http://stackoverflow.com/q/12991164
has body: I've been struggling to get this button to start all my animations at the same time. After a lot of trial and error, I managed to get it working. However, when I watched how it played out, my elements weren't aligned, and the animation didn't stop when I added 'animation-fill-mode: forwards'. Struggles: Align the image and loading text in the center and position the image above the loading text. Make the button onclick trigger the image and loading text, starting all animations until you reach the chapter selection. Resolve the annoying flickering of the chapter text. Ensure everything stops at the last frame instead of stopping at the first. Feel free to assist the worst coder on earth. <3 Alignment: I've tried various methods, including creating divs, using display flex and grids, employing position absolute, and every imaginable technique. However, whenever I manage to get one part working, it seems to make it worse at other parts of the code. Animation: Despite trying almost everything I could find online and reaching out to teachers and chatbots, no one seems to have a solution. I experimented with 'animation-fill-mode: forwards,' but it didn't yield the desired results. Unfortunately, that's pretty much the extent of my knowledge on the matter, my brain is very tiny. Chapter Text: I attempted to address the flickering issue when the chapter text fades in. Surprisingly, shortening the text to "Chap" instead of "Chapter" seemed to resolve the problem, first try. However, upon refreshing the page, the flickering returned, GRRRR. Start Button: I haven't given this issue as much love as the other issues. I tried using a solid black image with a z-index of -5 and an animation that set "0% = z-index: -5," "99% = z-index: -5," and "100% = z-index: 3." This approach failed, I decided to "Get the milk". https://www.youtube.com/watch?v=7kBien8OL0w <--- Menu music HappyErotisk <--- function ani() { //Get All var erotic = document.getElementById("erotic"); var loading = do…
score: 0
tagged with: javascript
has comment: http://stackoverflow.com/comment/139367501
answer count: 0
tagged with: css
type: UnansweredQuestion

http://stackoverflow.com/comment/139187176
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78938629
has text: Sure, that's done

http://stackoverflow.com/q/79008374
linked to: http://stackoverflow.com/q/44154783
type: UnansweredQuestion
tagged with: css
type: Question
duplicate of: http://stackoverflow.com/q/44154783
has title: z-index and stacking context confusing
score: 0
tagged with: clip-path
tagged with: http://stackoverflow.com/tag/html
answer count: 0
has body: I want to use clip-path to alter the look of my background color but no matter what I do it always comes up on top covering ALL of my content.I understand that something is creating another context inside but I don't know which one it is and why it doesn't stay on top of the header with z-index:0 and if this is becuase that the header is the parent of all the others,how can I set it up that way. header { background-color: var(--bg-color); clip-path: polygon(0 0, 0 100%, 100% 0); z-index: 0; position: relative; } .header-container { display: flex; z-index: 2; position: relative; font-family: "Playfair Display", serif; justify-content: center; max-width: 100%; } .img-container { object-fit: cover; position: relative; } .img-container img { width: 100%; height: 100%; } .bottom-center { position: absolute; bottom: 2%; right: 50%; color: white; font-size: 2.5rem; transform: translate(50%, -10%); } .header-main { display: grid; background-color: white; gap: 1rem; padding: 0 1rem; max-width: 500px; align-self: center; box-shadow: 0px 9px 45px -19px rgba(66, 68, 90, 1); } .icon-container { display: flex; justify-content: end; } .header-title { align-self: end; } .header-icons img { min-width: 30px; min-height: 30px; max-width: 30px; max-height: 30px; Author About me I tried to set up the background as the separate div but it also didn't work
tagged with: stacking-context

http://stackoverflow.com/a/79051465
accepted answer of: http://stackoverflow.com/q/79045280
type: Answer
has comment: http://stackoverflow.com/comment/139389385
downvote count: 0
upvote count: 1
has body: Change the layers' order, from back to front: #gradient-color #blob, using ::before and ::after as a huge black rectangle and a white circle, then mix-blend-mode: multiply to "see through" the white circle #blur const blob = document.getElementById("blob"); window.onpointermove = event => { const { clientX, clientY } = event; blob.animate({ left: `${clientX}px`, top: `${clientY}px` }, { duration: 2500, fill: "forwards" }); }; body { background-color: #222020; height: 100vh; margin: 0; overflow: hidden; position: relative; } #gradient-color { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(50% 123.47% at 50% 50%, #00ff94 0%, #720059 100%), linear-gradient(121.28deg, #669600 0%, #ff0000 100%), linear-gradient(360deg, #0029ff 0%, #8fff00 100%), radial-gradient(100% 164.72% at 100% 100%, #6100ff 0%, #00ff57 100%), radial-gradient(100% 148.07% at 0% 0%, #fff500 0%, #51d500 100%); background-blend-mode: screen, color-dodge, overlay, difference, normal; /*opacity: 0;*/ } #blob { width: 1px; height: 1px; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); overflow: visible; background-color: white; mix-blend-mode: multiply; } #blob::before { content: ""; display: block; width: 200vw; height: 200vh; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: #000; } #blob::after { content: ""; display: block; width: 34vmax; aspect-ratio: 1; border-radius: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: #fff; } #blur { height: 100%; width: 100%; position: fixed; backdrop-filter: blur(12vmax); }
answers question: http://stackoverflow.com/q/79045280
score: 1
type: AcceptedAnswer

http://stackoverflow.com/q/78925506
duplicate of: http://stackoverflow.com/q/967022
score: 0
answer count: 0
tagged with: css
tagged with: flexbox
type: UnansweredQuestion
has title: Is there a way to align a link containing an image and text so that the text is vertically aligned with the middle of the image?
linked to: http://stackoverflow.com/q/967022
has body: I am working on a portfolio site and encountered a small problem. I am attempting to create links that have a website logo and some text next to it for my various projects. Since the images are a bit larger than the text the text gets aligned with the bottom of the image. I have attempted using align-items: center from flexbox, but since the text is a part of the flex element that contains both the image and the text that just centers both components in the middle of the flex container leaving me with the same problem. What is the cleanest way of accomplishing what I am trying to achieve? Current result: HTML: Source Code Deployed Project CSS: aside { display: flex; align-items: center; gap: 20px; border: 1px solid black; /* Border added to help visualize the difference between image and text alignment */ } aside a { text-decoration: none; }
type: Question
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139155895

http://stackoverflow.com/q/78984963
has comment: http://stackoverflow.com/comment/139265329
tagged with: javascript
has comment: http://stackoverflow.com/comment/139268192
upvote count: 1
answer count: 2
has answer: http://stackoverflow.com/a/78986020
has comment: http://stackoverflow.com/comment/139265367
tagged with: css
has comment: http://stackoverflow.com/comment/139265823
possible better answer: http://stackoverflow.com/a/78986203
downvote count: 1
favorite count: 0
has comment: http://stackoverflow.com/comment/139265538
has comment: http://stackoverflow.com/comment/139265814
type: Question
tagged with: sticky
has title: How to find distance between top of element and top of viewable webpage
accepted answer: http://stackoverflow.com/a/78986020
type: AnsweredQuestion
tagged with: http://stackoverflow.com/tag/html
has body: I have an element that has position sticky and has the top property set to 30px. I want it so that when the element becomes stuck (so to say) It has a class of stuck added to it. I'm aware it can be done with intersectionObserver however I would like to know a way that I could do it in vanilla HTML, CSS or JS. The way I have thought of so far is to add the class once the elements distance from the top of the viewable webpage is 30px. When researching, I have come across code like this: var elDistanceToTop = window.pageYOffset + el.getBoundingClientRect().top Although this does do something, it doesn't do want I want. What it does is it finds the top of the element to the top of the window height. (Now at the time of writing this I am not sure if the window height is what it is called but I mean the bit of the webpage that you would get to if you scrolled up until you couldn't any more. Sometimes it is out of sight). Using this code, the value I get is always constant as the element is not moving up or down the page, it is only the viewport is moving down the page as you scroll down. Instead, the value that the function (or whatever) returns should change depending on where you have scrolled to. Before the 'stuck' position activates, the distance from the top should vary depending on where you scroll. But once you have hit its 'stuck' threshold the distance from the top should stay the same. I don't mind the solution as long as it uses HTML, CSS or JS but nothing else.
has comment: http://stackoverflow.com/comment/139265830
has comment: http://stackoverflow.com/comment/139282865
has answer: http://stackoverflow.com/a/78986203
score: 0

tailwind-css
tags question: http://stackoverflow.com/q/78908058
tags question: http://stackoverflow.com/q/78914830
tags question: http://stackoverflow.com/q/78976328
tags question: http://stackoverflow.com/q/79009313
tags question: http://stackoverflow.com/q/79032875
tags question: http://stackoverflow.com/q/78951136
tags question: http://stackoverflow.com/q/78970641
tags question: http://stackoverflow.com/q/79057913
tags question: http://stackoverflow.com/q/79039123
tags question: http://stackoverflow.com/q/78988200
tags question: http://stackoverflow.com/q/78920122
tags question: http://stackoverflow.com/q/78908521
tags question: http://stackoverflow.com/q/78996966
tags question: http://stackoverflow.com/q/78905381
tags question: http://stackoverflow.com/q/79047851
tags question: http://stackoverflow.com/q/78925071
tags question: http://stackoverflow.com/q/78979042
tags question: http://stackoverflow.com/q/79035771
tags question: http://stackoverflow.com/q/79036967
tags question: http://stackoverflow.com/q/78966497
tag name: tailwind-css
tags question: http://stackoverflow.com/q/79028695
tags question: http://stackoverflow.com/q/78981552
tags question: http://stackoverflow.com/q/79007799
tags question: http://stackoverflow.com/q/78934113
tags question: http://stackoverflow.com/q/78937836
tags question: http://stackoverflow.com/q/78924442
tags question: http://stackoverflow.com/q/78934678
tags question: http://stackoverflow.com/q/78961939
tags question: http://stackoverflow.com/q/78966984
tags question: http://stackoverflow.com/q/78987424
tags question: http://stackoverflow.com/q/79003190
tags question: http://stackoverflow.com/q/78904335
tags question: http://stackoverflow.com/q/79030134
type: Tag
tags question: http://stackoverflow.com/q/79060236
tags question: http://stackoverflow.com/q/78947964
tags question: http://stackoverflow.com/q/79042490
tags question: http://stackoverflow.com/q/79040050
tags question: http://stackoverflow.com/q/79064518
tags question: http://stackoverflow.com/q/79005867
tags question: http://stackoverflow.com/q/78935245
tags question: http://stackoverflow.com/q/78979287
tags question: http://stackoverflow.com/q/79058686
tags question: http://stackoverflow.com/q/78928520
tags question: http://stackoverflow.com/q/79021002
tags question: http://stackoverflow.com/q/78913859
tags question: http://stackoverflow.com/q/79058417
tags question: http://stackoverflow.com/q/79067649
tags question: http://stackoverflow.com/q/78920209
tags question: http://stackoverflow.com/q/79064735
tags question: http://stackoverflow.com/q/79050895
tags question: http://stackoverflow.com/q/79061988
tags question: http://stackoverflow.com/q/79000858
tags question: http://stackoverflow.com/q/78996058
tags question: http://stackoverflow.com/q/78957706
tags question: http://stackoverflow.com/q/79050052
tags question: http://stackoverflow.com/q/78935921
tags question: http://stackoverflow.com/q/78967491
tags question: http://stackoverflow.com/q/78997366
tags question: http://stackoverflow.com/q/79043896
tags question: http://stackoverflow.com/q/78976041
tags question: http://stackoverflow.com/q/79013734
tags question: http://stackoverflow.com/q/79049418
tags question: http://stackoverflow.com/q/79037371
tags question: http://stackoverflow.com/q/78949680
tags question: http://stackoverflow.com/q/78934387
tags question: http://stackoverflow.com/q/78951173
tags question: http://stackoverflow.com/q/79044837
tags question: http://stackoverflow.com/q/78969309
tags question: http://stackoverflow.com/q/79218538
tags question: http://stackoverflow.com/q/79126825
tags question: http://stackoverflow.com/q/79085564
tags question: http://stackoverflow.com/q/79183863
tags question: http://stackoverflow.com/q/79087175
tags question: http://stackoverflow.com/q/79188616
tags question: http://stackoverflow.com/q/79243742
tags question: http://stackoverflow.com/q/79110718
tags question: http://stackoverflow.com/q/79102242
tags question: http://stackoverflow.com/q/79100431

http://stackoverflow.com/q/78993016
has comment: http://stackoverflow.com/comment/139280375
score: 0
has comment: http://stackoverflow.com/comment/139280744
tagged with: http://stackoverflow.com/tag/html
has title: Horizontal scroll not at the end of the element
has answer: http://stackoverflow.com/a/78995422
has body: There is a #horizontal_scroll element with a height of 150vh. It has a child element that is 2 times wider than the parent element. The horizontal scroll of the element #horizontal_scroll is displayed at the end of the element (if you scroll the page to the bottom). Is it possible to display this scroll not at the end of the element (150vh) but at the end of the screen (100vh)? #horizontal_scroll { background: grey; width: 50vw; height: 150vh; overflow: auto; } #horizontal_scroll div { width: 100vw; } &lt;div id="horizontal_scroll"&gt; &lt;div&gt;&lt;/div&gt; &lt;/div&gt;
type: UnansweredQuestion
tagged with: css
has comment: http://stackoverflow.com/comment/139280783
type: Question
answer count: 1

http://stackoverflow.com/a/78936790
type: Answer
score: 0
answers question: http://stackoverflow.com/q/78936068
has comment: http://stackoverflow.com/comment/139399258
has body: Using the code given in the question rather than the more complex fiddle, a simple method would be to give the a element a maximum width which leaves enough space for the pencil icon. This snippet just takes a couple of em off its width. Testing Title 2Testing Title 2Testing Title 2Testing Title 2 ✎

http://stackoverflow.com/a/78948068
type: Answer
score: 0
has body: I have tried to fix all problems in your HTML and CSS. I also have tried to keep the design same. Here is the updated code: header { width: 100%; position: fixed; top: 0; left: 0; right: 0; height: 50px; border: 2px black solid; background-color: #ff0000; } #navbar { display: flex; align-items: center; } .logo-title { display: flex; } #logo { height: 50px; width: 50px; border: none; } .title { font-size: 20px; border: 2px solid black; margin: 0; display: flex; align-items: center; } .buttons { display: flex; } .drop-btn { border: none; background: none; cursor: pointer; font-size: 15px; font-weight: bold; color: white; border: 2px solid black; height: 50px; } .dropdown { position: relative; } .dropdown-content { display: none; position: absolute; background-color: #f68484; min-width: 160px; box-shadow: 10px 8px 16px 0px black; z-index: 1; top: 100%; } .dropdown-content .nav-link { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown:hover .dropdown-content { display: block; } Responsive Navbar DAILY BUGLE About Us What We Are Journalist Oath Editors Writers Photographers Politics Super-Politics Local United States Global Galactic
answers question: http://stackoverflow.com/q/78946868

http://stackoverflow.com/comment/139206005
type: QuestionComment
score: 1
comment on: http://stackoverflow.com/q/78952476
type: Comment
has text: Can you add sandbox maybe so we can reproduce it easily?

http://stackoverflow.com/a/79050502
answers question: http://stackoverflow.com/q/79040050
has body: If you try to resize your page as a dev option in browsers inspect views its normal to show borders, in build version it won't appear if it's only appears that way if not so let me know. Edit: Did you mean the way it acts when you use map and border together? If you want that only certain cards have border you should put condition on which indexes have border-t or border-b or whatever border you want to add on it. It's something like this: { index === 1 && ( {item.title} )} { index !== 1 && ( {item.title} )} this is just sample you should edit it to match what you want.
type: Answer
score: 0
has comment: http://stackoverflow.com/comment/139406566

http://stackoverflow.com/comment/139275070
comment on: http://stackoverflow.com/q/78987974
type: Comment
score: 0
type: QuestionComment
has text: For blazor wasm app, could you pls check whether there's ` `(ASSEMBLY NAME shall be your project name) in your index.html file? Because CSS isolation occurred at build time and the style you write in`componantName.razor.css` will be compiled into `projectName.style.css` and this file can be seen when we load the page.

http://stackoverflow.com/comment/139176483
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78936069
has text: I'm a bit lost. Why isn't setting padding-left to 0 and padding right to whatever is required the answer? Perhaps if you could boil the code down to a single example it would help clarify the problem.

http://stackoverflow.com/q/78912045
has comment: http://stackoverflow.com/comment/139155204
has answer: http://stackoverflow.com/a/78925160
type: AnsweredQuestion
has comment: http://stackoverflow.com/comment/139137096
score: 0
has comment: http://stackoverflow.com/comment/139134358
has comment: http://stackoverflow.com/comment/139155223
tagged with: css
tagged with: google-chrome
has body: Consider the following piece of code. I have set the font size of the whole document to 16px. However, when I open this page on a Galaxy S9+, remote debugging reveals that the computed style for font size of the paragraph in the second section is 17.6px. It seems that -webkit-text-size-adjust: none does not work. I also used the proper meta tag for width. I am using Chrome 127.0.6533.103 on android. Is there anyway to prevent chrome from font resizing in this situation? Webpage Some sample text in original font size. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum magni eligendi officia velit corporis dolorum reiciendis autem aperiam veniam, voluptatum illum cum est. Accusamus deleniti numquam corporis mollitia libero tempora? Here is the output result.
has title: Prevent Chrome from Changing Font Size
accepted answer: http://stackoverflow.com/a/78925160
tagged with: http://stackoverflow.com/tag/html
linked to: http://stackoverflow.com/q/13430897
type: Question
answer count: 1

http://stackoverflow.com/comment/139181506
has text: and that's the origin of the misunderstanding.. because even if that html is not valid, it renders as expected on chrome (latest version) on desktop. Please try changing ` ` to ` ` and the style selector from `#hamburger_menu` to `.hamburger_menu`
type: QuestionComment
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78939256

http://stackoverflow.com/q/79057813
type: Question
has comment: http://stackoverflow.com/comment/139400027
score: 0
has comment: http://stackoverflow.com/comment/139398307
has body: I'm struggling trying set the width to component in Angular. I'm using flex, maybe grid will help me with it, but i want to use flexbox to learn. Just to simplify, I have a page with a div that contains 6 instances of my component. the styles .card { width: 600px; display: flex; flex-wrap: wrap; } The component: {{ label }} the component styles: .row__input { display: flex; flex-direction: column; gap: 4px; max-width: 240px; width: 100%; } .a { height: 48px; background-color: red; max-width: 240px; width: 100%; } The problem is that i want to display the component with 240px as max-width so in case of full screen the fields are displayed with 240px widht, but as soon as i make screen smaler the component width should be smaler too. One of the solutions that i found is the use of :host{ display:contents} but I'm not sure if it's a good practice. Maybe it's something related to the tag that angular use to place the component in DOM, because using directly the divs instead of the component, the widths are shown correctly. Im sure that something is missing but i dont know what it is. Also, do you think that mix grid and flexbox is a good practice? Example project: https://stackblitz.com/edit/stackblitz-starters-4s35dh?file=src%2Fcomponent%2Fcomponent.scss
answer count: 2
has answer: http://stackoverflow.com/a/79060717
tagged with: css
has comment: http://stackoverflow.com/comment/139398206
has answer: http://stackoverflow.com/a/79062221
tagged with: angular
tagged with: flexbox
type: UnansweredQuestion
has title: Component is not adjusting width property correctly

http://stackoverflow.com/q/78942849
upvote count: 1
type: UnansweredQuestion
type: Question
answer count: 1
downvote count: 1
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139187818
has comment: http://stackoverflow.com/comment/139187894
has comment: http://stackoverflow.com/comment/139192386
has title: Curved infinite scroll or marquee with custom logic
has comment: http://stackoverflow.com/comment/139188192
score: 0
tagged with: reactjs
tagged with: javascript
has comment: http://stackoverflow.com/comment/139188167
has comment: http://stackoverflow.com/comment/139189544
has comment: http://stackoverflow.com/comment/139188206
tagged with: css
has comment: http://stackoverflow.com/comment/139188175
has body: I have been struggling to build this(mention in picture). I want to make a curved marquee or infinite scroll carousel where each item, in this case flag will move from left to right. When a flag enter center of the viewport, in this case enter into window area - window background will be changed. How can I build this? For any kind of query please let me know. note: any third party library like gsap can be used, I have no issue.
has comment: http://stackoverflow.com/comment/139189393
has comment: http://stackoverflow.com/comment/139188151
has answer: http://stackoverflow.com/a/78945363
has comment: http://stackoverflow.com/comment/139187939
tagged with: gsap
favorite count: 0

http://stackoverflow.com/q/78997557
score: 0
tagged with: css
answer count: 0
has title: fullPage.js: Page scrolls twice on single scroll event
type: UnansweredQuestion
type: Question
has comment: http://stackoverflow.com/comment/139881454
tagged with: http://stackoverflow.com/tag/html
tagged with: fullpage.js
has body: I'm using fullPage.js to create a website with multiple full-screen sections that scroll between each other. However, I'm encountering an issue where, after scrolling once, the page sometimes scrolls to the next section automatically, even though I haven't performed any further scroll action. This behavior seems to happen randomly and is more noticeable after the first scroll event. Steps to reproduce: Implement a basic fullPage.js setup with autoScrolling: true and multiple sections. Scroll down using the mouse wheel or trackpad to move between sections. Occasionally, the page automatically scrolls one more section after the initial scroll, even though no additional scroll event was triggered. My setup: fullPage.js version: 4.0.29 Browser: Google Chrome (latest version) Device: Desktop (with mouse and trackpad) What I have tried: Adjusting the scrollingSpeed and fitToSectionDelay parameters. Disabling continuousVertical mode. Testing on different devices and browsers. Despite these changes, the issue persists. Is there a way to prevent this additional unwanted scroll, or any specific settings I should adjust to fix this? Document The first section The second section The third section
tagged with: scroll
tagged with: javascript

http://stackoverflow.com/q/78931612
tagged with: javascript
accepted answer: http://stackoverflow.com/a/79006688
upvote count: 1
has body: This is my home page: This is my page When I refresh the page, it loads without any problems and the loading status changes from 'idle' to success and I can view the blogs without any problems. this is same page However, when switching between pages, the visibility of blogs disappears. this is same page2 import React, { useEffect } from 'react' import { useDispatch, useSelector } from 'react-redux' import { Link } from 'react-router-dom' import { fetchBlogs } from '../store/blogSlice'; export default function ArticlesBlog() { const bloglar = useSelector((state) => state.blog.blogs); // useSelector'ı bileşenin en üstünde çağırın const blogdurum = useSelector((state) => state.blog.status); const dispatch = useDispatch(); useEffect(() => { // Eğer bloglar boşsa veya `status` loading ise fetch yap if (bloglar.length === 0 || blogdurum === 'loading') { dispatch(fetchBlogs()); } }, [dispatch, bloglar, blogdurum]); return ( <> Blogdan Makaleler Blog {blogdurum === 'loading' && Loading... } {blogdurum === 'failed' && Error fetching blogs } {blogdurum === 'ok' && ( {bloglar.map((item) => ( {item.date} {item.mindesc} By {item.author} {item.commentcount} yorum ))} )} Daha Fazla </> ) } App.jsx import React from 'react'; import { Routes, Route, useLocation } from "react-router-dom"; import { CSSTransition, TransitionGroup } from 'react-transition-group'; import Footer from "./Components/Footer"; import Header from "./Components/Header"; import AboutUs from "./Pages/AboutUsPage"; import BlogsAll from "./Pages/BlogsAll"; import ContactPage from "./Pages/ContactPage"; import Main from "./Pages/Main"; import OurServices from "./Pages/OurServices"; import OurTeam from "./Pages/OurTeam"; import Portfolio from "./Pages/Portfolio"; import Shop from "./Pages/Shop"; import BlogDetail from './Pages/BlogDetail'; import ScrollToTop from './Components/ScrollToUp'; function App() { const location = useLocation(); return ( <> <ScrollToTop/> <Route path="/" element={<Main />} /> <Route path="/a…
tagged with: css
score: 1
favorite count: 0
type: Question
has title: Blog slider does not appear when changing pages React Javascript
tagged with: http://stackoverflow.com/tag/html
downvote count: 0
answer count: 1
type: AnsweredQuestion
tagged with: router
tagged with: reactjs
has answer: http://stackoverflow.com/a/79006688

http://stackoverflow.com/a/79046701
type: AcceptedAnswer
has comment: http://stackoverflow.com/comment/139378689
has body: I hope it helps. Here is the basic idea There are few palettes like primary, secondary etc To customize the color Use the palette property to modify In the example, I just updated the primary You can do it for secondary, success, error, info, warning You can also add more properties but requires typescript fix, globally To customize the components globally use components property MuiButton Provided an example for this MuiTable MuiInput etc... Now think about default colors and design Also care about their variants import { createTheme, ThemeOptions, Theme } from '@mui/material/styles' const primary = { main: '#7A5AF8', light: '#F4F3FF', dark: '#3E1C96', contrastText: '#FFFFFF', 50: '#F4F3FF', 100: '#EBE9FE', 200: '#D9D6FE', 300: '#BDB4FE', 400: '#9B8AFB', 500: '#7A5AF8', 600: '#6938EF', 700: '#5925DC', 800: '#4A1FB8', 900: '#3E1C96' } export const lightTheme: ThemeOptions = createTheme({ palette: { primary, }, components: { MuiButton: { defaultProps: { disableRipple: true, variant: 'contained' }, styleOverrides: { root: { textTransform: 'none', borderRadius: '6px', padding: '10px 16px', fontWeight: 500 } }, variants: [ { props: { variant: 'contained' }, style: ({ theme }: { theme: Theme }) => ({ paddingTop: theme.spacing(0.75), paddingBottom: theme.spacing(0.75), }) } ] } } }) Make a seperate component to provide the theme import CssBaseline from '@mui/material/CssBaseline' import { ThemeProvider as MuiThemeProvider } from '@mui/material/styles' import { lightTheme } from 'your-constant-location' const ThemeProvider = ({ children }) => { return ( <CssBaseline /> <>{children}</> ) } Use this provider in your root app const App = () => { return ( ...your app ) } Customize Locally theme.palette.grey[100], p: 4, '& span': { color: 'blue', fontWeight: 'bold', fontSize: '20px', }, }} > Hello world
type: Answer
score: 0
has comment: http://stackoverflow.com/comment/139378702
answers question: http://stackoverflow.com/q/79046546
accepted answer of: http://stackoverflow.com/q/79046546
has comment: http://stackoverflow.com/comment/139378661

http://stackoverflow.com/comment/139366291
score: 0
has text: Try adding `justify-items: center` in `.projects__content`
type: QuestionComment
comment on: http://stackoverflow.com/q/79040017
type: Comment

http://stackoverflow.com/comment/139332512
has text: Sounds like you simply want to change the order - `'translate3d(...) rotate(...)'` ...?
type: Comment
type: QuestionComment
score: 1
comment on: http://stackoverflow.com/q/79021658

http://stackoverflow.com/comment/139254542
has text: You probably mean JavaScript, not Java. If you do mean Java, please clarify. What framework(s) do you use, what does your code currently look like? Provide details and a code listing.
type: QuestionComment
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78979126

http://stackoverflow.com/q/79049022
has comment: http://stackoverflow.com/comment/139384112
answer count: 1
tagged with: background-color
has answer: http://stackoverflow.com/a/79050397
has title: Need help adding a transparent background to a group of layer elements
score: 0
tagged with: css
has body: I have a site I'm working on that's designed on a template. The homepage slider content that's in the center of the slide are divided into layers. This is how the template designed it. I need to give all of the content a transparent background. That way it can display better visually. I'm looking for a div that has all of the layers in it. That way I can add the transparency to that 1 div. So far all I'm seeing is how to add a transparent background to each layer individually. Can someone help me give a transparent background to all the content as one. Below is the closest element I came up with but it's still not working. rs-layer:not(.rs-wtbindex), .rs-layer:not(.rs-wtbindex), rs-alyer *:not(.rs-wtbindex), .rs-layer *:not(.rs-wtbindex) Site Link: https://charismahomedecor.com
tagged with: opacity
type: UnansweredQuestion
tagged with: transparency
type: Question

http://stackoverflow.com/comment/139249068
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78972034
has text: you can put a different height just for Outlook with `mso-height-alt: 100px;` or use conditional mso
type: Comment

http://stackoverflow.com/q/78973631
tagged with: border-radius
duplicate of: http://stackoverflow.com/q/78916038
tagged with: clip-path
tagged with: http://stackoverflow.com/tag/html
upvote count: 2
accepted answer: http://stackoverflow.com/a/78973672
answer count: 1
type: AnsweredQuestion
has answer: http://stackoverflow.com/a/78973672
linked to: http://stackoverflow.com/q/78916038
has body: I'm trying to create a design similar to the image attached below 1, where a rounded rectangle has an "S-curve" effect at the bottom. My current strategy involves a parent element (hero_right) with two child elements (hero_right_top and hero_right_bottom). I'm attempting to set the top element to 70% height and the bottom to 30% height, applying borders to create the rounded effect. Image#1 The problem I'm encountering is with shaping the bottom-left part to achieve the desired S-curve effect. I attempted to set the width of the bottom element to 90%, positioning it absolutely to the right, and then applying border-radius to the corners. I also added a nested div inside the bottom element, using absolute positioning and more border-radius to further shape the bottom left corner, but the result isn't quite right. Here is the code I have so far: HTML: CSS: .hero_right { position: relative; display: flex; flex-direction: column; } .hero_right_top, .hero_right_bottom { min-height: 71.5%; width: 100%; background-color: var(--thirdColor); } .hero_right_bottom { min-height: 30%; } .hero_right_top { border-top-right-radius: 100px; border-top-left-radius: 100px; border-bottom-left-radius: 100px; } .hero_right_bottom { position: absolute; width: 90%; right: 0; bottom: 0; border-bottom-right-radius: 100px; border-bottom-left-radius: 100px; } .hero_right_bottom_link { position: absolute; top: 0; left: -3%; display: flex; justify-content: center; flex-wrap: wrap; align-content: center; text-decoration: none; color: var(--primaryColor); width: 60px; height: -webkit-fill-available; border-top-right-radius: 158px; background-color: var(--whiteColor); } Image#2 My issue is that the bottom left part is not shaping exactly as expected. How can I achieve this S-curve effect properly with CSS? Any advice or adjustments to my approach would be appreciated.
score: 0
tagged with: responsive-design
downvote count: 2
tagged with: css
has title: How to create a rounded rectangle with an Inverted S-curve style in CSS & HTML?
has comment: http://stackoverflow.com/comment/139244411
linked to: http://stackoverflow.com/q/76931315
favorite count: 0
has comment: http://stackoverflow.com/comment/139245343
type: Question

http://stackoverflow.com/comment/139313642
score: 0
has text: @KIKOSoftware Thank you for pointing these out. I now added a bit of explanation. I also commented the code with `/*new code from here*/`. The `.stars {}` has no purpose in the stylesheet, it was a remaining from the OP's stylesheet. I didn't change anything else, I just added in plus to the end.
type: AnswerComment
comment on: http://stackoverflow.com/a/79011332
type: Comment

http://stackoverflow.com/q/78909592
type: Question
tagged with: css
has title: Can I style a checkbox with unicode chars w/o using ::before and ::after?
answer count: 1
downvote count: 1
has body: I'd like to replace the content of my checkbox with the unicode checkbox marks. But I already need ::before and ::after for something else. Is there a css-way to change content on the tag itself? Edit: Someone requested my current html and css, there you are.. input[type="checkbox"] { appearance:none; } Example
upvote count: 0
favorite count: 0
has answer: http://stackoverflow.com/a/78909739
has comment: http://stackoverflow.com/comment/139126867
score: -1
has comment: http://stackoverflow.com/comment/139126968
has comment: http://stackoverflow.com/comment/139126427
has comment: http://stackoverflow.com/comment/139126405
has comment: http://stackoverflow.com/comment/139126462
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139126415
tagged with: checkbox

http://stackoverflow.com/q/78971329
type: AnsweredQuestion
has comment: http://stackoverflow.com/comment/139240560
favorite count: 0
has comment: http://stackoverflow.com/comment/139240438
answer count: 2
linked to: http://stackoverflow.com/q/43311943
has comment: http://stackoverflow.com/comment/139240534
tagged with: http://stackoverflow.com/tag/html
downvote count: 0
has answer: http://stackoverflow.com/a/78975976
has comment: http://stackoverflow.com/comment/139248967
has body: I have some text at a narrow width, with word-break: break-word and hyphens: auto. With normal flow display, the text wraps and stays within the boundaries of the container as I would expect. However, with CSS Grid, the text is allowed to escape the container and the word break happens at a different point. Why does this happen? #wrapper { max-inline-size: 25ch; margin-inline: auto; word-wrap: break-word; hyphens: auto; } #grid, #flow { padding: 1em; background-color: oldlace; } #flow { margin-block-start: 2em; } .tag { padding: 0.25em; background-color: azure; inline-size: min-content; font-family: monospace; } #grid { display: grid; gap: 1em; } grid This is a long headline with a verysuperlongtimeword Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tortor nisl, sagittis ac lectus et, blandit varius leo. Sed vel finibus nunc. Nam ipsum mi, mattis quis cursus id, hendrerit tristique dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis eu placerat quam, vitae pretium tellus. Sed consequat tellus eu diam commodo, quis ultricies libero ultrices. Praesent nec ipsum venenatis, semper magna at, pretium tortor. Aliquam tempus lectus iaculis lacus pretium sollicitudin. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse dictum, felis eu pulvinar scelerisque, risus diam rutrum velit, vel lacinia leo risus vel purus. Integer ipsum justo, auctor eu volutpat non, pellentesque a est. Maecenas sollicitudin fermentum mauris, egestas viverra augue congue vitae. Nam non nisi urna. Nullam non cursus orci. flow This is a long headline with a verysuperlongtimeword Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tortor nisl, sagittis ac lectus et, blandit varius leo. Sed vel finibus nunc. Nam ipsum mi, mattis quis cursus id, hendrerit tristique dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis eu placerat…
possible better answer: http://stackoverflow.com/a/78971704
has comment: http://stackoverflow.com/comment/139240547
has comment: http://stackoverflow.com/comment/139241066
score: 1
upvote count: 1
has comment: http://stackoverflow.com/comment/139240371
tagged with: css
has answer: http://stackoverflow.com/a/78971704
type: Question
has title: Why does CSS Grid allow text to overflow their containers?
has comment: http://stackoverflow.com/comment/139248963
tagged with: css-grid
accepted answer: http://stackoverflow.com/a/78975976

visual-studio-code
tags question: http://stackoverflow.com/q/79017763
tag name: visual-studio-code
tags question: http://stackoverflow.com/q/78929034
tags question: http://stackoverflow.com/q/78932990
tags question: http://stackoverflow.com/q/79030647
type: Tag
tags question: http://stackoverflow.com/q/79009939
tags question: http://stackoverflow.com/q/78972900
tags question: http://stackoverflow.com/q/79219038
tags question: http://stackoverflow.com/q/79190604
tags question: http://stackoverflow.com/q/79201778
tags question: http://stackoverflow.com/q/79113153
tags question: http://stackoverflow.com/q/79160588
tags question: http://stackoverflow.com/q/79409210
tags question: http://stackoverflow.com/q/79371573
tags question: http://stackoverflow.com/q/79277199
tags question: http://stackoverflow.com/q/79401477
tags question: http://stackoverflow.com/q/79539410
tags question: http://stackoverflow.com/q/79526209
tags question: http://stackoverflow.com/q/79545795
tags question: http://stackoverflow.com/q/79546951
tags question: http://stackoverflow.com/q/79502512
tags question: http://stackoverflow.com/q/79521011
tags question: http://stackoverflow.com/q/79524264
tags question: http://stackoverflow.com/q/79539942

http://stackoverflow.com/q/78970518
tagged with: path
type: Question
has comment: http://stackoverflow.com/comment/139238744
tagged with: html-table
has comment: http://stackoverflow.com/comment/139239781
score: 0
tagged with: javascript
has comment: http://stackoverflow.com/comment/139239415
tagged with: responsive-design
tagged with: css
has body: Some of the content career route connections do not work for the table's last row. So, I'm wondering that the information that we need to scroll to click on is experiencing arrow pathway connection issues. Because the first viewport content arrow for both the second and third columns works exceptionally well. However, those material that are outside of the first view port or that require us to scroll down to view are experiencing problems. When I select Entry-level Positions, Research Roles, Doctorate or PhD in Science. Issues are evident more clearly. To further understand the issues, following screenshots are supplied - I tried to remedy it by updating the route positions dynamically based on the scroll event to guarantee that your items are precisely positioned, but it didn't work either. My code - document.addEventListener("DOMContentLoaded", () => { const credentials = document.querySelectorAll(".credential li"); const careers = document.querySelectorAll(".career li"); const table = document.querySelector(".table-container"); function resetUI() { // Reset all elements credentials.forEach((c) => { c.classList.remove("selected"); c.classList.remove("disabled"); }); careers.forEach((c) => { c.classList.remove("selected"); c.classList.remove("disabled"); }); // Clear all arrows from the SVG const svg = document.getElementById("arrows"); while (svg.firstChild) { svg.removeChild(svg.firstChild); } // Update the SVG dimensions to cover the entire table const tableRect = table.getBoundingClientRect(); svg.setAttribute("width", tableRect.width); svg.setAttribute("height", tableRect.height); // Re-append the arrowhead marker const marker = document.createElementNS( "http://www.w3.org/2000/svg", "marker" ); marker.setAttribute("id", "arrowhead"); marker.setAttribute("markerWidth", "10"); marker.setAttribute("markerHeight", "7"); marker.setAttribute("refX", "0"); marker.setAttribute("refY", "3.5"); marker.setAttribute("orient", "auto"); const arrowhead = document.createEle…
answer count: 0
has comment: http://stackoverflow.com/comment/139239778
has comment: http://stackoverflow.com/comment/139238789
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139238784
has title: Arrows are not working or showing for table content that is not displayed in the initial viewport
has comment: http://stackoverflow.com/comment/139238915

http://stackoverflow.com/comment/139246520
type: Comment
has text: Stops short in Safari IOS also. Does it depend on exactly where the bottom of characters (as opposed to the baseline) is deemed to be?
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78974610

http://stackoverflow.com/comment/139148157
type: Comment
score: 0
has text: Yeah I have been trying to make the Status row smaller like button but I'm having a hard time to do it. Any ideas what property should I change?
type: QuestionComment
comment on: http://stackoverflow.com/q/78920429

http://stackoverflow.com/comment/139303356
score: 0
type: QuestionComment
has text: AFAIK, you cannot **dynamically** assign class with tailwind. You would need to assign them manually. e.g -> `bg-{{$color}}-100` should be `bg-green-100` or other colors.
comment on: http://stackoverflow.com/q/79005867
type: Comment

http://stackoverflow.com/q/78951173
type: Question
has body: Suppose I have a parent div element, and I want to style its child elements using Tailwind CSS. How can I apply specific styles to the child elements?
answer count: 1
type: AnsweredQuestion
has answer: http://stackoverflow.com/a/78951227
tagged with: tailwind-css
accepted answer: http://stackoverflow.com/a/78951227
score: 0
upvote count: 1
tagged with: css
downvote count: 1
has title: How do I style child elements in Tailwind CSS?
favorite count: 0

http://stackoverflow.com/q/78911681
type: Question
tagged with: browser
score: 0
tagged with: css
answer count: 0
tagged with: blur
has body: I am building a simple browser extension and I want make its background blur, I tried the usual way with CSS, but it doesn't seem to work. It currently looks like this: Image of browser extension HTML: SAVE INPUT SAVE TAB DELETE ALL CSS of body : body { margin: 0; padding: 10px; font-family: Arial, Helvetica, sans-serif; min-width: 400px; border-radius: 10px; backdrop-filter: blur(5px); background-color: rgba(0,0,0,0.2); } manifest file : { "manifest_version": 3, "version": "1.0", "name": "Leads tracker", "action": { "default_popup": "index.html", "default_icon": "icon.png" }, "permissions": [ "tabs" ] }
has title: Is it possible to change background opacity of a custom browser extension and add blur filter?
type: UnansweredQuestion
tagged with: google-chrome-extension
has comment: http://stackoverflow.com/comment/139130874

http://stackoverflow.com/a/78928397
has body: It seems that you want to break long words but not small words. I don't think this can be achieved by CSS. You could add a small JavaScript function that breaks only long words before exporting your document: // Let's say you want to break all words greater than 10 chars in length in a div with ID "asdf" // This also assumes that there the div only contains text and not HTML function breakOnlyLongWords() { var div = document.querySelector('#asdf'); var text = div.textContent; var words = text.split(' '); for(var i = 0; i < words.length; i++) { if(words[i].length > 10) words[i] = breakWord(words[i]); } div.textContent = words.join(' '); } // Function that adds hyphens after every 10 chars in a word longer than 10 chars function breakWord(word) { var chars = word.split(''); var newWord = ''; for(var i = 0; i < chars.length; i++) { newWord += chars[i]; if((i+1) % 10 === 0) newWord += '-'; } return newWord.replace(/-$/, ''); } Add hyphens to long words Redevelopment will include updating mechanical, electrical, and plumbing systems throughout the ground-floor commercial space and office space. Updates include, but are not limited to new cooling towers, water boilers, hydronic system pumps, and piping. asdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
score: 1
downvote count: 0
type: Answer
upvote count: 1
answers question: http://stackoverflow.com/q/78927597
has comment: http://stackoverflow.com/comment/139165131

http://stackoverflow.com/comment/139164225
type: QuestionComment
comment on: http://stackoverflow.com/q/78929847
type: Comment
score: 0
has text: Your syntax is fine and as @Mister Jojo said you have nothing to animate. Add some text to your divs and change ex top -100% to top -100px you will see your animation

http://stackoverflow.com/q/79064004
has answer: http://stackoverflow.com/a/79064125
downvote count: 1
has comment: http://stackoverflow.com/comment/139411185
tagged with: cross-browser
favorite count: 0
has title: Overflow difference between Chrome and Firefox browsers
type: Question
answer count: 1
tagged with: http://stackoverflow.com/tag/html
accepted answer: http://stackoverflow.com/a/79064125
type: AnsweredQuestion
has comment: http://stackoverflow.com/comment/139411738
score: 0
upvote count: 1
has body: I have this project I've been working on as part of a roadmap to web development, and I developed this sidebar that has an inner scrolling list. In Chrome, the inner list scrolls, but in Firefox, each of its children scrolls independently. The code, without extra bits is the following: See Codepen: https://codepen.io/rins6618/pen/yLmJxRy (I cannot seem to get snippets). B Blank Project Projects Create new project... Delete a project... This project Rename this project... View notes... View due dates... Change project color... About Settings CSS: * { box-sizing: border-box; margin: 0; } :root { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } .flex { display: flex; } .grid { display: grid; } html, body { height: 100%; width: 100%; background-color: #efefef; } main { margin-left: 30rem; } li { list-style: none; } #sidebar { flex-direction: column; margin: 0.5rem 0.5rem 0 0; width: 30rem; height: 100dvh; padding: 1rem; position: fixed; z-index: 2; top: 0; left: 0; background-color: #fff; overflow-x: hidden; overflow-y: hidden; border-radius: 0rem 1rem 0rem 0rem; box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; } #scrollable-sidebar { flex: 1; border-top: 0.25rem solid #eee; border-bottom: 0.25rem solid #eee; flex-direction: column; overflow-y: scroll; scrollbar-width: none; -ms-overflow-style: none; } #scrollable-sidebar > * { padding: 0 1rem; overflow-x: hidden; overflow-y: visible; } #scrollable-sidebar > *:first-child { border-top: none; } #scrollable-sidebar::-webkit-scrollbar { display: none; } #sidebar header { transition: background-color .3s; height: 5rem; position: relative; overflow: visible; } #sidebar:first-child { border-top-right-radius: 1rem; } #project-selector { z-index: 3; background: none; border: none; font-size: inherit; transition: background-color .1s; transition: box-shadow .05s; position: relative; padding: 1rem; cu…
tagged with: css

http://stackoverflow.com/comment/139234109
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78956881
has text: yes, done. But I found a solution for the problem and posted an answer in the meantime..

http://stackoverflow.com/a/79000258
type: Answer
accepted answer of: http://stackoverflow.com/q/79000228
score: 0
has body: .container { width: 400px; height: 300px; border: 3px solid green; padding: 4px; display: flex; flex-direction: column; } .img-wrapper { /* display: flex; */ min-height: 0; /* make it so it won't be stretch by children */ } .img-wrapper img { max-width: 100%; max-height: 100%; /* make the image auto scale to fit both width and height */ object-fit: cover; } &lt;div class="container"&gt; &lt;div class="img-wrapper"&gt; &lt;img src="https://static.billboard.com/files/media/talib-kweli-2018-cr-Dorothy-Hong-billboard-1548-compressed.jpg" /&gt; &lt;/div&gt; &lt;div class='text'&gt; this is a cool paragraph about the angry theicn shfieh that eats and is not pfeifol about the nutehc chartogret including but not adfentily of the crooked and devque thandilbot. Piej kargrid angy that iejf othersome to the compact shiferboth &lt;/div&gt; &lt;/div&gt;
type: AcceptedAnswer
answers question: http://stackoverflow.com/q/79000228

http://stackoverflow.com/q/79023871
has answer: http://stackoverflow.com/a/79024007
has answer: http://stackoverflow.com/a/79024073
score: 1
tagged with: html5-audio
tagged with: css
possible better answer: http://stackoverflow.com/a/79023979
has comment: http://stackoverflow.com/comment/139339833
accepted answer: http://stackoverflow.com/a/79024039
answer count: 5
has body: I have an html audio tag in my project, which in some situation I need to disable. In order to do it I apply the following css by adding disabled class to the audio tag: audio.disabled { pointer-events: none } I would like to add a layer with opacity 50% that will cover the audio element, in order to give a different view for it when it is disabled. I thought to use the pseudo class ::before, but do not manage to have a visible element. Here is a snippet with what I have already: function toggleAudioDisable() { document.getElementById('myAudio').classList.toggle("disabled"); } .disabled { pointer-events: none } Toggle Audio Disable Any idea how to implement it?
favorite count: 0
tagged with: http://stackoverflow.com/tag/html
type: Question
has title: Disable `audio` html tag
has answer: http://stackoverflow.com/a/79024053
downvote count: 0
has comment: http://stackoverflow.com/comment/139336553
type: AnsweredQuestion
has answer: http://stackoverflow.com/a/79023979
has answer: http://stackoverflow.com/a/79024039
upvote count: 1

http://stackoverflow.com/q/79029436
tagged with: word-wrap
answer count: 0
linked to: http://stackoverflow.com/q/37406353
tagged with: css
tagged with: flexbox
has title: Flexbox with wrapped text leaves undesired empty horizontal space
type: UnansweredQuestion
duplicate of: http://stackoverflow.com/q/37406353
type: Question
has body: I'm trying to create a printable dynamic HTML form but I cannot arrange the questions and answers on the page the way I want. I have a flex container for a pair of question and answer and I expect the text in either of them to be wrapped if it's too long. The issue is that once the text is wrapped, it leaves a lot of empty horizontal space. This is not my desired outcome, especially for the question (left). How can I preferably keep using CSS flexbox and text-wrap while not having that extra white space? I prefer the solution to be with pure HTML and CSS and I am hesitant to implement any JavaScript due to performance concerns. Breathing Circuit for Bedside Ventilator: Quantity Other Than Physician Order (5) .container { width: 100%; display: flex; flex-direction: row; justify-content: stretch; align-items: center; gap: 0.7em; } .container .question { flex: 0 1 auto; text-wrap: balance; } .container .answer { flex: 1 1 auto; text-wrap: pretty; } CodeSandbox: https://codesandbox.io/p/sandbox/n6883s
tagged with: http://stackoverflow.com/tag/html
score: 0
tagged with: sass

http://stackoverflow.com/q/79006685
type: AnsweredQuestion
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139308996
accepted answer: http://stackoverflow.com/a/79031360
tagged with: wordpress
score: 0
has comment: http://stackoverflow.com/comment/139305148
has comment: http://stackoverflow.com/comment/139309011
tagged with: css
has answer: http://stackoverflow.com/a/79031360
has comment: http://stackoverflow.com/comment/139309005
has body: In the link I have provided, just above footer you should see download here button. That whole container is not displayed in any device. It works correctly on wp-admin. I added this code block to generate that container. Please tell what might be causing the issue? Below are the plugins Installed 1)Akismet Anti-Spam 2)Classic Editor 3)Contact Form 7 4)Duplicate Page 5)Fusion Builder 6)Fusion Core 7)Gravity Forms 8)Health Check & Troubleshooting 9)Joinchat 10)Site Kit by Google 11)Slider Revolution 12)Unite Gallery Lite 13)UpdraftPlus - Backup/Restore 14)WP Htaccess Editor 15)Yoast SEO 16)301 Redirects Maybe I am missing a plugin or installed plugin has issue. I cant determine the issue. Procedure for installation of rooftop solar plant through National Portal Download Here I tried to enable and disable the plugins, that I have installed. So far I didnt see any plugin causing this issue. Earlier this was made using wordpress and wasnt displaying, so I changed it to codeblock, still not working. At bottom of this page you can find its not displaying at all, https://dynaroof.com/dyna-solar/
has comment: http://stackoverflow.com/comment/139309143
has comment: http://stackoverflow.com/comment/139305006
has comment: http://stackoverflow.com/comment/139305088
type: Question
has comment: http://stackoverflow.com/comment/139305134
answer count: 1
has title: I am using Avada theme, on wordpress goddady . Button and text inside container that is displayed in wordpress admin. for some reason it not displayed

http://stackoverflow.com/comment/139205065
type: QuestionComment
comment on: http://stackoverflow.com/q/78952516
has text: `white-space: nowrap` to prevent line-breaks in the first place? Why do you need JS?
type: Comment
score: 0

http://stackoverflow.com/q/79006902
has comment: http://stackoverflow.com/comment/139305280
type: AnsweredQuestion
tagged with: javascript
possible better answer: http://stackoverflow.com/a/79007197
answer count: 2
upvote count: 1
accepted answer: http://stackoverflow.com/a/79006973
has body: Using JavaScript, I need to add a class to a HTML element depending on the current day and month. To do this, I would like to compare the data-date of the elements ("09-20", "09-21", ...) with the day and month of the current date. Unfortunately my script doesn't work. I'm an absolute beginner in JS, so sorry for my rookie mistakes. $(function() { var a = new Date(); $(".grid-item").each(function() { var specifiedDate = $(this).data('date'); if (a.getMonth() + "-" + a.getDay() == specifiedDate) { $(this).addClass('today'); } }); }); .grid-item { height: 130px; width: 130px; float: left; background: red; margin: 10px; } .today { background: yellow; border: red 1px solid; }
tagged with: jquery
tagged with: calendar
tagged with: css
has comment: http://stackoverflow.com/comment/139305286
downvote count: 1
has title: Compare string with day and month of date
has comment: http://stackoverflow.com/comment/139305272
score: 0
has answer: http://stackoverflow.com/a/79006973
has answer: http://stackoverflow.com/a/79007197
favorite count: 0
has comment: http://stackoverflow.com/comment/139305260
type: Question

http://stackoverflow.com/a/78913035
score: 3
has body: You want to animate the background-position, not the container of the image. Then you do not have to deal with the size of the container and its overflowing on the smaller screens. Here is the CSS that might help you .infinite-scrolling { background: url("https://fastly.picsum.photos/id/641/200/200.jpg?hmac=9pd71nRRRsT7TXf0zn0hQ6tW6VQnQ-UtL1JXDhJZB8E") repeat-x; background-size: auto 100%; /* Scale the image to fit the height */ height: 200px; /* height of the image */ width: 100%; /* full width of the container */ animation: slide 1s linear infinite; /* Adjust duration for smoothness */ filter: grayscale(80%); top: 0; } @keyframes slide { from { background-position: 0 0; } to { background-position: -200px 0; } } .glassy { background: rgba(27, 26, 85, 0.35); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.18); } Here is the <a href="https://codesandbox.io/p/sandbox/practice-index-query-forked-ult8fq?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522cm0akoy3r00063b6n1ve9cag1%2522%252C%2522sizes%2522%253A%255B100%252C0%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522cm0akoy3q00023b6n787rymyv%2522%257D%255D%257D%252C%257B%25…
has comment: http://stackoverflow.com/comment/139135049
upvote count: 3
answers question: http://stackoverflow.com/q/78912357
accepted answer of: http://stackoverflow.com/q/78912357
type: AcceptedAnswer
type: Answer
downvote count: 0

http://stackoverflow.com/q/78963024
tagged with: reactjs
answer count: 2
has answer: http://stackoverflow.com/a/78963199
has title: Split text into lines without using line-clamp
tagged with: css
has body: I am generating multiple words from a JSON file and want to display only two lines at once, currently I am using line clamps but it truncates the last word of the second line. If the word is being truncated I want it to move to the next line. Is it possible to implement this? {wordList.map((word, wordIndex) => { const currWord = typedHistory[wordIndex] || ""; const isCurrentWord = wordIndex === typedHistory.length; const hasWrongChars = currWord.split("").some((char, index) => char !== word[index]); const isExcessLength = currWord.length > word.length; const isIncomplete = currWord.length >= 0 && currWord.length < word.length && typedHistory.includes(currWord); const shouldHighlightWordRed = hasWrongChars || isExcessLength || isIncomplete; return ( {word.split("").map((char, charIndex) => { let charColor = "#fff"; if (wordIndex < typedHistory.length) { charColor = shouldHighlightWordRed ? "red" : "var(--main-color)"; } else if (isCurrentWord) { const typedChar = typedChars[charIndex] || ""; charColor = typedChar === char ? "var(--main-color)" : typedChar !== "" ? "red" : "#fff"; } return ( {char} ); })} {' '} ); })} CSS: .box { padding-left: 1.5rem; padding-right: 1.5rem; background-color: var(--sub-alt-color); border-radius: 10px; max-height: 8.5em; height: 8.5em; user-select: none; } .box .word { display: block; font-size: 1.5rem; overflow-y: hidden; line-height: 1.8em; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; } How I am generating text useEffect(() => { import("../../public/english.json").then((words) => dispatch(setWordList(words.default)) ); }, [dispatch]); I am expecting the behavior of text like in this case: typetest.io Here is a reproducible example: codesandbox
has answer: http://stackoverflow.com/a/78968404
score: 0
possible better answer: http://stackoverflow.com/a/78963199
type: Question
type: AnsweredQuestion
tagged with: javascript
accepted answer: http://stackoverflow.com/a/78968404

http://stackoverflow.com/comment/139212918
comment on: http://stackoverflow.com/q/78956711
type: Comment
type: QuestionComment
score: 1
has text: You could either generate multiple tables, and have them show next to each other using `display: inline-table` or something like that. Or, if you want it all in one table - then you'd need to determine how many records you have to show upfront, and then put the data into the correct columns into the correct row to begin with. (I.e., your data from record #1 needs to go into cells 1, 2 and 3 of the first row, and then you need to continue with creating cells 4, 5, and 6 with the data from the 11th record, before you actually close that row with a ` ` again ...

http://stackoverflow.com/q/78918024
score: 0
tagged with: javascript
has comment: http://stackoverflow.com/comment/139141523
has answer: http://stackoverflow.com/a/78918301
tagged with: css
has body: I have a following code: .playerDraft_cListOfPlayers { width: 200px; height: 100%; position: relative; } .playerDraft_ListOfPlayers { width: 100%; height: 100%; } .playerDraft_ListOfPlayers span { display:inline-block; } #gameFieldDraftPlayersPitch { position: absolute; top: 0; right: 0; bottom: 0; left:0; height: 1000px; width: 1615px; } Player 1 Player 2 Player 3 and that onclick event (which should call alert('Test 1, 2, 3..'); is not being called. What am I doing wrong and how can I fix it? Thank you.
type: UnansweredQuestion
type: Question
tagged with: http://stackoverflow.com/tag/html
answer count: 1
has title: onClick event not being called on span inside of a Canvas

http://stackoverflow.com/comment/139177071
type: QuestionComment
has text: Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a **Stack Snippet** using the `<>` icon.. Although you have provided a link, if it was to become invalid, your question would be of no value to other future SO users with the same problem. See [**Something in my website/example doesn't work can I just paste a link**](http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to-it).
comment on: http://stackoverflow.com/q/78936697
score: 1
type: Comment

http://stackoverflow.com/comment/139293309
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78996058
has text: Kindly provide more info, what framework are you using, share your tailwind.config,js, will provide us with more context to what is actually happening
type: QuestionComment

http://stackoverflow.com/comment/139360726
has text: base on [MDN-doc](https://developer.mozilla.org/en-US/docs/Web/CSS/right) **When `position` is set to `relative`, the `right` property specifies the distance the element's right edge is moved to the left from its normal position.**
comment on: http://stackoverflow.com/q/79036975
type: QuestionComment
type: Comment
score: 0

http://stackoverflow.com/comment/139210232
score: 1
has text: The `p` tags get the expected colours if you copy-and-paste the _exact same_ colour definition onto them. But no value, or `inherit`, doesn't seem to work
type: Comment
comment on: http://stackoverflow.com/a/78948809
type: AnswerComment

http://stackoverflow.com/q/79044932
tagged with: angular
has body: YouTube streams have a specific feature in the view count will change once in a while and with that, the numbers will scroll up or down. From simple inspecting element, I can see that each digit is a strip of numbers that would change margin-top: ??px dynamically. I then decided to re-implement it in my current Angular project: rolling.component.html: {{ digit }} rolling.component.scss: $size: 30px; .animated-rolling-number { position: relative; height: 10 * $size; overflow: hidden; display: flex; } .animated-rolling-character { height: 10 * $size; display: flex; flex-direction: column; transition: margin-top 2s; font-size: $size; margin-top: 0; // even removing this doesnt work either div { height: $size; display: flex; align-items: center; justify-content: center; } } rolling.component.ts: import {Component, Input} from '@angular/core'; @Component({ selector: 'rolling-number', templateUrl: './rolling-number.component.html', styleUrls: ['./rolling-number.component.scss'] }) export class RollingNumberComponent { public rollingCharacters: number[] = []; private _value: number = 0; private size: number = 30; @Input() set value(newValue: number) { if (newValue !== this._value) { this._value = newValue; this.updateRollingCharacters(newValue); } } private updateRollingCharacters(newValue: number) { this.rollingCharacters = newValue.toString().split('').map(Number); } public getMargin(index: number): string { const currentDigit = this.rollingCharacters[index] || 0; const marginTop = -(9 - currentDigit) * this.size; return `${marginTop}px`; } } The whole project is also available under https://github.com/minhperry/skyblock-simulator/tree/master/src/app/animation/rolling-number to be viewed and clone for testing. The testing is then available under http://localhost:6969/test. However, the problem is, when I try to modify the number in anyway, by adding a setTimeOut or by incrementing/decrementing it, the shifting of margin-top just happen immediately, despite me having defi…
score: 1
favorite count: 0
tagged with: css-transitions
type: Question
has answer: http://stackoverflow.com/a/79045418
tagged with: http://stackoverflow.com/tag/html
tagged with: css-animations
downvote count: 0
answer count: 1
type: AnsweredQuestion
upvote count: 1
has title: "transition: margin-top " doesn't work at all
tagged with: css
accepted answer: http://stackoverflow.com/a/79045418

http://stackoverflow.com/comment/139408045
score: 0
comment on: http://stackoverflow.com/q/79060035
type: Comment
has text: @FedericodiGeronimo well, you have to do the calculation, based on the relative aspect-ratios of the element you want to fill and the actual image - ie basically what object-fit: cover would have to do. Then draw the correct portion on the canvas.
type: QuestionComment

http://stackoverflow.com/comment/139412862
score: 1
has text: Have you used your browser devtools inspect facility to see what HTML is produced? From that you can work out how to select various elements so CSS can be applied. Without an example of the HTML or a definition of what you want it to look like we can't really help. When you have added both those to your question (not on an external site) maybe tagging your question with CSS will get you the help you need.
type: Comment
comment on: http://stackoverflow.com/q/79064015
type: QuestionComment

http://stackoverflow.com/comment/139411570
type: Comment
score: 0
type: QuestionComment
has text: Thank you for adding the further detail that the spaces at the ends must remain constant. I believe this constraint means that you will need JavaScript so that this space can be calculated. I will leave my initial answer up for a short while in case it helps someone bring in this extra constraint.
comment on: http://stackoverflow.com/q/79050871

http://stackoverflow.com/comment/139400184
score: 0
type: QuestionComment
has text: Please convert your example into a snippet.
comment on: http://stackoverflow.com/q/79058917
type: Comment

http://stackoverflow.com/q/79027028
answer count: 1
has comment: http://stackoverflow.com/comment/139342381
has comment: http://stackoverflow.com/comment/139342183
downvote count: 0
tagged with: javascript
upvote count: 1
tagged with: css
has comment: http://stackoverflow.com/comment/139343020
has title: How can I programmatically scroll horizontally without scrolling vertically?
type: UnansweredQuestion
score: 1
has body: I am trying to build a simple, progressively enhancing image slider. The basis works fully without JavaScript: using link anchors, flexbox, and scroll-snap-align, the behaviour is already quite nice and functionally complete. As a progressive enhancement, I want to get rid of the vertical scrolling that happens upon clicking the anchor links. The obvious attempt is to preventDefault() when the hash in the URL changes (i.e., when the links are clicked) and do the scrollTo() in JavaScript with the top option set to the current scroll position. Here my current code: function horizontal_anchor() { var hash = decodeURIComponent(location.hash); // decode special chars like spaces var element = document.getElementById(hash.substring(1)); if (element) { var parent = element.closest(".slide"); let targetTop = window.pageYOffset !== undefined ? window.pageYOffset : ( document.documentElement || document.body.parentNode || document.body ).scrollTop; parent.scrollTo({ left: element.offsetLeft, top: targetTop, behavior: "smooth" }); console.log( "Scrolled to " + element.offsetLeft + ", top " + targetTop + "." ); } } document.addEventListener("DOMContentLoaded", function () { // on load if (location.hash) horizontal_anchor(); // on URL change window.addEventListener("hashchange", function (event) { event.preventDefault(); horizontal_anchor(); return false; }); }); /** * CSS of the slider */ .slider { max-width: 30em; display: flex; box-sizing: border-box; height: fit-content; align-items: center; transition: transform 0.25s ease-in-out; position: relative; overflow-x: auto; scroll-snap-type: x mandatory; } .slide { width: 100%; flex-grow: 1; flex-shrink: 0; flex-wrap: wrap; flex-direction: column; overflow-x: auto; scroll-snap-align: start; position: relative; } .slider-nav { position: absolute; top: 50%; bottom: 50%; z-index: 8; margin: 0.25em; padding: 0.25em; background-color: white; min-height: 1em; } .nav-next { right: 0; } .nav-prev { left: 0; } img { max-width: 100%; width…
favorite count: 0
has answer: http://stackoverflow.com/a/79029926
has comment: http://stackoverflow.com/comment/139342318
type: Question

http://stackoverflow.com/a/79036135
has body: To ensure the text doesn't 'move' when scaling so that things stay aligned you could have the whole background color, 'padding', border radius and shadow on a before pseudo element which has absolute positioning. Also, when doing the scale transform have the origin at top right of the element so the text doesn't shift (if that is what is required) in terms of its left hand position so things are still aligned with any title. I've put 'padding in quotes here because this snippet creates the effect of padding by increasing the pseudo element's width. &lt;style&gt; * { box-sizing: border-box; } .pop-out { transform-origin: top left; position: relative; transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out, border-radius 0.2s ease-in-out; &amp;:hover { cursor: pointer; transform: scale(1.1); } } #wrapper { margin-left: 50px; display: flex; justify-content: center; } #my-element { width: 200px; flex: 0 0 auto; position: relative; } #my-element::before { content: ''; position: absolute; width: 100%; height: 100%; background-color: gray; transition: all 0.2s ease-in-out; border-radius: 0px; box-shadow: 0 0 0px rgba(0, 0, 0, 0.2); transform-origin: center center; z-index: -1; left: 50%; transform: translateX(-50%); } #my-element:hover::before { width: calc(100% + 2rem); background: white; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); border-radius: 10px; } &lt;/style&gt; &lt;div id="wrapper"&gt; &lt;div class="pop-out" id="my-element"&gt; My element. &lt;/div&gt; &lt;/div&gt;
answers question: http://stackoverflow.com/q/79035820
type: Answer
score: 0

http://stackoverflow.com/q/79007479
has answer: http://stackoverflow.com/a/79192806
has body: I´m building a Bootstrap Modal and I want to put some tabs inside this Modal to be able to navigate inside him. What is happenings is that the tabs displayed are not aligned the proper way like in the following image: enter image description here I am building this modal in the Javascript with this code: BootstrapDialog.show({ title: "Vouchers Details", closable: false, message: ` Home Menu 1 Menu 2 HOME Some content. Menu 1 Some content in menu 1. Menu 2 Some content in menu 2. `, buttons: [ { label: "Dismiss", action: function (dialog) { dialog.close(); }, }, ], }); I need some help to align this tabs. I try to use some bootstrap classes and some css and html customization, but it did not solve this problem.
has comment: http://stackoverflow.com/comment/139306518
downvote count: 0
tagged with: css
type: UnansweredQuestion
score: 1
upvote count: 1
tagged with: modal-dialog
favorite count: 0
tagged with: http://stackoverflow.com/tag/html
type: Question
has comment: http://stackoverflow.com/comment/139318191
answer count: 1
has title: Tabs not aligned in Bootstrap Modal
tagged with: bootstrap-4
tagged with: javascript

http://stackoverflow.com/comment/139315584
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/79012374
has text: Can you describe exactly what effect you want to have on a touch device?
type: Comment

http://stackoverflow.com/q/78966785
tagged with: maui-blazor
tagged with: css
accepted answer: http://stackoverflow.com/a/78968701
tagged with: hybrid
has answer: http://stackoverflow.com/a/78968701
type: Question
answer count: 1
has title: MudBlazor: How to align left/stretch MudStack's (MudContainer) items in MAUI Blazor Hybrid App
type: AnsweredQuestion
score: 0
tagged with: mudblazor
has body: I'm preparing an outline for a custom form using MudBlazor components in .NET8 MAUI Blazor Hybrid App. When using https://try.mudblazor.com/snippet/QOmoaXYXJzLgAEtS Test Outline Section 1 Section 2 Section 3 Main Table Ready everything works fine (see pictures (1) and (2)). And when using the same .razor page's markup in a .NET8 MAUI Blazor Hybrid App then MudStack's MudContainer elements have large empty margins on the left and the right sides - see picture (3). How to fix the https://try.mudblazor.com/snippet/QOmoaXYXJzLgAEtS markup to have its MudContaners' stretched in MAUI Blazor Hybrid App the same way as on try.mudblazor.com? Pictures: Picture (1) Picture (2) Picture (3)
tagged with: .net-8.0

http://stackoverflow.com/q/79063602
has comment: http://stackoverflow.com/comment/139409400
has title: Make two slant divs touch on the inside with shape-outside and clip-path and wrap text
type: Question
accepted answer: http://stackoverflow.com/a/79063773
tagged with: http://stackoverflow.com/tag/html
type: AnsweredQuestion
has answer: http://stackoverflow.com/a/79063748
has comment: http://stackoverflow.com/comment/139409455
score: 0
answer count: 2
tagged with: css
has answer: http://stackoverflow.com/a/79063773
possible better answer: http://stackoverflow.com/a/79063748
has body: I have the following HTML and CSS .container { display: flex; width: 100%; height: 300px; } .left, .right { width: 50%; height: 200px; } .left { background-color: #4CAF50; clip-path: polygon(0 0, 100% 0, 70% 100%, 0 100%); shape-outside: polygon(0 0, 100% 0, 70% 100%, 0 100%); } .right { background-color: #2196F3; shape-outside: polygon(30% 0, 100% 0, 100% 100%, 0 100%); clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%); } Lorem Ipsum asj sjas hhjks hskj hsjkas hkjas hakjsh skjh skj hsakj sakja shkjas hkjsa hskj hskjs hkjshakjsh sksah kjlash akjshskjasha kjsl It look great but I can't figure out how to make the inside edges touch instead of being separated by a middle white section. This is what it generates right now Additionally, I want the text to wrap inside the dive and not break out. Thanks in advance for any help.

http://stackoverflow.com/comment/139271819
type: AnswerComment
has text: No, as your third screenshot above shows, when there's not enough room vertically, the bottom of the image is being clipped. It should shrink to fit. We were almost there when using background image with `background-size: contain`
type: Comment
score: 0
comment on: http://stackoverflow.com/a/78986353

http://stackoverflow.com/q/79014805
accepted answer: http://stackoverflow.com/a/79016335
tagged with: php
tagged with: product
tagged with: css
tagged with: woocommerce
downvote count: 1
favorite count: 0
has title: Embed each term from a comma separated string of product attributes in a span tag
type: Question
has answer: http://stackoverflow.com/a/79016335
answer count: 1
type: AnsweredQuestion
has comment: http://stackoverflow.com/comment/139320061
tagged with: wordpress
score: 0
upvote count: 1
has body: In an online store on WooCommerce, I use code that displays certain product attributes on archive/category pages. add_action( 'woocommerce_before_shop_loop_item_title', 'new_template_loop_product_meta', 20 ); function new_template_loop_product_meta() { global $product; $attrs_by_cats = [ 20 => [ 'pa_size' ], ]; $attr_list = [ 'Size' => 'pa_size', ]; if ( ! is_object( $product ) ) { $product = wc_get_product( get_the_id() ); } $cats = $product->get_category_ids(); if ( ! is_array( $cats ) ) { return; } $attrs = []; foreach ( $cats as $cat ) { if ( isset( $attrs_by_cats[ $cat ] ) ) { $attrs[] = $attrs_by_cats[ $cat ]; } } $allowed_attrs = array_unique( array_merge( [], ...$attrs ) ); echo ' '; foreach ( $attr_list as $attr_title => $attr_name ) { if ( in_array( $attr_name, $allowed_attrs, true ) ) { show_attribute( $product, $attr_title, $attr_name ); } } echo ' '; } function show_attribute( $product, $attr_title, $attr_name ) { if ( 'sku' === $attr_name ) { $attr = (string) $product->get_sku(); } else { $attr = $product->get_attribute( $attr_name ); } if ( '' === $attr ) { return; } echo 'Size: ' . esc_html( $attr ) . ''; } Right now the code displays the “Size” attribute in a single list/array, comma separated. I need to show the sizes individually and without comma, i.e. wrap each of the sizes in a span and make a border for each one. It's like this - https://prnt.sc/V9LcNuB2kp9B I've looked at different options on this site for placing attributes on the archive/categories pages, but nothing fits. How can this be implemented? I will be glad to help with the code!

http://stackoverflow.com/comment/139174270
comment on: http://stackoverflow.com/a/78935589
score: 0
type: AnswerComment
has text: Apparently I definitely should, seeing your response I can tell my syntax was mostly wrong. However I did try using only the id #boxes_1 and that did not output the intended result. Thanks anyway, I needed that eye opener to go back and look at the basics.
type: Comment

http://stackoverflow.com/q/79000393
has answer: http://stackoverflow.com/a/79000439
has body: When referencing a figure in a Quarto document and knitting to HTML, a colon is placed by default between the word Figure and the figure caption. I would like that colon to be a period. I've tried a style.css file with the following but it doesn't work: .figcaption::before { content: "Figure " counter(fig): ". "; } Here is my quarto document: --- title: "Periods are better than colons" author: "Eric" format: html: css: style.css --- I'd like to replace the colon with a period in the caption for @fig-MyRLogo. ![RLogo](Rlogo.jpg){fig-align="left" #fig-MyRLogo} And the output I get is:
tagged with: quarto
favorite count: 0
upvote count: 5
accepted answer: http://stackoverflow.com/a/79000439
type: Question
has title: Change colon to period in figure caption in Quarto
answer count: 1
downvote count: 0
type: AnsweredQuestion
score: 5
tagged with: css

http://stackoverflow.com/q/78968754
has answer: http://stackoverflow.com/a/78977351
score: 0
has body: with grid and flex properties i'm trying to let my info-box overflow a bit over my image instead of having it right below. Is there any suggestions to make it possible? So far I tried the simple techniques of grid. I made a whole container for both the img and info-box. Thereafter I wrapped my info-container as an grid to try to move it up so it could overflow my img. .info-container { display: grid; grid-template-columns: 1fr minmax(0, 70ch) 1fr; column-gap: 1rem; >* { grid-column: 2; } >img { grid-column: 2; max-block-size: 300px; inline-size: 100%; object-fit: contain; } } .wrapper { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: 0; gap: 1rem 2rem; } .info-box { grid-row: 2; grid-column: 2; display: flex; justify-content: space-between; align-items: center; background-color: #1e1e1e; padding: 1.5rem 2rem; border-radius: 12px; color: #fff; flex-wrap: wrap; } .info-item { text-align: center; flex: 1; margin: 0.5rem 0; } .info-item h4 { font-size: 1rem; margin: 0; padding: 0; line-height: 1.2; color: #ccc; } .info-item p { font-size: 0.875rem; margin: 0; } .live-preview .btn { background-color: #f7b500; color: #000; padding: 0.75rem 1.5rem; border-radius: 24px; text-decoration: none; font-weight: bold; display: inline-block; margin: 0 auto; } .live-preview .btn:hover { background-color: #e0a400; } @media (max-width: 768px) { .info-box { flex-direction: column; text-align: center; } .info-item { margin-bottom: 1rem; } .live-preview { margin-top: 1rem; } } Case Name Taxes & Efficiency Category Business Date 27th September 2022 Live Preview
has comment: http://stackoverflow.com/comment/139235387
has title: CSS Grid + Flex: info-container won't overflow on img
tagged with: css
tagged with: flexbox
tagged with: css-grid
type: UnansweredQuestion
type: Question
tagged with: http://stackoverflow.com/tag/html
answer count: 1

http://stackoverflow.com/q/79052069
tagged with: css
answer count: 0
upvote count: 2
tagged with: 3d
type: UnansweredQuestion
has body: I would like to apply the homography to a square of side length 200px, where k ranges from 0 to 0.02. According to this demo, for a square of side length 2, when k=1, the left edge will go to infinity, and when k>1, the "backface" will emerge from the right side. In my case, the square is of side length 200px. When k=1, the left edge will go to infinity, and when k>0.01, the "backface" will emerge from the right side. Initial attempt: #div1 { height: 200px; width: 200px; border: solid 1px; transform-style: preserve-3d; animation: squareMotion 2s alternate linear infinite; background: rgba(100,100,100,0.5); } @keyframes squareMotion { from { transform: matrix3d( 1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1 ); } to { transform: matrix3d( 1,0,0,0.02, 0,1,0,0, 0,0,1,0, 0,0,0,1 ); } } but the backface (when k>0.01) doesn't show up. I can see a self-intersecting quadrilateral in Firefox's element inspector. The expected "backface" should be on the right on the exterior of it. Then I put an identical inside it, which serves as "backface". #div1 { height: 200px; width: 200px; border: solid 1px; transform-style: preserve-3d; animation: squareMotion 2s alternate linear infinite; background: rgba(100,100,100,0.5); } #div2 { height: 200px; width: 200px; border: solid 1px; transform: matrix3d( -1,0,0,0, 0,-1,0,0, 0,0,-1,0, 0,0,0,-1 ); background: rgba(100,100,100,0.5); } @keyframes squareMotion { from { transform: matrix3d( 1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1 ); } to { transform: matrix3d( 1,0,0,0.02, 0,1,0,0, 0,0,1,0, 0,0,0,1 ); } } then the gray "backface" shows up on the right, as expected. I think, -1 times identity matrix gives the same homography as the identity matrix. In the above I wonder why -1 times identity matrix could be used to show the "backface". matrix3d( -1,0,0,0, 0,-1,0,0, 0,0,-1,0, 0,0,0,-1 ); (This "backface" concept seems to be different from the common "backface" in CSS backface-visibility, but I don't know if there is a suitable word for it. But if you compute the …
favorite count: 0
tagged with: math
type: Question
score: 2
downvote count: 0
has title: Show the backface using -1 times identity matrix in CSS
tagged with: projective-geometry

http://stackoverflow.com/comment/139511323
type: AnswerComment
comment on: http://stackoverflow.com/a/79056061
type: Comment
score: 0
has text: You have to put it in the elementor widget custom CSS. since it includes a selector and only applies to the specific widget, not all websites. Can you please mention the name of widget you are using?

http://stackoverflow.com/a/79000441
type: Answer
score: 0
has body: Theory People are good at detecting visual changes. We can detect changes not just from one color to another, but also from one rate of change to another. To compensate, you have to slow down the rate of change. Of course the linear-gradient function can only approximate a changing rate of change, so a little experimentation will be required for how many steps are necessary to look smooth across that distance. Giving yourself more distance over which to make the change can also help distribute the changes better. (That might mean lowering the 40% barrier, or increasing the border width, or both.) Mechanics If you use a dimension value (e.g. 20% or 2rem) without a color value, the linear-gradient CSS function assumes the color value is 50% of the way between the two color stops around it. In the example below, I use more than 60% of the width to perform the transition, and spend more of the distance transitioning between solid and halfway than I do between halfway and transparent. Example html::before { /* ... */ --solid-at: 20%; --transparent-at: 100%; --speedup: 135%; --diff: calc( var(--transparent-at) - var(--solid-at) ); --mid-diff: calc( var(--diff) * 0.5 ); --adjusted-mid: calc( var(--mid-diff) * var(--speedup) ); --new-stop: calc( var(--solid-at) + var(--adjusted-mid) ); border-image: linear-gradient( to bottom, yellow var(--solid-at), var(--new-stop), transparent var(--transparent-at) ) 120; } This equates to solid yellow at 20%, half-transparent at 74% (instead of 60%), and fully transparent at 100%. Tools Unlike many CSS gradient tools, colorgradient.dev lets you model this behavior by removing a color value from a stop.
answers question: http://stackoverflow.com/q/79000303

http://stackoverflow.com/q/78993739
tagged with: local
has comment: http://stackoverflow.com/comment/139281505
has comment: http://stackoverflow.com/comment/139281256
has title: CSS - how to load a custom local font on OSX
tagged with: css
has comment: http://stackoverflow.com/comment/139281527
answer count: 3
tagged with: macos
has answer: http://stackoverflow.com/a/78995258
has comment: http://stackoverflow.com/comment/139281581
linked to: http://stackoverflow.com/q/5074680
has comment: http://stackoverflow.com/comment/139281835
tagged with: font-face
has body: I have a local webserver, and I would like to load a local custom font that is not on my project folder I have checked some tutorials, but for a reason I do not know, I do not manage to load the custom font Here is what I have done so far Font test Font no jutsu! I have also tried other solutions like src: local('file:/Users/gomu/Font/testBold.otf'); src: url('file:/Users/gomu/Font/testBold.otf'); But it does not work I have also disabled the local file restrictions on Safari, but it still does not work. What I am missing there? I am currently working on MAC OS Sonoma and can use Safari and Chrome For your information, "testBold.otf" works if it hosted on a server, but here my goal is to load it locally from my computer Otherwise, maybe I need to put in the system font folder? (is there something specific to do about that) Thank you in advance
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139281198
has comment: http://stackoverflow.com/comment/139281786
favorite count: 0
has comment: http://stackoverflow.com/comment/139281351
has comment: http://stackoverflow.com/comment/139284160
type: Question
has answer: http://stackoverflow.com/a/78994354
tagged with: http://stackoverflow.com/tag/html
score: -3
linked to: http://stackoverflow.com/q/59986432
has comment: http://stackoverflow.com/comment/139281401
has comment: http://stackoverflow.com/comment/139281545
has comment: http://stackoverflow.com/comment/139281275
linked to: http://stackoverflow.com/q/43327227
downvote count: 4
has comment: http://stackoverflow.com/comment/139281311
upvote count: 1
has comment: http://stackoverflow.com/comment/139281272
has answer: http://stackoverflow.com/a/78994391

http://stackoverflow.com/a/79051264
upvote count: 1
score: 1
type: AcceptedAnswer
answers question: http://stackoverflow.com/q/79050854
type: Answer
accepted answer of: http://stackoverflow.com/q/79050854
downvote count: 0
has body: To change color of all a elements, you can try like this: .banner { background-color: #114653; color: white; a { color: red; } }

http://stackoverflow.com/a/79036382
answers question: http://stackoverflow.com/q/79035820
type: Answer
score: 0
has body: * { box-sizing: border-box; } .pop-out { position: relative; transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out, border-radius 0.2s ease-in-out; background-color: gray; width: 200px; display: inline-block; } /* Create a pseudo-element to handle padding-like space on hover */ .pop-out::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; transition: padding 0.2s ease-in-out; z-index: -1; /* Put it behind the main content */ } .pop-out:hover::before { padding-left: 1rem; padding-right: 1rem; } .pop-out:hover { cursor: pointer; background-color: white !important; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); transform: scale(1.1); border-radius: 10px; } #wrapper { margin-left: 50px; display: flex; justify-content: center; } &lt;div id="wrapper"&gt; &lt;div class="pop-out" id="my-element"&gt; My element. &lt;/div&gt; &lt;/div&gt; Pseudo-element ::before: This creates an invisible element that takes up space and will expand its width (or padding) when hovered. This prevents the actual content from shifting. Z-index: Ensures the pseudo-element doesn’t cover the actual content of your element. Transition: The transition still works, creating the effect of padding growing, but since it's on a pseudo-element, the content inside the div stays static.

http://stackoverflow.com/comment/139427104
type: AnswerComment
comment on: http://stackoverflow.com/a/79063036
has text: @Jayiash Godani It does not work with `background-attachment: fixed`, the `background-attachment` is broken then.
type: Comment
score: 0

http://stackoverflow.com/comment/139185176
comment on: http://stackoverflow.com/a/78941500
type: Comment
type: AnswerComment
has text: Exactly what I was looking for! Thank you!
score: 0

http://stackoverflow.com/comment/139210129
type: AnswerComment
has text: I added a third example with zero blur but with an offset.
score: 0
type: Comment
comment on: http://stackoverflow.com/a/78946594

http://stackoverflow.com/a/78989593
score: 0
has comment: http://stackoverflow.com/comment/139273765
answers question: http://stackoverflow.com/q/78989508
has body: I just modified your snippet here so you can just give it a try. It's indeed better using an outer div to wrap the blocks... body { padding: 50px; } .shadowed { border-radius: 10px; box-shadow: 2px 2px 5px #0001, -2px -2px 5px #0001, 0 0 10px #00F1; } .block { padding: 20px; background-color: white; } Block 1 Block 2 Block 3
type: Answer

http://stackoverflow.com/comment/139148543
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78921533
type: QuestionComment
has text: Please read [How to Ask](https://stackoverflow.com/help/how-to-ask) and [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example), and then edit your question accordingly. As I cannot reproduce your issue.

toggle
tag name: toggle
type: Tag
tags question: http://stackoverflow.com/q/79035000
tags question: http://stackoverflow.com/q/79487781

http://stackoverflow.com/q/78948236
tagged with: scaling
has comment: http://stackoverflow.com/comment/139203059
tagged with: css
has answer: http://stackoverflow.com/a/78951435
score: 0
linked to: http://stackoverflow.com/q/70157949
has body: I have coded a website and have used a percentage width like so: max-width: 50% When the user zooms the website, the text and other divs are scaling OK but these percentage-set divs are enlarging very slowly. It feels like the origin of the %, which is the body, doesn't actually change its size value behind the scene too much, so things are not scaling proportionally. Is there any way to keep using % or vw (viewport width) values and allow for good scaling? I had to create way too many media queries and use px values to solve this issue: @media (min-width: 860px) { max-width: 400px; } @media (min-width: 1200px) { max-width: 600px; } @media (min-width: 1500px) { max-width: 600px; } @media (min-width: 1800px) { max-width: 600px; } @media (min-width: 2100px) { max-width: 600px; } I have tried the %, but it didn't work. px values scale well, but I have to create much more code, and it's also not scaling fluently.
type: Question
answer count: 1
tagged with: browser
tagged with: zooming
accepted answer: http://stackoverflow.com/a/78951435
type: AnsweredQuestion
has title: How to use relative CSS dimensions (%, vw, vh) and preserve user zooming/scaling

http://stackoverflow.com/q/78979126
has title: How to resize table in HTML after clicking a button?
score: 0
tagged with: css
has answer: http://stackoverflow.com/a/79048430
has comment: http://stackoverflow.com/comment/139254542
type: UnansweredQuestion
type: Question
tagged with: wicket
tagged with: http://stackoverflow.com/tag/html
answer count: 1
has body: I have a table where I can hide some stuff with a click of a button "Ocultar Informacao Adicional", but when I hide these labels, textfields, etc I can´t resize the table and it stays with a huge blank space. I've tried height:auto, height:100%, display: none but none of those seemed to work Here's my HTML Fases Fase número : Entrada em funcionamento do Estabelecimento Aprovação do Programa Funcional Não Disponível Anúncio do concurso para o projeto Não Disponível Adjudicação do projeto Não Disponível Aprovação do projeto Não Disponível Anúncio do concurso para a empreitada Não Disponível Adjudicação da empreitada Não Disponível Recepção provisória da obra Não Disponível Inauguração do Edifício Hospitalar Não Disponível Recepção definitiva da obra Não Disponível
tagged with: javascript

http://stackoverflow.com/a/78943395
answers question: http://stackoverflow.com/q/78943132
has body: Thanks to Emmanuele Bassi from discourse.gnome.org this is the solution: gtk_widget_set_valign(button, GTK_ALIGN_CENTER);
score: 1
downvote count: 0
type: Answer
upvote count: 1

http://stackoverflow.com/comment/139415452
comment on: http://stackoverflow.com/a/79066480
has text: Always explain your answer. Never just dump a block of code and expect everyone to understand what you did
type: AnswerComment
score: 4
type: Comment

http://stackoverflow.com/comment/139384900
comment on: http://stackoverflow.com/q/79050057
has text: If you think this post violates the site rules, please feel free to flag the post. Otherwise, no, I cannot forget a specific part of the problem, the fixed height is important. Flexboxes does not solve spreading out the string in several containers.
type: Comment
score: 0
type: QuestionComment

http://stackoverflow.com/comment/139377715
has text: I have a button to print the document as you can see https://www.talabe.ma/2021/01/modele-procuration-maroc-pdf-doc-word.html
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/79026980

angularjs
type: Tag
tag name: angularjs
tags question: http://stackoverflow.com/q/79042214
tags question: http://stackoverflow.com/q/79519378
tags question: http://stackoverflow.com/q/79517412
tags question: http://stackoverflow.com/q/79509405

http://stackoverflow.com/comment/139322465
type: AnswerComment
type: Comment
comment on: http://stackoverflow.com/a/79004114
score: 0
has text: Thank you for the suggestion! For some reason that isn't working though - do I need to specify an id for each table? With the current method, only the targeted table has a vertical scrollbar, but every table in the document receives a horizontal scrollbar and the column widths are messed up and stretched out as it tries to match the targeted table.

http://stackoverflow.com/a/78950347
has body: One of great things about this breakout technique is that you can nest grid-containers. In this case, you want the inside of the .full nav to have the same grid tracks as the parent grid container. All you need to do is add the grid-container class to : If it’s helpful, Kevin Powell also has a nice, detailed explanation. of this breakout technique. :root { font-size: 1em; line-height: 1.5; box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } body { margin: 0; padding: 0; } .header { grid-area: header; } .nav { grid-area: nav; background: slateblue; } .menu { padding: 0; display: flex; list-style: none; & li + li { margin-left: 1em; } & a { color: #fff; } } .main { grid-area: main; } .footer { grid-area: footer; } .grid-container { display: grid; grid-gap: 10px; grid-template-columns: 1fr; grid-template-areas: "header" "nav" "main" "footer"; } @media (min-width: 52em) { .grid-container { grid-template-columns: minmax(1em, 1fr) minmax(300px, 800px) minmax(1em, 1fr); /* justify-content: center; */ } .grid-container > * { grid-column: 2; } .grid-container > .full { grid-column: 1/-1; } } Layout Header Menu Item Menu Item Menu Item Menu Item Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid deleniti velit odit, quasi culpa inventore ratione asperiores repellat adipisci enim, maxime iusto optio labore incidunt non natus delectus, soluta exercitationem! Footer
downvote count: 0
type: Answer
upvote count: 1
answers question: http://stackoverflow.com/q/78949395
score: 1

http://stackoverflow.com/q/78992932
has answer: http://stackoverflow.com/a/78993492
has title: React sticky header flickers on scroll - IntersectionObserver and CSS issues
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139280629
has body: I'm implementing a sticky header in a React application(carbon is the framework in use). The header is supposed to be sticky and have a border bottom when a user scrolls up so that they have context of what they are viewing, and when they scroll down to the original page display, the header should not be sticky and should not have a border bottom. I am using the Intersection Observer API, but I'm experiencing a flickering issue when scrolling. I am using IntersectionObserver to detect when the header should become sticky by applying CSS classes based on the sticky state using a debounced state update to prevent rapid changes. Any recommendations or advise on how i can achieve the expected behaviour will be appreciated. Here (drive.google.com) is the video with the behaviour. Reproduction (codesnadbox.io) const [showStickyHeader, setShowStickyHeader] = useState(false); const observer = useRef(null); const debouncedSetShowStickyHeader = useRef( debounce((value) =&gt; setShowStickyHeader(value), 50) ).current; const stickyMenuHeaderRef = useCallback( (node) =&gt; { if (observer.current) { observer.current.disconnect(); } if (node) { observer.current = new IntersectionObserver( ([entry]) =&gt; { const shouldStick = entry.intersectionRatio &lt; 0.95; debouncedSetShowStickyHeader(shouldStick); }, { threshold: [0, 0.95, 1], rootMargin: '0px 0px -5px 0px', } ); observer.current.observe(node); } return () =&gt; { if (observer.current) { observer.current.disconnect(); } debouncedSetShowStickyHeader.cancel(); }; }, [debouncedSetShowStickyHeader] ); .resultsHeader { padding: var(--spacing-03) 0; z-index: 10; background-color: var(--openmrs-background-grey); top: var(--spacing-09); display: flex; } .stickyResultsHeader { padding: var(--spacing-03) 0; z-index: 10; background-color: var(--openmrs-background-grey); top: var(--spacing-09); display: flex; position: sticky; border-bottom: 1px solid #e1e1e1e1; }
type: Question
answer count: 1
has comment: http://stackoverflow.com/comment/139281094
tagged with: reactjs
score: 0
tagged with: javascript
has comment: http://stackoverflow.com/comment/139279751
tagged with: css

http://stackoverflow.com/q/79066138
has answer: http://stackoverflow.com/a/79068056
has comment: http://stackoverflow.com/comment/139414303
has body: Is it possible to use a lottie animation as a mask-image property on an image? This is my code: const newData = { "v": "5.10.2", "fr": 60, "ip": 0, "op": 61, "w": 500, "h": 500, "nm": "Zeichenfläche – 2", "ddd": 0, "assets": [], "layers": [{ "ddd": 0, "ind": 1, "ty": 4, "nm": "211120_Birgit-Brandis_1216_AS72265r", "sr": 1, "ks": { "o": { "a": 0, "k": 100, "ix": 11 }, "r": { "a": 0, "k": 0, "ix": 10 }, "p": { "a": 0, "k": [250, 250, 0], "ix": 2, "l": 2 }, "a": { "a": 0, "k": [182.5, 181.999, 0], "ix": 1, "l": 2 }, "s": { "a": 0, "k": [100, 100, 100], "ix": 6, "l": 2 } }, "ao": 0, "shapes": [{ "ty": "gr", "it": [{ "ind": 0, "ty": "sh", "ix": 1, "ks": { "a": 1, "k": [{ "i": { "x": 0.05, "y": 1 }, "o": { "x": 0.5, "y": 0 }, "t": 0, "s": [{ "i": [ [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [-1.361, -1.076], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0] ], "o": [ [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 4.649], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0] ], "v": [ [365, 247.614], [349.777, 152.992], [297.992, 152.991], [312.734, 84.458], [312.734, 0.162], [265.372, 0.162], [250.757, 0.162], [181.461, 0.152], [65.961, 0.002], [35.985, 0.001], [0, 0], [0, 126.637], [2.322, 136.401], [14.262, 145.847], [15.552, 154.496], [17.362, 166.638], [17.362, 166.64], [0.047, 166.64], [0.047, 286.072], [0.047, 362.438], [14.731, 362.697], [39.602, 363.136], [253.728, 363.836], [253.728, 363.635], [365, 363.999] ], "c": true }] }, { "t": 60, "s": [{ "i": [ [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0.303, -3.151], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [-3.261, -3.473], [0, 0], [0, 0], [0, 0], [0, 0] ], "o": [ [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 4.649], …
tagged with: css
accepted answer: http://stackoverflow.com/a/79068056
has comment: http://stackoverflow.com/comment/139413801
type: Question
has title: Lottie animation as mask-image
answer count: 1
type: AnsweredQuestion
score: 0
tagged with: javascript
tagged with: lottie

megamenu
tags question: http://stackoverflow.com/q/79002045
type: Tag
tags question: http://stackoverflow.com/q/78966188
tag name: megamenu

http://stackoverflow.com/comment/139228310
type: Comment
score: 0
has text: use `line-height`.
comment on: http://stackoverflow.com/q/78964813
type: QuestionComment

http://stackoverflow.com/q/78912182
has body: I'm sorry if this question is a bit elementary but I've been hitting into a wall with CSS for a bit now. And I can't wrap my head around infinite scrolling marquees. I still feel pretty confident/happy because I was able to figure out how to do the rest of the styling and sort of business on my own on the spot, but I just had a problem with making the .marquee-row-items repeat once they left the parent element. I know I can just add more marquee row items but I only have a limited number to work with and I really wanna make this infinite scrolling without any large or noticeable gaps between animation. But in my code it always "restarts" rather than continuing if that makes sense. Hopefully the code snippet is easier to understand. I believe this can all be accomplished with CSS without touching JS... right? I tried playing around with the width of the parent element and the row. I also looked up a tutorial that said to add a variable gap but even after playing with the code pen I don't think I understood it yet. I added the --gap variable. HTML, CSS code: .marquee { --gap: 1em; display: flex; /* align-items: center; */ flex-direction: column; gap: var(--gap); margin: 0 auto; padding: 1em; border: 1px solid black; background: black; overflow: hidden; position: relative; /*/ Allows psuedo-elements to position themselves relative to the container /*/ } .marquee::before, .marquee::after { content: ""; position: absolute; top: 0%; left: 0%; z-index: 2; display: block; width: 50%; height: 100%; opacity: 100%; user-select: none; pointer-events: none; /*/ Allows us to pause the animation by hover by removing div 'obstruction' /*/ } .marquee::before { /*/ Adds a fade out/in effect at the both ends of our marquee container /*/ background: linear-gradient(to right, black, transparent); } .marquee::after { background: linear-gradient(to left, black, transparent); } .marquee__row { display: flex; flex-direction: row; flex-shrink: 0; gap: var(--gap); justify-content: space-aroun…
tagged with: frontend
tagged with: css
upvote count: 2
downvote count: 1
answer count: 4
type: UnansweredQuestion
linked to: http://stackoverflow.com/q/71224741
score: 1
favorite count: 0
has comment: http://stackoverflow.com/comment/139131677
has answer: http://stackoverflow.com/a/78912278
has answer: http://stackoverflow.com/a/78912590
type: Question
has title: How can I make an infinite-scrolling marquee? I can't get my items to repeat
has answer: http://stackoverflow.com/a/79519372
has answer: http://stackoverflow.com/a/78912341
tagged with: animation
has comment: http://stackoverflow.com/comment/140236248

http://stackoverflow.com/comment/139220754
has text: Are you seeing this on both iOS and android systems?
type: QuestionComment
comment on: http://stackoverflow.com/q/78960221
type: Comment
score: 0

http://stackoverflow.com/q/79056932
favorite count: 0
type: Question
has title: How to float div when height change
has body: I need to overide CSS in a wp plugin that show a grid of elements, so it's not possible to change structure or add classes. So, lss, the structure is like this Box1 Box2 Box3 Box4 Box5 As you can see, only wrapper and 1st div have their own class. So this is how plugin show grid: Now, adding CSS, I had the desired layout: .wrapper {display:inline} .box {with:25%; float:left;} .box1 {width:50%} My goal is now to add a different height on hover on small boxes. Code is not a problem but, when height change, layout goes to hell. This is what I'd like: This is what I have: .wrapper {width:100%;display:inline;} .box {width:24%; height:100px;background:red;float:left;border:1px solid white;} .box1 {width:49%; height:200px;background:green;float:left;} .box:hover {height:300px;} Box1 Box2 Box3 Box4 Box5
downvote count: 0
linked to: http://stackoverflow.com/q/44377343
upvote count: 1
answer count: 0
tagged with: css
duplicate of: http://stackoverflow.com/q/44377343
tagged with: flexbox
has comment: http://stackoverflow.com/comment/139396894
type: UnansweredQuestion
score: 1

http://stackoverflow.com/q/79012154
score: 0
tagged with: css
tagged with: lwc
has title: How to hide the Scrollbar while using a Modal from LwC?
tagged with: salesforce-lightning
has body: I have certain contents under body, but as the contents increases a scrollbar starts to appear as expected. But is there a way to hide it and still the modal is scrollable? If there's any or anything similar please let me know. Thanks &lt;lightning-modal-header&gt;&lt;/&lt;lightning-modal-header&gt; &lt;lightning-modal-body&gt;&lt;/&lt;lightning-modal-body&gt; &lt;lightning-modal-footer&gt;&lt;/&lt;lightning-modal-footer&gt;
type: UnansweredQuestion
has answer: http://stackoverflow.com/a/79012849
tagged with: http://stackoverflow.com/tag/html
type: Question
answer count: 1

http://stackoverflow.com/a/78931052
type: Answer
has comment: http://stackoverflow.com/comment/139166176
has comment: http://stackoverflow.com/comment/139166280
has comment: http://stackoverflow.com/comment/139166092
has body: If you want it so that when you hover over a card, it becomes unblurred until another card is hovered, you can use JavaScript and add a blurred class to all cards except the one that is hovered over: Note not hovering any card will blur all cards except the first one const cards = document.querySelectorAll('.exp__card'); // blur all cards except the first one cards.forEach((card, index) => { if (index !== 0) { card.classList.add('blurred'); } }); // unblur the card that is hovered and blur the others cards.forEach(card => { card.addEventListener('mouseover', () => { cards.forEach(c => c.classList.add('blurred')); card.classList.remove('blurred'); }); card.addEventListener('mouseout', () => { cards.forEach((c, index) => { if (index !== 0) { c.classList.add('blurred'); } else { c.classList.remove('blurred'); } }); }); }); .exp__card { width: 100px; height: 50px; margin: 5px; background-color: gray; } .blurred { filter: blur(3px); } Card Card Card Card Card Card
answers question: http://stackoverflow.com/q/78930892
score: -1
has comment: http://stackoverflow.com/comment/139166186
has comment: http://stackoverflow.com/comment/139166132
has comment: http://stackoverflow.com/comment/139166143
downvote count: 1
upvote count: 0
accepted answer of: http://stackoverflow.com/q/78930892
type: AcceptedAnswer
has comment: http://stackoverflow.com/comment/139166913

http://stackoverflow.com/a/79028000
has comment: http://stackoverflow.com/comment/139343981
upvote count: 3
has comment: http://stackoverflow.com/comment/139345121
has comment: http://stackoverflow.com/comment/139344873
has comment: http://stackoverflow.com/comment/139344942
downvote count: 0
has body: The clip-path CSS property can do what you want. However, arriving at a path that matches your shape and is responsive has some steps. First, we can create the path we will use using an SVG editor. For example I have created an approximate curve using this tool. This gives me the SVG path: m429 0c-46 97-392 39-430 129l430 0V0 Unfortunately, using this like clip-path: path("m429 0c-46 97-392 39-430 129l430 0V0"); won't yield what you want since it won't be responsive. The path needs to be treated as relative to the container for that to happen and by default, this will not do that. One approach is to insert a dummy SVG into the page containing a <clipPath clipPathUnits="objectBoundingBox"> and a child <path> with those points above, and then reference this using clip-path: url(#your-clippath-id). This is detailed in this answer. However, this is a little cumbersome as you need to have additional SVG elements if only to reference them from the CSS. Another approach that avoids this is to convert the path to a polygon (which uses percentages) using some separate tool. I used this answer to successfully derive a polygon, which can be used with clip-path directly. This gave me: clip-path: polygon(99.77% 0.00%, 98.58% 6.65%, 97.06% 12.50%, 95.29% 17.54%, 93.36% 21.86%, 91.32% 25.56%, 89.20% 28.75%, 87.03% 31.52%, 84.82% 33.95%, 82.58% 36.08%, 80.33% 37.97%, 78.06% 39.66%, 75.78% 41.17%, 73.49% 42.53%, 71.19% 43.77%, 68.89% 44.90%, 66.59% 45.93%, 64.28% 46.89%, 61.97% 47.79%, 59.66% 48.63%, 57.34% 49.42%, 55.03% 50.18%, 52.72% 50.91%, 50.40% 51.63%, 48.08% 52.34%, 45.77% 53.04%, 43.45% 53.76%, 41.14% 54.49%, 38.82% 55.24%, 36.51% 56.03%, 34.20% 56.87%, 31.89% 57.76%, 29.58% 58.72%, 27.27% 59.76%, 24.97% 60.90%, 22.68% 62.17%, 20.39% 63.57%, 18.12% 65.14%, 15.85% 66.92%, 13.61% 68.95%, 11.39% 71.28%, 9.21% 73.98%, 7.09% 77.15%, 5.06% 80.91%, 3.16% 85.41%, 1.50% 90.80%, 0.18% 97.16%, 1.15% 100.00%, 3.47% 100.00%, 5.80% 100.00%, 8.13% 100.00%, 10.45% 100.00%, 12.78% 100.00%, …
type: Answer
has comment: http://stackoverflow.com/comment/139345188
answers question: http://stackoverflow.com/q/79027712
has comment: http://stackoverflow.com/comment/139344917
has comment: http://stackoverflow.com/comment/139344931
has comment: http://stackoverflow.com/comment/139343904
score: 3

http://stackoverflow.com/a/78915845
score: 1
answers question: http://stackoverflow.com/q/78915498
type: Answer
has comment: http://stackoverflow.com/comment/139137735
has comment: http://stackoverflow.com/comment/139137666
has comment: http://stackoverflow.com/comment/139137624
has body: Resizers are OS specific. Currently there is no way in Firefox to style the resizer. You could use a pseudo element but it is still hard to match the size of the actuall resizer since its width is adjusted in JS by the browser. As shown below, it breaks easily by reducing a huge amount of zoom level in Firefox, and you still need to account for it covering actual contents in the resizable div: .custom-resize{ position: relative; border: 1px solid blue; resize: both; overflow: auto; } .resize-wrapper { display: inline-block; position: relative; z-index: 1; } .resize-wrapper::after { content: ''; display: block; position: absolute; right: 1px; bottom: 1px; width: 15px; height: 15px; background-color: white; pointer-events: none; max-width: 100%; max-height: 100%; } Resize me ... If you want a consistance solution I'll suggest you implement a custom resizer using JS instead of using the native CSS resize, or check out third party libraries such as the JQuery Resizable Widget.
has comment: http://stackoverflow.com/comment/139137678
downvote count: 0
upvote count: 1

http://stackoverflow.com/comment/139356231
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/79025131
has text: Yep, I would expect them to expand dynamically!

http://stackoverflow.com/comment/139116965
has text: @DarkBee you have been on ghost mode. Asker: you can use Vanilla see docs https://micku7zu.github.io/vanilla-tilt.js/
comment on: http://stackoverflow.com/q/78904335
type: Comment
score: 0
type: QuestionComment

http://stackoverflow.com/q/78997251
has comment: http://stackoverflow.com/comment/139287846
type: Question
accepted answer: http://stackoverflow.com/a/78997315
duplicate of: http://stackoverflow.com/q/5219175
answer count: 1
type: AnsweredQuestion
has comment: http://stackoverflow.com/comment/139287955
score: 0
has comment: http://stackoverflow.com/comment/139287791
has title: Why is the input bar spilling slightly on the right side of the container?
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139287796
has answer: http://stackoverflow.com/a/78997315
has body: I made a calculator using HTML, CSS and JavaScript. Everything is working fine but the input bar is slightly overflowing on the right side. I tried aligning it to center and so many things, but nothing worked. Here is my code (only the input part): * { margin: 0; padding: 0; } body { min-height: 100vh; justify-content: center; display: flex; align-items: center; } .container { width: 250px; height: 400px; background-color: antiquewhite; padding: 20px; border-radius: 1.5rem; outline: 5px solid gray; } .container input { width: 100%; border-style: none; height: 50px; border-radius: 1rem; outline: 2px solid; font-size: 20px; text-align: right; padding-right: 10px; } &lt;div class="container"&gt; &lt;!--Input--&gt; &lt;div class="input"&gt; &lt;input type="text" placeholder="Write your equation here " value="" /&gt; &lt;/div&gt; How can I get the input to fit within the container?
tagged with: input
linked to: http://stackoverflow.com/q/5219175
tagged with: css

http://stackoverflow.com/a/79028822
type: Answer
answers question: http://stackoverflow.com/q/79028815
upvote count: 1
has comment: http://stackoverflow.com/comment/139345443
score: 1
has body: Just add white-space: nowrap to the label. .button-container { height: 4vw; width: 19vw; display: flex; align-items: center; padding: 0; border: none; cursor: pointer; } .button { height: 4vw; align-content: center; font-family: "Comfortaa", cursive; transition-duration: 0.6s; transition-property: width; transition-timing-function: ease-in-out; } .button-label { width: 15vw; background: #07beb8; color: #fff; font-size: 1.3vw; overflow: hidden; white-space: nowrap; } .button-symbol { width: 4vw; background: #3dccc7; color: #fff; border-left: solid #fff; font-size: 1.6vw; font-weight: bold; } .button-container:hover .button-label { width: 0; } .button-container:hover .button-symbol { width: 19vw; } Learn More +
downvote count: 0

http://stackoverflow.com/comment/139202638
has text: Thanks Grant. I have made the tweaks. The border did eliminate the border issue, but the class=table2 is pulling the 80% text size from table. I guess the problem as I narrow this down is more about creating a table with it's own CSS style verses the default that came with the theme.
type: AnswerComment
comment on: http://stackoverflow.com/a/78951163
score: 0
type: Comment

http://stackoverflow.com/q/79018578
answer count: 1
upvote count: 1
tagged with: ng-style
has comment: http://stackoverflow.com/comment/139326828
has comment: http://stackoverflow.com/comment/139332786
tagged with: css
has comment: http://stackoverflow.com/comment/139331906
has comment: http://stackoverflow.com/comment/139332742
tagged with: angular
type: UnansweredQuestion
has title: NgStyle background url doesnt apply style to html
score: 1
favorite count: 0
has answer: http://stackoverflow.com/a/79018617
has comment: http://stackoverflow.com/comment/139327803
type: Question
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139332799
downvote count: 0
has body: I'm facing a problem when I'm trying to show image where the filename is having special characters like !23$%^&()image.png, the image wont be displayed because the style is not being applied, This is how the HTML is rendering this part when I add an image with special characters in the filename... I have tried changing it to [style.background]="'url(' + file?.PreviewLink + ')'"> and this doesn't work also, if I try to add the same image file renamed to something without special characters and spaces then the image is displayed.

http://stackoverflow.com/q/79048247
linked to: http://stackoverflow.com/q/53671968
upvote count: 1
has comment: http://stackoverflow.com/comment/139382372
accepted answer: http://stackoverflow.com/a/79052514
has comment: http://stackoverflow.com/comment/139381814
favorite count: 0
type: Question
answer count: 1
has body: From: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix writing the css property transform: matrix(a, b, c, d, tx, ty) is equivalent to matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY()). It is also equivalent to the following matrix for homogenous coordinates on RP^2 or Cartesian coordinates on R^3 a c tx b d ty 0 0 1 Here's what doesn't make sense to me: it's possible to apply this matrix transform on a 2D vector, e.g. (x,y), (width,height), an html element with a 2D position. This shouldn't be possible because the columns of the matrix must match the number of rows in the vector. So how is this being calculated? There is also a definition for cartesian coordinates on R^2 but it discards tx and ty which are definitely being calculated in the examples on a 2D element. I have one specific question: What mathematical operation is being used here? It cannot be basic matrix multiplication because the matrix columns do not not match the vector dimensions. Yet they represent this as a transformation matrix. So it is using some kind of linear algebra I do not know most likely. What is the math?
has comment: http://stackoverflow.com/comment/139387135
type: AnsweredQuestion
linked to: http://stackoverflow.com/q/64961907
score: -1
downvote count: 2
has comment: http://stackoverflow.com/comment/139382374
tagged with: linear-algebra
tagged with: css
has comment: http://stackoverflow.com/comment/139381869
has comment: http://stackoverflow.com/comment/139382354
has title: Can someone explain how the css matrix transform works mathematically?
linked to: http://stackoverflow.com/q/65159464
has answer: http://stackoverflow.com/a/79052514

http://stackoverflow.com/q/78962032
answer count: 0
tagged with: css
tagged with: documentation
tagged with: python-sphinx
type: UnansweredQuestion
linked to: http://stackoverflow.com/q/47643795
has comment: http://stackoverflow.com/comment/139228492
has body: I am trying to import a font from google fonts, this one, but it is not rendering. I've been following this post, but it's not really working. I've asked this question before, and when I encountered more difficulties, I was told to make a new post, as people have already answered my question in the old post. I am using Sphinx 8.0.2, Myst-Parser 4.0.0, and the Alabaster theme. I have done the following: Create a file named styles.css in the _templates directory, and added the following lines of code to styles.css: @import url('https://fonts.googleapis.com/css2?family=Sorts+Mill+Goudy:ital@0;1&display=swap'); .sorts-mill-goudy-regular { font-family: "Sorts Mill Goudy", serif; font-weight: 400; font-style: normal; } .sorts-mill-goudy-regular-italic { font-family: "Sorts Mill Goudy", serif; font-weight: 400; font-style: italic; } Next, I added this line of code to conf.py: def setup(app): app.add_css_file('styles.css') Ran make html in a terminal to build my Documentation. The build works, and there is no errors, but the font just isn't rendering, and it's still the normal font Alabaster uses. Any and all help would be appreciated. Thank you.
type: Question
has title: A font I imported from Google Fonts isn't rendering (Sphinx)
score: 0
has comment: http://stackoverflow.com/comment/139224717

http://stackoverflow.com/q/79040651
tagged with: bootstrap-5
favorite count: 0
score: -2
type: Question
has title: Bootstrap Navbar Not Staying Sticky Across All Sections
tagged with: http://stackoverflow.com/tag/html
has body: Jessica Kowalski Home Blog Highlights Contact Jessica Kowalski Photographer & Blogger Highlights Beautiful Sunset More Info This is a beautiful sunset captured during an evening hike. The colors were mesmerizing, blending hues of orange, red, and purple. City Skyline More Info A stunning view of the city skyline just after sunset. The lights of the city contrast beautifully with the night sky. Mountain Landscape More Info This is a serene mountain landscape showcasing the natural beauty of towering peaks and lush green valleys. Latest Blogs Exploring Nature Photography Discover the beauty of landscapes through tips on framing, light usage, and more in this detailed guide. Read More Travel Photography Essentials Pack your gear and hit the road! A comprehensive guide on capturing vibrant travel photos. Read More Mastering Portraits Learn how to take stunning portraits with proper lighting, posing, and camera settings. Read More Gallery Contact Name Email address Phone Number Message Submit I’m using Bootstrap to build a website, and I want the navbar to remain sticky at the top of the page. The sticky functionality works correctly when I'm in the #header-section, but when I scroll past it to other sections, the navbar disappears. Here’s a simplified version of my code: body, html { margin: 0; padding: 0; height: 100%; } #header-section { height: 60vh; /* Other styling */ } .navbar { position: sticky; top: 0; z-index: 1000; } Things I’ve tried: Increased z-index for the navbar. Decreased z-index for other sections.
upvote count: 0
answer count: 2
downvote count: 2
has answer: http://stackoverflow.com/a/79040866
tagged with: css
has answer: http://stackoverflow.com/a/79040889
type: UnansweredQuestion

http://stackoverflow.com/comment/139383982
comment on: http://stackoverflow.com/q/79048767
type: Comment
score: 0
type: QuestionComment
has text: @AHaworth thanks for the feedback. I've simplified the code and the codepen. In doing so, I seem to be able to narrow the issue down to this: if the large background elements are contained in a parent div, the scrolling breaks. I'd like to keep this design if it is possible to keep the background layers as children, if possible, but I may need to refactor my code otherwise which I'm not opposed to. Would love if someone could help explain this issue to me!

http://stackoverflow.com/q/79052029
tagged with: http://stackoverflow.com/tag/html
tagged with: blazor
has body: I attempted to follow this article to add icons to my app: https://blog.getbootstrap.com/2021/01/07/bootstrap-icons-1-3-0/ So I included the Bootstrap Icons font stylesheet in the Head of App.razor: <HeadOutlet /> Then tried to use an icon, such as: https://icons.getbootstrap.com/icons/0-circle/ Sign In But the icon is not showing. I also tried: Sign In What am I doing wrong?
tagged with: css
accepted answer: http://stackoverflow.com/a/79052513
has title: How to use Bootstrap Icons in Blazor
tagged with: bootstrap-5
score: 0
type: Question
has answer: http://stackoverflow.com/a/79052513
tagged with: asp.net-core
answer count: 1
type: AnsweredQuestion

http://stackoverflow.com/comment/139252092
type: Comment
comment on: http://stackoverflow.com/q/78977782
has text: That's basic understanding on how `position: absolute;` works [MDN: position: absolute](https://developer.mozilla.org/en-US/docs/Web/CSS/position#absolute)
score: 4
type: QuestionComment

http://stackoverflow.com/comment/139122368
comment on: http://stackoverflow.com/q/78906077
score: 1
type: Comment
has text: I had a try with getBoundingClientRect(); I don't think as it is right , also after reset, the span not moving any more. Please have a look https://jsfiddle.net/adgram/714w6x3t/106/
type: QuestionComment

http://stackoverflow.com/a/78951019
type: Answer
score: 0
has comment: http://stackoverflow.com/comment/139202621
has body: One approach is to increase the WKWebView content size to accommodate larger content. This will help avoid image breaks by ensuring that the entire web content fits within the page boundaries before rendering. webView.evaluateJavaScript("document.body.style.zoom = '0.8';", completionHandler: nil) By zooming out the content (e.g., 0.8 scale), you ensure that larger images and content sections are less likely to span across multiple pages.
answers question: http://stackoverflow.com/q/78950013

http://stackoverflow.com/q/78976057
type: UnansweredQuestion
has title: Create Smooth Tabs transition using Material 3 on web
type: Question
tagged with: http://stackoverflow.com/tag/html
score: 0
tagged with: javascript
tagged with: material3
answer count: 0
tagged with: css
has body: Reading the material 3 guidelines, I want to mimic this effect: Material 3 fix tab transition The effect: when moving the container below tab using swipe gesture, the fix tab moves, and not just changes but has a smooth swipe that goes along with content movement, pixel by pixel. The same effect can be seen in Google Tasks app. I have used material components with Hammer JS and more info about it can be seen here: https://material-web.dev/components/tabs/ The Code with my current progress: https://codepen.io/driftblaze/pen/NWZJvgG I know of ways of using scroll snap behaviour to make the content swipe. But that doesn't make the underline of the tab swipe the way we can in Google Task. Video Photos Audio Content for Video Content for Photos Content for Audio .tab-content { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; } .tab-panel { flex: 0 0 100%; scroll-snap-align: start; display: none; /* Hide all panels by default */ padding: 16px; /* Adjust padding as needed */ } .tab-panel.active { display: block; /* Show active panel */ } import "https://esm.sh/@material/web/all.js"; import { styles as typescaleStyles } from "https://esm.sh/@material/web/typography/md-typescale-styles.js"; document.adoptedStyleSheets.push(typescaleStyles.styleSheet); document.addEventListener("DOMContentLoaded", () => { const tabs = document.querySelector("#my-tabs"); const tabBar = tabs.querySelectorAll("md-primary-tab"); const panels = document.querySelectorAll(".tab-panel"); let activeIndex = 0; // Update active tab and panel function updateActiveTab(index) { activeIndex = index; tabBar.forEach((tab, i) => { if (i === index) tab.setAttribute("active", i === index); else tab.removeAttribute("active"); }); panels.forEach((panel, i) => { panel.classList.toggle("active", i === index); }); } // Click event to switch tabs tabs.addEventListener("click", (e) => { if (e.target.tagName === "MD-PRIMARY-TAB") { const index = Array.from(tabBar).indexOf(e.target); updateActiveTab(index)…
tagged with: hammer

http://stackoverflow.com/comment/139210078
type: Comment
type: AnswerComment
score: 1
has text: Thank you guys! I realize now why it won't work for all user agents, and I realize I should probably implement my own. But I thought I ought to understand the behaviour for the standard element before going off on a tangent doing things I do not 100% understand. Thanks for the replys.
comment on: http://stackoverflow.com/a/78953944

http://stackoverflow.com/comment/139323997
comment on: http://stackoverflow.com/q/79016259
type: QuestionComment
has text: The below two answers from coreyward and m.silberman would address the issue. In case more is required, please refer to this post as well : https://stackoverflow.com/questions/78997429/react-form-is-hitting-onchange-but-existing-value-is-not-changing/78997536#78997536
score: 0
type: Comment

http://stackoverflow.com/comment/139320178
type: Comment
has text: code added for main.js
type: QuestionComment
score: 0
comment on: http://stackoverflow.com/q/79014373

http://stackoverflow.com/comment/139417960
comment on: http://stackoverflow.com/a/79064125
type: AnswerComment
has text: Regarding the invalid HTML, I also didn't know about the inline validation from buttons. I just used buttons as semantic structuring. I'm probably going to replace it for another div, because on second thought a button element isn't that semantically connected to a dropdown menu as I first thought.
type: Comment
score: 0

http://stackoverflow.com/comment/139223365
has text: But nth-child will never work in this case… you must style it in css by unique class
comment on: http://stackoverflow.com/a/78962197
type: Comment
score: 0
type: AnswerComment

http://stackoverflow.com/comment/139197876
comment on: http://stackoverflow.com/q/78948289
has text: i edited my answer since i missed the point of the notch growing automatically. Is this what youre looking for?
type: Comment
score: 0
type: QuestionComment

http://stackoverflow.com/comment/139249650
type: Comment
has text: @GreenSaiko There is a issue raised about this bug in GJS-grammer repo. https://github.com/Digitalbrainstem/ejs-grammar/issues/93
comment on: http://stackoverflow.com/q/78972066
type: QuestionComment
score: 1

http://stackoverflow.com/a/79060536
has body: Yes, you can do this with object-position: top. This snippet below demonstrates how it works. The first image is constrained only in its width, so the entire image is displayed in its intrinsic aspect ratio (square). The second image has a height constraint added, as well as object-fit: cover to specify automatic cropping. Note that the central part of the image is retained by default: the top and bottom edges are cropped. The third image has object-position: top added to specify that we want the automatic croping to retain the top of our image. body { display: flex; gap: 1em; align-items: center; } img { width: 180px; display: inline-block; } .i2, .i3 { height: 120px; object-fit: cover; } .i3 { object-position: top; } &lt;img src="https://picsum.photos/id/76/480"&gt; &lt;img src="https://picsum.photos/id/76/480" class="i2"&gt; &lt;img src="https://picsum.photos/id/76/480" class="i3"&gt;
type: Answer
score: 0
answers question: http://stackoverflow.com/q/79059752

http://stackoverflow.com/q/79007606
type: Question
has comment: http://stackoverflow.com/comment/139306733
has comment: http://stackoverflow.com/comment/139307006
tagged with: tabs
tagged with: http://stackoverflow.com/tag/html
has answer: http://stackoverflow.com/a/79007872
type: AnsweredQuestion
has title: How do you remove the bottom border of the last css vertical tab?
accepted answer: http://stackoverflow.com/a/79007859
has answer: http://stackoverflow.com/a/79007942
tagged with: css
answer count: 3
possible better answer: http://stackoverflow.com/a/79007872
has body: How do I go about removing the last 1px border from my CSS tab menu? The flow and feel looks clean except for that part of it. body { font-family: Helvetica, Arial, sans-serif; font-size: 10pt; } .radio-tabs { display: flex; flex-flow: row; } #radio1:focus~.tabs #first-tab, #radio2:focus~.tabs #second-tab, #radio3:focus~.tabs #third-tab, #radio4:focus~.tabs #fourth-tab {} .tabs { display: flex; flex-flow: column; flex: 10%; } /* Tab button */ .radio-tabs .tab { display: flex; flex-flow: column; align-items: center; text-align: center; padding: 1em; color: #000; background-color: #EEEEEE; height: 60px; border-bottom: 1px solid #CCCCCC; } .radio-tabs .tab:hover { background-color: #; } #radio1:checked~.tabs #first-tab, #radio2:checked~.tabs #second-tab, #radio3:checked~.tabs #third-tab, #radio4:checked~.tabs #fourth-tab { background-color: #FFF; color: #1e262d; border-right: 0; font-weight: bold; } .tab-label { padding: 5px; } .radio-tabs .panels { flex: 70%; background-color: #FFF; color: #000; } .radio-tabs .panel { display: none; margin-left: 50px; } #radio1:checked~.panels #first-panel, #radio2:checked~.panels #second-panel, #radio3:checked~.panels #third-panel, #radio4:checked~.panels #fourth-panel { display: block; } .radio-tabs .state { display: none; } .panels {} .container { border: 1px solid #CCCCCC; } About Who Benefits How About the 360 Dealer Groups Education comparator Rating Financial Advisory Dealer Groups willingness & effectiveness for improving staff professionalism via education and training Who Financial Planning and Advisory Dealer Groups with advisers and support staff Benefits Organisation Rated and compared to peers for providing adequate education and traning to advisory staff Identifying skills gap in workforce for assistance and finding relevant subject matter specialists Benchmark of best practice systems, processes and capability Feedback of employees and external participants comments/views about organisation Retaining good staff by inve…
has comment: http://stackoverflow.com/comment/139307033
has comment: http://stackoverflow.com/comment/139306967
score: -2
upvote count: 0
favorite count: 0
has answer: http://stackoverflow.com/a/79007859
downvote count: 2

http://stackoverflow.com/comment/139253415
comment on: http://stackoverflow.com/q/78975917
type: QuestionComment
type: Comment
has text: @jewelsea Thanks so much! That's exactly what I needed.
score: 0

http://stackoverflow.com/a/78992214
answers question: http://stackoverflow.com/q/78991516
type: Answer
has body: Yes — vertical-align: middle. .box { width: 230px; border: 1px solid black; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 1em; } svg { aspect-ratio: 1; vertical-align: middle; } .b1 svg { width: 24px; } .b2 svg { width: 48px; } .b3 svg { width: 96px; } This is text and it should truncate This is text and it should truncate This is text and it should truncate
score: 0

javascript
tags question: http://stackoverflow.com/q/79035373
tags question: http://stackoverflow.com/q/79061496
tags question: http://stackoverflow.com/q/79007150
tags question: http://stackoverflow.com/q/78976057
tags question: http://stackoverflow.com/q/78941051
tags question: http://stackoverflow.com/q/78937309
tags question: http://stackoverflow.com/q/79051473
tags question: http://stackoverflow.com/q/78975340
tags question: http://stackoverflow.com/q/79048090
tags question: http://stackoverflow.com/q/78942849
tags question: http://stackoverflow.com/q/79053699
tags question: http://stackoverflow.com/q/79024254
tags question: http://stackoverflow.com/q/78911526
tags question: http://stackoverflow.com/q/79038018
tags question: http://stackoverflow.com/q/79027028
tags question: http://stackoverflow.com/q/79012295
tags question: http://stackoverflow.com/q/79026835
tags question: http://stackoverflow.com/q/79049053
tags question: http://stackoverflow.com/q/78926760
tags question: http://stackoverflow.com/q/78938339
tags question: http://stackoverflow.com/q/79050854
tags question: http://stackoverflow.com/q/78984431
tags question: http://stackoverflow.com/q/78969513
tags question: http://stackoverflow.com/q/79063741
tags question: http://stackoverflow.com/q/78949908
tags question: http://stackoverflow.com/q/78940358
tags question: http://stackoverflow.com/q/78987305
tags question: http://stackoverflow.com/q/79040192
tags question: http://stackoverflow.com/q/79045030
tags question: http://stackoverflow.com/q/78990433
tags question: http://stackoverflow.com/q/79058104
tags question: http://stackoverflow.com/q/78925225
tags question: http://stackoverflow.com/q/79044837
tags question: http://stackoverflow.com/q/79068036
tags question: http://stackoverflow.com/q/78956711
tags question: http://stackoverflow.com/q/79024470
tags question: http://stackoverflow.com/q/78973373
tags question: http://stackoverflow.com/q/78915094
tags question: http://stackoverflow.com/q/78992932
tags question: http://stackoverflow.com/q/79062969
tags question: http://stackoverflow.com/q/78936071
tags question: http://stackoverflow.com/q/78963829
tags question: http://stackoverflow.com/q/79054875
tags question: http://stackoverflow.com/q/79025462
tags question: http://stackoverflow.com/q/79030607
tags question: http://stackoverflow.com/q/79008654
tags question: http://stackoverflow.com/q/79050057
tags question: http://stackoverflow.com/q/78952516
tags question: http://stackoverflow.com/q/79001690
tags question: http://stackoverflow.com/q/78973195
tags question: http://stackoverflow.com/q/78984919
tags question: http://stackoverflow.com/q/78920407
tags question: http://stackoverflow.com/q/78905381
tags question: http://stackoverflow.com/q/79016259
tags question: http://stackoverflow.com/q/79053527
tags question: http://stackoverflow.com/q/79024915
tags question: http://stackoverflow.com/q/79068052
tags question: http://stackoverflow.com/q/79035604
tags question: http://stackoverflow.com/q/79060854
tags question: http://stackoverflow.com/q/79033331
tags question: http://stackoverflow.com/q/78926741
tags question: http://stackoverflow.com/q/79027042
tags question: http://stackoverflow.com/q/78921073
tags question: http://stackoverflow.com/q/78998768
tags question: http://stackoverflow.com/q/78915487
tags question: http://stackoverflow.com/q/78920045
tags question: http://stackoverflow.com/q/78984306
tags question: http://stackoverflow.com/q/78984963
tags question: http://stackoverflow.com/q/78927456
tags question: http://stackoverflow.com/q/79059550
tags question: http://stackoverflow.com/q/79052911
tags question: http://stackoverflow.com/q/79030241
tags question: http://stackoverflow.com/q/78971464
tags question: http://stackoverflow.com/q/78980450
tags question: http://stackoverflow.com/q/79034015
tags question: http://stackoverflow.com/q/79025615
tags question: http://stackoverflow.com/q/78906077
tags question: http://stackoverflow.com/q/79052168
tags question: http://stackoverflow.com/q/78997818
tags question: http://stackoverflow.com/q/78957424

http://stackoverflow.com/a/79059702
upvote count: 1
has comment: http://stackoverflow.com/comment/139406559
answers question: http://stackoverflow.com/q/79059550
accepted answer of: http://stackoverflow.com/q/79059550
type: AcceptedAnswer
downvote count: 0
type: Answer
has body: theme.shape.borderRadius specifies the default border radius value (in pixels) The prop borderRadius, that is passed to components, tells by how much the theme border radius will be multiplied If a component receives borderRadius as number, it multiplies it by theme.shape.borderRadius In your example, your theme border radius is 3 and the Box border radius is also 3 as number (since it returns the theme's one) and that leads to 3x3=9px If you want to use the theme border radius, you can simply pass 1 as value &lt;Box borderRadius={1} /&gt; This tells mui that you want to use the theme border as it is, without the need of a callback to access the theme Here in this example they have a comment that says theme.shape.borderRadius * 1
score: 1

http://stackoverflow.com/comment/139358467
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/79035337
has text: If you remove the blue block, the 'NEWS' block will be located in the center (vertically). It must be pressed to TOP. The red block can also take different heights.
type: Comment

http://stackoverflow.com/q/78912664
type: Question
answer count: 1
has answer: http://stackoverflow.com/a/78912920
tagged with: range
score: 0
upvote count: 1
tagged with: jquery
tagged with: checkbox
tagged with: css
downvote count: 1
has comment: http://stackoverflow.com/comment/139132524
has title: Checkbox PROP Change Then a Function
type: UnansweredQuestion
favorite count: 0
has body: What i am trying to do is give the checkbox a function when i change the PROP of it with the Range Slider. You Can click the checkbox and it works but not when the range slider changes the PROP This is what i have tried... .hotelsign { position: absolute; top: 10px; left: 200px; width: 50px; height: 50px; background-color: black; } Play document.querySelector('#play-button').addEventListener('click', () => { music.play(); }); const music = new Audio('https://tim-school.com/codepen/bells2/miss.mp3'); const seeker = document.querySelector('#rangeInput1'); music.addEventListener('timeupdate', () => { const percent = music.currentTime / music.duration * 100; seeker.value = percent; updateValue1(); }); seeker.addEventListener('input', (e) => { music.currentTime = e.target.value / 100 * music.duration; }); function updateValue1() { var rangeInput1 = document.getElementById("rangeInput1").value if (rangeInput1 == 0) { $("#myform2 :checkbox").prop("checked", true); } if (rangeInput1 == 20) { $("#myform2 :checkbox").prop("checked", false); } if (rangeInput1 == 40) { $("#myform2 :checkbox").prop("checked", true); } if (rangeInput1 == 60) { $("#myform2 :checkbox").prop("checked", false); } if (rangeInput1 == 80) { $("#myform2 :checkbox").prop("checked", true); } if (rangeInput1 == 100) { $("#myform2 :checkbox").prop("checked", false); } } // This is what i want when rangeInput1 changes the PROP $('#myform2 :checkbox').change(function () { if ($(this).is(':checked')) { $(".hotelsign").css({ 'display': 'none' }); } else { $(".hotelsign").css({ 'display': 'block' }); } }); i'm Looking for a range slider that checks a checkbox and the function works.
tagged with: http://stackoverflow.com/tag/html

http://stackoverflow.com/comment/139385581
score: 0
has text: Thanks for the codepen. It can't be like this because the cards must have a fixed width and height. If you attempt to change the height in the solution, it no longer fills the card with words. It must be possible to change the width and height of any card and still fill it correctly.
type: QuestionComment
comment on: http://stackoverflow.com/q/79050057
type: Comment

http://stackoverflow.com/comment/139372818
has text: Have you looked closely at the forwarded code to see exactly which of your settings are being overridden?
type: Comment
comment on: http://stackoverflow.com/q/79043462
type: QuestionComment
score: 1

http://stackoverflow.com/comment/139250840
comment on: http://stackoverflow.com/q/78973195
score: 0
type: QuestionComment
has text: I have trouble seeing a pattern in the `partialResponse` array, but I think a bigger trouble is the `fbzx` parameter, which seems to be unique and randomly generated for each submission.
type: Comment

http://stackoverflow.com/comment/139284040
has text: Ow, just tried now, also happens on my Android phone.
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78991256
type: QuestionComment

http://stackoverflow.com/comment/139344910
comment on: http://stackoverflow.com/a/79025283
type: AnswerComment
has text: Thanks for the answer, I would like you to help me find an error in my code, I just wanted to implement something like this simple window using the example image, but I don't understand why I have a square with links closing.
type: Comment
score: 0

http://stackoverflow.com/comment/139334806
has text: I am unclear what you want to do. Do you want the visible table to show what look like every other row as with color background? That is what I would have expected but it isn't what 'I need a way to select all rows that are odd and do not have display: none' says.
type: QuestionComment
comment on: http://stackoverflow.com/q/79022855
type: Comment
score: 0

http://stackoverflow.com/q/78915094
tagged with: css
upvote count: 2
downvote count: 1
has comment: http://stackoverflow.com/comment/139139494
score: 1
favorite count: 0
has body: I am working on a webpage where I'm loading several slides, including 14 images in total. The page displays ellipses after every 5 slides to indicate that there are additional slides available. When the user clicks on the right ellipsis, it should navigate to the next set of slides. Similarly, clicking the left ellipsis should take the user to the previous set. I’ve implemented event listeners for the ellipses, but they aren’t functioning as expected. I’m unsure what’s causing the issue. Here is my code. // Initialization let slideIndex = 1; const dotsPerPage = 5; // Number of dots to show per page showSlides(slideIndex); function plusSlides(n) { showSlides(slideIndex += n); } function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { let slides = document.getElementsByClassName("mySlides"); let dotsWrapper = document.querySelector(".dots-wrapper"); let totalSlides = slides.length; let ellipsisLeft = document.querySelector(".ellipsis-left"); let ellipsisRight = document.querySelector(".ellipsis-right"); if (n > totalSlides) { slideIndex = 1; } if (n < 1) { slideIndex = totalSlides; } // Show or hide slides for (let i = 0; i < totalSlides; i++) { slides[i].style.display = "none"; } slides[slideIndex - 1].style.display = "block"; // Clear existing dots dotsWrapper.innerHTML = ''; // Determine the range of dots to show let start = Math.floor((slideIndex - 1) / dotsPerPage) * dotsPerPage; let end = Math.min(start + dotsPerPage, totalSlides); // Show or hide ellipses based on total slides ellipsisLeft.style.display = (start > 0 && totalSlides > dotsPerPage) ? "inline" : "none"; ellipsisRight.style.display = (end < totalSlides && totalSlides > dotsPerPage) ? "inline" : "none"; // Generate dots dynamically for (let i = start; i < end; i++) { let dot = document.createElement("span"); dot.className = "dot"; dot.setAttribute("tabindex", "0"); dot.setAttribute("aria-label", `Go to slide ${i + 1}`); dot.setAttribute("role", "button"); dot.setAttribute("on…
type: Question
tagged with: http://stackoverflow.com/tag/html
answer count: 1
type: AnsweredQuestion
has title: Why is the Event Listeners for Ellipsis Not Working
has answer: http://stackoverflow.com/a/78925266
accepted answer: http://stackoverflow.com/a/78925266
tagged with: javascript

http://stackoverflow.com/comment/139164262
type: QuestionComment
comment on: http://stackoverflow.com/q/78928681
type: Comment
has text: Note that no browser has needed those vendor prefixes in maybe 10 years or more.
score: 0

http://stackoverflow.com/comment/139513798
type: AnswerComment
has text: Could you describe why before/after absolutely positioned pseudo element doesn’t help? Thanks.
score: 0
type: Comment
comment on: http://stackoverflow.com/a/79036586

http://stackoverflow.com/q/78912888
has title: CSS preload not working as expected, blocking styles done last
has body: I've been optimizing my new sites page speed and have run into a problem with CSS. Basically I have got a small above-the-fold stylesheet for the first page that is the critical CSS and then I load the non critical (large files) (preloaded) later. However whenever I add in the deferred Bootstrap it doesn't apply the critical styles before hand for some reason, works fine without Bootstrap. Here is my : Index I've tried preloading the critical CSS as well and even when it loads and seemingly renders first I still get a big layout shift. I also tried having internal styles with tags but then once the Bootstrap and other styles apply they don't take precedence as they are external. Demo site here: https://cardera-demo.onrender.com/
has comment: http://stackoverflow.com/comment/139132713
type: UnansweredQuestion
has answer: http://stackoverflow.com/a/78914236
type: Question
answer count: 1
tagged with: http://stackoverflow.com/tag/html
tagged with: preload
score: 0
tagged with: css

http://stackoverflow.com/q/78924192
type: Question
has title: How can I get a stepped effect with `mask-mode: luminance`?
has body: I figured that if I have a mask with a black area and a white area, then the pixels corresponding to the black area become transparent, while those corresponding to the white area stay opaque. Except that doesn't seem to happen when my mask is made up of two gradient layers. See demo below where I have first the element without a mask, then the mask as a background, then my failed attempt at masking. If the part of the mask above the diagonal is all black, shouldn't all that part be made completely transparent by a luminance type of mask? Why the checkerboard look above the diagonal? (last panel) body { display: flex; flex-wrap: wrap; gap: .5em; background: grey } .test { flex: 0 0 16em; aspect-ratio: 1; background: linear-gradient(90deg, purple, orange) } .mask { /* mask as background*/ background: linear-gradient(to right bottom, #000 50%, #0000 0 calc(50% + .5em*sqrt(2)), #fff 0), repeating-conic-gradient(#000 0% 25%, #fff 0% 50%) 0 0/ 2em 2em; } .full { /* failed attempt at masking */ mask: linear-gradient(to right bottom, #000 50%, #0000 0 calc(50% + .5em*sqrt(2)), #fff 0), repeating-conic-gradient(#000 0% 25%, #fff 0% 50%) 0 0/ 2em 2em; mask-mode: luminance } I'm sure I'm missing something, especially since the spec keeps banging on about "mask layers" (would be grand if I actually understood what's written in there even means, but it's not the case). And yes, I know it's doable with the default alpha masking. I know I can "fix" my current result with a clip-path. I'm not looking for workarounds that aren't using luminance masking. What I'm asking here is what is happening, what am I missing in the luminance masking case?
downvote count: 0
has comment: http://stackoverflow.com/comment/139153324
has comment: http://stackoverflow.com/comment/139153526
tagged with: css
has comment: http://stackoverflow.com/comment/139171095
answer count: 0
has comment: http://stackoverflow.com/comment/139169661
tagged with: css-mask
score: 2
upvote count: 2
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139153412
favorite count: 0

http://stackoverflow.com/comment/139285430
comment on: http://stackoverflow.com/q/78991428
type: Comment
type: QuestionComment
score: 1
has text: Hi! I answered your question but turns out I understood you wanted to make the element scrollable when you actually mean you want a 'sliding like animation'. Maybe you could rephrase the question?

http://stackoverflow.com/comment/139434556
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/79063036
type: Comment
has text: https://tests-and-previews.flopcreation.fr/html/20241011/ . I set the transition duration for 4s, so you can see that the fixed background attachment does not work when the scale transform is set, and after the animation, the background attachment works.

http://stackoverflow.com/q/79025097
tagged with: css
has title: Text inside of circles and also inside of their intersection with html/css?
type: UnansweredQuestion
has answer: http://stackoverflow.com/a/79025131
tagged with: http://stackoverflow.com/tag/html
type: Question
has body: I'm trying to find a solid way to represent this: I have the code below so far, but as expected, text 2 will easily overflow the shape as it's placed with position: absolute. Can anyone help me think a better approach? I'd be inifinitely grateful. html{ color: white; font-family: sans-serif; font-size: 20px; text-align: center; } #circles-container{ display: flex; justify-content: center; } .circle{ height: 300px; width: 300px; border-radius: 100%; display: flex; align-items: center; justify-content: center; } .circle > div{ width: 50%; } #circle-1 > div{ margin-right: 50%; } #circle-3 > div{ margin-left: 50%; } #circle-1{ background-color: #3a7487; transform: translateX(25%) } #circle-3{ background-color: #9d4767; transform: translateX(-25%); mix-blend-mode: overlay; } #intersection{ position: absolute; z-index: 2; } Text 1 Text 2 Text 3
answer count: 1
score: 0

http://stackoverflow.com/a/79060081
type: Answer
score: 2
upvote count: 2
has body: checkValidity is an existing method, so it is a reserved word1 your function is being shadowed by it. That's why it isn't running. So two solutions: one that works and one that is even better. The first one is simply to rename your function. Voilà. The second one is this: avoiding handling events through inline attribute assignment, and using addEventListener instead. It has several advantages (see References). The following code works perfectly: const pass = '2207' const button = Array.from(document.getElementsByTagName("button"))[0]; button.addEventListener("click", checkPassword); function checkPassword() { const pass_code = document.getElementById("passcode").value; if (pass_code == pass){ alert("Correct Passcode!"); } else{ alert("Wrong Passcode!"); } } Login Enter your Passcode: Enter↵ 1 As pointed out by Jaromanda, that statement is wrong. P.S. Best practices also recommend trying to avoid inline styling, and using internal/external CSS instead. P.S. 2 As I said in my comment, established convention recommends not starting variable names with a capital letter (unless you're declaring a class or constructor). References addEventListener checkValidity
answers question: http://stackoverflow.com/q/79060016
downvote count: 0

http://stackoverflow.com/q/79024915
tagged with: http://stackoverflow.com/tag/html
downvote count: 0
answer count: 1
tagged with: javascript
upvote count: 1
tagged with: css
has title: Keep element in scroll view while animating open
type: UnansweredQuestion
has answer: http://stackoverflow.com/a/79024916
score: 1
favorite count: 0
has body: I have an accordion-type component at the bottom of a scrollable container. When the accordion opens, it ends up just overflowing behind the scroll region. I'm trying to get the expanded contents to remain within view while opening. Because it animates open over time, simply setting the scroll position on-trigger doesn't work. Another option is delaying the scroll until it's fully open but this is a clunky experience. What are the solutions to this problem?
type: Question

http://stackoverflow.com/comment/139361162
has text: @Yogi I can't see how to use the value usiing only CSS as attr is not recognised by browsers in general in anything but the content property at the moment. Could you explain how it could be used?
score: 1
type: Comment
comment on: http://stackoverflow.com/q/79036823
type: QuestionComment

http://stackoverflow.com/comment/139381814
type: Comment
score: 0
has text: I'm not sure exactly what your problem is, but note that in the reference you give this is stated: "However, one major transformation is not linear, and therefore must be special-cased when using this notation: translation. The translation vector (tx, ty) must be expressed separately, as two additional parameters." - that is I think that they are using a notation, but it's not applied exactly as you would in a mathematical sense, the translations are a special case and treated separately.
type: QuestionComment
comment on: http://stackoverflow.com/q/79048247

http://stackoverflow.com/q/78997521
upvote count: 1
type: Question
accepted answer: http://stackoverflow.com/a/78997611
tagged with: css
has comment: http://stackoverflow.com/comment/139288413
answer count: 1
type: AnsweredQuestion
downvote count: 1
favorite count: 0
has comment: http://stackoverflow.com/comment/139288386
score: 0
has answer: http://stackoverflow.com/a/78997611
has comment: http://stackoverflow.com/comment/139288359
has body: I would like to know how I can generate the required mask for the attached image. I have tried various methods but I am unable to get the rounded corners with the mask per the given image. Is there an alternative method to create the mask or using clip-path?
has title: Need assistance generating clip path for the attached image
tagged with: mask
has comment: http://stackoverflow.com/comment/139288391
linked to: http://stackoverflow.com/q/14446677
has comment: http://stackoverflow.com/comment/139293745

http://stackoverflow.com/a/78921561
answers question: http://stackoverflow.com/q/78921533
has body: If CSS isn't enough to handle this issue across all browsers, a JavaScript solution might be necessary. You can use a small script to manually control the positioning of the header window.addEventListener('scroll', function() { const tableHeader = document.querySelector('thead'); const tableHeaderOffset = tableHeader.getBoundingClientRect().top; if (tableHeaderOffset &lt;= 0) { tableHeader.style.position = 'fixed'; tableHeader.style.top = '0'; tableHeader.style.zIndex = '100'; } else { tableHeader.style.position = 'sticky'; tableHeader.style.top = '0'; } });
type: Answer
has comment: http://stackoverflow.com/comment/139180739
score: 0

http://stackoverflow.com/q/78952895
tagged with: css-animations
has title: Curved div infinite scroll buble cover image animation
has body: I want to create an animation where bubbles scroll infinitely from right to left in the background. The animation should have a curved path with space between the bubbles, similar to the example shown here: I've tried several methods and managed to get the bubbles to scroll from right to left, but I haven't been able to achieve the curved path and proper spacing between the bubbles as shown in the image. expected Output import React from 'react'; const Footer = () => { const travelImages = [ 'https://i.pinimg.com/236x/26/67/42/266742e1a6565d6a94b6b881c441c2a3.jpg', // (other image URLs) ]; // Function to generate random size for each avatar const getRandomSize = () => { const sizes = ['w-16 h-16', 'w-24 h-24', 'w-32 h-32']; // Tailwind sizes: small, medium, large return sizes[Math.floor(Math.random() * sizes.length)]; }; return ( {/* Image wrapper moving from right to left */} {travelImages.map((item, index) => ( ))} {/* Inline Style Tag for Custom Animation */} ); }; export default Footer;
tagged with: reactjs
score: 0
answer count: 0
tagged with: css
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139206591
has comment: http://stackoverflow.com/comment/139205720
type: Question
tagged with: http://stackoverflow.com/tag/html

http://stackoverflow.com/comment/139172629
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78934387
type: QuestionComment
has text: It could be due to your `gradientShadow` rules. You pass the `colors` theme values, and assume that the values will be strings in the `boxShadow` property. However, you need to use [`flattenColorPalette()`](https://github.com/tailwindlabs/tailwindcss/discussions/6925#discussioncomment-1919382) due to `colors` being an object of variable depth.

http://stackoverflow.com/q/79015820
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139322397
has body: I have been trying to build my portfolio from the ground up instead of using a WYSIWYG website builder thats gonna cost me a lot anyways. It's been going well thus far. Except for my current issue: I wanted to display some images in a sleek way and decided to use Flexbox to do so, the markup works well on desktop width when using flex-direction: row;, however when using flex-direction: column; for mobile an issue occurs where flex-grow/flex seems to be ignored. /* Phones */ @media only screen and (max-width: 810px) { .split-container {flex-direction: column;} } /* Medium devices */ @media only screen and (min-width: 810px) { .split-container {flex-direction: row;} } /* Desktop */ @media only screen and (min-width: 1200px) { .split-container {flex-direction: row;} } body { width: 100%; } .container-xl { padding 30px 30px; } .case-info { display: flex; flex-direction: column; gap: 30px; } .split-container { overflow: hidden; display: flex; width: 100%; height: 400px; gap: 10px; } .split-container div { flex: 1; transition-duration: 1s; } .split-container div:hover { flex: 4; } .split-container img { width: 100%; height: 100%; object-position: center center; object-fit: cover; } Example Header Example Paragaph I have searching up similiar issues on Stackoverflow, and mostly the answer seems to revolve around giving the parent a fixed height, which I've already tried. Thanks in advance.
linked to: http://stackoverflow.com/q/36247140
has comment: http://stackoverflow.com/comment/139322775
has comment: http://stackoverflow.com/comment/139322149
score: 0
has comment: http://stackoverflow.com/comment/139322087
has comment: http://stackoverflow.com/comment/139322527
has title: Issue with flex-grow and flex-direction: column; - flex parent has a defined height
has comment: http://stackoverflow.com/comment/139322778
duplicate of: http://stackoverflow.com/q/36247140
answer count: 0
has comment: http://stackoverflow.com/comment/139322154
tagged with: css
has comment: http://stackoverflow.com/comment/139322656
tagged with: flexbox
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139322832
has comment: http://stackoverflow.com/comment/139322733
has comment: http://stackoverflow.com/comment/139322239
type: Question

http://stackoverflow.com/q/78905678
tagged with: css
has comment: http://stackoverflow.com/comment/139119572
answer count: 0
type: UnansweredQuestion
tagged with: webpack
has comment: http://stackoverflow.com/comment/139119274
has comment: http://stackoverflow.com/comment/139119700
type: Question
has title: Field 'browser' doesn't contain a valid alias configuration /opt/atlassian/pipelines/agent/build/src/css/index.css.tsx doesn't exist .ts
score: 0
tagged with: sass
has body: Scss/CSS files are not working on Azure - npm run build is failed in pipelines in Webpack, React I am working on a micro-frontend application. In the localhost environment, everything is working fine. "npm run build" is working fine in the localhost. But when I tried to build an Azure pipeline, an error came up. I have tried many times output variable path in webpack.common.js, but every time pipeline failed. Please help me. Error is: Field 'browser' doesn't contain a valid alias configuration /opt/atlassian/pipelines/agent/build/src/css/index.css.tsx doesn't exist .ts Field 'browser' doesn't contain a valid alias configuration /opt/atlassian/pipelines/agent/build/src/css/index.css.tsx doesn't exist .ts Field 'browser' doesn't contain a valid alias configuration /opt/atlassian/pipelines/agent/build/src/css/index.css.tsx doesn't exist .ts Complete Error is: + CI= npm run build > mcmp-core-ui@1.0.0 build > webpack --config webpack/webpack.prod.js assets by status 160 KiB [cached] 7 assets runtime modules 6.78 KiB 11 modules orphan modules 2.81 KiB [orphan] 6 modules cacheable modules 146 KiB (javascript) 13.1 KiB (asset) modules by path ./node_modules/ 145 KiB modules by path ./node_modules/react/ 8 KiB 4 modules modules by path ./node_modules/react-dom/ 131 KiB 3 modules modules by path ./node_modules/scheduler/ 4.33 KiB ./node_modules/scheduler/index.js 198 bytes [built] [code generated] ./node_modules/scheduler/cjs/scheduler.production.min.js 4.14 KiB [built] [code generated] ./node_modules/@babel/runtime/helpers/esm/slicedToArray.js + 5 modules 2.12 KiB [built] [code generated] modules by path ./src/ 1.51 KiB (javascript) 13.1 KiB (asset) ./src/index.tsx 33 bytes [built] [code generated] ./src/bootstrap.tsx + 2 modules 1.44 KiB [built] [code generated] ./src/assets/images/user.png 42 bytes (javascript) 13.1 KiB (asset) [built] [code generated] **ERROR in ./src/App.tsx 3:0-25** ***Module not found: Error: Can't resolve './css/index.css' in '/opt/atlassian/pipelines…
tagged with: reactjs

http://stackoverflow.com/q/79067744
tagged with: css-animations
type: Question
has title: Is there a way to replace keyframes with a specific linear timing function?
has answer: http://stackoverflow.com/a/79067991
accepted answer: http://stackoverflow.com/a/79067991
type: AnsweredQuestion
has comment: http://stackoverflow.com/comment/139417364
has comment: http://stackoverflow.com/comment/139417171
has comment: http://stackoverflow.com/comment/139417147
has comment: http://stackoverflow.com/comment/139417053
answer count: 2
has body: For example, I have this animation @keyframes fade-out-50-in-70 { 0% { opacity: 1; } 50% { opacity: 0; } 70% { opacity: 1; } 100% { opacity: 1; } } .animate-fade-out-in { animation-name: fade-out-50-in-70; animation-timing-function: linear; } try to use this linear (linear(0, 0.5 35%, 1 70%);）function to achieve same thing @keyframes fade-out-in { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } .animate-fade-out-in-2 { animation-name: fade-out-in; animation-timing-function: linear(0, 0.5 35%, 1 70%); } But I failed. how can I turn that into success? div { background: red; width: 100px; aspect-ratio: 1/1; } @keyframes fade-out-50-in-70 { 0% { opacity: 1; } 50% { opacity: 0; } 70% { opacity: 1; } 100% { opacity: 1; } } .animate-fade-out-in { animation-name: fade-out-50-in-70; animation-timing-function: linear; animation-duration: 2s; animation-iteration-count: infinite; } @keyframes fade-out-in { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } .animate-fade-out-in-2 { animation-name: fade-out-in; animation-timing-function: linear(0, 0.5 35%, 1 70%); animation-duration: 2s; animation-iteration-count: infinite; } by @keyframes by timing fn
tagged with: css
downvote count: 0
score: 1
has answer: http://stackoverflow.com/a/79069319
upvote count: 1
possible better answer: http://stackoverflow.com/a/79069319
has comment: http://stackoverflow.com/comment/139417119
has comment: http://stackoverflow.com/comment/139417169
favorite count: 0

http://stackoverflow.com/a/78936283
downvote count: 0
type: Answer
accepted answer of: http://stackoverflow.com/q/78936282
upvote count: 1
has body: Since checkboxes have the "error" class, you need to use the :has() pseudo-element on its parent wrapper: .form-checkboxes:has(.error) { border: 1px solid #c00; } The result:
score: 1
type: AcceptedAnswer
answers question: http://stackoverflow.com/q/78936282

http://stackoverflow.com/comment/139158114
type: QuestionComment
has text: Consider using proper css classes instead of styles, then you can easily check for a className and toggle it.
type: Comment
comment on: http://stackoverflow.com/q/78926741
score: 5

http://stackoverflow.com/q/78922065
tagged with: css
has comment: http://stackoverflow.com/comment/139149560
tagged with: object-fit
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139149569
has title: How do I add a web gl hover effect to a container?
has comment: http://stackoverflow.com/comment/139153976
has answer: http://stackoverflow.com/a/78922478
has body: I want the image to fit in my container like an object-fit cover and not take the space of whole viewport width. I took inspirations for the effect from this website. .casestart { height: 100vh; width: 100vw; position: relative; overflow: hidden; } .imageside { width: 52vw; height: 100vh; position: absolute; right: 0; background: #000; } canvas{ width: 52vw; height: 100vh; position: absolute; right: 0; z-index:1; } img{ height:100%; width:100%; object-fit:cover; } &lt;div class="casestart"&gt; &lt;div class="imageside"&gt; &lt;img id="hoverImage" src="https://www.datocms-assets.com/92457/1676542990-mvsm_logitechquake2_explode01_v001_b.jpg?fit=max&amp;fm=jpg&amp;h=1920&amp;w=1920" alt="" draggable="false" srcset=""&gt; &lt;/div&gt; &lt;/div&gt; I've tried everything man. It doesn't work.
tagged with: http://stackoverflow.com/tag/html
type: Question
answer count: 1
has comment: http://stackoverflow.com/comment/139149627
has comment: http://stackoverflow.com/comment/139151153
tagged with: webgl
score: 0
tagged with: javascript
has comment: http://stackoverflow.com/comment/139151293
has comment: http://stackoverflow.com/comment/139153954

navigation
tag name: navigation
tags question: http://stackoverflow.com/q/78961046
tags question: http://stackoverflow.com/q/78907430
type: Tag
tags question: http://stackoverflow.com/q/79046527
tags question: http://stackoverflow.com/q/79075952
tags question: http://stackoverflow.com/q/79224576
tags question: http://stackoverflow.com/q/79412762
tags question: http://stackoverflow.com/q/79389596
tags question: http://stackoverflow.com/q/79346076
tags question: http://stackoverflow.com/q/79324634
tags question: http://stackoverflow.com/q/79375678

http://stackoverflow.com/a/78949060
has body: Use position:absolute, top:0, left:0 for .item_overlay to cover the parent element. update z-index:2 for the overlay so that it appears above all other elements. update overlay transform to transform: translateY(100%), translateY(0) on hover to reveal the overlay. for .item__overlay, update pointer-events: auto so that it can handle mouse events. .grid { width: 100%; display: flex; justify-content: center; align-items: center; margin-top: 10px; flex-wrap: wrap; } * { box-sizing: border-box; margin: 0; padding: 0; font-family: sans-serif; } body { font-family: Montserrat, sans-serif; margin: 0; padding: 3rem; background-color: rgb(3, 4, 39); color: white; } .item { position: relative; width: 475px; max-width: 900px; background-color: rgba(3, 4, 39, 0.6); overflow: hidden; margin: 10px; transition: transform 0.4s; } .item img { width: 100%; height: 100%; display: block; object-fit: cover; } .item__overlay { display: flex; flex-direction: column; justify-content: center; height: 100%; position: absolute; width: 100%; top: 0; left: 0; background-color: rgba(3, 4, 39, 0.6); transform: translateY(100%); transition: transform 0.4s; color: white; pointer-events: auto; z-index: 2; } .item:hover .item__overlay { transform: translateY(0); } .item__body { flex-grow: 1; padding: 1rem; background: rgba(3, 4, 39, 0.6); } .item__body p { margin: 0; } .item__body a { color: green; } h3 { margin: 0; display: block; background-color: rgba(3, 4, 39, 0.6); padding: 1rem; transform: translateY(-100%); transition: transform 0.4s; } .item:hover h3 { transform: translateY(0); }
has comment: http://stackoverflow.com/comment/139228049
upvote count: 0
has comment: http://stackoverflow.com/comment/139200579
score: -2
downvote count: 2
type: Answer
answers question: http://stackoverflow.com/q/78948897

http://stackoverflow.com/comment/139167220
type: QuestionComment
has text: i got stuck at the first square
type: Comment
comment on: http://stackoverflow.com/q/78928087
score: 0

http://stackoverflow.com/a/79056394
has comment: http://stackoverflow.com/comment/139398243
downvote count: 0
has body: You might give it some margins .reading1 {margin:0 50vw}: .flexbox-container { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 40px; background-image: url(../Images/Carousel.jpg); background-size: cover; padding: 40px 0 30px 0; } .reading { flex: 0 0 auto; background-color: #ccc; border-radius: 15px; width: 310px; height: 300px; padding: 10px 30px 30px 30px; position: relative; box-sizing: border-box; } .reading1 {margin:0 50vw} .flex-number { background-color: #e8e8e8; width: 70px; height: 70px; border-radius: 50px; margin: auto; text-align: center; padding: 18px 20px 20px 20px; position: absolute; top: -25px; left: 50%; transform: translateX(-50%); font-size: 1.5rem; font-weight: bold; } .flex-type-of-report { font-size: 1.6rem; margin-top: 45px; } .flex-text { margin-bottom: 30px; } 1 Birth Chart Report A detailed written analysis of your psychological traits, relationship patterns, and career indicators. Learn More 2 Relationship Report A thorough written analysis of your relationship with a friend, lover, or family member as it evolves over time. Learn More 3 Predictive Report A detailed written report that forecasts themes of the coming year and how you can prepare for the challenges to come. Learn More
upvote count: 1
score: 1
answers question: http://stackoverflow.com/q/79056369
type: Answer

http://stackoverflow.com/comment/139398054
score: 0
type: QuestionComment
has text: You forgot the closing style tag. Add on the line after the hr { border: 1px solid #000; }
comment on: http://stackoverflow.com/q/79057460
type: Comment

http://stackoverflow.com/q/78948544
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139198192
has comment: http://stackoverflow.com/comment/139197946
has comment: http://stackoverflow.com/comment/139198002
type: Question
has body: I get when I use this css to blur the background image and add a radial-gradient to it, I don't want to blur the elements inside it: body { background: radial-gradient( 50% 50% at 50% 50%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.75) 100%), url("https://letsenhance.io/static/8f5e523ee6b2479e26ecc91b9c25261e/1015f/MainAfter.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; margin:0px; } body::before { content: ""; position: absolute; width: 100vw; height: 100vh; background: inherit; filter: blur(8px); z-index: -1; } &lt;body&gt;&lt;/body&gt; here is the link for the code pen the edges of the screen don't blur/they are transparent (look at images: image of the background with a camileon, image of the background without a background image) I know that the blur couses the issue, becouse when i remove it, the edges look fine. I have tried to increase the width of the ::before of the body/ the body itself, add a div with the z-index of -2 and add a color to it.
has comment: http://stackoverflow.com/comment/139198084
score: 0
duplicate of: http://stackoverflow.com/q/12224320
upvote count: 1
tagged with: css
answer count: 0
downvote count: 1
tagged with: blur
has comment: http://stackoverflow.com/comment/139197911
type: UnansweredQuestion
favorite count: 0
has title: Why are the edages of the screen not bluring with this css
has comment: http://stackoverflow.com/comment/139198062
linked to: http://stackoverflow.com/q/12224320

http://stackoverflow.com/a/78915863
score: 0
has comment: http://stackoverflow.com/comment/139137519
has body: With a little CSS; flex box layout, next-sibling combinator, and :has(), you can show and hide elements using radio buttons. Update I didn't notice the "However I want to also display a separate DIV just beneath the tabs" in the first place. So, I updated the example with specific CSS selectors in the case that an extra is present, it should show. section { display: flex; flex-direction: row; flex-wrap: wrap; } section label { order: 1; display: inline-block; align-self: start; padding: .2em; border: solid thin transparent; z-index: 100; } section label:has(input:checked) { background: white; border: solid thin; border-color: black black transparent; border-radius: .3em .3em 0 0; } section label:has(input:checked)+div.content { display: block; } section label.one:has(input:checked)~div.add.one { display: block; } section label.two:has(input:checked)~div.add.two { display: block; } section label.three:has(input:checked)~div.add.three { display: block; } section input { display: none; } section div.content { order: 2; display: none; width: 100%; border: solid black thin; min-height: 5em; margin-top: -1px; } section div.add { order: 3; display: none; width: 100%; } Tab one Content one Tab two Content two Tab three Content three Add 2 Add 3
type: AcceptedAnswer
answers question: http://stackoverflow.com/q/78915823
type: Answer
accepted answer of: http://stackoverflow.com/q/78915823

http://stackoverflow.com/a/78920641
has body: Isn't this what you need? Additional styles: .alignment { flex-wrap: wrap; gap: 30px; } .card { flex-grow: 1; width: auto; }
answers question: http://stackoverflow.com/q/78920407
type: Answer
score: 0
has comment: http://stackoverflow.com/comment/139147701

http://stackoverflow.com/comment/139133399
type: QuestionComment
has text: Yes, on Github, no idea until now
type: Comment
comment on: http://stackoverflow.com/q/78909216
score: 0

http://stackoverflow.com/comment/139399258
score: 0
type: AnswerComment
has text: Thanks. I managed to get it working with width: calc(100% - 4em); for the .link-title. I appreciate your help.
comment on: http://stackoverflow.com/a/78936790
type: Comment

http://stackoverflow.com/comment/139351498
has text: I think the OP is looking to `loop` when it gets to the end... e.g. user starts seeing 1,2,3,4... then scrolls to the right to see 5,6,7,8 but if 8 is the last item, it should roll over to show... 7,8,1,2 etc.
type: Comment
score: 0
comment on: http://stackoverflow.com/a/79032111
type: AnswerComment

http://stackoverflow.com/q/79009569
has comment: http://stackoverflow.com/comment/139310360
has answer: http://stackoverflow.com/a/79009889
has comment: http://stackoverflow.com/comment/139310347
score: 0
has comment: http://stackoverflow.com/comment/139310444
has comment: http://stackoverflow.com/comment/139310426
tagged with: css
has comment: http://stackoverflow.com/comment/139310477
has comment: http://stackoverflow.com/comment/139310451
tagged with: http://stackoverflow.com/tag/jpeg
tagged with: image
has title: CSS background image does not appear
tagged with: ipad
has comment: http://stackoverflow.com/comment/139310323
has comment: http://stackoverflow.com/comment/139310428
has comment: http://stackoverflow.com/comment/139310423
type: UnansweredQuestion
has body: I have CSS-styled span element with a width and height, and a background-image, which does not appear although a box of the expected size is reserved on-screen. If I try a different jpg file, the other image then appears successfully. The ‘bad’ image is in the same directory as the .css file, and the same place as the good .jpg. I’ve tried using an online jpg.repair tool in case the file was somehow corrupted, but to no avail. I have also tried converting the .jpg to a png, remembering to change the file name appropriately in the CSS, luckily. Again no help. Since other images display fine, I’m assuming that it is something to do with the particular file, but the .png didn’t display either. I’ve tried renaming the file, changing the CSS accordingly, just in case some bug means that the browser (Safari iPadOS) doesn’t like the file name. Desperation unrewarded. The CSS is not somehow bad because the other images do display. The CSS is roughly: background: url("buidheag-in-grass-small.jpg") no-repeat top center; - iirc. The image file is referenced in a separate .css file, not inline in the xhtml. I’m using Safari on an iPad with iPadOS 17.x. The web server engine is Apache/linux. Apache is explicitly set up to serve the correct mime type for .jpg files. I’m absolutely stumped. I’ve read various other posts, nearly all of which are concerned with problems with incorrect file paths. I only have one directory for all files, so no /img/ or /css/ subdirectories. Hope someone can help me.
has comment: http://stackoverflow.com/comment/139310420
type: Question
has comment: http://stackoverflow.com/comment/139310337
answer count: 1

http://stackoverflow.com/q/78916675
score: 0
tagged with: css
has body: I'm developing a website. In total there are 4 pages. And only one page show search button icon, others doesn't show. I'm beginner in coding and cannot find out what is the problem. .search-container button{ float: right; padding: 6px 10px; margin-top: 8px; margin-right: 16px; background: #ddd; font-size: 20px; border: none; cursor: pointer; } search button is not appear this is the only 1 page that could show search button icon I thought it's html coding problem since one of them could show the icon correctly. But I couldn't find out where is the problems.
accepted answer: http://stackoverflow.com/a/78916719
has comment: http://stackoverflow.com/comment/139139323
has title: Search Icon Button is not appearing
type: Question
tagged with: http://stackoverflow.com/tag/html
answer count: 1
type: AnsweredQuestion
has answer: http://stackoverflow.com/a/78916719

http://stackoverflow.com/a/78988300
score: 0
answers question: http://stackoverflow.com/q/78988246
upvote count: 1
has comment: http://stackoverflow.com/comment/139272567
downvote count: 1
has body: For proper view in mobile and tablets you have to make the website responsive. You have not written any media query in the css file. that's why the website is not responsive and the texts are overflowing and everything is a mess. @media only screen and (max-width: 600px) { //write the css for mobile view here } @media (min-width: 600px) and (max-width:998) { //write the css for tablet view here } You can add as many media query as you wish as per your need.
has comment: http://stackoverflow.com/comment/139271299
type: Answer

http://stackoverflow.com/q/79056012
type: Question
answer count: 1
tagged with: wordpress
has title: Why do I get an error when using custom CSS in Wordpress?
score: 0
tagged with: css
has answer: http://stackoverflow.com/a/79056061
type: UnansweredQuestion
has body: I am trying to get more characters out of a wordpress element in a theme. Currently the line-clamp is limited to 4. I want it to be 6 or none. When I drop the following into my Wordpress theme's customize additional css section, "line-clamp" is in red: .elementor-132 .elementor-element.elementor-element-5aa83db4 .elementor-widget-container { -webkit-line-clamp: none; } Of course if I am inspecting the element on chrome, my edits work but not adding these lines into the css of the theme. Any ideas of how to make this work?

modal-dialog
tags question: http://stackoverflow.com/q/79033531
tags question: http://stackoverflow.com/q/78918363
tag name: modal-dialog
tags question: http://stackoverflow.com/q/78914728
type: Tag
tags question: http://stackoverflow.com/q/78971889
tags question: http://stackoverflow.com/q/79007479
tags question: http://stackoverflow.com/q/79125537
tags question: http://stackoverflow.com/q/79075331
tags question: http://stackoverflow.com/q/79181852
tags question: http://stackoverflow.com/q/79163099
tags question: http://stackoverflow.com/q/79277357
tags question: http://stackoverflow.com/q/79312743
tags question: http://stackoverflow.com/q/79477853

http://stackoverflow.com/a/78941152
upvote count: 1
score: 1
type: AcceptedAnswer
answers question: http://stackoverflow.com/q/78941096
type: Answer
accepted answer of: http://stackoverflow.com/q/78941096
has body: You can do this with display: contents on the button container element. .container { display: flex; justify-content: space-between; outline: 1px solid red; margin: 2em; } .buttons { display: contents; } test test test test test
downvote count: 0

http://stackoverflow.com/q/79059752
has comment: http://stackoverflow.com/comment/139401955
answer count: 2
has comment: http://stackoverflow.com/comment/139401826
tagged with: css
tagged with: image
has answer: http://stackoverflow.com/a/79059918
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139402609
has title: Is there a way to make an image display the top of the image instead of zooming in on the center of the img?
type: Question
has comment: http://stackoverflow.com/comment/139401845
has body: I want to display the top of the image with the bottom part of the image hidden. The overflow is hidden but instead of displaying the image from top down, the image is being cut through the middle with a small part of both the top and the bottom hidden. Is there a way to fix this with css or do I need to crop the image manually? Here is my code relative to the image.. img { width: 100%; height: 350px; object-fit: cover; display: block; } I have tried different position types. I'm very new to making websites and can't think of other things to try to try to fix the problem
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139401734
score: 0
has answer: http://stackoverflow.com/a/79060536

http://stackoverflow.com/a/78930053
has body: There are mainly two issues in your code: You have not closed the anchor tag properly, use &quot;/&quot; instead of &quot;\&quot;. Your animation divs do not contain any elements as well as height to make animation or transition work. Fix the above issues and it will work.
type: Answer
score: 0
answers question: http://stackoverflow.com/q/78929847

http://stackoverflow.com/comment/139238908
has text: Got it, I think - .woocommerce-js.hfeed :)
type: Comment
comment on: http://stackoverflow.com/a/78970370
score: 0
type: AnswerComment

http://stackoverflow.com/q/78977141
has answer: http://stackoverflow.com/a/78977191
has body: I have a full page of content (.page-content) with a sticky footer at the bottom. I need a vertical separator (the white line) that takes 100% of the .page-content height. This works. I also need a fixed position separator (the red line) that takes 50% of the content height. This works too. When scrolling to the bottom of the page, I'd like the red separator to not overflow the .page-content element. In other words, I need it to not be visible further down, just like the white line. But I need it to be fixed position at the top (as it is now). I have tried many different things such as placing that fixed element within another absolute positioned element, setting overflow: hidden; on the .page-content element, but nothing helped, the red line always overflows. Is there a way I can achieve that with pure HTML/CSS? body, html { padding: 0; margin: 0; font-family: sans-serif; } .page-content { position: relative; min-height: 100vh; background: #eee; z-index: 1; } .content { padding: 2em; } .vertical-separator { position: absolute; top: 0; left: 50%; width: 3px; height: 100%; background-color: #fff; z-index: 2; } .half-vertical-separator { position: fixed; top: 0; left: 50%; width: 3px; height: 50%; background-color: red; z-index: 3; } .page-footer { background: #444; color: #eee; position: sticky; bottom: 0; height: 100vh; } Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Footer
favorite count: 0
tagged with: http://stackoverflow.com/tag/html
type: Question
answer count: 1
accepted answer: http://stackoverflow.com/a/78977191
type: AnsweredQuestion
tagged with: css-position
score: 0
upvote count: 1
has title: CSS fixed element to not overflow parent
tagged with: css
downvote count: 1

http://stackoverflow.com/comment/139385004
has text: So this example reproduces a similar situation that I try to make in the context menu.
type: Comment
score: 0
comment on: http://stackoverflow.com/q/79050234
type: QuestionComment

http://stackoverflow.com/comment/139380871
score: 0
type: AnswerComment
has text: I added a snippet here but for some reason it is not "runnable" unless I am editing; seems odd.
comment on: http://stackoverflow.com/a/79047929
type: Comment

http://stackoverflow.com/a/78946100
type: AcceptedAnswer
upvote count: 4
downvote count: 0
type: Answer
score: 4
has body: One idea is to use two linear gradient, one rendering the dashline, one splitting the 70% lighten percentage, and overlay them with the lighten blend-mode. All these can be extracted as a custom-property to control easily. .dashed-line { width: 100%; height: 6px; --lighten-percentage: 70%; --dash-width: 18px; background-image: repeating-linear-gradient(to right, #ffff 0% 40%, #454f5b 40% 100%), linear-gradient(to right, #0000 0% round(down, var(--lighten-percentage), var(--dash-width)), #bbb round(down, var(--lighten-percentage), var(--dash-width)) 100%); background-size: var(--dash-width) 100%, 100% 100%; background-blend-mode: lighten; } &lt;div class="dashed-line"&gt;&lt;/div&gt;
answers question: http://stackoverflow.com/q/78946005
accepted answer of: http://stackoverflow.com/q/78946005

http://stackoverflow.com/q/79005516
tagged with: css
has answer: http://stackoverflow.com/a/79006962
favorite count: 0
has body: Classes from Inline stylesheets generated by emotion(MUI) are not getting applied. Facing issue only in latest Chrome (v129) working for other browsers and even for Chrome (version &lt;=128). I have attached two screenshots, In Screenshot 1, I have taken an example of class(emotion) applied to svg element is getting reflected in styles hence styles are getting applied where as in Screenshot 2 same class is not getting reflected in styles hence it is not working and it is happenig for other HTML elements such as fieldset. Case: Working (Chrome &lt;= v128, Safari, Firefox, Brave) https://drive.google.com/file/d/1ZbFVakFu_2lOFIGiIOmX7UocT0tZaZjc/view?usp=drive_link Case: Not Working (Only in Chrome v129) https://drive.google.com/file/d/1DfeoHLEdBB27QDGnKtya7HQivVDC6rm1/view?usp=drive_link Can anyone help with the possible solution? Relavant Tech Stack Next.js: v13 MUI: v5.14 OS Specifications OS: macOS Sequoia (v15.0) I've tried across multiple browsers and Chrome&lt;=v128, working correctly for me but not working only in Chrome v129 as expected as I mentioned above.
possible better answer: http://stackoverflow.com/a/79020192
type: Question
has comment: http://stackoverflow.com/comment/139304789
downvote count: 0
tagged with: next.js14
type: AnsweredQuestion
score: 2
tagged with: emotion
tagged with: reactjs
accepted answer: http://stackoverflow.com/a/79006962
answer count: 2
tagged with: material-ui
has title: Inline stylesheets not reflected applied by emotion(mui) in Next.js project only in Chrome
has answer: http://stackoverflow.com/a/79020192
upvote count: 2

http://stackoverflow.com/q/78915126
has comment: http://stackoverflow.com/comment/139136531
has comment: http://stackoverflow.com/comment/139136806
has comment: http://stackoverflow.com/comment/139137534
has title: Adding fontface in css with webpack
type: UnansweredQuestion
tagged with: css
has body: I try to use my font I downloaded but I can't use it in css although webpack is adding this to dist directory { test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/, use: [ { loader: "file-loader", options: { name: "[name].[ext]", outputPath: "fonts/", }, }, ], }, @font-face { font-family: Roboto; src: url("./fonts/roboto.woff2"); } location of the font is src/fonts/roboto.woff2 I tried to changing font localization but it didn't work
type: Question
score: 0
tagged with: webpack
answer count: 0

http://stackoverflow.com/tag/docx
tags question: http://stackoverflow.com/q/78960268
type: Tag
tag name: docx

http://stackoverflow.com/comment/139423162
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/79067314
has text: Thanks! You called it. I tried it with all three to see how it reacts with each and both classList.remove() and classList.toggle() worked better than classList.replace().

http://stackoverflow.com/q/78989459
tagged with: reactjs
score: 0
has answer: http://stackoverflow.com/a/79012781
tagged with: css
has body: I’m developing a website using ReactJS and have encountered an issue specifically with Samsung Internet browser. My design looks perfect on other browsers, but when I view the site on Samsung Internet with dark mode enabled, the text color changes to white. Additionally, I have tried the below-mentioned things, but nothing works for me. :root{ color-scheme: light; } @media (prefers-color-scheme: dark) { :root { --font-color: black; }} Are there any recommended CSS properties or techniques to handle this issue?
has comment: http://stackoverflow.com/comment/139279848
linked to: http://stackoverflow.com/q/58646758
tagged with: samsung-mobile
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139375170
tagged with: android
has comment: http://stackoverflow.com/comment/139275665
has comment: http://stackoverflow.com/comment/139274622
tagged with: http://stackoverflow.com/tag/html
type: Question
answer count: 1
has comment: http://stackoverflow.com/comment/139300919
has title: Text Color Changes to White on Samsung Internet When Dark Mode is Enabled

http://stackoverflow.com/q/79048892
tagged with: css
tagged with: google-chrome
has body: I create a table direct in html (no bootstrap nor similar), but when I see this on my android phone, one column has a very big size font. It seems to be related with a cell with a long text. I tried everything to reduce the size of the font of this column, without success. The size of the font of the column, has to be the same as the others columns, even if there is one or more cells are long string. HTML: Trouble Date DataType A DataType B DataType C DataType D NA Data 1A Data 1B Data 1C Data 1D 14-06-2024 Data 2A Data 2B Data 2C Data 2D 17-06-2024 Data 3A Data 3B Data 3C Long string. This String needs to be long. More than 255 character. With this string all the table is affected. Without this string, the table works as suppose to work with. I don't know why this happens. In this case, if I remove from here to the end, works fine. Data 3D 01-08-2024 Data 4A Data 4B Data 4C Data 4D CSS: th, td { font-size: 16px; font-family: Open Sans,Arial; } Only the row DataType C is bigger. I tried with div, I tried with several media (all, screen, handheld). Nothing works. The table looks uneven. My Phone is configured with a very big user-size-font. Then I realize that only this column is affected by the phone user font size configuration.
answer count: 0
score: 0
type: UnansweredQuestion
tagged with: android
has title: User's size font affect only one Column in a HTML table
tagged with: http://stackoverflow.com/tag/html
type: Question

http://stackoverflow.com/comment/139417690
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/79064015
has text: `there are graphs that display the percentages, and it would be great to have a background as well` Please include an example of the expected outcome.

http://stackoverflow.com/comment/139296610
comment on: http://stackoverflow.com/q/78998005
has text: @tacoshy is right. Balraj Singh answered the question without any extra information. But I appreciate you trying to help me improve my question.
type: Comment
score: 0
type: QuestionComment

http://stackoverflow.com/a/78958855
answers question: http://stackoverflow.com/q/78958837
has body: The :root refers to the element (the root element). So toggle the class dark on that element (not on the ). You can get it with const rootElement = document.documentElement Also note the selector for the dark theme should be :root.dark const toggleDarkModeBtn = document.getElementById('toggle-dark-mode'); const rootElement = document.documentElement; toggleDarkModeBtn.addEventListener('click', () => { rootElement.classList.toggle('dark'); if (rootElement.classList.contains('dark')) { toggleDarkModeBtn.textContent = 'Disable Dark Mode'; } else { toggleDarkModeBtn.textContent = 'Enable Dark Mode'; } }); :root { --bg-color: #862e2e; --text-color: #ffffff; } :root.dark { --bg-color: #2d3748; --text-color: #e2e8f0; } body { background-color: var(--bg-color); color: var(--text-color); } Dark Mode Attempt Enable Dark Mode Click the button to toggle between modes.
accepted answer of: http://stackoverflow.com/q/78958837
has comment: http://stackoverflow.com/comment/139217419
type: AcceptedAnswer
type: Answer
score: 2
downvote count: 0
upvote count: 2

http://stackoverflow.com/q/78997146
downvote count: 0
has answer: http://stackoverflow.com/a/78997948
answer count: 1
type: AnsweredQuestion
tagged with: mix-blend-mode
has body: My sticky navbar has a "mix-blend-mode: difference;" When scrolling down, I would like the blend effect to interact only with the background color of the different sections it passes through. In other words, I would like the blending effect to ignore text elements, images elements and others. Here is an example of the issue, with the html example file: TEXT IN THE NAVBAR An image I do not want to blend into the navbar: Some text I do not want to blend into the navbar Some text I do not want to blend into the navbar Some text I do not want to blend into the navbar And the css: .navbar { background-color: white; color: black; font-size: 24px; font-weight: bold; position: sticky; top: 0; height: 50px; z-index: 10; display: flex; align-items: center; justify-content: center; mix-blend-mode: difference; } .below-navbar { position: absolute; top: 0; height: 200px; width: 100vw; background-color: white; z-index: -1; } .img { width: 250px; height: 250px; object-fit: cover; } .black-container { height: 100vh; background-color: black; color: white; display: flex; flex-direction: column; justify-content: center; align-items: center; } .white-container { height: 100vh; background-color: white; color: black; display: flex; flex-direction: column; justify-content: center; align-items: center; } I also did an example fiddle: https://jsfiddle.net/08zm5w3v/4/ I have tried every kind of isolation:isolate, but my understanding is that it does not apply to componenents that are not related, and here none are related to the moving navbar. I have tried other things, playing with stackable elements and z-indexes, but nothing worked. I did not find any other solution browsing through forums
has title: Make the mix-blend-mode on a sticky navbar ignore certain elements while scrolling down
upvote count: 1
accepted answer: http://stackoverflow.com/a/78997948
tagged with: css
tagged with: navbar
score: 1
favorite count: 0
tagged with: isolation
type: Question
tagged with: http://stackoverflow.com/tag/html

http://stackoverflow.com/q/78996269
type: UnansweredQuestion
score: 0
has comment: http://stackoverflow.com/comment/139286615
type: Question
has comment: http://stackoverflow.com/comment/139286257
tagged with: http://stackoverflow.com/tag/html
has title: When using Flex Wrap, how can the height be the same as the first line through min height?
tagged with: sass
has body: Currently, I use Flex wrap to give a space when moving to the next line. However, if the height of first becomes longer, the height of the first flex wrap line does not become longer. First Second Third Fourth Fifth div { font-family: arial, sans-serif; margin: 5px; color: white; border: 1px dotted black; } .parent { display: flex; width: 300px; } .unique_element { background-color: Crimson; padding: 10px 10px 10px 10px; } .unique-wrapper, .child-wrapper { border: none; margin: 0; } .unique-wrapper { flex: 3; } .child-wrapper { flex: 7; display: flex; flex-wrap: wrap; } .child { width: auto; background-color: Cornflowerblue; padding: 10px 10px 10px 10px; } my result When increasing the height As the height of first increases, the length of second and third must also increase, but in the current code, only first is longer. I searched and found that there is a way to add a hidden element, but I cannot give a classname to a specific element using data.map. What should I do? the result I want I would like to know what work is needed to make it look like the image above.
answer count: 0
tagged with: css
tagged with: flexbox

http://stackoverflow.com/comment/139353717
type: QuestionComment
type: Comment
has text: You can use a media query as you ask, or you can refer to that document if you use tailwind CSS. BTW, wouldn't it be nice to provide an example of what kind of image you want to show under what conditions?
comment on: http://stackoverflow.com/q/79033331
score: 0

http://stackoverflow.com/comment/139155797
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78925311
has text: I've updated the post to show the actual HTML generated by the report renderer, but I agree that nothing looks out of the ordinary, so this is quite difficult to diagnose. I appreciate your response though. I do see now that using colspan in this way is not technically correct even if it works for tables with fewer than 100 columns. I will revise that.
type: Comment

http://stackoverflow.com/comment/139325143
score: 0
type: Comment
has text: Yes sure, I can update my question with it
comment on: http://stackoverflow.com/q/79017553
type: QuestionComment

http://stackoverflow.com/a/79045116
score: 0
has comment: http://stackoverflow.com/comment/139377811
has body: As explained by ThatNerd the spacing differences are caused by kerning (adding positive or negative offsets based on defined character sequences like Yo). Normalize to unkerned If you can live without kerning in the initial/unseparated state of the text just apply CSS font-kerning: none. kerning across multiple text nodes To my own surprise, modern browsers are pretty smart at applying kerning to multiple elements, as long as they have an inline display context. (Whereas splitting text nodes usually breaks ligatures – that's why I'm surprised) @import 'https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap'; body{ font-family: 'Fira Sans'; font-size:5em; } .inl-blc{ display:inline-block; outline: 1px solid red; } strong{ margin:0; font-size:0.75rem; } p{ margin:0; } .kerning{ font-kerning: normal; } .nokerning{ font-kerning: none; } Yo Kerning applied Yo No Kerning applied Yo Split – kerning across spans In other words: for simple animations like a typewriter-effect (showing characters progressively) it might be enough to ensure all spans are in inline display mode. Emulate kerning? Unfortunately, once you apply another display value e.g inline-block or inline-flex – allowing individual margins or transformations – browsers will omit horizontal letter-spacing adjustments as defined by the font's kerning pairs. Theoretically, you could write your custom kerning logic e.g by retrieving the font's kerning data and writing your own CSS classes for certain character combinations/kerning-pairs. But frankly, this might be an overkill ... @import 'https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap'; body{ font-family: 'Fira Sans'; font-size:10em; } .inl-blc{ display:inline-block; outline: 1px solid red; } .inl-flx{ display:inline-flex; outline: 1px solid red; } strong{ margin:0; font-size:0.75rem; } p{ margin:0; } .kerning{ font-kerning: normal; } .nokerning{ font-kerning: none; } /* C…
has comment: http://stackoverflow.com/comment/139379235
answers question: http://stackoverflow.com/q/79043889
type: Answer

http://stackoverflow.com/q/79048295
score: 0
has comment: http://stackoverflow.com/comment/139395671
type: Question
has body: I'm displaying a historical mathematical document with two custom characters. The downloaded fonts are in the same folder as the .php document. The fonts were downloaded from https://www.1001fonts.com as .ttf fonts. The fonts were converted to .woff using https://www.fontconverter.io/en/ttf-to-woff and .woff2 using https://www.fontconverter.io/en/ttf-to-woff2. The code being used is @font-face { font-family: 'BreitkopfFraktur'; src: url('BreitkopfFraktur.woff') format('woff'); url('BreitkopfFraktur.woff2') format('woff2'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Parisienne'; src: url('parisienne-regular.woff') format('woff'); url('parisienne-regular.woff2') format('woff2'); font-weight: normal; font-style: normal; } where Parisienne displays without problem; but BreitkopfFraktur does not show. The code for Parisienne characters is, for instance, your textM` The code for BreitkopfFraktur characters is, for instance,your textU`. I have been doing further research regarding the problem font and its name. At 1001fonts.com/search.html?search=Breitkopf+Fraktur font is called Breitkopf Fraktur and Breitkopf Fraktur Regular. The downloadable zip file is called breitkopf-fraktur.zip The unzipped file is called BreitkopfFraktur.ttf. The woff and woff2 conversions are BreitkopfFraktur.woff and BreitkopfFraktur.woff2.
has comment: http://stackoverflow.com/comment/139394898
tagged with: custom-font
tagged with: css
has title: Using @fontface, one custom font works fine, the other does not
answer count: 0
has comment: http://stackoverflow.com/comment/139394753
has comment: http://stackoverflow.com/comment/139382313
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139381750

http://stackoverflow.com/comment/139242620
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78972243
has text: Yup, if no one else is able to answer, I'll do that.

http://stackoverflow.com/q/79030134
score: 2
has comment: http://stackoverflow.com/comment/139347955
has body: I'm using overflow-y-auto here so that I can scroll when there are too many items and the browser shrinks vertically: Item 1 Item 2 Create category This is clipping the shadow of the button: Tailwind Playground What's the best way to prevent this?
answer count: 1
type: AnsweredQuestion
has title: Prevent shadow from being clipped when using overflow-y-auto
tagged with: tailwind-css
upvote count: 3
has answer: http://stackoverflow.com/a/79030174
accepted answer: http://stackoverflow.com/a/79030174
tagged with: css
has comment: http://stackoverflow.com/comment/139347807
downvote count: 1
favorite count: 0
has comment: http://stackoverflow.com/comment/139347826
type: Question
tagged with: http://stackoverflow.com/tag/html

http://stackoverflow.com/comment/139135015
has text: @DarkBee I don't think there is a solution with dynamic width without using javascript. Your SO example says so. Temami solution is not dynamic. This is his fiddle on the same https://jsfiddle.net/a91ebko8/1/. Even the blog post ends with, "You can use it as is, or you can extend it to suit your needs, sprinkling in a little bit of JavaScript if you need to" Do you have a css only solution?
type: Comment
score: 0
comment on: http://stackoverflow.com/a/78914370
type: AnswerComment

http://stackoverflow.com/comment/139243881
type: AnswerComment
has text: Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer).
comment on: http://stackoverflow.com/a/78962097
type: Comment
score: 0

angular
tags question: http://stackoverflow.com/q/79026835
tags question: http://stackoverflow.com/q/79065331
tags question: http://stackoverflow.com/q/78932524
tags question: http://stackoverflow.com/q/79026518
tags question: http://stackoverflow.com/q/79047869
tags question: http://stackoverflow.com/q/78996100
tags question: http://stackoverflow.com/q/78989351
tags question: http://stackoverflow.com/q/78936245
tags question: http://stackoverflow.com/q/79064664
tags question: http://stackoverflow.com/q/78999352
tags question: http://stackoverflow.com/q/78920122
tags question: http://stackoverflow.com/q/78971420
tags question: http://stackoverflow.com/q/78979629
tags question: http://stackoverflow.com/q/78936855
tags question: http://stackoverflow.com/q/79027042
tags question: http://stackoverflow.com/q/79065468
tags question: http://stackoverflow.com/q/78989661
tags question: http://stackoverflow.com/q/78937247
tags question: http://stackoverflow.com/q/78952690
tags question: http://stackoverflow.com/q/79024912
tags question: http://stackoverflow.com/q/79018578
tags question: http://stackoverflow.com/q/79035261
tags question: http://stackoverflow.com/q/79013011
tags question: http://stackoverflow.com/q/79044932
tags question: http://stackoverflow.com/q/78940431
tags question: http://stackoverflow.com/q/79065314
tags question: http://stackoverflow.com/q/78985003
tags question: http://stackoverflow.com/q/79040155
tags question: http://stackoverflow.com/q/78932299
tags question: http://stackoverflow.com/q/79057813
tags question: http://stackoverflow.com/q/79049142
tag name: angular
tags question: http://stackoverflow.com/q/78916733
tags question: http://stackoverflow.com/q/78940243
type: Tag
tags question: http://stackoverflow.com/q/79024929
tags question: http://stackoverflow.com/q/79046794
tags question: http://stackoverflow.com/q/79032804
tags question: http://stackoverflow.com/q/78905081
tags question: http://stackoverflow.com/q/78943212
tags question: http://stackoverflow.com/q/78997595
tags question: http://stackoverflow.com/q/79027165
tags question: http://stackoverflow.com/q/78948750
tags question: http://stackoverflow.com/q/78984992
tags question: http://stackoverflow.com/q/79063993
tags question: http://stackoverflow.com/q/78944574
tags question: http://stackoverflow.com/q/79035255
tags question: http://stackoverflow.com/q/79036821
tags question: http://stackoverflow.com/q/79057837
tags question: http://stackoverflow.com/q/79090950
tags question: http://stackoverflow.com/q/79176267
tags question: http://stackoverflow.com/q/79233632
tags question: http://stackoverflow.com/q/79241411
tags question: http://stackoverflow.com/q/79192939
tags question: http://stackoverflow.com/q/79189241
tags question: http://stackoverflow.com/q/79079870
tags question: http://stackoverflow.com/q/79173906
tags question: http://stackoverflow.com/q/79229848
tags question: http://stackoverflow.com/q/79157831
tags question: http://stackoverflow.com/q/79090378
tags question: http://stackoverflow.com/q/79083304
tags question: http://stackoverflow.com/q/79198325
tags question: http://stackoverflow.com/q/79089646
tags question: http://stackoverflow.com/q/79095698
tags question: http://stackoverflow.com/q/79102456
tags question: http://stackoverflow.com/q/79141738
tags question: http://stackoverflow.com/q/79203057
tags question: http://stackoverflow.com/q/79140118
tags question: http://stackoverflow.com/q/79186003
tags question: http://stackoverflow.com/q/79076675
tags question: http://stackoverflow.com/q/79186852
tags question: http://stackoverflow.com/q/79196640
tags question: http://stackoverflow.com/q/79174535
tags question: http://stackoverflow.com/q/79118152
tags question: http://stackoverflow.com/q/79160136
tags question: http://stackoverflow.com/q/79216806
tags question: http://stackoverflow.com/q/79082907
tags question: http://stackoverflow.com/q/79189709
tags question: http://stackoverflow.com/q/79146996
tags question: http://stackoverflow.com/q/79179545

http://stackoverflow.com/a/78948543
upvote count: 2
type: Answer
downvote count: 1
has body: I think i got it by using a big div for the whole top notch area (black and red parts) which has a black background. In there are 3 divs, a left and right part and the center actual notch area. left and right have a red background, the notch area a red one. left and right get a border radius on the border to the screen and the border for the inner border-radius and the notch in the notch-area gets a black background and a border radius for the bottom edges. This only works with a plain background, not a more complex content. I bet there are some svg and clip path magic one can do but if you only use plain backgrounds and you dont need to display content below the header-area where the notch is this should work. Also if we use a flex box for the whole notch-area and use space-between the width of the notch is dynamic *{ --notch-top-radius: 5px; --notch-bottom-radius: 10px; --screen-radius: 10px; --screen-bg: red; --notch-bg: black; } body{ margin: 0; padding: 0; background: var(--notch-bg); } .screen{ background: var(--screen-bg); height: calc(100vh - 2rem); margin: 1rem; width: calc(100vh / 1.61); display: flex; justify-content: space-between; flex-direction: column; border-radius: var(--screen-radius); } .notch-area{ background: var(--notch-bg); display: flex; justify-content: space-between; width: 100%; } .notch .content{ font-size: 0.5rem; color: white; text-align: center; white-space: nowrap; padding: 0.1rem; } .notch-area .left, .notch-area .right{ width: 100%; height: 1rem; background: var(--screen-bg); } .notch-area .left{ border-radius: var(--screen-radius) var(--notch-top-radius) 0 0; } .notch-area .right{ border-radius: var(--notch-top-radius) var(--screen-radius) 0 0; } .notch-wrapper{ background:var(--screen-bg); height: 1rem; } .notch{ width: 100%; height: 1rem; background: var(--notch-bg); border-radius: 0 0 var(--notch-bottom-radius) var(--notch-bottom-radius); } Hello World Doloribus est architecto laboriosam minus a dolorem labore. Repudiandae natus…
answers question: http://stackoverflow.com/q/78948289
accepted answer of: http://stackoverflow.com/q/78948289
score: 1
type: AcceptedAnswer

http://stackoverflow.com/comment/139400939
type: Comment
has text: Welcome to SO! Please provide a [mre] so that the community may be able to help you.
type: QuestionComment
score: 1
comment on: http://stackoverflow.com/q/79059314

http://stackoverflow.com/comment/139149691
comment on: http://stackoverflow.com/q/78922197
score: 2
type: Comment
type: QuestionComment
has text: Flexbox cannot do this natively. Frankly this looks like a case for `float`.

http://stackoverflow.com/comment/139331720
type: AnswerComment
comment on: http://stackoverflow.com/a/78993277
type: Comment
has text: or just `form.hidden = !e.target.checked`
score: 0

http://stackoverflow.com/q/78941096
accepted answer: http://stackoverflow.com/a/78941152
has body: I want align items with equal spacing and with different parents and without adding any width to those items. I tried below code but not working. Please help me to on this. test test test test test .container{ display:flex; width:100% } .buttons{ display: flex; width: 75%; justify-content: space-between; } .outer{ margin-left:auto } Link for my code https://jsfiddle.net/f74ayxh9/ I want result like this with equal spacing and margin but with my HTML structure. Thank you
tagged with: sass
score: 0
tagged with: alignment
tagged with: css
tagged with: flexbox
has comment: http://stackoverflow.com/comment/139184372
has answer: http://stackoverflow.com/a/78941152
type: Question
answer count: 1
has comment: http://stackoverflow.com/comment/139184388
tagged with: http://stackoverflow.com/tag/html
has title: Align items equally using CSS with different parents
type: AnsweredQuestion

http://stackoverflow.com/q/78925311
has comment: http://stackoverflow.com/comment/139155773
linked to: http://stackoverflow.com/q/398734
upvote count: 1
tagged with: jsreport
tagged with: css
answer count: 0
has body: I am using JSReport (template engine: handlebars.js, pdf recipe: chrome-pdf) to generate PDF reports from html/css and I have encountered some very strange behavior with tables breaking to a new page randomly in very rare instances. An example: table page break As you can see, there is plenty of room for this table to fit on the first page, but it breaks after the first row. I am using the CSS properties page-break-inside: auto; on my table elements and page-break-inside: avoid; page-break-after: auto; on my tr elements to allow tables spanning multiple pages to break to a new page properly. Oddly, even if I remove these properties or try other combinations of them, i.e. setting just this table's properties to page-break-inside: avoid; and its tr properties to page-break-inside: avoid; page-break-after: avoid;, or removing all of these properties entirely, this table will still break in the same way. When running different reports with different data, this same issue may or may not occur randomly in any table in the report, with the tables breaking at arbitrary rows (sometimes in the middle of the table, sometimes after just a few rows, etc). Overall, though, the issue is pretty rare. I'd estimate it occurs once in every ~25 tables generated. I know this is a tough one to diagnose but I'm posting here as a last resort after trying every possible combination of CSS properties relevant to page breaks in hopes that someone has seen this or has some idea how I can debug this issue further. EDIT: Adding HTML and CSS of the table shown. Happy to provide any other info that may help. TABLE CODE: table { table-layout: auto; height: auto; width: 100%; border: none; border-collapse: collapse; font-size: 11px; page-break-inside: auto; } tbody tr { border-top: var(--border-tr); border-bottom: var(--border-tr); page-break-inside: avoid; page-break-after: auto; } Type Number of transactions Gross* Fee* Tax* Net Amount* Buy 14 51,756.55 0.00 0.00 51,756.55 Dividend 71 18,361.75 0.…
has comment: http://stackoverflow.com/comment/139155909
has comment: http://stackoverflow.com/comment/139155797
has title: HTML tables arbitrarily breaking to new page in PDF report
has comment: http://stackoverflow.com/comment/139155977
has comment: http://stackoverflow.com/comment/139155878
has comment: http://stackoverflow.com/comment/139155883
type: UnansweredQuestion
score: 1
favorite count: 0
has comment: http://stackoverflow.com/comment/139155661
has comment: http://stackoverflow.com/comment/139155666
has comment: http://stackoverflow.com/comment/139155750
tagged with: handlebars.js
tagged with: http://stackoverflow.com/tag/html
type: Question
downvote count: 0
tagged with: html-table

http://stackoverflow.com/a/79046003
answers question: http://stackoverflow.com/q/79044341
type: Answer
has body: mix-blend-mode lighten is the right idea. However, outside the opaque part of the image there is nothing to 'lighten' against. Putting a background on the image that is white will ensure that on lighten white will be what shows. &lt;style&gt; .icon { position: relative; display: inline-block; background-color: #000080; } .icon .type { width: 24px; height: 24px; position: absolute; top: 0px; left: 0px; object-fit: none; object-position: 0px 0px; /* it's a css image sprite */ z-index: 10; background-color: white; } .icon .glint { width: 24px; height: 24px; position: absolute; top: 0px; left: 0px; z-index: 11; mix-blend-mode: lighten; } &lt;/style&gt; &lt;div class="icon"&gt; &lt;img class="type" src="https://omeo.one/images/icons.png"&gt; &lt;img class="glint" src="https://omeo.one/images/glint.webp"&gt; &lt;/div&gt; Note: I have not heard of z-order so have changed it to z-index, though it makes no difference in this example as the glint is positioned after and absolutely relative to the image.
downvote count: 0
upvote count: 2
has comment: http://stackoverflow.com/comment/139378289
score: 2

http://stackoverflow.com/a/78918624
downvote count: 0
score: 1
answers question: http://stackoverflow.com/q/78918565
upvote count: 1
accepted answer of: http://stackoverflow.com/q/78918565
type: AcceptedAnswer
type: Answer
has body: Just add the parent class which is flex and wrap the label and input in a common div. body { background-color: #000000; color: #ffffff; width: 100%; height: 100vh; margin: 0; font-family: Futura; } fieldset { margin-top: 20px; background-color: pink; width: 70%; border: 3px solid #ffffff; border-radius: 5px; } legend { background-color: grey; color: #ffffff; border: solid; border-radius: 10px; padding: 2px 5px; } input { width: auto; background-color: #ffffff; color: grey; margin: 5px; font-family: Futura; } input[type=submit], input[type=reset] { background-color: skyblue; color: #000000; width: 25%; margin-top: 15px; } .textarea { font-family: Futura; color: grey; font-size: 14px; } .flex { display: flex; margin-bottom: 20px; } Checkbox area My pronouns are: she/her he/him they/them Choose One Yes No Maybe

http://stackoverflow.com/q/78976062
downvote count: 1
type: UnansweredQuestion
favorite count: 0
score: 0
tagged with: css-specificity
type: Question
has title: Under what circumstances can a CSS rule with specificity 0-0-1 override one with specificity 0-1-0?
linked to: http://stackoverflow.com/q/28420163
upvote count: 1
has comment: http://stackoverflow.com/comment/139249214
duplicate of: http://stackoverflow.com/q/28420163
answer count: 0
tagged with: css
has comment: http://stackoverflow.com/comment/139249194
has body: In the screenshot below, you can see that a font-family declaration with a rule specificity 0-0-1 is taking precedence over one with specificity 0-1-0. My understanding is that order of rules only matters when specificity is equal, which is not the case here. Notably, even adding !important to the class name selector has no effect on the outcome. Chrome and Firefox both exhibit the same behavior here, so I assume whatever is happening is to spec. Under what circumstances would the behavior in the screenshot be expected?
tagged with: css-selectors

http://stackoverflow.com/q/78923868
tagged with: http://stackoverflow.com/tag/html
has body: I have an application that pulls in variable destination names. The text area has a set width, however sometimes the text that comes in will be too long for the text area, so in that case id like the text to automatically animate to slide the text over, perhaps some kind of pingpong animation to fit the text in and move side to side. i have created a jquery animation that if the text is too long it will auto scroll, a bit like an old school marquee tag, however , i dont want the destination name to have to scroll all the way and then restart once all text has scrolled out of view. I'm looking for examples from the community of a better way of doing this. .destination { height: 40px; width: 250px; left: 0; white-space: nowrap; overflow: hidden; font-size: 32px; position: absolute; } .row1 { top:0; } .row2 { top:100px; } &lt;div class="destination row1"&gt; Short name &lt;/div&gt; &lt;div class="destination row2"&gt; Long destination name &lt;/div&gt;
score: 0
has comment: http://stackoverflow.com/comment/139152732
linked to: http://stackoverflow.com/q/61727529
tagged with: javascript
has comment: http://stackoverflow.com/comment/139152791
tagged with: css
has comment: http://stackoverflow.com/comment/139152766
type: UnansweredQuestion
has answer: http://stackoverflow.com/a/78925060
has title: Automatically animate text ONLY if text is too long for div area
type: Question
answer count: 1

http://stackoverflow.com/comment/139279129
comment on: http://stackoverflow.com/q/78991117
type: Comment
score: 0
has text: The snippet results do not seem to match your description of the problem. Please edit your description and/or the snippet so that it is clear to the community what the problem is.
type: QuestionComment

http://stackoverflow.com/a/79022246
score: 3
answers question: http://stackoverflow.com/q/79022190
downvote count: 0
has comment: http://stackoverflow.com/comment/139333499
has body: You can try this (assuming month elements are always sibling) .month:has(.today) ~ .month .disabled, /* select the days of the other months */ .today ~ .disabled { /* select the days inside the same month */ background: red } Day 1 Day 2 Day 3 Day 4 Day 5 Day 6 Day 7 Day 8 Day 9 Day 10 Day 11 Day 12 Day 13 Day 14
type: Answer
upvote count: 3

http://stackoverflow.com/q/79062531
tagged with: accent-color
tagged with: css
tagged with: progressive-web-apps
has comment: http://stackoverflow.com/comment/139407206
type: UnansweredQuestion
has answer: http://stackoverflow.com/a/79064728
tagged with: uicolor
tagged with: android
type: Question
has body: Is there a way to use Androids System Color in Webpages or PWAs? Since Android 14 (13) there is a system wide color theme in Android? How can I get and use this values in my Web Application or PWA?
has title: How to use Androids System Color in Webpage or PWA
answer count: 1
score: 0

http://stackoverflow.com/a/79066670
has comment: http://stackoverflow.com/comment/139416350
score: 1
has comment: http://stackoverflow.com/comment/139430159
type: AcceptedAnswer
downvote count: 0
has body: For this, add position: absolute; to .header-search-bar and position: relative; to .header then make it 50% from left then to ensure it is perfectly centered add transform: translateX(-50%);. .header-search-bar { width: 40%; display: flex; justify-content: center; align-items: center; margin: 0 auto; left:50%; transform: translateX(-50%); } Now for ensuring Icons doesn't overlap the text input add padding left and right to search-bar-input Update See this codesandbox example from mui which is similar to what you want Hope this helps...
type: Answer
upvote count: 1
answers question: http://stackoverflow.com/q/79063167
accepted answer of: http://stackoverflow.com/q/79063167

http://stackoverflow.com/comment/139292600
type: QuestionComment
has text: I used the one in the official Tailwind documentation. My tailwind.config.js is apparently right according to the documentation, my suspicion is that there is something wrong with the output.css but I don't know how to verify this suspicion.
comment on: http://stackoverflow.com/q/78996058
type: Comment
score: 0

http://stackoverflow.com/comment/139417384
comment on: http://stackoverflow.com/a/79067991
type: AnswerComment
has text: thanks, I understand now. I have another question: could you explain why linear(0, 0.5, 35%, 1, 70%) doesn't work?
type: Comment
score: 0

http://stackoverflow.com/q/78967832
type: Question
answer count: 1
tagged with: reactjs
score: 0
tagged with: css
has answer: http://stackoverflow.com/a/78967903
type: UnansweredQuestion
has body: I am trying to set up the details for putting searchbox beside the logo image in order to be in the center of the navbar styled section but for unkown reason the searchob is located in the right corner of the page. This is the React code const Home = () => { return ( <> <Fas.FaSearch/> </> ) } export default Home And this is the css file code where I am facing the issue: header{ width: 100%; height: 80px; } header .row { width: 100%; display:flex; align-items: center; justify-content: space-between; background-color: #E6E6FA; } img{ width: 20%; } .search-box{ width: 100%; text-align: center; } And the result is this one below Evidence big gap What should I do to set up the searchob in the middle of the webpag. Any suggestions are acceptable. Thanks a lot
has title: How to set searchbox next to logo picture without big gap in ReactJS

http://stackoverflow.com/comment/139372991
type: Comment
score: 0
type: AnswerComment
has text: Thank you! I added this into the code, but Mailchimp seemed to automatically erase it. The code reverted back to how it had been before I put in !important. I don't know how to get the edited code to stay in place...
comment on: http://stackoverflow.com/a/79043484

http://stackoverflow.com/comment/139404330
type: QuestionComment
has text: Can you use `-webkit-text-decoration-thickness: 2px;` or have a fallback for Safari?
type: Comment
comment on: http://stackoverflow.com/q/79060854
score: 0

http://stackoverflow.com/a/78942209
score: -1
has comment: http://stackoverflow.com/comment/139186687
has comment: http://stackoverflow.com/comment/139186653
has body: You can create a new CSS method (like noBackground in my code snippet, applied in top and center overlaid texts) and apply it to each overlaid class. Image Text How to place text over an image: Bottom Left Top Left Top Right Bottom Right Centered
type: Answer
downvote count: 1
upvote count: 0
has comment: http://stackoverflow.com/comment/139186700
answers question: http://stackoverflow.com/q/78942176

http://stackoverflow.com/a/79025131
has body: You can use word-wrap property and set it to break-word, it allows long words to be able to break and wrap onto the next line. link html{ color: white; font-family: sans-serif; font-size: 20px; text-align: center; } #circles-container{ display: flex; justify-content: center; } .circle{ height: 300px; width: 300px; border-radius: 100%; display: flex; align-items: center; justify-content: center; } .circle > div{ width: 50%; } #circle-1 > div{ margin-right: 50%; } #circle-3 > div{ margin-left: 50%; } #circle-1{ background-color: #3a7487; transform: translateX(25%) } #circle-3{ background-color: #9d4767; transform: translateX(-25%); mix-blend-mode: overlay; } #intersection{ position: absolute; z-index: 2; box-sizing: border-box; text-wrap: wrap; word-wrap: break-word; padding: 20px; } Text 1 VeryVeryLongTOOLongText 2 Text 3 Note: Text overflowing has nothing to do with position: absolute;
answers question: http://stackoverflow.com/q/79025097
has comment: http://stackoverflow.com/comment/139356231
type: Answer
has comment: http://stackoverflow.com/comment/139342087
score: 0
has comment: http://stackoverflow.com/comment/139350894

http://stackoverflow.com/a/78986535
score: 0
answers question: http://stackoverflow.com/q/78986363
type: Answer
has body: Try this way, using flex property or you can use width. Section A * { padding: 0; margin: 0; box-sizing: border-box; } .container { display: flex; } .section-a { flex: 0.5; background-color: coral; } .section-b { flex: 0.5; background-color: blueviolet; overflow: hidden; } .section-b img { width: 100%; height: 100%; object-fit: cover; } /* Below code will center the content inside section a and b */ .section-a, .section-b { display: flex; justify-content: center; align-items: center; } @media screen and (max-width: 768px) { .container { flex-direction: column; } }

http://stackoverflow.com/q/78938496
score: 0
has answer: http://stackoverflow.com/a/78940173
answer count: 2
has answer: http://stackoverflow.com/a/78938633
tagged with: css
tagged with: flexbox
has comment: http://stackoverflow.com/comment/139181326
tagged with: aspect-ratio
type: UnansweredQuestion
has title: How can I fit content in visible page while using aspect-ratio?
type: Question
has body: I have a component on my page (named grid in the example). I’d like this component to achieve the following constraints: maintain 1:1 aspect ratio be as big as possible stay within the bounds of the viewport (no scrollbars) ideally without JavaScript I’ve been able to satisfy 1, 2, and 4, but not 3: when the viewport is portrait-oriented (more height than width), the grid and its children will shrink as desired, to maintain the 1:1 aspect ratio. when the viewport is landscape-oriented, the grid component expands beyond the bottom of the viewport, creating a scrollbar. Here’s the HTML I’m looking at: top bar placeholder And here’s the associated CSS: #wholePage { background-color: gray; width: 100vw; height: 100vh; display: flex; flex-direction: column; } #grid { width: auto; height: auto; flex: 0 0 auto; display: flex; flex-direction: column; aspect-ratio: 1; } .row { height: 50%; width: 100%; flex: 0 1 auto; display: flex; flex-direction: row; } .column { height: 100%; width: 100%; flex: 0 1 auto; }
tagged with: http://stackoverflow.com/tag/html

http://stackoverflow.com/q/78959027
favorite count: 0
accepted answer: http://stackoverflow.com/a/78961536
type: Question
tagged with: tooltip
downvote count: 0
tagged with: scroll
type: AnsweredQuestion
has answer: http://stackoverflow.com/a/78959123
upvote count: 1
has body: I'm starting to think this isn't possible but i have seen multiple examples of it working without a scrollable element. I would like to have the tool tip element show beyond the bounds of a scrollable element. This is my current layout for a chat application i am working on. If you hover over the emote img the tooltip will appear and you can see that when the emote is near the end of line that meets the right side border of its parents it will be hidden. It would be great to find a solution using only CSS. If not I'm thinking i have to put the tool-tip outside of the element that holds messages and somehow make the tool-tip reusable for each emote. Does anyone have a good idea how to handle this better? On a side note I'm also trying to fix the way i display imgs inside the tooltip. Currently it scales emotes to a minimum height of 128px. If a wide emote is inserted it will center the image horizontally and clip the left and right side. This doesn't look terrible but I'm having trouble figuring out how to get the tooltip to have a dynamic width based on the img. Any help is appreciated thanks! :root { --font-size: 14px; --background-color: #18181b; --background-transparent: #171717c4; --accent-color: #0e0e10; --accent-color-transparent: #0e0e1033; --accent-color-alt: #18181b; --border-color: #2a2a2e; --text-color: #efeff1; --text-color-alt: #adadb8; --text-color-dark: #000000; --primary-color: #9147ff; --primary-color-hover: #772ce8; --primary-color-transparent: #9147ff6b; --first-msg-background: #c832c81A; --first-msg-stroke: #2e0b2e; --first-msg-border: #c832c8; --success-color: #00f593; --error-color: #eb0400; --warning-color: #ffd37a; --info-color: #1f69ff; --px1: 0.0625rem; --px2: 0.125rem; --px3: 0.1875rem; --px4: 0.25rem; --px5: 0.3125rem; --px6: 0.375rem; --px7: 0.4375rem; --px8: 0.5rem; --px9: 0.5625rem; --px12: 0.75rem; --px14: 0.875rem; --px16: 1rem; --px20: 1.25rem; --px24: 1.5rem; --px28: 1.75rem; --px32: 2rem; --px36: 2.25rem; --px40: 2.5rem; --px48: 3…
has comment: http://stackoverflow.com/comment/139217802
answer count: 2
tagged with: overflow
tagged with: css
has answer: http://stackoverflow.com/a/78961536
tagged with: hidden
has title: How to get tool tip element to break out of scrollable element with overflow hidden?
possible better answer: http://stackoverflow.com/a/78959123
score: 1

http://stackoverflow.com/comment/139238920
comment on: http://stackoverflow.com/a/78970370
has text: @BlankaMorikawa Look for at an `id` or `class` which distinguish the page from other woocommerce templates. In this case `hfeed` is unique to your category page. But on your category page, you have to target the class `.col-lg-8` because this is what contains the grid elements. This has `max-width` set to `66.666667%` and `flex: 66.666667%`. So use this: `.hfeed .col-lg-8 { max-width: 100% !important; flex: 0 0 100% !important; }`
type: Comment
score: 0
type: AnswerComment

http://stackoverflow.com/q/79043462
has comment: http://stackoverflow.com/comment/139372818
tagged with: css
has title: How can I use !important on inline styles in an email?
has comment: http://stackoverflow.com/comment/139373114
tagged with: operator-precedence
type: UnansweredQuestion
type: Question
has comment: http://stackoverflow.com/comment/139372734
answer count: 1
tagged with: mailchimp
tagged with: outlook
score: 0
has comment: http://stackoverflow.com/comment/139375328
has comment: http://stackoverflow.com/comment/139372648
tagged with: html-email
has answer: http://stackoverflow.com/a/79043484
has body: I send out a newsletter for my university, using Mailchimp. There are no known issues with delivery into Outlook mailboxes, but if you try to forward the newsletter through Outlook, Outlook overrides the newsletter HTML with its own HTML preferences and forwards something illegible. how newsletter looks when forwarded from Outlook -- bad how newsletter looks when it arrives in outlook mailbox -- good I read to add !important into the Mailchimp HTML code so that Outlook will not change the formatting, but I don't know where to put it. Here is some of the code: &lt;span style=&quot;color:rgb(255, 255, 255);&quot;&gt;&lt;span style=&quot;font-size: 17px&quot;&gt;&lt;span style=&quot;font-family: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif&quot;&gt;I hope this message finds you well and that your academic year is off to a good start.&amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt; &lt;p&gt;&lt;span style=&quot;color:rgb(255, 255, 255);&quot;&gt;&lt;span style=&quot;font-size: 17px&quot;&gt;&lt;span style=&quot;font-family: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif&quot;&gt;&amp;nbsp;&lt;/span&gt;&lt;/span&gt; &lt;/span&gt;&lt;/p&gt; &lt;p&gt;&lt;span style=&quot;color:rgb(255, 255, 255);&quot;&gt;&lt;span style=&quot;font-size: 17px&quot;&gt; I have heard to try putting !important; into the HTML code around the style features of the newsletter-- ie. background color, text color, font, etc. But I have not tried it because I don't know where to put it in the code.

http://stackoverflow.com/comment/139178739
comment on: http://stackoverflow.com/q/78937749
type: Comment
has text: You should run that through the validator and fix your errors to make sure that's not contributing to the problem.
score: 0
type: QuestionComment

http://stackoverflow.com/a/79044672
accepted answer of: http://stackoverflow.com/q/79044613
has body: Quick Solution - zoom & window.innerWidth If you need an answer that deals with absolute pixel values and zoom, you could use some JS to procedurally set --width's value on :root. You'd first need to define te @property in css, and then set it with js. Note that i've used :root as it provides a more general solution, that makes --width available to any css selector. If you only need the body to adjust, you could modify the js snippet to set the property on body instead. function adjustWidthVar(){ const root = document.querySelector(':root'); root.style.setProperty('--windowWidth', window.innerWidth); } adjustWidthVar(); // call on script load; window.onresize = adjustWidthVar; //call everytime the window resizes @property --windowWidth{ syntax: '<number>'; /*asume everything is on pixels*/ inherits: true; initial-value: 0; } @media and (min-width: 1024px){ /*SOME_PIXEL_VALUE*/ div.design{ --designWidth : 1024; /*SAME_PIXEL_VALUE_AS_QUERY*/ zoom: calc(var(--windowWidth) / var(--designWidth)); } } Your Design Here More 'idiomatic' solution - Viewport Units The CSS standard conveniently includes relative lenght units, in particular: vh and vw are relative to the viewport's height and width, respectively. As stated on MDN: The benefit of using relative units is that with some careful planning you can make it so the size of text or other elements scales relative to everything else on the page. There is a standard CSS way to make elements natively adjust to viewport-size, we should leverage it. The proposed solution utilizes the calculation: calc(var(--windowWidth) / var(--designWidth)) for zooming the body element (i.e, for zooming everything that is rendered on the page!). On inspection, zooming by the ratio between --designWidth and --windowWidth has the effect of proportionaly scaling the design to match with the viewport. But it involves calculating (via js) information already available to css. With ViewportUnits we could leverage this fact. And if we need the scali…
has comment: http://stackoverflow.com/comment/139408235
type: AcceptedAnswer
type: Answer
downvote count: 0
has comment: http://stackoverflow.com/comment/139384757
upvote count: 1
has comment: http://stackoverflow.com/comment/139375014
score: 1
has comment: http://stackoverflow.com/comment/139386733
answers question: http://stackoverflow.com/q/79044613
has comment: http://stackoverflow.com/comment/139374984
has comment: http://stackoverflow.com/comment/139375143
has comment: http://stackoverflow.com/comment/139384572

http://stackoverflow.com/q/78975591
tagged with: css
has comment: http://stackoverflow.com/comment/139248834
tagged with: d3.js
has comment: http://stackoverflow.com/comment/139253716
linked to: http://stackoverflow.com/q/46382467
type: UnansweredQuestion
favorite count: 0
type: Question
downvote count: 0
tagged with: charts
has comment: http://stackoverflow.com/comment/139253697
has comment: http://stackoverflow.com/comment/139253449
tagged with: http://stackoverflow.com/tag/svg
has body: I am trying to view the axis labels of my d3 timeline chart. We are using v3 of d3 at work which can't be easily changed (there are many charts written this way) For some reason that I can't figure out for the life of me, the CSS of the text elements inside the SVG are not visible. The elements exist in HTML, and they can be selected using the inspector, but I cannot see the labels or the ticks. My code is as follows: var TIMELINE_METHODS = (function() { "use strict"; var COLORS = ["green", "red", "blue", "orange", "indigo", "fuchsia", "black", "cyan", "darkgreen", "pink"]; var MARGINS = { top : 0, bottom : 0, left: 0, right: 0 }; var TRANSLATE = function(x,y) { return "translate(" + x + "," + y + ")"; }; var createGraphRoot = function(rootNode, params) { d3.select(rootNode).selectAll("svg").remove(); var margins = params.margins || MARGINS; var root = d3.select(rootNode) .append("svg:svg") .attr("width", params.width + margins.left + margins.right) .attr("height", params.height + margins.top + margins.bottom) .append("g") .attr("transform", TRANSLATE(margins.left, margins.top)); return root; }; var applyScales = function(root, xScale, yScale) { var xAxis = d3.svg.axis().scale(xScale).orient("bottom").ticks(d3.time.day, 1); var yAxis = d3.svg.axis().scale(yScale).orient("left"); /*var maxRange = function(scale) { // rangeExtent is more accurate for ordinal scales return d3.max((scale.rangeExtent || scale.range)()); }; */ root.append("g") .attr("class", "x axis") .attr("transform", TRANSLATE(0, yScale.rangeExtent()[1])) .call(xAxis); root.append("g") .attr("class", "y axis") .call(yAxis); }; var fillWithData = function(root, data, xScale, yScale, barColor) { root.selectAll("rect") .data(data) .enter().append("rect") .attr("x", function(d) { return xScale(d.start); }) .attr("y", function(d) { return yScale(d.name); }) .attr("width", function(d) { return xScale(d.end) - xScale(d.start); }) .attr("height", yScale.rangeBand()) .attr("fill", barColor); } /////////////////…
tagged with: javascript
score: 1
upvote count: 1
has comment: http://stackoverflow.com/comment/139248954
has comment: http://stackoverflow.com/comment/139248859
answer count: 0
has title: d3 axis labels and ticks are invisible

bootstrap-4
tags question: http://stackoverflow.com/q/79010977
tags question: http://stackoverflow.com/q/79052168
tags question: http://stackoverflow.com/q/78951420
tags question: http://stackoverflow.com/q/79055334
tags question: http://stackoverflow.com/q/79007479
type: Tag
tag name: bootstrap-4
tags question: http://stackoverflow.com/q/78986796
tags question: http://stackoverflow.com/q/78944147
tags question: http://stackoverflow.com/q/78938537
tags question: http://stackoverflow.com/q/79055645
tags question: http://stackoverflow.com/q/79065468
tags question: http://stackoverflow.com/q/79035604
tags question: http://stackoverflow.com/q/79102456
tags question: http://stackoverflow.com/q/79210109
tags question: http://stackoverflow.com/q/79214880
tags question: http://stackoverflow.com/q/79205940
tags question: http://stackoverflow.com/q/79406905
tags question: http://stackoverflow.com/q/79413531
tags question: http://stackoverflow.com/q/79247315
tags question: http://stackoverflow.com/q/79302844
tags question: http://stackoverflow.com/q/79305822
tags question: http://stackoverflow.com/q/79279355
tags question: http://stackoverflow.com/q/79270266
tags question: http://stackoverflow.com/q/79366941
tags question: http://stackoverflow.com/q/79316000
tags question: http://stackoverflow.com/q/79245111
tags question: http://stackoverflow.com/q/79424304
tags question: http://stackoverflow.com/q/79432914
tags question: http://stackoverflow.com/q/79527728
tags question: http://stackoverflow.com/q/79470250
tags question: http://stackoverflow.com/q/79448828
tags question: http://stackoverflow.com/q/79448366
tags question: http://stackoverflow.com/q/79503152
tags question: http://stackoverflow.com/q/79434792

http://stackoverflow.com/comment/139228578
comment on: http://stackoverflow.com/a/78963199
has text: Perhaps you can share an example, because it is difficult to understand from words exactly what did not work.
type: Comment
score: 0
type: AnswerComment

http://stackoverflow.com/comment/139295299
score: 0
type: AnswerComment
has text: @AHaworth probably I make a misspeling in relation to CSS layers. What I mean under parenting: `@layer base /*(parent)*/, special`. Sure it doesn't look like that one layer is parent for another, my bad. Yes I overridden the `.item` class but I didn't override `.item:hover`. So the styles for `.item` changed but not for `.item:hover`. So I don't understand if I didn't override `.item:hover` then why the hover effect doesn't work from the previous layer?
comment on: http://stackoverflow.com/a/79000845
type: Comment

http://stackoverflow.com/q/79047361
answer count: 1
tagged with: http://stackoverflow.com/tag/html
downvote count: 0
type: AnsweredQuestion
has comment: http://stackoverflow.com/comment/139380175
has comment: http://stackoverflow.com/comment/139380142
has body: I have a component that consists of two rows with a headline and a description. There is also an image cell that spans both rows. Both the headline and the description have a background color. The problem is that I haven't yet figured out how to continue the background colors. So here is what I have right now. (See also this Stackblitz example.) And here is what I want to achieve. The difficulty lies in the fact that the headline or description have different lengths depending on the content in the content management system. So it can also look like this, for example I tried using a grid with template areas with the following HTML and CSS :root { --color-primary: lightblue; --color-secondary: orange; --color-tertiary: lightgreen; } .component { display: grid; grid-template-areas: 'headline image' 'description image'; grid-template-rows: auto auto; max-width: 960px; outline: 2px dashed orchid; } .text--headline { grid-area: headline; background-color: var(--color-primary); } .text--description { grid-area: description; background-color: var(--color-secondary); } .image { grid-area: image; display: grid; align-content: center; justify-content: center; min-width: 200px; min-height: 400px; } .image-fake { width: 100px; height: 200px; padding: 8px; background-color: var(--color-tertiary); } /* For demo purposes */ .text { padding-inline: 8px; } Split Background Headline Split Background Description This is an image For the full code see the already mentioned Stackblitz. No solution is to use pseudo-classes with position: absolute as then I have to calculate the percentage, which is always shaky. My hope was that subgrid could help here, for example .image { grid-area: image; /* ... */ display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; } but this breaks the layout. Maybe I don't understand subgrid here enough, maybe there is another solution possible. So do you have any hint?
upvote count: 1
has answer: http://stackoverflow.com/a/79047401
has comment: http://stackoverflow.com/comment/139379789
tagged with: css
tagged with: flexbox
has comment: http://stackoverflow.com/comment/139379799
tagged with: css-grid
score: 1
has title: How to continue the background colors of a two-line grid with headline and description in a spanned image cell
favorite count: 0
accepted answer: http://stackoverflow.com/a/79047401
type: Question

http://stackoverflow.com/comment/139265823
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78984963
type: QuestionComment
has text: @Yogi, Thanks but I have checked that question and it uses intersectionObserver as well as the top voted answer

http://stackoverflow.com/comment/139170982
comment on: http://stackoverflow.com/q/78933676
score: 1
type: Comment
has text: Isn't `if (event.target === modal)` backwards? You want to detect clicks on something other than the modal.
type: QuestionComment

http://stackoverflow.com/q/78937597
has answer: http://stackoverflow.com/a/78937609
accepted answer: http://stackoverflow.com/a/78937609
tagged with: http://stackoverflow.com/tag/html
type: Question
has body: I'm trying to create a slider that automatically scrolls from left to right when the user reaches the end of the current item. I've tried using the following JavaScript code, but it's not working as expected: console.log(&quot;Slider&quot;); // Get the slider container element const sliderContainer = document.querySelector('.slider-container'); // Get all slider item elements const sliderItems = document.querySelectorAll('.slider-item'); // Add event listener to the slider container sliderContainer.addEventListener('scroll', () =&gt; { // Get the current scroll position const scrollPosition = sliderContainer.scrollLeft; // Loop through each slider item sliderItems.forEach((item, index) =&gt; { // Check if the item is in view if (scrollPosition &gt;= item.offsetLeft &amp;&amp; scrollPosition &lt; item.offsetLeft + item.offsetWidth) { // Add the active class to the item item.classList.add('active'); } else { // Remove the active class from the item item.classList.remove('active'); } // Check if we've reached the end of the current item if (scrollPosition + sliderContainer.offsetWidth &gt;= item.offsetLeft + item.offsetWidth) { // Automatically scroll to the next item sliderContainer.scrollLeft = item.offsetLeft + item.offsetWidth; } }); }); The slider container has a horizontal scrollbar, and I want it to automatically scroll to the next item when the user reaches the end of the current item. However, the slider is not scrolling automatically, and I'm not seeing any errors in the console. I've tried modifying the condition to check if we've reached the end of the current item, but it's still not working. Can anyone help me identify the issue or provide a solution to achieve the desired behavior? html &lt;div class=&quot;slider-item&quot;&gt; &lt;img src=&quot;{% static './assets/images/banner-1.jpg' %}&quot; alt=&quot;women's latest fashion sale&quot; class=&quot;banner-img&quot;&gt; &lt;div class=&quot;banner-content&quot;&gt; &lt;p class=&quot;banner-subtitle&quot;&…
answer count: 1
type: AnsweredQuestion
score: 0
tagged with: javascript
has title: JavaScript slider not scrolling automatically from left to right
has comment: http://stackoverflow.com/comment/139178208
tagged with: css

http://stackoverflow.com/comment/139339888
score: 1
comment on: http://stackoverflow.com/q/79025744
has text: why not `div:hover path[div]`?
type: Comment
type: QuestionComment

http://stackoverflow.com/a/79049956
has body: There was some dependency issue. I have removed the "mantine" and "emotion" from the project's package.json. I have reinstalled it by running: npm install @mantine/core @mantine/hooks @emotion/react and it's displaying the grid as expected!
answers question: http://stackoverflow.com/q/79049832
score: 0
type: Answer

http://stackoverflow.com/a/78928743
accepted answer of: http://stackoverflow.com/q/78928520
has comment: http://stackoverflow.com/comment/139162120
score: 0
type: AcceptedAnswer
has body: You could consider using the style attribute like: {cols.map((thead, idx )=> { return (
type: Answer
answers question: http://stackoverflow.com/q/78928520

http://stackoverflow.com/q/79000908
has answer: http://stackoverflow.com/a/79000941
has body: I'm trying to create a Flexbox gallery that is responsive to browser width (ie. wraps and auto creates rows) where you can click on the image to open up a full size version of the image on it's own page. I've run it an issue where for some reason, the links are only working (including the pointer hover) on the images on the bottom row. .gallery-container { display: flex; max-width: 90vw; width: 750px; flex-wrap: wrap; justify-content: space-evenly; } .gallery-photo { padding: 5px; height: 200px; } I have a live test link that show the error/issue: https://nickvn33.github.io/Yoshin_testbed/Gallery.html You'll also notice if you hide the photo on the bottom line, photos 4-6 become clickable
tagged with: http://stackoverflow.com/tag/html
has title: Only bottom row of Flexbox Gallery in clickable
has comment: http://stackoverflow.com/comment/139294707
tagged with: hyperlink
type: UnansweredQuestion
tagged with: css
type: Question
tagged with: flexbox
has comment: http://stackoverflow.com/comment/139318242
tagged with: image
score: 0
has answer: http://stackoverflow.com/a/79020807
has comment: http://stackoverflow.com/comment/139316325
answer count: 2

http://stackoverflow.com/comment/139294621
has text: You have some misconceptions. You say the vertical-align is in the parent - it is not, the img and span are siblings. x-height isn’t related to body height but is generally defined in relation to the height of the lower case x. Reading the documentation with care should help. MDN is usually a reliable reference and more easily understandable than the standards documentation itself.
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78998686
type: Comment

http://stackoverflow.com/comment/139189071
type: AnswerComment
has text: Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer).
comment on: http://stackoverflow.com/a/78930911
type: Comment
score: 0

sass
tags question: http://stackoverflow.com/q/78903909
tags question: http://stackoverflow.com/q/78996269
tags question: http://stackoverflow.com/q/79029436
tags question: http://stackoverflow.com/q/78944574
type: Tag
tags question: http://stackoverflow.com/q/78932524
tags question: http://stackoverflow.com/q/78989351
tags question: http://stackoverflow.com/q/78941096
tags question: http://stackoverflow.com/q/78952516
tags question: http://stackoverflow.com/q/78910515
tags question: http://stackoverflow.com/q/78905678
tags question: http://stackoverflow.com/q/79065468
tags question: http://stackoverflow.com/q/78993853
tags question: http://stackoverflow.com/q/78960395
tags question: http://stackoverflow.com/q/79003218
tags question: http://stackoverflow.com/q/78954572
tags question: http://stackoverflow.com/q/78953739
tags question: http://stackoverflow.com/q/78964813
tags question: http://stackoverflow.com/q/78921015
tags question: http://stackoverflow.com/q/78909507
tags question: http://stackoverflow.com/q/78932299
tags question: http://stackoverflow.com/q/78989831
tags question: http://stackoverflow.com/q/78916931
tags question: http://stackoverflow.com/q/78940431
tags question: http://stackoverflow.com/q/78985003
tags question: http://stackoverflow.com/q/78940243
tags question: http://stackoverflow.com/q/79024929
tags question: http://stackoverflow.com/q/78990043
tags question: http://stackoverflow.com/q/78971849
tags question: http://stackoverflow.com/q/79032804
tags question: http://stackoverflow.com/q/78941056
tags question: http://stackoverflow.com/q/78949090
tags question: http://stackoverflow.com/q/78916733
tags question: http://stackoverflow.com/q/79007402
tags question: http://stackoverflow.com/q/78982848
tags question: http://stackoverflow.com/q/78958406
tag name: sass
tags question: http://stackoverflow.com/q/78974947
tags question: http://stackoverflow.com/q/78947941
tags question: http://stackoverflow.com/q/78979860
tags question: http://stackoverflow.com/q/79204274
tags question: http://stackoverflow.com/q/79226648
tags question: http://stackoverflow.com/q/79232203
tags question: http://stackoverflow.com/q/79231876
tags question: http://stackoverflow.com/q/79212021
tags question: http://stackoverflow.com/q/79136443
tags question: http://stackoverflow.com/q/79090950
tags question: http://stackoverflow.com/q/79176267
tags question: http://stackoverflow.com/q/79175383
tags question: http://stackoverflow.com/q/79089405
tags question: http://stackoverflow.com/q/79234947
tags question: http://stackoverflow.com/q/79200705
tags question: http://stackoverflow.com/q/79197727
tags question: http://stackoverflow.com/q/79069315
tags question: http://stackoverflow.com/q/79098922
tags question: http://stackoverflow.com/q/79198325
tags question: http://stackoverflow.com/q/79203057
tags question: http://stackoverflow.com/q/79113272
tags question: http://stackoverflow.com/q/79145317
tags question: http://stackoverflow.com/q/79179028
tags question: http://stackoverflow.com/q/79174535
tags question: http://stackoverflow.com/q/79118152
tags question: http://stackoverflow.com/q/79214790
tags question: http://stackoverflow.com/q/79189709
tags question: http://stackoverflow.com/q/79069850
tags question: http://stackoverflow.com/q/79195746
tags question: http://stackoverflow.com/q/79135053
tags question: http://stackoverflow.com/q/79196764
tags question: http://stackoverflow.com/q/79231188
tags question: http://stackoverflow.com/q/79107875
tags question: http://stackoverflow.com/q/79196802
tags question: http://stackoverflow.com/q/79214368
tags question: http://stackoverflow.com/q/79166246
tags question: http://stackoverflow.com/q/79225740
tags question: http://stackoverflow.com/q/79206025
tags question: http://stackoverflow.com/q/79338600
tags question: http://stackoverflow.com/q/79419556
tags question: http://stackoverflow.com/q/79409210
tags question: http://stackoverflow.com/q/79411181
tags question: http://stackoverflow.com/q/79344780

http://stackoverflow.com/comment/139322879
comment on: http://stackoverflow.com/a/79015259
score: 2
has text: @GoldenBags It does the same thing as the original `className={searchActive ? "search-input active" : "search-input"}`, just avoiding the duplication and making it easier to add other (optional) classes
type: Comment
type: AnswerComment

http://stackoverflow.com/q/78965578
favorite count: 0
tagged with: css-transitions
type: Question
tagged with: http://stackoverflow.com/tag/html
downvote count: 0
has title: transform transition image 'jumping' at start and end of animation
upvote count: 1
score: 1
has comment: http://stackoverflow.com/comment/139229818
has comment: http://stackoverflow.com/comment/139229676
has comment: http://stackoverflow.com/comment/139229764
answer count: 0
has body: So I have a div that I want to expand (along with all elements it contains) when hovered over.. it's mostly working except at the start and end of the animation the background image 'jumps' to an odd position for ~0.1s. I've seen this is an issue posted before on stack overflow but the solutions provided don't seem to fit my issue. .index { text-align: center; display: block; } .services-back-image { z-index: -2; transform-origin: 40% 0%; transform: scaleX(1) scaleY(0.5); position: absolute; left: 0; transition: all 250ms; } .services-home { z-index: -1; text-align: left; width: 100%; height: 40vw; transition: all 250ms; } .services-home:hover { transform: scale(1.1); } Our Services Click to Learn More! I know it's a bit of a mess right now but what's the main thing I'm doing wrong? Video example: https://youtu.be/cr_dllsi41U Thanks in advance :)
tagged with: css
has comment: http://stackoverflow.com/comment/139229816
tagged with: image
type: UnansweredQuestion

http://stackoverflow.com/comment/139311923
score: 0
has text: Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking.
type: QuestionComment
comment on: http://stackoverflow.com/q/79009939
type: Comment

http://stackoverflow.com/comment/139213051
comment on: http://stackoverflow.com/q/78956711
type: Comment
score: 0
has text: Hi Rory. I am not an expert as you can see :) I will fix the HTML coding. Thanks for your tips How can I get 2 results in one iteration to be able to create 6 columns? This is the PHP code // retrieve all hardware types $qhwtype="select hardware_type from hardware"; $rhwtype=mysqli_query($dbc,$qhwtype);
type: QuestionComment

http://stackoverflow.com/a/78991158
has body: #header { height: 82px; float: left; width: 100%; /* make header span width */ } #logo { height: 80px; align: left; /* align logo to left */ } #navigation, #topnav { height: 37px; font-weight: 600; background-color: #1B2A47; clear: both; /* ensure nav bars dont overlap the logo */ } #navigation ul, #topnav ul { list-style: none; list-style-position: outside; } #navigation ul li, #topnav ul li { float: left; padding-right: 2px; line-height: 40px; font-size: 13px; } #navigation ul li a, #topnav ul li a { display: block; padding: 0 22px 0 22px; color: #FFFFFF; text-decoration: none; } #navigation ul li a:hover, #topnav ul li a:hover { color: #7DC33A; text-decoration: none; } #navigation ul li.first a, #topnav ul li.first a { padding-left: 30px; } #navigation a.nav-btn { display: none; } Link Link Link Menu Link Link Link
type: Answer
score: -1
has comment: http://stackoverflow.com/comment/139277443
has comment: http://stackoverflow.com/comment/139277258
downvote count: 1
answers question: http://stackoverflow.com/q/78991117
upvote count: 0
has comment: http://stackoverflow.com/comment/139276769
has comment: http://stackoverflow.com/comment/139277707

http://stackoverflow.com/comment/139200703
has text: Interesting, but we don't know whether the OP wants to change the aspect ratio of the arrow or not - they need to define what they mean by 'responsive' in this case as it could be several things.
type: AnswerComment
comment on: http://stackoverflow.com/a/78950122
score: 1
type: Comment

http://stackoverflow.com/a/79017211
has body: Yes, nav links will appear last in tab order. To fix this you really can use tabindex attr. Here is example: Home About Contact Also you could try to place nav elements higher in doc order: Home About Contact Read more
has comment: http://stackoverflow.com/comment/139324476
answers question: http://stackoverflow.com/q/79017200
has comment: http://stackoverflow.com/comment/139324499
upvote count: 1
has comment: http://stackoverflow.com/comment/139324519
downvote count: 1
type: Answer
has comment: http://stackoverflow.com/comment/139324529
score: 0
has comment: http://stackoverflow.com/comment/139324456
has comment: http://stackoverflow.com/comment/139324489

http://stackoverflow.com/comment/139224241
comment on: http://stackoverflow.com/q/78962714
type: Comment
score: 0
has text: You have 3 requirements but unfortunately, only 1 & 2 are really possible together, #3 just won't (AFAIK) with the other requirements. Perhaps you need to rethink or explain the use case. - https://codepen.io/Paulie-D/pen/qBzgbRQ
type: QuestionComment

http://stackoverflow.com/comment/139464056
type: Comment
score: 0
type: AnswerComment
has text: Thanks for the answer! Do you have an explanation for this behavior? What is the default `min-width` of ` `?
comment on: http://stackoverflow.com/a/79089955

http://stackoverflow.com/q/79024730
has body: body { overflow: hidden; margin: 0; } .container { display: grid; grid-template-columns: 1fr; grid-template-rows: 80px 1fr; grid-auto-rows: 1fr; gap: 0px 0px; grid-auto-flow: row; grid-template-areas: "Header" "Body"; } .Header { grid-area: Header; background-color: red; } .Body { display: grid; grid-template-columns: 1fr; grid-template-rows: 60px 1fr; gap: 0px 0px; grid-auto-flow: row; grid-template-areas: "Tabs" "Grid"; grid-area: Body; background-color: green; } .Tabs { grid-area: Tabs; background-color: pink; } .Grid { grid-area: Grid; background-color: yellow; } Header Tabs 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 I would like the Yellow part to take the remaining height of the screen but also be scrollable.
has title: Scrollable Nested Grid Child CSS Layout
linked to: http://stackoverflow.com/q/61959291
score: 0
answer count: 0
tagged with: css
duplicate of: http://stackoverflow.com/q/74746353
duplicate of: http://stackoverflow.com/q/67540462
tagged with: css-grid
type: UnansweredQuestion
duplicate of: http://stackoverflow.com/q/61959291
type: Question
tagged with: http://stackoverflow.com/tag/html

http://stackoverflow.com/comment/139394000
score: 0
type: QuestionComment
has text: https://codepen.io/t_afif/pen/wvdKRPx
comment on: http://stackoverflow.com/q/79054912
type: Comment

http://stackoverflow.com/a/79068630
has body: The following are the two reasons for not getting the output. Note : The logical issues if any with merge sorting in the code given have not been addressed by the following answer. a) If the body of the function is an expression, then there must not be the pair of curly braces and the semicolon. array.map((value, index) => { test ; }) Corrected to this: array.map((value, index) => test ) b) useEffect has been invoked with en empty code handler. useEffect(() => {}, []); Corrected to this: useEffect(() => resetArray, []); Corrected code - full listing import { useState, useEffect } from 'react'; export default function App() { return <>{sortingVisualizer()}</>; } const number_of_array_bars = 310; const sortingVisualizer = () => { const [array, setArray] = useState([]); const resetArray = () => { const newArray = []; for (let i = 0; i < number_of_array_bars; i++) { newArray.push(randomIntFromInterval(5, 730)); } console.log('newArray', newArray); setArray(newArray); }; const render = () => { return ( <> {console.log('array', array)} {array.map((value, index) => { return ( {value} ); })} </> ); }; useEffect(() => resetArray, []); return render(); }; function randomIntFromInterval(min, max) { return Math.floor(Math.random() * (max - min + 1) + min); }
score: -1
answers question: http://stackoverflow.com/q/79068036
downvote count: 1
upvote count: 0
type: Answer

http://stackoverflow.com/a/78916304
has comment: http://stackoverflow.com/comment/139169943
score: 4
answers question: http://stackoverflow.com/q/78916038
accepted answer of: http://stackoverflow.com/q/78916038
has body: I did it here: https://css-shape.com/inverted-radius/ You can easily copy the code and adjust the variables: .inverted-radius { --r: 15px; /* the radius */ --s: 30px; /* the size of the corner*/ height: 150px; margin: 10px; background: #3FB8AF; border-radius: var(--r); --_m:/calc(2*var(--r)) calc(2*var(--r)) radial-gradient(#000 70%,#0000 72%) no-repeat; mask: right calc(var(--s) + var(--r)) top var(--_m), right calc(var(--s) + var(--r)) var(--_m), radial-gradient(var(--s) at 100% 0,#0000 99%,#000 101%) calc(-1*var(--r)) var(--r) no-repeat, conic-gradient(at calc(100% - var(--s) - 2*var(--r)) calc(var(--s) + 2*var(--r)), #0000 25%,#000 0); } &lt;div class="inverted-radius"&gt;&lt;/div&gt;
upvote count: 4
type: AcceptedAnswer
downvote count: 0
type: Answer

http://stackoverflow.com/comment/139172690
type: Comment
type: QuestionComment
has text: I have tried your code in tailwind play and it works normally. Create reproduceable example in codepen, jsfiddle, codesandbox or stackblitz.
comment on: http://stackoverflow.com/q/78934678
score: 2

http://stackoverflow.com/q/78969671
has answer: http://stackoverflow.com/a/78969734
duplicate of: http://stackoverflow.com/q/44488357
tagged with: css
type: UnansweredQuestion
type: Question
tagged with: http://stackoverflow.com/tag/html
has title: How can I create a responsive grid layout with CSS Grid that maintains equal column heights?
linked to: http://stackoverflow.com/q/44488357
answer count: 1
has body: I'm trying to create a responsive grid layout using CSS Grid where all columns maintain equal heights, regardless of their content. The goal is to have a layout where each column has the same height, and the grid adapts to different screen sizes. Currently, the columns have different heights based on their content. How can I ensure that all columns in the grid have equal height, while still being responsive to different screen sizes? Any suggestions or examples on how to achieve this would be greatly appreciated! .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; } .item { background: lightblue; padding: 20px; box-sizing: border-box; } Item 1 Item 2 with more content Item 3 Item 4 with even more content that makes it taller
score: 0

http://stackoverflow.com/a/78978726
answers question: http://stackoverflow.com/q/78978707
has body: your issue is due to the order between @import command and css rules. @import should be placed at top of css document to avoid confusion https://www.w3schools.com/cssref/pr_import_rule.php to solve your issue do the opposite the other file at the beginning of the file with variable used @import url('https://link.com/variables.css'); body { background-color:(var(--var1)); } text { background-color:(var(--var2)); } button { background-color:(var(--var3)); }
has comment: http://stackoverflow.com/comment/139253746
type: Answer
score: 0

http://stackoverflow.com/q/78926909
has comment: http://stackoverflow.com/comment/139163529
score: -1
answer count: 2
has comment: http://stackoverflow.com/comment/139158510
has comment: http://stackoverflow.com/comment/139158518
tagged with: css
has comment: http://stackoverflow.com/comment/139166147
has title: Animation-Delay in Infinite Loop aren't consistent
has comment: http://stackoverflow.com/comment/139158905
downvote count: 1
has answer: http://stackoverflow.com/a/78927325
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139160951
has comment: http://stackoverflow.com/comment/139163368
upvote count: 0
has comment: http://stackoverflow.com/comment/139159469
has comment: http://stackoverflow.com/comment/139163336
has comment: http://stackoverflow.com/comment/139161022
favorite count: 0
has comment: http://stackoverflow.com/comment/139161042
has comment: http://stackoverflow.com/comment/139170329
tagged with: css-animations
type: Question
has comment: http://stackoverflow.com/comment/139166775
has comment: http://stackoverflow.com/comment/139163383
has answer: http://stackoverflow.com/a/78929501
has comment: http://stackoverflow.com/comment/139163440
has body: I've created a hover effect for containers via css animations. It's not so much about the color change, as the final solution is to switch images instead of divs. The loop works, but the timings don't work as expected in some cases. The delay from last to first element is a bit longer, from first to second element is too short, after the loop has run through once. The more childs the container has, the more confusing the loop gets. In the 4th container, the first one doesn't show up again. body { display: flex; gap: 10px; --collection-timing: 0.5s; } body>div { width: 200px; height: 200px; position: relative; overflow: hidden; cursor: pointer; } div div { position: absolute; width: 200px; height: 200px; animation-name: slideshow; animation-play-state: paused; animation-duration: 0.2s; animation-iteration-count: infinite; z-index: -1; } div div:nth-child(1) { animation-delay: var(--collection-timing); z-index: 2 !important; } div div:nth-child(2) { animation-delay: calc(var(--collection-timing) * 2); } div div:nth-child(3) { animation-delay: calc(var(--collection-timing) * 3); } div div:nth-child(4) { animation-delay: calc(var(--collection-timing) * 4); } div div:nth-child(5) { animation-delay: calc(var(--collection-timing) * 5); } div div:nth-child(6) { animation-delay: calc(var(--collection-timing) * 6); } div div:nth-child(7) { animation-delay: calc(var(--collection-timing) * 7); } div div:nth-child(8) { animation-delay: calc(var(--collection-timing) * 8); } div div:nth-child(9) { animation-delay: calc(var(--collection-timing) * 9); } div:has(div:nth-child(1)) div { animation-duration: var(--collection-timing); } div:has(div:nth-child(2)) div { animation-duration: calc(var(--collection-timing) * 2); } div:has(div:nth-child(3)) div { animation-duration: calc(var(--collection-timing) * 3); } div:has(div:nth-child(4)) div { animation-duration: calc(var(--collection-timing) * 4); } div:has(div:nth-child(5)) div { animation-duration: calc(var(--collection-timing) * 5);…

http://stackoverflow.com/q/78987424
upvote count: 1
tagged with: css
accepted answer: http://stackoverflow.com/a/79031647
type: Question
has answer: http://stackoverflow.com/a/79386901
type: AnsweredQuestion
has comment: http://stackoverflow.com/comment/139269512
downvote count: 1
favorite count: 0
score: 0
has title: How do I make a rounded 3d button (with the right and bottom sides visible) using Tailwind CSS?
possible better answer: http://stackoverflow.com/a/79386901
answer count: 2
has answer: http://stackoverflow.com/a/79031647
tagged with: button
tagged with: tailwind-css
has body: I am trying to create a responsive rounded 3D button with the right and bottom sides showing using Tailwind CSS but it doesn't look right. The right and bottom sides do not align with the white part of the button. I've shared the code below. How can I fix this? Or is there a better way to achieve this effect? Thank you in advance! This is my code (also available on the Tailwind playground): &lt;script src="https://cdn.tailwindcss.com"&gt;&lt;/script&gt; &lt;button class="relative inline-block rounded-lg text-black align-middle no-underline transition-all duration-[0.5s] bg-white px-10 py-5 before:rounded-b-lg before:bottom-[-15px] before:h-[15px] before:w-full before:skew-x-[45deg] before:bg-[#036e15] before:left-2 after:rounded-r-lg after:right-[-15px] after:h-full after:w-[15px] after:skew-y-[45deg] after:bg-[#01370a] after:-bottom-2 active:ml-2.5 active:mt-2.5 active:before:bottom-[-5px] active:before:h-[5px] active:before:left-[3px] active:after:right-[-5px] active:after:w-[5px] active:after:bottom-[-3px] before:absolute before:content-[''] before:transition-all before:duration-[0.5s] after:absolute after:content-[''] after:transition-all after:duration-[0.5s]"&gt; Press me! &lt;/button&gt; This is how the button looks at rest: And this is how it looks when pressed:

http://stackoverflow.com/q/78929034
tagged with: css
downvote count: 1
score: 0
type: UnansweredQuestion
has answer: http://stackoverflow.com/a/79294894
favorite count: 0
type: Question
has title: Biomejs won't address CSS files
tagged with: biomejs
has body: I'm using biomejs for some tooling on a project. It ignores my CSS files, and I'm not sure why. biome.json in the root of my project { "$schema": "https://biomejs.dev/schemas/1.8.3/schema.json", "css": { "formatter": { "enabled": true, "indentWidth": 2, "indentStyle": "space" } } } I use VSCode. I do have the biomejs extension enabled, and biome set as my default formatter. It handles my JS/TS/JSON files but ignores CSS files. My VSCode status bar says "Biome 1.8.3 the current file is not supported or ignored by Biome". CSS linting/formatting support is "in-progress" for biome--according to their docs--however it parses CSS for my coworkers on their machines. I can't figure out whats up in my case.
answer count: 1
upvote count: 1
tagged with: visual-studio-code

http://stackoverflow.com/q/79033583
type: Question
tagged with: http://stackoverflow.com/tag/html
has body: PlasmoCSUI h-full not working On twitter, I want to inject my own element (button) to the end of a list (a row of horizontal buttons), and I want to keep the same button height as them, but I found that my own element does not work with h-full and cannot fill the parent node. Does anyone know about this problem? As shown below import cssText from "data-text:~style.css" import type { PlasmoCSConfig, PlasmoGetInlineAnchorList } from "plasmo" export const getStyle = () => { const style = document.createElement("style") style.textContent = cssText.replaceAll(":root", ":host") return style } export const config: PlasmoCSConfig = { matches: ["*://*.x.com/*", "*://*.twitter.com/*"] } export const getInlineAnchorList: PlasmoGetInlineAnchorList = async () => { const elements = document.querySelectorAll('[role="tablist"]:last-child') return Array.from(elements).map((el) => ({ element: el, insertPosition: "beforeend" })) } const PlasmoCSUI = () => { return ( tag ) } export default PlasmoCSUI
answer count: 1
score: 0
tagged with: reactjs
has title: PlasmoCSUI setting h-full cannot fill the parent node
tagged with: css
tagged with: google-chrome-extension
type: UnansweredQuestion
has answer: http://stackoverflow.com/a/79039950
tagged with: plasmo

http://stackoverflow.com/a/78957031
has body: added: <meta name="viewport" content="width=device-width, initial-scale=1.0" to the head of the page and it seems to help. Further info here: Generated HTML font size differs from original
answers question: http://stackoverflow.com/q/78956922
type: Answer
upvote count: 0
score: -2
downvote count: 2

http://stackoverflow.com/q/79038356
has comment: http://stackoverflow.com/comment/139363312
score: 0
linked to: http://stackoverflow.com/q/39644585
has comment: http://stackoverflow.com/comment/139363203
answer count: 0
tagged with: css
has comment: http://stackoverflow.com/comment/139363231
has body: So I have a scenario like this. On Desktop mode, this is how the divs should be stacked. The div 2, 3 and 4 are stacked beside the div containing 1 and 5. .container{ display: flex; } .container div{ width: 150px; height: 50px; display: flex; align-items: center; justify-content: center; } .sub-container{ flex-direction: column; } .div1{ background: red; } .div2{ background: yellow; } .div3{ background: green; } .div4{ background: blue; } .div5{ background: grey; } @media screen and (max-width: 480px) { .container{ flex-direction: column; } } 1 5 2 3 4 But on mobile screen-size (480px), the div 2, 3 and 4 should align vertically between div 1 and 5. Currently you see they are staked below the div 1 and 5. I want them in-between. Can I achieve this with flex-box? I don't wish to use grid layout. I can't use order as div 1 and div 2 are part of the same group (.subcontainer). So I have already seen the question with which this is marked as duplicate. However, that is not the same as this. Here div 1 and div 5 are two separate div and it's not just the same div with a bigger height.
tagged with: flexbox
type: UnansweredQuestion
type: Question
has comment: http://stackoverflow.com/comment/139363255
has title: Align items between two vertically stacked divs - FlexBox
duplicate of: http://stackoverflow.com/q/39644585
has comment: http://stackoverflow.com/comment/139363022

http://stackoverflow.com/a/78977147
has comment: http://stackoverflow.com/comment/139252002
answers question: http://stackoverflow.com/q/78976920
has comment: http://stackoverflow.com/comment/139251319
accepted answer of: http://stackoverflow.com/q/78976920
has body: The reasons for emails not rendering properly in your Handlebars.js template are: external CSS fonts (which many email clients don't fully support) use inline CSS for styling and rely on system fonts. Try exploring MJML framework, which effectively addresses these compatibility and responsiveness issues.
downvote count: 0
upvote count: 1
score: 1
type: AcceptedAnswer
type: Answer

http://stackoverflow.com/comment/139322775
has text: @SyndRain Adding `min-height: 0;` to the `.split-container` didn't seem to work but adding `* { box-sizing: border-box; min-width: 0; min-height: 0; }` to the CSS did, my week is saved, thank you.
score: 0
type: Comment
comment on: http://stackoverflow.com/q/79015820
type: QuestionComment

http://stackoverflow.com/q/78974025
has comment: http://stackoverflow.com/comment/139245140
has body: I have a footer that need to go on top of a sticky header. Unfortunately it doesn't work, despite them being on the same level markup etc. The snippet below seems to work? But not the exact same code in safari. If i resize the window after page load it seems to sometimes update and work. Bug? Any ideas on this would be appreciated!! #header{ position: sticky; top:0; background-color: red; z-index: 1; height:60vh } #footer{ position:relative; background-color: yellow; z-index: 100; height:60vh } &lt;div id=header&gt; Hello world &lt;/div&gt; &lt;div id="footer"&gt; Hello world &lt;/div&gt;
linked to: http://stackoverflow.com/q/40895387
type: Question
has title: How to make z-index work with sticky header
linked to: http://stackoverflow.com/q/49653475
answer count: 1
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139245651
has comment: http://stackoverflow.com/comment/139245461
score: 0
has answer: http://stackoverflow.com/a/78974091
tagged with: css
has comment: http://stackoverflow.com/comment/139245218
tagged with: z-index
type: UnansweredQuestion

http://stackoverflow.com/comment/139330690
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/79017087
has text: Suggest you look for an alternative validation solution. [Stylelint](https://stylelint.io/demo/) is one possibility.

http://stackoverflow.com/q/79014373
answer count: 2
tagged with: css
has comment: http://stackoverflow.com/comment/139319118
has comment: http://stackoverflow.com/comment/139319423
type: UnansweredQuestion
upvote count: 0
tagged with: webpack
favorite count: 0
has title: Why are there 2 image files being rendered when my html and js have one image.jpg
type: Question
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139319189
has answer: http://stackoverflow.com/a/79014392
has comment: http://stackoverflow.com/comment/139319190
has body: Why are there 2 image files being rendered when my html and js have one image.jpg. I'm using static Html with CSS and JSS and Webpack. see image below: The code is in Github here: https://github.com/kevindRuby/hello-webpack-eg1 Preferred outcome: For the image to display once on top of blinking text. Code main.js: import imageSrc from './image.jpg'; // Adjust the path if necessary const imgElement = document.createElement('img'); imgElement.src = imageSrc; imgElement.alt = 'Description of image'; document.body.appendChild(imgElement); const textElement = document.createElement('h1'); textElement.textContent = 'This text will blink!'; document.body.appendChild(textElement); setInterval(() => { textElement.style.visibility = (textElement.style.visibility === 'hidden' ? '' : 'hidden'); }, 500); Solution:: main.html Hello Webpack Hello, World! main.js import imageSrc from './image.jpg'; // Webpack will handle this // Remove any existing images dynamically before adding a new one const existingImage = document.querySelector('img'); if (existingImage) { existingImage.remove(); } // Dynamically create the image element and add it to the DOM const imgElement = document.createElement('img'); imgElement.src = imageSrc; // This will point to the processed image URL imgElement.alt = 'Description of image'; document.body.appendChild(imgElement); // Make the text blink const textElement = document.createElement('h1'); textElement.textContent = 'This text will blink!'; document.body.appendChild(textElement); setInterval(() => { textElement.style.visibility = (textElement.style.visibility === 'hidden' ? '' : 'hidden'); }, 500);
tagged with: javascript
has comment: http://stackoverflow.com/comment/139320178
downvote count: 5
has answer: http://stackoverflow.com/a/79014493
score: -5

pseudo-element
tag name: pseudo-element
tags question: http://stackoverflow.com/q/79060854
tags question: http://stackoverflow.com/q/79067521
tags question: http://stackoverflow.com/q/78908209
tags question: http://stackoverflow.com/q/78944847
type: Tag
tags question: http://stackoverflow.com/q/79071370
tags question: http://stackoverflow.com/q/79298906
tags question: http://stackoverflow.com/q/79315885
tags question: http://stackoverflow.com/q/79314887
tags question: http://stackoverflow.com/q/79445870
tags question: http://stackoverflow.com/q/79431594
tags question: http://stackoverflow.com/q/79431238

http://stackoverflow.com/a/79012849
downvote count: 0
upvote count: 1
has body: You can hide scroll bar of lightning-modal-body but keep scrollable inside it. Let me provide sample code: // It will works for chrome, safari and edge lightning-modal-body::-webkit-scrollbar { width: 0px; background: transparent; } // It will works for Firefox lightning-modal-body { scrollbar-width: none; } // It will keep scrollable inside lightning-modal-body lightning-modal-body { overflow-y: scroll; }
score: 1
answers question: http://stackoverflow.com/q/79012154
type: Answer

http://stackoverflow.com/q/79049909
has title: How to create a shadow on one side of the div element?
type: Question
tagged with: http://stackoverflow.com/tag/html
has body: I am trying to create a shadow only on one side like in the image below from Laravel. or this I tried using css pseudo-class for making the similar shadow. (see the code below) but the shadow isn't displayed only text are displayed. #shadow { padding: 1rem; overflow: hidden; } #shadow::after { content: ""; position: absolute; inset: 4.625em; background: linear-gradient(360deg, rgba(99, 154, 220, 0.2) 70%, rgba(255, 255, 255, .2), rgba(162, 209, 137, .2)); filter: blur(10em); z-index: -1; width: calc(100% - 30%); margin-right: auto; overflow: hidden; } The Quick Brown Fox jumps over the lazy Dog
score: 0
tagged with: css
tagged with: twitter-bootstrap
answer count: 0
has comment: http://stackoverflow.com/comment/139386666
type: UnansweredQuestion

http://stackoverflow.com/a/79037831
downvote count: 0
type: Answer
score: 3
has body: The 2D context setTransform method accepts DOMMatrix objects as arguments. Working entirely with such objects makes things easier, since once you've got it, you just need to apply its inverse() to come back to the initial transform. The tricky part might be to apply the transform-origin on this DOMMatrix object. There are several paths to get there, but basically it implies multiplying a first DOMMatrix that translates to the origin, then the actual matrix and finally a last one to reset the origin to the new top-left. Then you can use compositing to use a single canvas to render every steps. // Wait for the DOM to load document.addEventListener('DOMContentLoaded', () => { const processButton = document.getElementById('processButton'); const downloadButton = document.getElementById('downloadButton'); const tempCanvasesDiv = document.getElementById('tempCanvases'); const sourceImage = document.getElementById('sourceImage'); let finalCanvas = null; processButton.addEventListener('click', () => { // Clear previous temporary canvases tempCanvasesDiv.innerHTML = ''; downloadButton.disabled = true; // Step 1: Get container and image dimensions const container = sourceImage.parentElement; const containerWidth = container.clientWidth; const containerHeight = container.clientHeight; const imageRenderedWidth = sourceImage.width; const imageRenderedHeight = sourceImage.height; // Step 2: Get computed styles of the image const style = window.getComputedStyle(sourceImage); const transform = style.transform; // Calculate the center of the image const centerX = imageRenderedWidth / 2; const centerY = imageRenderedHeight / 2; // If no transform is applied, set it to identity matrix const matrix = transform === 'none' ? new DOMMatrix() : new DOMMatrix(transform) // Apply the transform-origin .preMultiplySelf({ e: centerX, f: centerY }) .multiply({ e: -centerX, f: -centerY }); finalCanvas = document.createElement('canvas'); finalCanvas.width = containerWidth; finalCanvas.height = con…
has comment: http://stackoverflow.com/comment/139362845
has comment: http://stackoverflow.com/comment/139362856
has comment: http://stackoverflow.com/comment/139374845
accepted answer of: http://stackoverflow.com/q/79037325
upvote count: 3
has comment: http://stackoverflow.com/comment/139371997
has comment: http://stackoverflow.com/comment/139375632
has comment: http://stackoverflow.com/comment/139362877
has comment: http://stackoverflow.com/comment/139362660
type: AcceptedAnswer
answers question: http://stackoverflow.com/q/79037325

http://stackoverflow.com/q/79058041
tagged with: layout
score: 1
favorite count: 0
type: Question
tagged with: http://stackoverflow.com/tag/html
answer count: 1
has comment: http://stackoverflow.com/comment/139402377
downvote count: 0
has body: in the first code snippet below I show a layout using flex-flow: row wrap which has desirable layout properties but can exceed the maximum specified height of the container. The second code snippet shows a layout with flex-flow: column nowrap that accomplishes the desired behaviour to keep the total height of content to fit on one screen but for a single column. I would like a layout that combines the desirable properties of both, specifically I'd like to accomplish these goals: all elements within the container will have equal widths which is either 30px or 20vw which ever is smaller. When there are more elements than fit on a single row they wrap to a new row, there are very often more than a single row as I typically have 7 to 16 tubes. the elements all have (quantized and statically specified) arbitrary heights, rows should be tall enough for their tallest element and won't necessarily be all the same height. if the final result (whole container, typically multiple rows) has a height that exceeds some maximum like 90vh it should shrink all rows by equal proportion to fit into the specified maximum height. (like they had flex-shrink: 1 property in the vertical direction) I personally will not accept an answer that uses javascript to set styling but you are welcome to post one to help people with similar problems but less strict requirements. I would prefer a pure CSS solution that gets close enough than a solution that works perfectly so long as you setup all the right listeners. My current layout The following is the layout I am using presently, there is a #gameContainer which contains a list of .Tubes which each contain some .Balls. The variable --ball-size is set on the root container to make all the tube widths the same, each tube has a --capacity property to specify it's height as a multiple of --ball-size. If you change the width of the main container and/or the ball size you will see that if it would exceed the specified max-height: 90vh on the main contai…
upvote count: 1
has answer: http://stackoverflow.com/a/79119678
tagged with: css
has comment: http://stackoverflow.com/comment/139402405
has title: 2D flex layout: row wrap jointly with column shrink
tagged with: flexbox
has comment: http://stackoverflow.com/comment/139401400
tagged with: css-grid
type: UnansweredQuestion

http://stackoverflow.com/comment/139369659
has text: Okay, I have updated the snippet to add some bottom padding to `.chart` to balance the title (height 25px) and its bottom margin (1em) — `padding-bottom: calc(25px + 1em)`. If you want this adjustment on the mobile view only, you can move this declaration to your `@media` rule.
type: Comment
score: 0
comment on: http://stackoverflow.com/a/79039619
type: AnswerComment

http://stackoverflow.com/comment/139134709
type: QuestionComment
comment on: http://stackoverflow.com/q/78914182
has text: @C3roe i was already editing my question while you was posting your comment.
type: Comment
score: 0

http://stackoverflow.com/comment/139161821
type: Comment
score: 0
type: AnswerComment
has text: also `tr :nth-child(2) {`
comment on: http://stackoverflow.com/a/78925649

http://stackoverflow.com/comment/139206199
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78953159
has text: I've tried it, but it doesn't work.
type: Comment

http://stackoverflow.com/q/79047851
score: 1
has body: I have a dropdown menu in page header, this is the code (I'm using Vue 3 and Tailwind): <component :is="item.icon" class="inline-block" /> This is the menu-item component (simplified): menuShow = true" @mouseleave="() => menuShow = false"> <slot /> {{ name }} {{ menu.name }} {{ menu.name }} {{ sb.name }} On Chrome and Edge it works properly: GIF showing the behaviour on Google Chrome But on Firefox I get this behaviour: GIF showing the behaviour on Firefox Even when I remove the mouseleave event, it still dont let me click, so I don´t think it is related to the mouseover event: GIF showing the behaviour on Firefox without the mouseleave event
answer count: 0
tagged with: css
type: UnansweredQuestion
tagged with: vue.js
has title: Dropdown menu built with Vue and Tailwind not working on Firefox
favorite count: 0
type: Question
tagged with: firefox
tagged with: http://stackoverflow.com/tag/html
tagged with: tailwind-css
downvote count: 0
upvote count: 1
has comment: http://stackoverflow.com/comment/139759629

php
tags question: http://stackoverflow.com/q/79023414
tags question: http://stackoverflow.com/q/79014805
tags question: http://stackoverflow.com/q/78951104
tags question: http://stackoverflow.com/q/79002715
tag name: php
tags question: http://stackoverflow.com/q/79048090
tags question: http://stackoverflow.com/q/78956711
tags question: http://stackoverflow.com/q/78956414
tags question: http://stackoverflow.com/q/79059060
tags question: http://stackoverflow.com/q/78957279
type: Tag
tags question: http://stackoverflow.com/q/79005867
tags question: http://stackoverflow.com/q/79165998
tags question: http://stackoverflow.com/q/79086585
tags question: http://stackoverflow.com/q/79243848
tags question: http://stackoverflow.com/q/79235458
tags question: http://stackoverflow.com/q/79116553
tags question: http://stackoverflow.com/q/79096888
tags question: http://stackoverflow.com/q/79111342
tags question: http://stackoverflow.com/q/79103694
tags question: http://stackoverflow.com/q/79111387
tags question: http://stackoverflow.com/q/79394473
tags question: http://stackoverflow.com/q/79267043
tags question: http://stackoverflow.com/q/79395924
tags question: http://stackoverflow.com/q/79367096
tags question: http://stackoverflow.com/q/79392016
tags question: http://stackoverflow.com/q/79272069
tags question: http://stackoverflow.com/q/79410788
tags question: http://stackoverflow.com/q/79325582
tags question: http://stackoverflow.com/q/79311384
tags question: http://stackoverflow.com/q/79257482
tags question: http://stackoverflow.com/q/79546758
tags question: http://stackoverflow.com/q/79540497
tags question: http://stackoverflow.com/q/79441937
tags question: http://stackoverflow.com/q/79540265
tags question: http://stackoverflow.com/q/79482869
tags question: http://stackoverflow.com/q/79491843
tags question: http://stackoverflow.com/q/79435208

http://stackoverflow.com/comment/139281786
type: QuestionComment
score: 0
type: Comment
comment on: http://stackoverflow.com/q/78993739
has text: @AKX I tried with the syntax you gave and I have this error message on Chrome "Not allowed to load local resource:", I tried to disable all the securities, but nothing I guess my only solution is to put the file in the system directly To answer your other questions, yes all the computer (actually one for now) will be set to allow local files, and I will do something dynamic to load the font from the right folder For the hosting part, it is just that that for now I prefer it does not go on any webhost server

http://stackoverflow.com/q/79019426
has comment: http://stackoverflow.com/comment/139328512
type: UnansweredQuestion
score: 1
favorite count: 0
type: Question
tagged with: http://stackoverflow.com/tag/html
answer count: 1
downvote count: 0
has title: How to make a scrollable div with percentage height without either shrinking siblings elements or clipping outside parent?
has answer: http://stackoverflow.com/a/79020749
tagged with: reactjs
has body: I'm working on a React project where I need a scrollable div within a layout that uses percentage heights. However, I'm running into an issue where either the scrollable content gets cut off or sibling elements shrink unexpectedly. I have recreated the layout of my project as minimalistic as possible, but the issue still remains. Heres the jsFiddle: https://jsfiddle.net/loucims/tk0dj538/17/ When I set overflow: hidden on the #content div, the #flaps div gets shrunk until it's not visible. If I set a min-height to the #flaps div, the list overflows the content, and since #content has overflow: hidden, some content is cut off. I want the #scrollContainer to be scrollable without shrinking the #flaps div or cutting off content. How can I achieve this? Any help would be greatly appreciated!
upvote count: 1
tagged with: css
tagged with: flexbox

http://stackoverflow.com/comment/139344931
comment on: http://stackoverflow.com/a/79028000
type: Comment
type: AnswerComment
has text: This way is cool in that you don't need any SVG elements, but the SVG way does allow you to express the path using SVG primitives which are more powerful and may be more accurate as a level of info is lost during the conversion to a polygon (though wether you can tell visually depends on the shape complexity).
score: 1

http://stackoverflow.com/a/79459542
has body: Version 2.0.5 of html2image can be made to work with Chrome 1.333.0.x by setting the internal use_new_headless flag to None after construction: hti = Html2Image() hti.browser.use_new_headless = None hti.browser.print_command = True # prints the command line used to perform the screenshot hti.screenshot(html_file='input.html', save_as='output.png') This causes the --headless flag to be passed to Chrome, instead of the default --headless=old. The latter causes Chrome to exit with a status code of 1.
downvote count: 0
type: Answer
score: 1
upvote count: 1
answers question: http://stackoverflow.com/q/78918675

http://stackoverflow.com/comment/139203809
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78951324
has text: @1advanced you need to make the constraints clear in your question. As it stands with the structure you have shown there is a simple way to do it in CSS, but less so if the texts are elsewhere in the DOM. e.g. are they within a known container?

http://stackoverflow.com/q/79048090
type: UnansweredQuestion
tagged with: user-agent
linked to: http://stackoverflow.com/q/10243841
duplicate of: http://stackoverflow.com/q/30392972
type: Question
tagged with: wordpress
duplicate of: http://stackoverflow.com/q/10243841
score: 0
has body: I need to display an element on my wordpress site only for users who access using android devices, so could you please let me know how to do this? i.e. displaying banner or image only on android devices. Thanks in advance.
tagged with: javascript
tagged with: php
answer count: 0
tagged with: css
has title: Display element only for specific user agent

http://stackoverflow.com/comment/139418608
type: QuestionComment
has text: @Jason T Szabo thanks for response, I made the changes but still I don't see the console https://codesandbox.io/p/sandbox/l4q4pz?file=%2Fsrc%2FsortingVisualizer%2FsortingVisualizer.jsx%3A10%2C3
type: Comment
score: 0
comment on: http://stackoverflow.com/q/79068036

http://stackoverflow.com/comment/139241281
score: 0
type: AnswerComment
has text: Got it, thanks....
type: Comment
comment on: http://stackoverflow.com/a/78967999

http://stackoverflow.com/q/79013297
tagged with: http://stackoverflow.com/tag/r
answer count: 1
tagged with: r-markdown
has comment: http://stackoverflow.com/comment/139320199
has body: I'm writing an online book (bs4_book) with the bookdown package in RMarkdown. Inside the markdown there are Python chunks with simple operations like importing libraries and arithmetic calculations. I've been looking for a way to make the lines inside the Python chunks numbered by changing parameters inside the style.css file. Although I succeeded, this method also numbers the output of the cells, and I personally don't like it. I know there must be a way to define it inside the .css file, but I don't know the language. Here's my style.css file: p.caption { color: #777; margin-top: 10px; } p code { white-space: inherit; } pre { word-break: normal; word-wrap: normal; } pre code { white-space: inherit; } pre.sourceCode { counter-reset: line; line-height: 0.8; } pre.sourceCode &gt; code &gt; span { display: block; counter-increment: line; } pre.sourceCode &gt; code &gt; span:before { content: counter(line); display: inline-block; border-right: 1px solid #ddd; padding-right: 0.5em; margin-right: 0.5em; color: #888; } pre.output, pre.verbatim { counter-reset: none !important; padding-left: 0 !important; list-style-type: none !important; border: none !important; } pre.output &gt; code &gt; span:before, pre.verbatim &gt; code &gt; span:before { content: none !important; } My _output.yml: bookdown::bs4_book: css: style.css config: numbering: fig: true theme: bootswatch: litera bookdown::pdf_book: includes: in_header: preamble.tex latex_engine: xelatex citation_package: natbib keep_tex: yes bookdown::epub_book: default My _bookdown.yml file: book_filename: &quot;online-book&quot; number_sections: true fig_caption: true new_session: true before_chapter_script: _common.R delete_merged_file: true The chunk configuration: library(knitr) library(reticulate) reticulate::use_condaenv(&quot;python&quot;, required = TRUE) knitr::opts_chunk$set(echo = TRUE, warning = FALSE, comment = '&gt;&gt;', message = FALSE, highlight = TRUE, cache.lazy = FALSE) knitr::knit_engines$set(python = re…
has comment: http://stackoverflow.com/comment/139317864
score: 0
tagged with: css
has answer: http://stackoverflow.com/a/79018152
has title: How can I number a chunk's code but not its output?
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139323539
type: Question
has comment: http://stackoverflow.com/comment/139322101
tagged with: bookdown
tagged with: markdown

http://stackoverflow.com/q/79002045
tagged with: megamenu
has body: I have this WordPress site for personal project. my wp site I am using Elementor site builder. I built this MegaMenu with Elementor Menu widget. I am trying to add linear transition to submenu. It applies on submenu open but I cant get slide up transition when submenu closes. I tried several approaches including CSS, JS and GSAP library, but somehow Elementor blocks transition on mouse leave/submenu close. I tried the GSAP on code pen and it works fine. Here is the link But Elementor blocks transition out. I even used !important on my css. I would greatly appreciate any help or suggestions. This is my latest code on that WordPress site for this MegaMenu. I dont have any JS code for this menu since Elementor menu widget handles all JS. .e-n-menu-content { transform: scaleY(0) !important; transition: transform 0.7s linear !important; } .e-n-menu-item:hover .e-n-menu-content{ transform: scaleY(1) !important; transform-origin: top !important; } .e-n-menu-item:not(:hover) .e-n-menu-content{ transform: scaleY(0); transform-origin: bottom !important; }
tagged with: wordpress
tagged with: javascript
has comment: http://stackoverflow.com/comment/139297282
has comment: http://stackoverflow.com/comment/139304818
answer count: 0
tagged with: elementor
tagged with: css
has comment: http://stackoverflow.com/comment/139297172
type: UnansweredQuestion
score: 0
type: Question
has title: Adding custom transition to WordPress Elementor Pro Menu
has comment: http://stackoverflow.com/comment/139296924
has comment: http://stackoverflow.com/comment/139297241

http://stackoverflow.com/q/79035449
downvote count: 1
tagged with: bootstrap-5
type: UnansweredQuestion
favorite count: 0
has body: How can I make this div go to the botttom? Here's the code: Que vamos a estudiar hoy? Inicio Chat Ingresa a tu clase Buscar clases Calendario Nombre Usuario The things that I've tried are mt-auto class from bootstrap, mb-auto from bootstrap (to check if the ul pushed the container to the bottom), marging-bottom auto in CSS, d-flex and flex-column with flex grow (this kinda worked, but changed the distribution of the content). .menuItem { transition: background-color 0.3s ease; border-bottom: 1px solid var(--grisClaro2); } .menuItem:hover { background-color: var(--grisClaro2)!important; } .profileContainer { border-top: 1px solid var(--grisClaro2); } .customRows { height: 100vh; }
upvote count: 0
type: Question
answer count: 1
tagged with: http://stackoverflow.com/tag/html
tagged with: django
has answer: http://stackoverflow.com/a/79035459
score: -1
has title: How to make this div go to the bottom?
tagged with: css
has comment: http://stackoverflow.com/comment/139358970

http://stackoverflow.com/a/78978167
answers question: http://stackoverflow.com/q/78978054
type: AcceptedAnswer
upvote count: 2
type: Answer
score: 2
accepted answer of: http://stackoverflow.com/q/78978054
has body: mix-blend-mode: difference should work fine, but the overlay needs to be opaque (monochrome black and white in this case) due to how alpha blending works with these blend modes. Please excuse the poor linear gradient excuse for a forestscape. #a { width: 400px; height: 150px; background: linear-gradient(22deg, #111 0 50%, white 50% 100%); font-size: 40pt; } #a h1 { background: #000; color: #fff; mix-blend-mode: difference; } Relaps
has comment: http://stackoverflow.com/comment/139252816
downvote count: 0

http://stackoverflow.com/q/78909216
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139133399
favorite count: 0
tagged with: accessibility
type: Question
has body: I have add wordpress plugin for Accessibility One Click Accessibility Why the plugin is not works on placeholders? Thank you in advance!
answer count: 1
tagged with: http://stackoverflow.com/tag/html
tagged with: wordpress
has comment: http://stackoverflow.com/comment/139133239
score: -1
tagged with: javascript
has answer: http://stackoverflow.com/a/78909522
tagged with: css
has title: Wordpress placeholder input not synced with contrast on accessibility plugin
downvote count: 1
upvote count: 0

http://stackoverflow.com/comment/139118744
type: AnswerComment
comment on: http://stackoverflow.com/a/78905374
has text: How does that accomplish the collapse of the header. Why not provide an example?
type: Comment
score: 0

http://stackoverflow.com/q/78957679
has comment: http://stackoverflow.com/comment/139222244
has comment: http://stackoverflow.com/comment/139231290
type: UnansweredQuestion
has answer: http://stackoverflow.com/a/78962156
has body: I'd like to make a CSS animation where the timeline is based on the view of the element. However, it won't work, I already searched for it but no results. I got a page with a container. In this container, "div.wrapper" is the thing I want to animate. I tried removing overflow hidden and wrote this : div.wrapper { width: 50%; height: 100%; background-color: red; animation: fadeIn linear; animation-timeline: view(); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } Sans prise de tête... Plus d'infos Can someone help please ?
has answer: http://stackoverflow.com/a/78961812
tagged with: css-animations
type: Question
tagged with: animation
tagged with: http://stackoverflow.com/tag/html
score: 0
has title: I can't figure out why view based animation is not working
answer count: 2
tagged with: css

http://stackoverflow.com/comment/139145230
has text: You seem to have two accounts: [1](https://stackoverflow.com/users/26547209/yoojun-zhou) and [2](https://stackoverflow.com/users/22415214/notyoojun). Please read: [I accidentally created two accounts; how do I merge them?](https://stackoverflow.com/help/merging-accounts)
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78905228

http://stackoverflow.com/a/78992641
answers question: http://stackoverflow.com/q/78991117
type: Answer
score: 0
has body: Use the code below to set your logo to the left alignment, also add the closing div to the missing in your HTML code. footer, header, menu, nav, section { display: block; } .shell { width: 100%; margin: 0 auto; } .container { background: #fff; } #header { height: 82px; } #logo { height: 80px; display: block; border: 2px solid silver; } #navigation, #topnav { height: 37px; font-weight: 600; background-color: #1B2A47; } #navigation ul, #topnav ul { list-style: none; list-style-position: outside; } #navigation ul li, #topnav ul li { float: left; padding-right: 2px; line-height: 40px; font-size: 13px; } #navigation ul li a, #topnav ul li a { display: block; padding: 0 22px 0 22px; color: #FFFFFF; text-decoration: none; } #navigation ul li a:hover, #topnav ul li a:hover { color: #7DC33A; text-decoration: none; } #navigation ul li.first a, #topnav ul li.first a { padding-left: 30px; } #navigation a.nav-btn { display: none; } Link Link Link Menu Link Link Link Your logo should be set as the left side when using the above code, also if you want to set your logo in the center just update the CSS only to center your logo. #logo { text-align: center; }
has comment: http://stackoverflow.com/comment/139282496
has comment: http://stackoverflow.com/comment/139282221
has comment: http://stackoverflow.com/comment/139282359

http://stackoverflow.com/q/78909507
has body: I am trying to add some media queries to my scss rules, however when I include the mixins I imported frrom my _index.scss file(which includes my breakpoints file), the media query overrides my previous mixins I used. @use '../abstracts' as a; .portfolio_heroSection{ height:100dvh; width:100%; margin:0 auto; background-color: a.$background-color1; .portfolio_heroSection_top{ @include a.gridContact; margin:0 auto; padding-top:4rem; width:90%; @include a.xs{ grid-template-columns:1fr; grid-template-rows:repeat(2,1fr); } .portfolio_heroSection_grid{ text-align:left; background-image: url("https://images4.alphacoders.com/130/1303494.jpeg"); background-position: center; background-size: cover; background-repeat: no-repeat; padding-top:20rem; padding-bottom:18rem; padding-left:4rem; padding-right:4rem; h2{ @include a.fontHeader; font-weight:550; font-size:3rem; } } } } Here is my breakpoints file: $breakpoints: ( "xs":0, "sm":30rem, "md":45rem, "lg":60rem, "xlg":75rem, ); @mixin xs(){ @media (min-width: map-get($breakpoints,"xs")){ @content; } } @mixin sm(){ @media (min-width: map-get($breakpoints,"sm")){ @content; } } @mixin md(){ @media (min-width: map-get($breakpoints,"md")){ @content; } } @mixin lg(){ @media (min-width: map-get($breakpoints,"lg")){ @content; } } @mixin xlg(){ @media (min-width: map-get($breakpoints,"xlg")){ @content; } } @mixin breakpoint($bp:0){ @media (min-width: $bp){ @content; } } I tried to sort the inclusion differently. I attempted to include the media query both before and after the original mixin, and the result is still the media query overiding everything. I really have no idea why this is happening so any help would be appreciated. Thank you.
type: UnansweredQuestion
type: Question
has title: My media queries in sass are overriding my other mixins
score: 0
tagged with: media-queries
tagged with: scss-mixins
tagged with: sass
tagged with: syntax-error
answer count: 0
tagged with: css

masking
tag name: masking
tags question: http://stackoverflow.com/q/78948434
type: Tag
tags question: http://stackoverflow.com/q/79312571

http://stackoverflow.com/comment/139147005
type: QuestionComment
has text: If you're talking about the vertical scrolling, it can be done easily using `position:sticky`
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78920568

http://stackoverflow.com/comment/139375632
type: AnswerComment
has text: Sorry I didn't have time to respond yesterday. I posted a CW there.
comment on: http://stackoverflow.com/a/79037831
type: Comment
score: 0

http://stackoverflow.com/comment/139185456
type: AnswerComment
comment on: http://stackoverflow.com/a/78938629
has text: Spectacular answer! Correct, helpful, and educational. If you agree, could you restore the align-self:center in the menu-div, as I originally had it? I don't think it hurts anything.
type: Comment
score: 0

http://stackoverflow.com/a/79009343
answers question: http://stackoverflow.com/q/79008654
score: 0
has body: A workaround would be with just CSS, to include the SVG in data:image/svg+xml...: .fa-codeberg:before { content: url('data:image/svg+xml, <path d="M0.00 8.56C0.00 14.69 4.25 14.69 4.25 14.69 4.25 14.69 10.92 6.07 10.92 6.07 10.87 5.84 10.65 6.07 10.65 6.07 10.65 6.07 17.04 6.07 17.04 6.07 17.04 6.07 15.04 6.07 15.04 6.07 15.04 6.07 14.84 6.07 14.84 6.07 14.84 6.07 12.76 6.07 12.76 6.07 12.76 6.07 11.42 6.07 11.42 6.07 11.42 6.07 8.97 6.07 8.97 6.07 8.97 6.07 8.65 6.07 8.65 6.07 8.65 6.07 6.07 6.07 6.07 6.07 6.07 6.07 4.89 6.07 4.89 6.07 4.89 6.07 9.41 6.07 9.41 6.07 9.41 6.07 9.82 6.07 9.82 6.07 9.82 6.07 12.89 6.07 12.89 6.07 12.89 6.07 13.94 6.07 13.94 6.07 13.94 6.07 10.59 6.07 10.59 6.07 10.59 6.07 10.08 6.07 10.08 6.07 10.08 6.07 6.54 6.07 6.54 6.07 6.54 6.07 5.61 6.07 5.61 6.07 5.61 6.07 9.92 6.07 9.92 6.07 9.92 6.07 10.48 6.07 10.48 6.07 10.48 6.07 14.50 6.07 14.50 6.07 14.50 6.07 15.36 6.07 15.36 6.07 15.36 6.07 10.18 6.07 10.18 6.07 10.18 6.07 10.73 6.07 10.73 6.07 10.73 6.07 14.78 6.07 14.78 6.07 15.58 3.57 10.81 1.81 14.78 1.65 11.20 -6.35 6.78 -6.35 6.78 -6.35 6.78 -6.35 0.00 4.14 0.00 8.56ZM10.44 13.30C10.44 13.30 10.99 13.30 10.99 13.30 10.99 13.30 14.54 13.30 14.54 13.30 14.54 13.30 14.88 12.86 14.88 12.86 14.88 12.86 10.44 13.30 10.44 13.30ZM13.71 12.86C13.71 12.86 13.15 12.86 13.15 12.86 13.15 12.86 10.78 12.86 10.78 12.86 10.78 12.86 10.30 12.43 10.30 12.43 10.30 12.43 13.71 12.86 13.71 12.86ZM9.13 12.43C9.13 12.43 8.58 12.43 8.58 12.43 8.58 12.43 7.78 12.43 7.78 12.43 7.78 12.43 7.08 12.00 7.08 12.00 7.08 12.00 9.13 12.43 9.13 12.43Z"> '); } But I think you'd like to have this with the proper looks, the svgPathData provided by you is not looking good... .fa-codeberg:before { content: url('data:image/svg+xml, <stop offset="0" stop-color="%23000" stop-opacity="0"/><stop offset=".495" stop-color="%23000" stop-opacity=".3"/><stop offset="1" stop-color="%23000" stop-opacity=".3"/> '); } The code I found that is close-to-mine, on the upper-right corner …
type: Answer
has comment: http://stackoverflow.com/comment/139374731
has comment: http://stackoverflow.com/comment/139374881

http://stackoverflow.com/q/78940245
has body: When I click on "Show Menu" button, text runs out from the left, that is working as expected. Then I write function() { $(this).next('#menu').animate({'margin-left': '-50'}) to get the text runs back to left and disappear when "Show Menu" button is clicked again, but somehow it doesn't work! Thanks for your help! $(function() { $('button').click(function() { $(this).next('#menu').animate({'margin-left': '25'}).animate({'margin-left': '0'}, function() { $(this).next('#menu').animate({'margin-left': '-50'}) }) }) }) #menu { font-weight: 700; margin-left: -50%; } Show Menu Lorem ipsum dolor sit amet
has title: How to get Toggle Animate works
type: Question
answer count: 1
tagged with: http://stackoverflow.com/tag/html
type: AnsweredQuestion
has answer: http://stackoverflow.com/a/78940287
score: 0
tagged with: javascript
accepted answer: http://stackoverflow.com/a/78940287
tagged with: jquery
tagged with: css

http://stackoverflow.com/a/78935743
accepted answer of: http://stackoverflow.com/q/78935678
type: AcceptedAnswer
has comment: http://stackoverflow.com/comment/139195238
upvote count: 2
has comment: http://stackoverflow.com/comment/139180748
type: Answer
score: 2
downvote count: 0
has comment: http://stackoverflow.com/comment/139174556
has comment: http://stackoverflow.com/comment/139174787
has comment: http://stackoverflow.com/comment/139175051
answers question: http://stackoverflow.com/q/78935678
has body: may be this way ? first hack (add a hiding cell, but seems to give a random rendering) td { border : 1px solid black; text-align : center; width : 5em; background : whitesmoke; } .noZ { visibility : collapse; border : 0; width : 0; } body { background : lightblue; } table { background : whitesmoke; } a b c d e f f g h j i An other way: second hack ( "hide" first column) table { --bordersColor : darkblue; border-collapse : separate; border-spacing : 0; margin-bottom : .8em; box-sizing : border-box; border-top : 1px solid var(--bordersColor); border-left : 0; border-right : 1px solid var(--bordersColor); border-bottom : 0; } th,td { box-sizing : content-box; border : 0; border-left : 1px solid var(--bordersColor); border-bottom : 1px solid var(--bordersColor); } th { background-color : #7fccff; padding : .4em .6em ; } td { background-color : whitesmoke; padding : .2em .5em; text-align : left; width : 5em; } tr > th:first-child , /* "hide" first column */ tr > td:first-child { padding-left : 0; padding-right : 0; max-width : 0 !important; overflow : hidden; background-color : transparent; border : 0 !important; } 0 a b c 1 d e f 2 f g h 4 j 5 i your question haunted me a bit... the problem comes from the fact that the height of the cells is made from their content, and as the cells with a rowspan=2 only need one line this one is reduced in height, to the extent that there is no cell with a rowspan=1 related to one of its 2 rows. The other problem is that the tables have kept a css2 logic in which the min-height has no effect. Hence the use of height: 3.4em; which I adjusted as best I could. if the cell needs more, this height will be automatically enlarged accordingly table { --bordersColor : darkblue; border-collapse : separate; border-spacing : 0; margin-bottom : .8em; box-sizing : border-box; border : 0; border-top : 1px solid var(--bordersColor); border-right : 1px solid var(--bordersColor); } th,td { box-sizing : content-box; border : 0; border-left : 1px solid va…

http://stackoverflow.com/comment/139304359
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/79006465
has text: Oh! Thanks this solved the problem.

http://stackoverflow.com/comment/139387135
score: 1
comment on: http://stackoverflow.com/q/79048247
type: QuestionComment
has text: "I actually don't see the quote you copied in the reference." Apologies, the quote I gave is from a link referenced by your link. It is where they are describing <transform- function>: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function and I found this a bit easier to grasp as it spells things out for 2D etc.
type: Comment

http://stackoverflow.com/comment/139150616
has text: Adding further details to the question should be done through [edit] and not as a comment. The comment section is about asking about clarifications(either the question by others, or about other comments).
type: QuestionComment
comment on: http://stackoverflow.com/q/78922736
type: Comment
score: 0

http://stackoverflow.com/comment/139393193
has text: I also asked about [another approach](https://stackoverflow.com/questions/79054987/how-to-create-a-star-1-4-and-3-4-filled) but I prefer this approach - if it can be done.
type: QuestionComment
comment on: http://stackoverflow.com/q/79054912
type: Comment
score: 0

http://stackoverflow.com/comment/139122726
has text: I've thought of trying `setMouseTransparent` but I can't apply it to the scene anyways, only to the panes.
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78906838
type: Comment

http://stackoverflow.com/comment/139334338
comment on: http://stackoverflow.com/q/78997595
has text: Please [edit] your question to include a [mre] so that readers can run your code to answer your question.
type: Comment
score: 0
type: QuestionComment

http://stackoverflow.com/q/78957954
tagged with: html-table
tagged with: javascript
tagged with: css
has answer: http://stackoverflow.com/a/78958022
has body: I have a created a HTML table which is editable. The table contains some cells are predefined with the numbers 1-5, than there is section where the user can enter data and in the last column there should be the result of the data of the previous cells. Now I want the add a formula like you have for instances with Excel. How I can make calculations in the HTML table with Javascript or any other method? Details table enter image description here Column 1: packages is predefined Column 2: here user can add weight in kg Column 3: user adds here the length Column 4: user adds here the width Column 5: user adds here height Column 6: user adds split (%) Column 7: Volume weight = result formule is:length x width x height x 200 HTML table + script function calculateVolumeWeight() { let totalSplit = 0; const errorElement = document.getElementById('error'); errorElement.innerHTML = ""; // Clear previous errors for (let i = 1; i <= 3; i++) { // Get input values const length = parseFloat(document.getElementById(`length${i}`).value) || 0; const width = parseFloat(document.getElementById(`width${i}`).value) || 0; const height = parseFloat(document.getElementById(`height${i}`).value) || 0; const split = parseFloat(document.getElementById(`split${i}`).value) || 0; // Calculate volume weight const volumeWeight = (length * width * height) / 200; // Display volume weight document.getElementById(`volumeWeight${i}`).innerText = volumeWeight.toFixed(2); // Accumulate split percentages totalSplit += split; } // Validate the total split if (totalSplit !== 100) { errorElement.innerHTML = "Error: The total split percentage must equal 100%."; } else { errorElement.innerHTML = "Total split is correct."; } } // Add event listeners to all input fields document.querySelectorAll('input').forEach(input => { input.addEventListener('input', calculateVolumeWeight); }); table { width: 100%; border-collapse: collapse; } table, th, td { border: 1px solid black; } th, td { padding: 10px; text-align: center…
has comment: http://stackoverflow.com/comment/139216183
upvote count: 0
has comment: http://stackoverflow.com/comment/139215221
type: UnansweredQuestion
favorite count: 0
score: -2
downvote count: 2
type: Question
has comment: http://stackoverflow.com/comment/139215194
has comment: http://stackoverflow.com/comment/139216011
has title: Making calculations in a HTML table
has comment: http://stackoverflow.com/comment/139215276
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139215926
answer count: 1

http://stackoverflow.com/comment/139393235
type: AnswerComment
has text: thanks for answer but it is not working when we scroll the page .. button goes up
type: Comment
score: 0
comment on: http://stackoverflow.com/a/79055020

http://stackoverflow.com/q/78909799
has title: Possible implementation of image-set to improve loading performance
has comment: http://stackoverflow.com/comment/139127675
answer count: 0
has body: The new baseline of September 2023, a new functional notation for CSS is available: image-set. Example usage from MDN include: .box { background-image: -webkit-image-set( url("small-balloons.jpg") 1x, url("large-balloons.jpg") 2x); background-image: image-set( url("small-balloons.jpg") 1x, url("large-balloons.jpg") 2x); } The provided description states: Resolution and bandwidth differ by device and network access. [...] Resolution can be used as a proxy for filesize. Therefore, I was trying to implement it in test devices to see if I can improve load time. I am struggling with the resolution definition, and how to efficiently target smaller screen (i.e. mobile users) vs larger screens. And, in general, even on a larger screen, only window size should matter: I wouldn't want the user to download an excessively large picture for nothing. This has strong impact on full page backgrounds, imaging an element spanning the entire viewport as a splashscreen with a background picture defined only through css. My test enviroment uses this: . How can I target a smaller screen vs a larger screen using the resolution option?
has comment: http://stackoverflow.com/comment/139127113
tagged with: css
has comment: http://stackoverflow.com/comment/139126916
has comment: http://stackoverflow.com/comment/139127306
type: UnansweredQuestion
score: 0
has comment: http://stackoverflow.com/comment/139127407
type: Question
has comment: http://stackoverflow.com/comment/139131009

http://stackoverflow.com/a/79050890
answers question: http://stackoverflow.com/q/79050826
type: Answer
downvote count: 1
upvote count: 0
score: -1
has body: Paragraph tags include paragraph spacing. If you don't want to use it you could manually set the margin and padding to 0 !important, or just use &lt;span&gt; tags instead.

google-chrome
tags question: http://stackoverflow.com/q/78955926
tags question: http://stackoverflow.com/q/79059286
tags question: http://stackoverflow.com/q/79019992
tags question: http://stackoverflow.com/q/78912045
tags question: http://stackoverflow.com/q/78951014
tag name: google-chrome
tags question: http://stackoverflow.com/q/79022864
tags question: http://stackoverflow.com/q/78984786
tags question: http://stackoverflow.com/q/79021330
type: Tag
tags question: http://stackoverflow.com/q/79048892
tags question: http://stackoverflow.com/q/79026323
tags question: http://stackoverflow.com/q/79097672
tags question: http://stackoverflow.com/q/79140211
tags question: http://stackoverflow.com/q/79082119
tags question: http://stackoverflow.com/q/79192695
tags question: http://stackoverflow.com/q/79171480
tags question: http://stackoverflow.com/q/79110371
tags question: http://stackoverflow.com/q/79221166
tags question: http://stackoverflow.com/q/79151510
tags question: http://stackoverflow.com/q/79092044
tags question: http://stackoverflow.com/q/79080689
tags question: http://stackoverflow.com/q/79140118
tags question: http://stackoverflow.com/q/79218159
tags question: http://stackoverflow.com/q/79139611
tags question: http://stackoverflow.com/q/79251151
tags question: http://stackoverflow.com/q/79298521
tags question: http://stackoverflow.com/q/79384037
tags question: http://stackoverflow.com/q/79294198
tags question: http://stackoverflow.com/q/79266636
tags question: http://stackoverflow.com/q/79377132
tags question: http://stackoverflow.com/q/79313883
tags question: http://stackoverflow.com/q/79314887
tags question: http://stackoverflow.com/q/79278247
tags question: http://stackoverflow.com/q/79247923
tags question: http://stackoverflow.com/q/79339166
tags question: http://stackoverflow.com/q/79346531
tags question: http://stackoverflow.com/q/79369310
tags question: http://stackoverflow.com/q/79404949
tags question: http://stackoverflow.com/q/79542631
tags question: http://stackoverflow.com/q/79495938
tags question: http://stackoverflow.com/q/79487508
tags question: http://stackoverflow.com/q/79524264
tags question: http://stackoverflow.com/q/79483353
tags question: http://stackoverflow.com/q/79521593
tags question: http://stackoverflow.com/q/79505159
tags question: http://stackoverflow.com/q/79526290
tags question: http://stackoverflow.com/q/79455640

http://stackoverflow.com/q/78984268
has body: I can't center my buttons on my website. My code is below: .buttonHolder { text-align: center; display: flex; } The website looks like this, not how I intended: What it looks like I want them to be centered.
has answer: http://stackoverflow.com/a/78986141
tagged with: css
answer count: 3
type: UnansweredQuestion
has title: Centering buttons in HTML
has answer: http://stackoverflow.com/a/78986169
type: Question
tagged with: http://stackoverflow.com/tag/html
has answer: http://stackoverflow.com/a/78984273
score: 0

http://stackoverflow.com/q/79044610
tagged with: css
possible better answer: http://stackoverflow.com/a/79051111
answer count: 4
accepted answer: http://stackoverflow.com/a/79051990
has comment: http://stackoverflow.com/comment/139388073
has comment: http://stackoverflow.com/comment/139374879
favorite count: 0
has answer: http://stackoverflow.com/a/79051990
has body: I am having trouble getting SVG and CSS to play together to get the function I want. I want to be able to hover over the pie sectors of a graph and have the info in the middle change. I want the sector that is hovered over to remain and all other sectors to dim. Also, I don't want any dimming to happen if you hover over the center circle. This is what I've come up with so far which is close. The text in the middle I'm having trouble with because it is layered (if filter: opacity(50%) is changed to 0% then the text behaves but all the other sectors vanish instead of dim). Any suggestions on how to make this behave? * { margin: 0px 0px 0px 0px; /* Top Right Bottom Left */ padding: 0px 0px 0px 0px; /* Top Right Bottom Left */ border: 0px solid #00FF00; box-sizing: border-box; } body { background-color: #002233; color: #FFC355; font-family: "Helvetica", "Arial", sans-serif; font-size: 16px; overflow-y: scroll; } /* fade transitions on hover - DIV, SVG, TEXT */ #parent>div, path, text { transition: 0.2s; transition-delay: 5ms; } /* fade ALL out on parent hover - SVG (Sector Groups) */ #parent1:hover>g { filter: opacity(50%) blur(0px) brightness(80%); } /* fade ONE in on hover - SVG (Sector Groups) */ #parent1>g:hover { filter: opacity(100%) blur(0px) brightness(100%); } #parent2:hover>g { filter: opacity(0%) blur(0px) brightness(80%); } /* fade ONE in on hover - SVG (Sector Groups) */ #parent2>g:hover { filter: opacity(100%) blur(0px) brightness(100%); } <circle cx='250' cy='250' r='240' stroke='black' fill='black' stroke-width='0' fill-opacity='1' /> <g id='parent1' stroke-width='2.5' stroke-linecap='butt' stroke-linejoin='miter' stroke='black'> <g id='parent1'> <path d='M 250 250 L 250 25 A 225 225, 0, 0, 1, 458.7056796681 334.06508950971 Z' fill='#d35400' /> <circle cx='250' cy='250' r='123.75' stroke='black' fill='black' stroke-width='0' fill-opacity='1' /> 8.21 KH/s 31.1% </g> <g id='parent1'> <path d='M 250 250 L 458.7056796681 334.06508950971 A 225 225, 0, 0, 1, 1…
tagged with: http://stackoverflow.com/tag/html
has answer: http://stackoverflow.com/a/79044811
type: Question
upvote count: 0
type: AnsweredQuestion
has comment: http://stackoverflow.com/comment/139374851
downvote count: 1
tagged with: http://stackoverflow.com/tag/svg
has comment: http://stackoverflow.com/comment/139386623
has answer: http://stackoverflow.com/a/79051111
has answer: http://stackoverflow.com/a/79045550
score: -1
has title: How to fade SVG objects on mouse hover
has comment: http://stackoverflow.com/comment/139385364

http://stackoverflow.com/a/78990582
score: 0
accepted answer of: http://stackoverflow.com/q/78990560
type: AcceptedAnswer
type: Answer
answers question: http://stackoverflow.com/q/78990560
has body: Two approaches you could do are: You can put position: relative on the parent and bottom: 0; position: absolute on the button. OR You can use flex. Add display: flex; flex-direction: column to the parent and margin-top: auto to the button. With this approach you will notice that the button is filling the available width and so you may need to add extra CSS to ensure the width is set to your desired value.

http://stackoverflow.com/comment/139253449
score: 0
type: QuestionComment
type: Comment
has text: @Noleli I have added a runnable code snippet. That's a cool feature. Didn't know it existed :D
comment on: http://stackoverflow.com/q/78975591

http://stackoverflow.com/q/79059436
tagged with: quasar-framework
tagged with: vue.js
accepted answer: http://stackoverflow.com/a/79060053
has body: I'm working with Vue.js and Quasar, and I want to customize the border and dropdown arrow color of a single QSelect component that is in outlined mode. I want to apply a custom border color and change the color of the dropdown arrow, but only for a specific QSelect, not for all instances of QSelect in my component. Here's the code I'm using: :deep(.q-field--outlined .q-field__control:before) { border: 1.25px solid var(--primary); /* Change the border color */ transition: border-color 0.36s cubic-bezier(0.4, 0, 0.2, 1); } /* Target the dropdown arrow */ :deep(.q-field__append .q-icon) { color: var(--primary); /* Change the dropdown arrow color */ } /* Optionally, change the icon color on hover */ :deep(.q-field__append .q-icon:hover) { color: var(--secondary); /* Change the dropdown arrow color on hover */ } The issue is that these styles are being applied globally, affecting all QSelect components in the scope. I want to limit these styles to a single QSelect by using a custom class or any other method to prevent all QSelect components from being styled in the same way. How can I apply these custom styles to only one QSelect instance?
type: Question
answer count: 1
type: AnsweredQuestion
score: 0
has title: How to customize the border and dropdown icon color for a single QSelect in Quasar
has answer: http://stackoverflow.com/a/79060053
tagged with: css
tagged with: vuejs3
tagged with: quasar

http://stackoverflow.com/q/78985675
has title: Align images from carousel in React with outer components
accepted answer: http://stackoverflow.com/a/78986561
type: Question
answer count: 1
has body: I am using the library react-multi-carousel, however, I am having difficulties aligning the images so the left border from the first image aligns with the items in the outside, in this case an h2, like so: And the right border from the last image aligns with the outer element, which in this case, is the "shop" button, like so: This is the link to the <a href="https://codesandbox.io/p/sandbox/ym79rv?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522cm12cej950006286c2ls6p0rk%2522%252C%2522sizes%2522%253A%255B100%252C0%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522cm12cej950002286ctbgoqesl%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522cm12cej950003286czpkefhwn%2522%257D%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522co…
type: AnsweredQuestion
tagged with: reactjs
score: 0
tagged with: javascript
tagged with: css
has answer: http://stackoverflow.com/a/78986561

http://stackoverflow.com/comment/139185317
type: QuestionComment
score: 1
has text: display cannot be animated, it goes from none to block in a single step, these are not numbers that can be fractionned to create an animation/transition. Opacity can do for instance if it goes to/from 0 to any positive value. height, translate, can also be animated
type: Comment
comment on: http://stackoverflow.com/q/78941593

http://stackoverflow.com/comment/139150643
type: Comment
has text: A width of `100%` on a child will result on its width having the same width as its parent, that might however result in an overflow in the parent container depending on what is set for its `padding`, `margin` and other css properties.
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78922736

http://stackoverflow.com/a/78931621
has body: As suggested in the comments, you can achieve this easily with CSS Grid instead of Flexbox: * { box-sizing: border-box; } .table { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid black; } .cell { height: 100px; vertical-align: top; border: 1px solid black; background: yellow; } .cell.rowspan { height: 200px; grid-row: span 2; } blah blah blah blah blah blah blah blah We have used grid-template-columns: repeat(3, 1fr) to define three equal-width columns, and grid-row: span 2 to make the rowspan span two rows.
has comment: http://stackoverflow.com/comment/139167294
upvote count: 1
score: 1
type: AcceptedAnswer
answers question: http://stackoverflow.com/q/78931488
type: Answer
accepted answer of: http://stackoverflow.com/q/78931488
downvote count: 0

http://stackoverflow.com/q/79036207
type: Question
has answer: http://stackoverflow.com/a/79036255
answer count: 1
has comment: http://stackoverflow.com/comment/139359063
has title: Navbar div not 100% height of wrapper height
score: 0
tagged with: css
has body: So I implemented a navbar on the right side of the wrapper which I centered. I made the wrapper height automatically adjust to the amount of content in it (Since I didn't want to give the wrapper a pixel height because it's fixed and doesn't change based on the amount of content) The navbar should have the exact height of the wrapper but it's somehow too short even though the wrapper is a direct parent to the navbar and the navbar has a 100% height. Somehow it only works when I remove the height: auto; on the wrapper and replace it with height: 750px; it also kinda collapses the other page by displaying too short. This is what it looks like with #wrapper {height: 750px;} and how it should look like: And this is how the two pages end up looking when I set the #wrapper height to auto: Here is the code for both my HTML and CSS: body { background: url(./nurple-static-bright.gif); height: 100%; width: 100%; margin: 0; font-family: 'VT323';} #wrapper { width: 800px; height: 750px; margin: 0 auto; background-color: rgba(77, 77, 77, 0.558); text-align: center; margin-top: 20px; border: 3px rgb(189, 189, 189) solid; border-bottom-left-radius: 30px; border-bottom-right-radius: 30px;} .container { //* the container div is a parent of the wrapper *// margin-top: 20px;} .navbar { height: 100%; width: 25%; float: right; border-left: 3px rgb(189, 189, 189) solid; border-bottom-right-radius: 27px;} //* The .content container is the div of the paragraphs you see in the pictures .content had two other divs, one containing the "Sincere Welcome" (box1) text and the other one containing the rest paragraphs "box2 "*// .content { height: 100%; width: 75%;} .box1 { height: min-content; width: 100%; border-bottom: 3px rgb(189, 189, 189) solid; }
has comment: http://stackoverflow.com/comment/139359028
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139359012
tagged with: http://stackoverflow.com/tag/html

http://stackoverflow.com/comment/139155750
score: 0
comment on: http://stackoverflow.com/q/78925311
type: QuestionComment
has text: @KIKOSoftware Yes, I should have mentioned that this table will break in the exact same way consistently if the report is generated with the same data. If different data is used and a different table breaks similar to this one, it will also consistently break in the same way each time the report is generated with that data. Editing the original question to include the HTML and CSS of the table shown.
type: Comment

http://stackoverflow.com/q/78989508
has title: How to make combined box-shadow of two blocks?
has comment: http://stackoverflow.com/comment/139273636
tagged with: css
upvote count: 2
has comment: http://stackoverflow.com/comment/139273775
has comment: http://stackoverflow.com/comment/139273678
answer count: 4
possible better answer: http://stackoverflow.com/a/78989705
has answer: http://stackoverflow.com/a/78990269
has answer: http://stackoverflow.com/a/78989599
favorite count: 0
tagged with: http://stackoverflow.com/tag/html
type: Question
downvote count: 0
has body: I have two blocks. Let's imagine it's not possible to set one box-shadow for parents of these two blocks. I need to set box-shadow for each blocks, and it must look as if I set it to parent. body { padding: 50px; } .block1 { padding: 20px; border-width: 1px 1px 0 1px; border-style: solid; border-radius: 4px 4px 0 0; border-color: #d5dce3; box-shadow: 0 0 2px #00000017,0 5px 25px #0000000a,0 1px 5px #040b170a; } .block2 { padding: 20px; border-width: 0 1px 1px 1px; border-style: solid; border-radius: 0 0 4px 4px; border-color: #d5dce3; box-shadow: 0 0 2px #00000017,0 5px 25px #0000000a,0 1px 5px #040b170a; } &lt;div class="block1"&gt; Block 1 &lt;/div&gt; &lt;div class="block2"&gt; Block 2 &lt;/div&gt; Desired look:
score: 2
type: AnsweredQuestion
accepted answer: http://stackoverflow.com/a/78989599
has answer: http://stackoverflow.com/a/78989705
tagged with: javascript
has answer: http://stackoverflow.com/a/78989593

http://stackoverflow.com/a/79067991
score: 1
upvote count: 1
answers question: http://stackoverflow.com/q/79067744
type: AcceptedAnswer
has comment: http://stackoverflow.com/comment/139417471
accepted answer of: http://stackoverflow.com/q/79067744
has comment: http://stackoverflow.com/comment/139417384
type: Answer
has body: Make the keyframes easy by using 100% for opacity: 0 then the linear() function should also be easy to define @keyframes fade-out-50-in-70 { 50% { opacity: 0; } 70% { opacity: 1; } } @keyframes fade-out-in { 100% { opacity: 0; } } .animate-fade-out-in { animation-name: fade-out-in; animation-timing-function: linear(0, 1 50%, 0 70%); animation-duration: 2s; animation-iteration-count: infinite; } .animate-fade-out-50-in-70 { animation-name: fade-out-50-in-70; animation-timing-function: linear; animation-duration: 2s; animation-iteration-count: infinite; } div { height: 100px; background: red; } &lt;div class="animate-fade-out-in"&gt;&lt;/div&gt; &lt;div class="animate-fade-out-50-in-70"&gt;&lt;/div&gt;
downvote count: 0

http://stackoverflow.com/comment/139309143
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/79006685
has text: I found it by going into the browser devtools inspect facility, copying all the html element (right click in mouse and selecting Edit HTML), putting it into my editor and searching for style.

wordpress
tags question: http://stackoverflow.com/q/78951104
tags question: http://stackoverflow.com/q/78933453
tags question: http://stackoverflow.com/q/79002715
tag name: wordpress
tags question: http://stackoverflow.com/q/79006685
tags question: http://stackoverflow.com/q/79029787
tags question: http://stackoverflow.com/q/79048090
tags question: http://stackoverflow.com/q/78957784
tags question: http://stackoverflow.com/q/79059761
tags question: http://stackoverflow.com/q/79056012
tags question: http://stackoverflow.com/q/79057755
tags question: http://stackoverflow.com/q/79059060
tags question: http://stackoverflow.com/q/78917311
tags question: http://stackoverflow.com/q/79002045
type: Tag
tags question: http://stackoverflow.com/q/78932133
tags question: http://stackoverflow.com/q/79059194
tags question: http://stackoverflow.com/q/79051072
tags question: http://stackoverflow.com/q/79014805
tags question: http://stackoverflow.com/q/79042496
tags question: http://stackoverflow.com/q/79046527
tags question: http://stackoverflow.com/q/78909216
tags question: http://stackoverflow.com/q/79168496
tags question: http://stackoverflow.com/q/79156727
tags question: http://stackoverflow.com/q/79168099
tags question: http://stackoverflow.com/q/79198956
tags question: http://stackoverflow.com/q/79116553
tags question: http://stackoverflow.com/q/79069447
tags question: http://stackoverflow.com/q/79091563
tags question: http://stackoverflow.com/q/79200927
tags question: http://stackoverflow.com/q/79148881
tags question: http://stackoverflow.com/q/79234408
tags question: http://stackoverflow.com/q/79203428
tags question: http://stackoverflow.com/q/79103694
tags question: http://stackoverflow.com/q/79093089
tags question: http://stackoverflow.com/q/79110386
tags question: http://stackoverflow.com/q/79241658
tags question: http://stackoverflow.com/q/79180393
tags question: http://stackoverflow.com/q/79083768
tags question: http://stackoverflow.com/q/79388955
tags question: http://stackoverflow.com/q/79302844
tags question: http://stackoverflow.com/q/79395924
tags question: http://stackoverflow.com/q/79354896
tags question: http://stackoverflow.com/q/79394825
tags question: http://stackoverflow.com/q/79292114
tags question: http://stackoverflow.com/q/79344809
tags question: http://stackoverflow.com/q/79301296
tags question: http://stackoverflow.com/q/79313983
tags question: http://stackoverflow.com/q/79253032
tags question: http://stackoverflow.com/q/79393293
tags question: http://stackoverflow.com/q/79312928
tags question: http://stackoverflow.com/q/79335869
tags question: http://stackoverflow.com/q/79542912
tags question: http://stackoverflow.com/q/79534094
tags question: http://stackoverflow.com/q/79535608
tags question: http://stackoverflow.com/q/79441937
tags question: http://stackoverflow.com/q/79477229
tags question: http://stackoverflow.com/q/79521141
tags question: http://stackoverflow.com/q/79527244
tags question: http://stackoverflow.com/q/79522568
tags question: http://stackoverflow.com/q/79506241
tags question: http://stackoverflow.com/q/79449849
tags question: http://stackoverflow.com/q/79542629
tags question: http://stackoverflow.com/q/79491843
tags question: http://stackoverflow.com/q/79501162
tags question: http://stackoverflow.com/q/79423553
tags question: http://stackoverflow.com/q/79440883
tags question: http://stackoverflow.com/q/79474320
tags question: http://stackoverflow.com/q/79544635

http://stackoverflow.com/q/79033854
has answer: http://stackoverflow.com/a/79056283
tagged with: backend
has body: I am trying to return a load.css file along with index.html, but it gives me a 404 error. I tried manually reading the file and setting res.body == load.css data, but that would make the request stuck on loading. What am I doing wrong? void foo() { crow::SimpleApp app; crow::mustache::set_global_base("/home/cereza/testing/src/frontend/src/"); CROW_ROUTE(app, "/") ([] () { auto page = crow::mustache::load("html/index.html"); return page.render(); }); CROW_ROUTE(app, "/style/load.css") ([] () { crow::response res; res.set_static_file_info("style/load.css"); return res; }); } I already tried changing paths and testing if files are being read or not.
tagged with: crow
type: UnansweredQuestion
type: Question
tagged with: c++
tagged with: http://stackoverflow.com/tag/html
has title: How do I return a CSS/JS with Crow C++?
answer count: 1
score: 0
tagged with: css

http://stackoverflow.com/a/79029453
downvote count: 0
has body: Use the mask-image property with a linear-gradient containing an alpha channel. body { background-image: url(https://picsum.photos/id/1072/800/300); background-size: cover; background-repeat: no-repeat; } img { mask-image: linear-gradient(135deg, rgb(0 0 0 / 1) 50%, rgb(0 0 0 / 0) 75%); } p { color: white; font-weight: bold; width: 150px; mask-image: linear-gradient(45deg, rgb(0 0 0 / 1) 50%, rgb(0 0 0 / 0) 75%); } Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempor nunc mauris, sit amet placerat tortor lobortis dapibus.
score: 1
upvote count: 1
type: Answer
answers question: http://stackoverflow.com/q/79029341

http://stackoverflow.com/comment/139171001
type: AnswerComment
score: 1
comment on: http://stackoverflow.com/a/78933480
type: Comment
has text: That may be unavoidable in the short term, unfortunately. It seems like there’s some other silly stuff the theme author did with JS overriding things about the layout to make the animation work, so without going through and digging all of that out, you may be left with that brief flicker.

http://stackoverflow.com/a/79062015
type: AcceptedAnswer
has comment: http://stackoverflow.com/comment/139406237
downvote count: 0
type: Answer
score: 3
answers question: http://stackoverflow.com/q/79061988
has body: All the CSS classes you've listed are to be used with display: grid; if I am not mistaken. What you would want to use is ml-auto on the element you want to be place at end. Find attached a link to an example, make sure your container stretches to the desired length. https://play.tailwindcss.com/nsDfrOXBLJ EDIT: Your space-x-2 class also seems to force a specific margin, I would recommend using gap-2 instead. In your case it should be as follow: {{label_title}} {{some_text}} {{some_text}} {{ button_text}} Not sure why you've placed "dot" in some of your classes?
has comment: http://stackoverflow.com/comment/139406232
upvote count: 3
accepted answer of: http://stackoverflow.com/q/79061988

http://stackoverflow.com/a/78929978
upvote count: 2
type: Answer
downvote count: 0
answers question: http://stackoverflow.com/q/78929847
has body: your code might not run due to the following reason Div tag does not have height and width 2.Its important you give your div a position of relative, and also, you can add a transition to your CSS. A sample is provided below for you to use have a guide document.querySelector('.play').addEventListener('click', function() { const target1 = document.querySelector('.trans-up'); const target2 = document.querySelector('.trans-mid'); const target3 = document.querySelector('.trans-down'); target1.classList.add('trans-up-animation'); target2.classList.add('trans-mid-animation'); target3.classList.add('trans-down-animation'); }); .trans-up-animation{ position: relative; animation: trans-up-anim 2s forwards ease-out; } .trans-down-animation{ transition: middle 2s running; animation : trans-down-anim 1.5s forwards; } .trans-mid-animation{ transition: middle 4s running; animation : trans-down-anim 1.3s forwards; } @keyframes trans-up-anim { /* Start left off screen */ 0% { transform: translateX(-100%); } /* Move to visible position within 8% of 9 seconds (less than a second). */ 8% { transform: translateX(0); } /* Stay until at least 3 second mark (33% of 9s). */ 33.33% { transform: translateX(0); } /* Move offscreen to the right while the next slide is moving in. Same duration as slide-in (8%), but starting at 33.33%, so 33.33% + 8% = 41.33%. */ 41.33% { transform: translateX(100%); } /* Stay there until the end. */ 100% { transform: translateX(100%); } } @keyframes trans-down-anim { to { transform: scale(1.5); } } click on me
score: 2

http://stackoverflow.com/comment/139266257
comment on: http://stackoverflow.com/a/78985551
score: 0
has text: Choose box shadow : https://getcssscan.com/css-box-shadow-examples
type: AnswerComment
type: Comment

http://stackoverflow.com/q/78952516
tagged with: javascript
tagged with: sass
score: -1
tagged with: overflow
tagged with: ellipsis
tagged with: css
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139205065
has comment: http://stackoverflow.com/comment/139205003
favorite count: 0
has title: How to remove the rest of the text after CSS ellipsis
type: Question
has answer: http://stackoverflow.com/a/78952600
answer count: 1
downvote count: 1
upvote count: 0
has comment: http://stackoverflow.com/comment/139244417
has body: The text is truncated by CSS rules text-overflow: ellipsis; and overflow: hidden; but when the text is longer and goes to next row, sometimes the next row is showing few pixels. element.innerHTML doesn't show the three dots from ellipsis, so I can't detect it with regex and remove it. How can I remove the remaining text from html element after ellipsis is added? In the example the height of the div should stay the same let ele = document.getElementById('header-inner'); ele.innerHTML = 'There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which '; #header-inner { height: 80px; display: -webkit-box; font-size: 15px; font-weight: normal; font-style: normal; text-decoration: none; border-width: 1px; max-height: 62px; text-overflow: ellipsis; overflow: hidden; -moz-box-orient: vertical; white-space: unset; -webkit-line-clamp: 3; padding-top: 0px; } &lt;div id='header-inner'&gt;&lt;/div&gt;

http://stackoverflow.com/comment/139136568
has text: What do you mean "having multiple identical id attributes is not allowed" as in which ones are not allowed? If you could please state the names of the ids it would be great
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78915244
type: Comment

http://stackoverflow.com/comment/139405278
type: QuestionComment
comment on: http://stackoverflow.com/q/79060035
has text: @AHaworth got it, so the question now is: how can I do this calculation and draw the image I want?
type: Comment
score: 0

http://stackoverflow.com/comment/139337056
type: QuestionComment
has text: Sorry, the menu will always be available, but the number of options will change depending on the user's status. I've your two JS functions, and the button shows up fine, but nothing happens when I activate the button. I asume that this is either because my syntax is wrong, but more likely, I'm not calling the function correctly?
type: Comment
score: 0
comment on: http://stackoverflow.com/q/79012295

http://stackoverflow.com/a/78993261
has comment: http://stackoverflow.com/comment/139280760
type: Answer
has comment: http://stackoverflow.com/comment/139292602
answers question: http://stackoverflow.com/q/78993240
score: -1
has body: Is this correct? function toggleFormVisibility() { const form = document.getElementById("co"); form.style.display = document.getElementById("df1").checked ? "block" : "none"; } Name Roll No.
has comment: http://stackoverflow.com/comment/139280332
downvote count: 1
upvote count: 0

http://stackoverflow.com/comment/139201264
has text: Please [edit] your question to include a [mre]. There's no way for us to debug your code without seeing it.
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78949483

http://stackoverflow.com/a/79009902
accepted answer of: http://stackoverflow.com/q/79009802
type: AcceptedAnswer
has body: for button adjustment : Ensure that the button stays at the bottom of each card by using flex-grow for content above the button. Add margin-top: auto; to the button so that it pushes itself to the bottom of the card. .card_content { padding: 1rem; display: flex; flex-direction: column; flex-grow: 1; } .card_content button { margin-top: auto; /* use this line will sort your issue */ padding: .5rem 1rem; outline: none; border: none; font-weight: 500; color: var(--white); background-color: var(--primary-color); cursor: pointer; font-size: .8rem; width: 40%; } for image to stay fixed you can use this code : i hope it works : .top-image { position: absolute; top: 8%; /* this value is use as per your requirments */ left: 50%; transform: translateX(-50%); text-align: center; z-index: 1; } .top-image img { width: 2rem; height: 2rem; }
type: Answer
score: 0
answers question: http://stackoverflow.com/q/79009802

http://stackoverflow.com/comment/139181742
type: QuestionComment
comment on: http://stackoverflow.com/q/78938538
score: 0
has text: It probably "works" first time as `slideUp()` takes 0 time if it's already hidden. Hard to tell what "works" means from your text and without [mcve].
type: Comment

http://stackoverflow.com/a/78938039
upvote count: 1
has body: Giving the sublists a negative margin is almost right, all that was missing is that because the CSS contains nav ul { width: fit-content; } the width of the sublists are over-constrained, causing the right margin value to be ignored. Instead set the sublists' width to auto. So just add nav ul ul { margin-inline: calc(0px - var(--menu-padding)); width: auto; } :root { --menu-clr-item-bk:#84744dff; --menu-clr-item-tx:#ddddddff; --menu-clr-item-tx-hov:#84744dff; --menu-clr-item-bk-hov:#ddddddff; --menu-clr-item-tx-clildhov:#ccccccff; --menu-clr-item-bk-clildhov:#847b65ff; --menu-h-clr-tile-bk:#ddddddff; --menu-h-clr-item-bk:var(--menu-clr-item-bk); --menu-h-clr-item-bk-hov:var(--menu-clr-item-bk-hov); --menu-h-clr-item-tx:var(--menu-clr-item-tx); --menu-h-clr-item-tx-hov:var(--menu-clr-item-tx-hov); --menu-h-separator:0; --menu-h-shadow:none; --menu-v-clr-tile-bk:#ddddddff; --menu-v-clr-item-bk:var(--menu-clr-item-bk); --menu-v-clr-item-bk-hov:var(--menu-clr-item-bk-hov); --menu-v-clr-item-tx:var(--menu-clr-item-tx); --menu-v-clr-item-tx-hov:var(--menu-clr-item-tx-hov); --menu-v-separator:1px; --menu-v-shadow:0.1em 0.1em 0.1em #0008; --menu-padding:0.5em; --menu-checkmargin:0.5em; --menu-checksize:1em; } * { box-sizing: border-box; } body, html { height: 100%; } nav > h1 { display: none; } /* all menues and items */ nav ul { position: absolute; white-space: nowrap; display: flex; width: fit-content; list-style-type: none; margin: 0; padding: 0; } nav ul > li:has(> a) { padding: 0; } nav ul > li:has(> a) > a { display: inline-block; padding: var(--menu-padding); } nav ul li:focus-within > ul { display: flex; } nav li { position: relative; align-items: left; display: flex; box-sizing: border-box; justify-content: space-between; line-height: 1; padding: var(--menu-padding); } nav li:has(ul:hover):hover { color: #999; background: #444; } nav li:hover { color: #fff; background: #000; } nav ul:not(nav ul ul) { position: relative; text-align: left; flex-direction: column; whi…
answers question: http://stackoverflow.com/q/78936069
accepted answer of: http://stackoverflow.com/q/78936069
type: AcceptedAnswer
type: Answer
has comment: http://stackoverflow.com/comment/139192015
downvote count: 0
score: 1

http://stackoverflow.com/comment/139243485
score: 0
comment on: http://stackoverflow.com/q/78972066
type: QuestionComment
type: Comment
has text: @GreenSaiko Yes, it does load the designated color.

http://stackoverflow.com/comment/139318328
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/79013945
type: Comment
has text: CSS alone doesn't provide a way to select elements based on exact text content. U can achieve this only using some extra JavaScript.

http://stackoverflow.com/q/79007922
has answer: http://stackoverflow.com/a/79007980
tagged with: css
tagged with: flexbox
possible better answer: http://stackoverflow.com/a/79007980
has title: Div doesn't occupy space in mobile
type: Question
has comment: http://stackoverflow.com/comment/139307310
tagged with: http://stackoverflow.com/tag/html
type: AnsweredQuestion
score: 0
tagged with: javascript
has answer: http://stackoverflow.com/a/79008032
tagged with: reactjs
accepted answer: http://stackoverflow.com/a/79008032
has body: I have a div with three elements: input field, timer, reset button in desktop view all three elements are of the same height but when I view it on an iphone 12 mini specifically the timer and reset button shrink in height. When I tested its dimensions using chrome dev tools this issue didn't come up {timer}s { setRotated(!rotated); resetTest(); setTypedChars([]); setTest(false) }}> <FiRefreshCcw size={25} color={'var(--text-color)'} className={rotated ? 'icon rotate' : 'icon'} /> input { background-color: var(--sub-alt-color); border: 1px solid var(--sub-color); color: var(--text-color); border-radius: 5px; padding-left: 20px; width: 65.5%; max-width: 65.5%; min-height: 8vh; height: 8vh; font-size: 18px; outline: none; transition: border-color 0.3s ease; } .timer { width: 14.5%; display: flex; user-select: none; height: 8vh; min-height: 8vh; flex-shrink: 0; align-items: center; justify-content: center; background-color: var(--sub-alt-color); border-radius: 5px; } .reset { width: 14.5%; display: flex; height: 8vh; align-items: center; min-height: 8vh; flex-shrink: 0; justify-content: center; background-color: var(--sub-alt-color); border-radius: 5px; cursor: pointer; } Here is the site
answer count: 2

http://stackoverflow.com/comment/139325053
comment on: http://stackoverflow.com/a/79015918
type: Comment
score: 0
type: AnswerComment
has text: Thanks for your answer. However, the border is around the gray background and not part of the "lightblue" segment. The problem is the last few % of the bar, where the border should have the border-radius up until the point the bar is filled, as shown in the second image.

ckeditor5
tags question: http://stackoverflow.com/q/78932878
type: Tag
tag name: ckeditor5
tags question: http://stackoverflow.com/q/79338429
tags question: http://stackoverflow.com/q/79430356

http://stackoverflow.com/q/78940137
has body: Quite simply I'm trying to dynamically get back the Radix Colors values in JavaScript, reasons for this requirement and why I am unable to hardcode the values is because I also generate these colors from any color the user might pick from an input and this results in the values to be well... different based on what the user picks. That said I need a way to access the values inside a CSS variable, the variables stay the same, just the value changes. Currently in my component I tried to use this method to get back the values but it returns me an empty string always, I've put my logs into a setTimeout to rule out the possibility of the variable not being declared first somehow. const [accent7Color, setAccent7Color] = useState(''); const [accent8Color, setAccent8Color] = useState(''); useEffect(() => { // Tried with document.documentElement also const rootStyles = getComputedStyle(document.body); const accent7 = rootStyles.getPropertyValue('--accent-7').trim(); const accent8 = rootStyles.getPropertyValue('--accent-8').trim(); setAccent7Color(accent7); setAccent8Color(accent8); setTimeout(() => { console.log('Accent 7 Color:', accent7); console.log('Accent 8 Color:', accent8); console.log(accent7Color); console.log(accent8Color); }, 4000); }, []); A disclaimer maybe is that this code does not live at the root of the application, maybe that's the problem? Its nested deep in the app. I've also tried to define the "rootStyles" outside of the useEffect and put that into the dependency array so that I definitely only run this when this rootStyles gets defined or changes value, didn't change a thing. I'm damb damb I need assistance. So yeah, above mentions were tried and this wasn't really working and I do not see anything else said online about this.
tagged with: typescript
tagged with: reactjs
score: 0
tagged with: javascript
has title: How to get back CSS Variable value from Radix UI Colors via Javascript/Typescript?
tagged with: css
has answer: http://stackoverflow.com/a/78940675
type: UnansweredQuestion
tagged with: radix
answer count: 1
type: Question

http://stackoverflow.com/q/79044377
has comment: http://stackoverflow.com/comment/139375799
tagged with: css
answer count: 0
has title: Removing mix-blend-mode from a child element in CSS
has comment: http://stackoverflow.com/comment/139374605
has comment: http://stackoverflow.com/comment/139375529
has comment: http://stackoverflow.com/comment/139374744
type: UnansweredQuestion
has body: I just created an account on this forum after searching for an answer, so please forgive me if I lack the correct formatting or best practices when posting. Additionally, I am pretty new to HTML. I am working on a personal website. I have a header with contents shown below: LOGO Home About Projects Contact I have four sections for my website that alternate background colors (light, dark, light, dark). Since the header at the top is fixed, I wanted to achieve an effect where the color of the text and border at the bottom blend with the color of the background currently in view (if the background is light, the elements should be dark and vice versa). I used mix-blend-mode: difference; on the .nav-header, which works like a charm for the elements. However, I have a hover effect that changes the text color to green. The blending, when the elements are dark, turn the light text a purple color (since it's considered the difference of the original green color). css .nav-header { position: fixed; top: 0; left: 0; width: 100%; max-height: 6rem; padding: 1rem 4rem 1rem 4rem; border-bottom: 2px solid #E1E1E1; display: flex; justify-content: space-between; align-items: center; z-index: 100; background: transparent; backdrop-filter: blur(10px); mix-blend-mode: difference; } I have tried setting the mix-blend-mode for the element as well as the hover effect, but that does not work: .nav-header a:hover { color: #6A9955; mix-blend-mode: normal; } I have tried to use the isolation property for the elements, but that was no use as well. How can I ignore/remove a mix-blend-mode setting on a parent element to maintain a color-change hover effect on a child element? Thank you for your help and consideration.
type: Question
has comment: http://stackoverflow.com/comment/139375773
tagged with: http://stackoverflow.com/tag/html
tagged with: mix-blend-mode
score: 0

http://stackoverflow.com/q/79003218
has body: Hello everyone Why does the error "Deprecation Warning: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0." occur? I have searched for an answer in other help requests, but I have not found an answer. Answers by type: css: { preprocessorOptions: { scss: { api: "modern-compiler", // or "modern", "legacy" importers: [], }, }, }, They don't help! Here is my Vite config: // default.config.ts export const defaultConfig: InlineConfig = { css: { preprocessorOptions: { scss: { api: "modern-compiler", importers: [], }, }, }, plugins: [ tsPaths(), solidPlugin(), ], resolve: { alias: { "@styles": path.resolve(__dirname, "src/styles"), }, }, }; // dev.config.ts export default defineConfig({ server: { host: "0.0.0.0", port: 3000, strictPort: true, open: true, hmr: true, }, ...defaultConfig, }); My package file: { "name": "project", "version": "0.0.0", "description": "", "type": "module", "scripts": { "dev": "vite --host", "build": "VITE_APP_ENV=production vite build", "serve": "vite preview" }, "license": "MIT", "devDependencies": { "@fullhuman/postcss-purgecss": "^6.0.0", "@types/node": "^22.5.5", "@types/pako": "^2.0.3", "@types/postcss-normalize": "^9.0.4", "cssnano": "^7.0.6", "lightningcss": "^1.27.0", "postcss": "^8.4.47", "postcss-combine-duplicated-selectors": "^10.0.3", "sass": "^1.78.0", "solid-devtools": "^0.29.2", "svgo": "^3.3.2", "terser": "^5.32.0", "typescript": "^5.3.3", "vconsole": "^3.15.1", "vite": "^5.0.11", "vite-bundle-visualizer": "^1.2.1", "vite-plugin-html-minifier-terser": "^3.8.0", "vite-plugin-solid": "^2.8.2", "vite-plugin-solid-svg": "^0.8.1", "vite-tsconfig-paths": "^5.0.1" }, "dependencies": { "@solidjs/router": "^0.14.5", "lottie-web": "^5.12.2", "pako": "^2.1.0", "solid-js": "^1.8.11" } } I tried adding and removing scss and sass settings - it didn't help. I deleted plugins, changed the config, deleted packages - it didn't help. Where is the error - I do not understand UPDATE: Why is the question different from the others? …
type: UnansweredQuestion
type: Question
tagged with: vite
answer count: 1
score: 0
tagged with: javascript
tagged with: sass
tagged with: css
has title: Deprecation Warning: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0
has answer: http://stackoverflow.com/a/79044800

http://stackoverflow.com/comment/139204780
type: Comment
score: 0
type: AnswerComment
has text: `$(".selected").length` could be a point of issue. Avoid bug prone code.
comment on: http://stackoverflow.com/a/78950845

http://stackoverflow.com/comment/139374744
type: Comment
has text: Thank you for your reply! I see what you did. This is so strange. The only difference is that I am using text as buttons, which may have something to do with it. Could this be the problem?
type: QuestionComment
comment on: http://stackoverflow.com/q/79044377
score: 0

http://stackoverflow.com/a/78950733
type: Answer
answers question: http://stackoverflow.com/q/78950411
score: 0
has body: Even though the linked question suggested in the comments works by changing the scrollTop of the element, it might not be very flexible. I ended up defining a custom scroll behavior that targets the nearest scrollable container with position and behavior options. To do so, first, we find the nearest scrollable container. Then calculate the scroll position and scroll to that position using scrollTo: // Smooth scroll to the target element function customScrollIntoView(e, {position = 'top', behavior = 'instant'} = {}) { // Find the closest scrollable container for the given element function findScrollableContainer(element) { while (element.length) { if (['auto', 'scroll'].includes(element.css('overflow'))) { return element; } element = element.parent(); } return $(window); // Fallback to window if no scrollable container is found } const container = findScrollableContainer($(e.currentTarget)); const target = e.currentTarget; const containerRect = container[0].getBoundingClientRect(); const targetRect = target.getBoundingClientRect(); // Calculate the new scroll position const positions = { top: container.scrollTop() + (targetRect.top - containerRect.top), center: container.scrollTop() + (targetRect.top - containerRect.top) - (containerRect.height / 2) + (targetRect.height / 2), bottom: container.scrollTop() + (targetRect.bottom - containerRect.bottom) + targetRect.height, }; // Smooth scroll to the new position container[0].scrollTo({ top: positions[position], behavior: behavior, }); } And this is the result with options set to smooth scrolling to the center of the view: $(document).ready(() => { $('.link').click((e) => { customScrollIntoView(e, {behavior: 'smooth'}); }); }); // Smooth scroll to the target element function customScrollIntoView(e, {position = 'top', behavior = 'instant'} = {}) { // Find the closest scrollable container for the given element function findScrollableContainer(element) { while (element.length) { if (['auto', 'scroll'].includes(element.css('…

http://stackoverflow.com/a/79064166
downvote count: 0
answers question: http://stackoverflow.com/q/79063761
has body: If your login page is MVC structure, you can use ViewContext.RouteData.Values to get the specific controller and action name as condition for judgment. @RenderBody() If you use the default Identity login page with area(Razor Pages structure), you need change like below: @RenderBody()
upvote count: 1
accepted answer of: http://stackoverflow.com/q/79063761
score: 1
type: AcceptedAnswer
type: Answer

http://stackoverflow.com/comment/139393257
has text: you should not duplicate discussions. Use one discussion only
score: 1
comment on: http://stackoverflow.com/q/79054912
type: Comment
type: QuestionComment

http://stackoverflow.com/a/78971704
score: 0
answers question: http://stackoverflow.com/q/78971329
has body: I can’t explain why this happens, although the fact that this behaviour is consistent across Safari/Chrome (whose codebases have a common origin) and Firefox (whose codebase is completely separate) indicates that the behaviour probably derives from the standards. However, I have discovered an easy workaround. Set overflow: hidden on #grid h2, and it behaves as per the flow layout. #wrapper { max-inline-size: 25ch; margin-inline: auto; word-wrap: break-word; hyphens: auto; } #grid, #flow { padding: 1em; background-color: oldlace; } #flow { margin-block-start: 2em; } .tag { padding: 0.25em; background-color: azure; inline-size: min-content; font-family: monospace; } #grid { display: grid; gap: 1em; } #grid h2 { overflow: hidden; } grid This is a long headline with a verysuperlongtimeword Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tortor nisl, sagittis ac lectus et, blandit varius leo. Sed vel finibus nunc. Nam ipsum mi, mattis quis cursus id, hendrerit tristique dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis eu placerat quam, vitae pretium tellus. Sed consequat tellus eu diam commodo, quis ultricies libero ultrices. Praesent nec ipsum venenatis, semper magna at, pretium tortor. Aliquam tempus lectus iaculis lacus pretium sollicitudin. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse dictum, felis eu pulvinar scelerisque, risus diam rutrum velit, vel lacinia leo risus vel purus. Integer ipsum justo, auctor eu volutpat non, pellentesque a est. Maecenas sollicitudin fermentum mauris, egestas viverra augue congue vitae. Nam non nisi urna. Nullam non cursus orci. flow This is a long headline with a verysuperlongtimeword Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tortor nisl, sagittis ac lectus et, blandit varius leo. Sed vel finibus nunc. Nam ipsum mi, mattis quis cursus id, hendrerit tristique dui. Class aptent taciti soci…
type: Answer

http://stackoverflow.com/comment/139315919
type: QuestionComment
has text: @mrconcerned i have removed the need for a password
comment on: http://stackoverflow.com/q/79012618
type: Comment
score: 0

http://stackoverflow.com/q/78932990
score: -1
has body: I've started to get into web development and decided to just do projects on my own instead of odin project and freecodecamp but ive ran into a weird simnmple issue that i cannot get my css to be viewed in the live server extension of VSC. The error in the console is "Refused to apply style from 'http://127.0.0.1:5500/styles.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled." I'm sure its just some stupid thing but im pretty sure everything is linked correctly, but I'm not to sure. ive tried using other ways to connect my css to the html but to no avail.
tagged with: liveserver
tagged with: visual-studio-code
has title: Cant get my CSS to be viewed in live server
tagged with: css
downvote count: 1
accepted answer: http://stackoverflow.com/a/78933059
upvote count: 0
favorite count: 0
type: Question
tagged with: http://stackoverflow.com/tag/html
answer count: 1
type: AnsweredQuestion
has answer: http://stackoverflow.com/a/78933059

http://stackoverflow.com/q/79007799
type: Question
tagged with: tailwind-css
tagged with: typescript
score: 0
tagged with: javascript
duplicate of: http://stackoverflow.com/q/53730877
tagged with: next.js
has title: How do I style a volume slider created using range:input
has body: WHERE I USED MY RANGE INPUT AS VOLUME SLIDER <RangeInput min={0} max={1} step="any" value={volume} onChange={(e: BaseSyntheticEvent) => { if (video) { setVolume(e.target.valueAsNumber); video.volume = e.target.valueAsNumber; handleVolumeLevel(); } }} onClick={handleVolumeBarClick} ref={volumeBarContainerRef} containerClassName={showVolume ? "w-16 scale-x-100" : "w-0 scale-x-0"} // containerWidth={64} /> WHERE I SET UP MY RANGE INPUT FOR ANY INPUT SLIDER import React, { BaseSyntheticEvent, RefObject } from 'react'; interface RangeInputProps { min?: number; max?: number; value: number; step?: string; onChange?: (e: BaseSyntheticEvent) => void; containerClassName?: string; className?: string; onClick?: (e: React.MouseEvent<HTMLInputElement>) => void; ref?: RefObject<HTMLInputElement> } export const RangeInput: React.FC<RangeInputProps> = ({ min = 0, max = 100, value, step, onChange, containerClassName, //set the width of the container and optionally the scale className, onClick, ref, }) => { return ( <> </> ); }; MY CSS FOR ALL RANGE INPUT input[type="range"] { width: 100%; height: max-content; appearance: none; cursor: pointer; border: none; -webkit-appearance: none; } input[type="range"]::-webkit-slider-runnable-track { background-color: #fff; height: 2px; border-radius: 50px; } input[type="range"]::-moz-range-track { background-color: #fff; height: 2px; border-radius: 50px; } input[type="range"]::-webkit-slider-runnable-track:hover { height: 3px; border-radius: 50px; } input[type="range"]::-moz-range-track:hover { height: 3px; border-radius: 50px; } input[type="range"]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; background-color: #5229E1; height: 10px; width: 10px; border-radius: 100%; margin-top: -4px; } input[type="range"]::-moz-range-thumb { background-color: #5229E1; height: 10px; width: 10px; border-radius: 100%; } I was trying to customize my volume slider. It works fine but I want to make the background to the left side of the thumb pu…
tagged with: css
answer count: 0
linked to: http://stackoverflow.com/q/53730877
has comment: http://stackoverflow.com/comment/139307717
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139307513

http://stackoverflow.com/comment/139202117
comment on: http://stackoverflow.com/a/78950845
type: Comment
score: 0
type: AnswerComment
has text: The HTML in the question has two datepickers, one for start and the other for end, not one datepicker to select a range.

http://stackoverflow.com/comment/139301112
has text: @CarstenCodes is there a chance you could help me with that comment? I tried something like that before and that did not work either
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/79000488

http://stackoverflow.com/comment/139501413
comment on: http://stackoverflow.com/a/79036586
has text: Yeah that was the problem I was trying to solve If I don't add padding then it looks pretty ugly with the shadow and color change as the text is so close to the border.
type: Comment
score: 0
type: AnswerComment

http://stackoverflow.com/comment/139397416
type: QuestionComment
has text: hey there, if anyone could be kind enough to view this on chrome on iOS - it happens every time when I test. If you just let it run, after a few seconds - when the text is about to repeat - it stutters and or flashes. - it only happens on iOS, it's fine on chrome desktop and android. Any tips appreciated, super confused by this. I've read about using webkit code lines in CSS / hardware acceleration nothing seems to help.
comment on: http://stackoverflow.com/q/79052612
type: Comment
score: 0

http://stackoverflow.com/comment/139325831
type: Comment
score: 0
type: QuestionComment
has text: Is this program is working on Opera browser?
comment on: http://stackoverflow.com/q/79017763

http://stackoverflow.com/q/78915642
score: 0
tagged with: expo
answer count: 0
tagged with: react-native
tagged with: css
has title: How can I make text overflow without ellipse
type: UnansweredQuestion
type: Question
has body: I need to display some text that is rotated 90 degrees. The text is inside a container, but when rotated, it's being cut off even though there's enough space in the container for it to be fully visible. This is because there is not enough space for the text when it is horizontal. Here is the relevant part of my code import React from 'react'; import { View, Text, StyleSheet } from 'react-native'; const OverflowTextExample = ({ habit }) => { return ( {habit.genre} ); }; const styles = StyleSheet.create({ habitCard: { flexDirection: 'row', }, habitLabel: { width: 50, // Adjusted width height: 200, // Adjusted height backgroundColor: '#DD9211', justifyContent: 'center', alignItems: 'center', position: 'relative', overflow: 'visible', // Allows overflow }, habitLabelText: { position: 'absolute', transform: [{ rotate: "-90deg" }], color: "#FFFFFF", fontWeight: "700", fontSize: 12, }, }); I have tried setting the position to absolute but the text stays the same, I have tried to change the ellipseMode but nothing has worked so far. This is the desired output Desired Output and this is what is happening in my code I have searched for alternatives for turning off text wrapping and tried setting whiteSpace: 'nowrap' but that didn't work either. Any tips is highly appreciated, thanks!

http://stackoverflow.com/q/78938577
answer count: 1
type: AnsweredQuestion
accepted answer: http://stackoverflow.com/a/78938629
score: 0
tagged with: http://stackoverflow.com/tag/html
has answer: http://stackoverflow.com/a/78938629
linked to: http://stackoverflow.com/q/32661535
has body: I have a flex container with two items: an image, and a div containing text and a search box. If the window is sufficiently wide I want the text div to appear to the right of the image, wrapping the text and narrowing the search box as needed. If the window isn't sufficiently wide (like an phone held vertically), I want the text div to appear underneath the image. I've been able to make the display wrap from side-to-side to one-atop-the-other, but it doesn't try to narrow the text box before it wraps it below the image. body { background-color: #dbd2c3; font-family: Arial, Helvetica, sans-serif; font-size: 80%; } .hdr-container { display: flex; flex-wrap: wrap; outline: 2px solid #e73; } .logo-div { margin-right: 1em; /* gap for not wrapped */ margin-bottom: 1em; /* gap for wrapped */ outline: 2px solid green; } .logo-img { max-width:100%; /* prevent clipping in narrow viewport */ object-fit: scale-down; /* shrink as needed to maintain max-width */ } .menu-div { align-self: center; outline: 2px solid yellow; } .menu-div p { margin: 0; outline: 2px solid cyan; } .search-div { margin-top: 1em; width: 400px; //min-width: 200px; } .search-text { border-radius: 6px; } &lt;head&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="hdr-container"&gt; &lt;div class="logo-div"&gt; &lt;img src="https://picsum.photos/400/175" alt="header" class="logo-img" title="home" border="1"&gt; &lt;/div&gt; &lt;div class="menu-div"&gt; &lt;p&gt; &lt;strong&gt;SETLISTS:&amp;nbsp Lorem ipsum&amp;nbsp;| odor amet&amp;nbsp;| consectetuer adipiscing elit&amp;nbsp;| Senectus aliquet&amp;nbsp;| tempor laoreet &lt;/p&gt; &lt;p&gt; GALLERIES:&amp;nbsp; Lorem ipsum&amp;nbsp;| odor amet&amp;nbsp;| consectetuer adipiscing elit&amp;nbsp;| Senectus aliquet&amp;nbsp;| tempor laoreet &lt;/p&gt; &lt;p&gt; STUFF:&amp;nbsp;…
has comment: http://stackoverflow.com/comment/139180072
tagged with: css
has title: How to make side-by-side divs in flex container wrap their contents before wrapping themselves
type: Question
tagged with: flexbox

http://stackoverflow.com/comment/139225364
has text: @Paulie_D No, this is what I want.
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78962714

http://stackoverflow.com/q/78994423
answer count: 1
type: AnsweredQuestion
has answer: http://stackoverflow.com/a/78994510
score: 0
has title: Pure CSS - Responsive div depending on added text
upvote count: 1
tagged with: pure-css
tagged with: css
has body: I have this angular material code: &lt;mat-form-field&gt; &lt;div class=&quot;mat-mdc-text-field-wrapper mdc-text-field mdc-text-field--outlined mdc-text-field--invalid&quot;&gt;...&lt;/div&gt; &lt;div class=&quot;mat-mdc-form-field-subscript-wrapper mat-mdc-form-field-bottom-align&quot;&gt; &lt;div class=&quot;mat-mdc-form-field-error-wrapper&quot;&gt; &lt;mat-error class=&quot;mat-mdc-form-field-error mat-mdc-form-field-bottom-align&quot;&gt; Your username must be at least 8 characters long and should not contain spaces and the following characters \ &amp;lt; &amp;gt; ; &lt;/mat-error&gt; &lt;/div&gt; &lt;/div&gt; &lt;/mat-form-field&gt; and what I would like to do is that when error message is displayed adapt the height of the &quot;mat-mdc-form-field-subscript-wrapper&quot; div to the height of the error message. Any idea? This is what I have This is what I want
downvote count: 1
accepted answer: http://stackoverflow.com/a/78994510
has comment: http://stackoverflow.com/comment/139282820
favorite count: 0
type: Question
tagged with: angular-material

http://stackoverflow.com/q/79026163
has body: I have a footer at the bottom of my page, where I want the following: Be all the way at the bottom after the content of the page Be at the bottom of the screen if there's not enough content to fill the page I am using React with Material UI I've found some guides using the height of the footer as a buffer, but that requires hardcoding that height. (Such as where I got the picture: link.) I've also found guides using flexbox, and while that seems easy enough, I can't get it to work within react. I've tried this example. Code: import type { Metadata } from "next"; import "./globals.css"; import { AppRouterCacheProvider } from "@mui/material-nextjs/v13-appRouter"; import Box from "@mui/material/Box"; import { AppBar, Typography } from "@mui/material"; export const metadata: Metadata = { title: "Footer example", description: "How can footers be hard?" }; export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) { return ( <AppRouterCacheProvider> <AppBar sx={{ height: "80px" }} /> {children} Example footer! </AppRouterCacheProvider> ); } Any idea what I'm doing wrong here?
tagged with: reactjs
tagged with: material-ui
has comment: http://stackoverflow.com/comment/139340878
tagged with: css
answer count: 0
tagged with: footer
type: UnansweredQuestion
has title: React with MUI: How to build a footer
has comment: http://stackoverflow.com/comment/139342333
type: Question
score: 0
has comment: http://stackoverflow.com/comment/139342509

http://stackoverflow.com/a/78997948
has comment: http://stackoverflow.com/comment/139289731
has comment: http://stackoverflow.com/comment/139289743
type: AcceptedAnswer
has body: You will need a custom solution to create this effect. For example, I added a ::before element to each container with the same sticky value and height of the header, so every time the header goes over a container, there is a sliver of just the background color in between. it's not the most straightforward and has some constraints but it will work. (open in full page to make it work with the img as well) :root { --navbar-height: 50px; } .navbar { background-color: white; color: black; font-size: 24px; font-weight: bold; position: sticky; top: 0; height: var(--navbar-height); z-index: 10; display: flex; align-items: center; justify-content: center; mix-blend-mode: difference; } .below-navbar { position: absolute; top: 0; height: 200px; width: 100vw; background-color: white; z-index: -1; } .img { width: 250px; height: 250px; object-fit: cover; } .black-container, .white-container { height: 100vh; background-color: var(--bg-color); color: var(--text-color); display: flex; flex-direction: column; justify-content: center; align-items: center; } .black-container { --bg-color: black; --text-color: white; } .white-container { --bg-color: white; --text-color: black; } .black-container:before, .white-container:before { content: ''; display: block; position: sticky; top: 0; height: var(--navbar-height); width: 100%; background: var(--bg-color); z-index: 5; } TEXT IN THE NAVBAR An image I do not want to blend into the navbar: Some text I do not want to blend into the navbar Some text I do not want to blend into the navbar Some text I do not want to blend into the navbar
type: Answer
score: 0
answers question: http://stackoverflow.com/q/78997146
accepted answer of: http://stackoverflow.com/q/78997146

http://stackoverflow.com/comment/139224181
score: 0
type: Comment
type: QuestionComment
comment on: http://stackoverflow.com/q/78962714
has text: And I want the text to remain in one line - so things like `overflow-wrap: anywhere;` are non-solutions.

http://stackoverflow.com/a/78940287
has body: You can use toggleClass to keep track of the visibility and add a transition to it. $("button").click(function() { $("#menu").toggleClass("visible"); }); #menu { font-weight: 700; margin-left: -50%; transition: margin-left 800ms cubic-bezier(0.68, -0.55, 0.27, 1.55); } #menu.visible { margin-left: 0%; } Show Menu Lorem ipsum dolor sit amet
answers question: http://stackoverflow.com/q/78940245
downvote count: 0
accepted answer of: http://stackoverflow.com/q/78940245
upvote count: 1
score: 1
has comment: http://stackoverflow.com/comment/139191502
type: AcceptedAnswer
type: Answer

input
tags question: http://stackoverflow.com/q/78966903
type: Tag
tags question: http://stackoverflow.com/q/79057467
tags question: http://stackoverflow.com/q/79027496
tags question: http://stackoverflow.com/q/78984992
tag name: input
tags question: http://stackoverflow.com/q/78944574
tags question: http://stackoverflow.com/q/78997251
tags question: http://stackoverflow.com/q/79016259
tags question: http://stackoverflow.com/q/79304169
tags question: http://stackoverflow.com/q/79398269
tags question: http://stackoverflow.com/q/79283413
tags question: http://stackoverflow.com/q/79297003
tags question: http://stackoverflow.com/q/79296636
tags question: http://stackoverflow.com/q/79361300
tags question: http://stackoverflow.com/q/79479203
tags question: http://stackoverflow.com/q/79467323

primeng-table
tag name: primeng-table
tags question: http://stackoverflow.com/q/79057837
type: Tag

http://stackoverflow.com/a/79055029
answers question: http://stackoverflow.com/q/79054912
has comment: http://stackoverflow.com/comment/139393788
accepted answer of: http://stackoverflow.com/q/79054912
type: AcceptedAnswer
has comment: http://stackoverflow.com/comment/139393441
has body: Use clip path. I can't use MudIcon in snippet so these round s are only for demonstration. In your code just set --width and apply the clip-path on your icons: .icon { display: inline-block; width: 1.5em; height: 1.5em; position: relative; } .icon::before { content: ''; position: absolute; inset: 0; display: block; border: 1px solid red; border-radius: 50%; } .icon::after { content: ''; position: absolute; inset: 0; display: block; background: red; border-radius: 50%; clip-path: inset(0 calc(100% - var(--width, 0%)) 0 0); } Edit: More explanation The clip-path CSS property is a way to visually limit an element to a specific region, sort of like a stencil. It's very similar to the <clipPath> element in SVG, but since it's an CSS property, it can access CSS variables (aka custom properties). So I also combine it with --width (a custom property, you can name it whatever you want) to dynamically construct a clip rectangle based on the desired width. inset() means distant from 4 edges of its original box. It has similar syntax to other box-related property, so the calc(100% - var(--width, 0%)) means distant from right edge equals 100% minus --width (if --width is missing, default to 0%). Check the linked MDN page, they have more details and examples.
type: Answer
score: 0

http://stackoverflow.com/q/79038945
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139364099
favorite count: 0
type: Question
answer count: 1
score: -1
has title: How can I make a fixed CSS element stay within the boundaries of its parent without overflowing?
has answer: http://stackoverflow.com/a/79039010
tagged with: css
has body: I have a full-page layout with a sticky footer at the bottom. Within this layout, there’s a vertical white separator that spans the entire height of the content area, which works perfectly. Additionally, I have a fixed-position red separator that covers 50% of the content height, and that also functions as intended. However, I want the red separator to be hidden when scrolling to the bottom of the page, just like the white line, so it doesn’t extend beyond the content area. I've tried several approaches, including nesting the fixed element inside an absolutely positioned container and applying overflow: hidden; to the content area, but the red line continues to overflow. Is there a way to achieve this solely with HTML and CSS?
downvote count: 1
has comment: http://stackoverflow.com/comment/139364610
upvote count: 0

http://stackoverflow.com/comment/139202905
type: QuestionComment
comment on: http://stackoverflow.com/q/78951136
type: Comment
has text: I've encountered this a few times. I think it’s related to incorrect usage, but since I don’t remember the exact cases, provide an example where you experienced it, and then I might be able to answer.
score: 0

http://stackoverflow.com/q/79064015
favorite count: 0
has comment: http://stackoverflow.com/comment/139410190
tagged with: http://stackoverflow.com/tag/html
type: Question
has answer: http://stackoverflow.com/a/79082352
answer count: 1
has comment: http://stackoverflow.com/comment/139412862
has comment: http://stackoverflow.com/comment/139410706
has comment: http://stackoverflow.com/comment/139409979
type: AnsweredQuestion
score: -1
tagged with: javascript
has comment: http://stackoverflow.com/comment/139410460
has comment: http://stackoverflow.com/comment/139417684
tagged with: css
has comment: http://stackoverflow.com/comment/139417731
accepted answer: http://stackoverflow.com/a/79082352
downvote count: 1
has comment: http://stackoverflow.com/comment/139417746
tagged with: google-sheets
has comment: http://stackoverflow.com/comment/139417690
has body: Is anyone here who can help improve my script? I want the results to be more visually presentable. Is is possible to include in HTML code? function showAEdata() { var ui = SpreadsheetApp.getUi(); var input = ui.prompt("Please enter your First Name and Last Name.", ui.ButtonSet.OK_CANCEL); if (input.getSelectedButton() == ui.Button.OK) { var ss = SpreadsheetApp.getActiveSpreadsheet(); var ws = ss.getSheetByName("Monitoring (Database)"); var data = ws.getRange("A2:X" + ws.getLastRow()).getValues(); var userSelectedRep = input.getResponseText().toLowerCase(); var newData = data.filter(function (r) { return r[6].toLowerCase() == userSelectedRep; }); var yearInput = ui.prompt("Please enter the year (e.g., 2024):", ui.ButtonSet.OK_CANCEL); if (yearInput.getSelectedButton() == ui.Button.OK) { var selectedYear = yearInput.getResponseText(); var filteredYearData = newData.filter(function (r) { var date = new Date(r[5]); return date.getFullYear() == selectedYear; }); var selectedColumns = filteredYearData.map(function (r) { return [r[1], r[2], r[4], r[5], r[9], r[10], r[11], r[17]]; }); if (filteredYearData.length > 0) { var newWs = ss.insertSheet(userSelectedRep); var headers = ["INSTITUTION", "MONTH", "JO NUMBER", "DATE RELEASED", "TYPE OF USER", "PLATFORM", "TYPE OF ACCESS", "NUMBER OF ACCESS CODE"]; newWs.getRange(4, 3, selectedColumns.length, selectedColumns[0].length).setValues(selectedColumns); newWs.getRange(3, 3, 1, headers.length).setValues([headeenter code herers]); } else { ui.alert("No matching data found for the entered year."); } } else { ui.alert("Year input canceled."); } } else { ui.alert("Operation Canceled."); } } This the current result of my Script I want to enhance it by using HTML etc. This is the code that I used for the charts. if (filteredYearData.length > 0) { var newWs = ss.insertSheet(userSelectedRep); var range = newWs.getRange("A2:H" + ws.getLastRow()); var chart = newWs.newChart() .setChartType(Charts.ChartType.BAR) // Set the chart type .addR…
has title: Enhancing Script for Better Visual Presentation
upvote count: 0
has comment: http://stackoverflow.com/comment/139443106

http://stackoverflow.com/q/78969855
answer count: 0
tagged with: ipad
type: UnansweredQuestion
type: Question
has comment: http://stackoverflow.com/comment/139237383
tagged with: ios
has body: EDIT: While he hasn't given me anything solid, the client says he thinks his iPad is running iOS 13. I've had this tested on 5 different iPads ranging from iOS 15-17. Is 13 still an expected iOS to accommodate these days? I am building a site in Angular (not sure it's relevant, but figured I'd mention it in case it is) and my client has shown me via video that when he scrolls to the bottom of the page on his iPad, it keeps going for at least a full screen's worth past the footer until he's looking at a solid screen of background color. I had him go to another site of mine also in Angular and it did the same thing. It didn't happen on some other public sites so that's why I'm wondering if Angular is relevant. This doesn't happen on my PC and I've tested it on 3 different iPads (I'm still trying to get out of him which version he has so I don't have that info quite yet) and it works fine everywhere I've seen. I get the little iOS bounce at the bottom, but not this excessive scroll. His site is still in development, but he saw it on the following live site of mine: https://www.grandmascookieshoppe.com I've looked around but haven't really found anyone detailing this exact issue. Thank you. Does this sound familiar to anyone
score: 0
tagged with: scroll
has title: Web page scrolling past bottom of page on iPad
tagged with: css

http://stackoverflow.com/q/79013530
score: 0
tagged with: css
has title: Vite WebFont loading error in Firefox: "downloadable font: rejected by sanitizer"
has answer: http://stackoverflow.com/a/79404046
tagged with: font-face
has body: I have my desired self hosted WebFont in the public folder of my project: And using them directly in the css: @font-face { font-family: OpenSans; src: url("fonts/OpenSans-Regular.woff2") format("woff2"), url("fonts/OpenSans-Regular.woff") format("woff"); } I use the default Vite config, with no extra plugins, etc. export default defineConfig({ plugins: [] server: { port: 3000, }, }); Just using npm start gives me the following result. In Chrome everything works as expected, and the Font is loaded: In Firefox it loads the fonts, but the content-type header seems wrong and it shows an error in the console, leading to the font not being used: How can i fix this issue for Firefox?
type: UnansweredQuestion
tagged with: firefox
type: Question
answer count: 1
tagged with: vite

http://stackoverflow.com/a/78916719
score: 1
accepted answer of: http://stackoverflow.com/q/78916675
has comment: http://stackoverflow.com/comment/139139346
type: AcceptedAnswer
type: Answer
answers question: http://stackoverflow.com/q/78916675
has body: Your button has no value, so it lead to a 0 width of your button. Just add some value to your button. For example click me .search-container button{ float: right; padding: 6px 10px; margin-top: 8px; margin-right: 16px; background: #ddd; font-size: 20px; border: none; cursor: pointer; } click me
downvote count: 0
upvote count: 1

http://stackoverflow.com/a/79020616
type: Answer
downvote count: 0
has body: You have a pattern that repeats each 8 elements so: .grid-container { display: grid; gap: 5px; justify-content: start; grid-auto-flow: dense; } .grid-container :nth-child(8n + 1), .grid-container :nth-child(8n + 2), .grid-container :nth-child(8n + 3), .grid-container :nth-child(8n + 4) { grid-column: 1; } .grid-container :nth-child(8n + 5), .grid-container :nth-child(8n + 6), .grid-container :nth-child(8n + 7), .grid-container :nth-child(8n + 8) { grid-column: 2; } .grid-container :nth-child(8n + 8) { margin-bottom: 5px; } a b c d e f g h i j k l m n o p q r And with some optimization: .grid-container { display: grid; gap: 5px; justify-content: start; grid-auto-flow: dense; } .grid-container > * { grid-column: 1; } .grid-container :is(:nth-child(8n + 5),:nth-child(8n + 6),:nth-child(8n + 7),:nth-child(8n)) { grid-column: 2; } .grid-container :nth-child(8n) { margin-bottom: 5px; } a b c d e f g h i j k l m n o p q r
answers question: http://stackoverflow.com/q/79020577
has comment: http://stackoverflow.com/comment/139334076
accepted answer of: http://stackoverflow.com/q/79020577
upvote count: 2
type: AcceptedAnswer
score: 2

http://stackoverflow.com/comment/139153868
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78920988
has text: Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer.

http://stackoverflow.com/comment/139171884
comment on: http://stackoverflow.com/a/78930911
score: 1
type: Comment
type: AnswerComment
has text: Pardon me, but this neither explains or illustrates a working approach.

http://stackoverflow.com/a/78980588
downvote count: 1
answers question: http://stackoverflow.com/q/78980450
upvote count: 0
type: Answer
score: -1
has body: Try this, mostly will work JSfiddle: https://jsfiddle.net/2e34tzjq/ const filterFormGroups = document.querySelectorAll('.filter-form__group'); filterFormGroups.forEach(group => { const inputs = group.querySelectorAll('input[type="checkbox"]'); const allDisabled = Array.from(inputs).every(input => input.disabled); if (allDisabled) { group.style.display = 'none'; } });

http://stackoverflow.com/comment/139361199
comment on: http://stackoverflow.com/a/79037432
type: Comment
score: 0
type: AnswerComment
has text: Thanks. I like that. A little more targeted than :not(:has(*)).

http://stackoverflow.com/q/78986363
has answer: http://stackoverflow.com/a/78986535
type: Question
tagged with: http://stackoverflow.com/tag/html
type: AnsweredQuestion
accepted answer: http://stackoverflow.com/a/78986573
has title: Shrink or expand image in a div in relation to window size
score: 0
answer count: 2
has body: So I have a div (row) divided into 2 other divs (columns). One column holds text and is styled with some SVG, and the other holds an image. I would like to have it so that, when the window gets smaller, all these elements get smaller with it - pretty much just your typical responsiveness. But, My row's height is more accommodating to the height of the text and prioritizing it not overflowing, so my image just maxes out with its native resolution. Now I think the solution doesn't really rely on the image to scale, but actually for the text to scale instead. I'm not exactly sure how to do that. I've tried using object-fit: cover for the img but I don't think it does what I hope it would. This is my code: .custom-text { font-family: montserrat,sans-serif; color: white; } .sky-header{ font-weight: 400; font-size: 80px; text-shadow: 3px 3px #373737; } .wthin{ font-weight: 100; font-size: 25px; } .wthinbigger{ font-weight: 100; font-size: 35px; } .sky-mask-right { position: relative; z-index: 1; margin-right: -18%; } .sky-curve-right{ height: 100%; background-image: linear-gradient(135deg,rgba(226, 75, 252, 1) 0%,rgb(146, 48, 163) 100%); } @media only screen and (min-width: 992px) { .sky-mask-right { clip-path:url(#sky-clip-right) } } .ratio-svg-right{ width: 50%; } .ratio-img-right{ width: 50%; } .sky-img{ width: 100%; height: auto; object-fit: cover; } .sky-content-right{ padding-left: 10%; padding-top: 1%; margin-right: 10%; } .sky-column{ float: left; width: 30%; } .sky-list-text{ font-weight: 200; } .col-equal-height{ display: flex; flex: 1; overflow: overlay; } li::marker { content: url(/heart.svg); content: url(#heart); content: url("data:image/svg+xml;charset=UTF-8, "); } TEXT TEXT_TEXT_ TEXT Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin erat libero, mattis mattis nisl quis, vehicula tincidunt sem. Phasellus sollicitudin
possible better answer: http://stackoverflow.com/a/78986535
tagged with: css
has comment: http://stackoverflow.com/comment/139268034
has answer: http://stackoverflow.com/a/78986573

http://stackoverflow.com/q/78990560
has comment: http://stackoverflow.com/comment/139275458
accepted answer: http://stackoverflow.com/a/78990582
score: 0
upvote count: 1
has comment: http://stackoverflow.com/comment/139275970
has body: Can anyone help me in placing a button at the end of a grid irrespective of the content. i have read all the question related to this but none clarifies my query. Please have a look at the code below and and answer my query. i shall be obliged if anyone can help me out and help me to learn as well. :root { --primary-color: #00605f; --secondary-color: #017479; --text-dark: #0f172a; --text-light: #94a3b8; --white: #ffffff; --hover-color: #e5e4e2; --max-width: 1400px; } .canister-a { background-color: var(--primary-color); color: var(--white); max-width: var(--max-width); border-radius: 7px; padding: 1%; margin: 2% auto; margin-top: 10px; display: flex; flex-direction: column; } .canister-a .content-d { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "pricing-card-a pricing-card-b pricing-card-c"; } .price-card-a { grid-area: pricing-card-a; border-right: 0.1px solid #ffffff; padding: 1.5rem; } .price-card-b { grid-area: pricing-card-b; border-right: 0.1px solid #ffffff; padding: 1.5rem; } .price-card-c { grid-area: pricing-card-c; padding: 1.5rem; } .price-card-a h2, .price-card-b h2, .price-card-c h2 { color: var(--white); font-weight: 400; background: var(--secondary-color); text-align: center; border-radius: 7px; } .price-card-a h4, .price-card-b h4, .price-card-c h4 { color: var(--white); font-size: 1.5rem; } .price-card-a span, .price-card-b span, .price-card-c span { margin: 0.2rem; } .content-d ul { list-style: none; } .content-d li { line-height: 1.5rem; margin-bottom: 10px; } .content-d button { padding: 0.75rem 2rem; outline: 1px solid var(--white); border: none; font-size: 1rem; font-weight: 600; color: var(--white); background-color: var(--primary-color); cursor: pointer; border-radius: 7px; } .content-d button > a { text-decoration: none; color: var(--white); } .content-d button:hover, .content-d button:focus { background: var(--secondary-color); } Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in port…
tagged with: css
has comment: http://stackoverflow.com/comment/139275590
duplicate of: http://stackoverflow.com/q/526035
possible better answer: http://stackoverflow.com/a/78990592
has comment: http://stackoverflow.com/comment/139305958
has answer: http://stackoverflow.com/a/78990598
has title: placing a button at the bottom of grid
downvote count: 1
has comment: http://stackoverflow.com/comment/139305742
linked to: http://stackoverflow.com/q/526035
answer count: 4
has answer: http://stackoverflow.com/a/78990582
favorite count: 0
tagged with: http://stackoverflow.com/tag/html
type: Question
has answer: http://stackoverflow.com/a/78990655
type: AnsweredQuestion
has answer: http://stackoverflow.com/a/78990592

http://stackoverflow.com/q/78940358
tagged with: http://stackoverflow.com/tag/html
downvote count: 0
has comment: http://stackoverflow.com/comment/139195023
has comment: http://stackoverflow.com/comment/139183202
tagged with: http://stackoverflow.com/tag/svg
tagged with: javascript
has body: I have an SVG file that primarily consists of paths and lines, used to render graphs within a Cordova application. After updating to the latest iOS 18 beta, I noticed that the parabolic graphs drawn using paths are not rendering correctly—they appear broken, especially at the ends. To further investigate, I transferred an HTML file containing the SVG elements to an iPad running iOS 18 beta 7 and opened it using the Files app. The issue persists, with the SVG paths appearing broken. If you zoom in on the components slightly, the problem becomes even more noticeable. What's puzzling is that this SVG renders perfectly across all major browsers, including Chrome, Firefox, Edge, and even on Safari on older iOS versions. The issue seems isolated to the latest iOS 18 beta. Has anyone else encountered similar issues with SVG rendering on iOS 18 beta? I've attached the HTML file for reference. I've attached an image preview of the broken SVG on the iPad running iOS 18 beta, as well as the HTML file for reference. Any insights or workarounds would be greatly appreciated! <g transform="translate(0,0) scale(1, 1)" class="lineholder"> </g> <g transform="translate(15, 400) scale(1, -1)" class="parabola_pathholder" style="z-index: 800;"> </g> <g transform="translate(15, 400) scale(1, -1)" class="zigbee_parabola_pathholder"></g> <g transform="translate(15, 400) scale(1, -1)" class="cu_pathholder" style="z-index: 500;"> </g> <g class="v-label-holder" transform="translate(-45,0)"> -90 -80 -70 -60 -50 -40 -30 -20 -10 0 Y- Axis (Num) </g> <g class="ssid-label-holder" transform="translate(-45,0)"> ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC BABC ABC ABC ABC ABC JABC ABC ABC ABC ABC BABC ABC BABC ABC </g> <g class="v-cu-label-holder interference"> 10% 20% 30% 40% 50% 60% 70% 80% 90% 100% Y-Asis (%) </g> <g transform="translate(0,0) scale(1, 1)" class="h-label-holder"> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 X-Axis </g>
upvote count: 1
answer count: 0
tagged with: css
has title: SVG Rendering Issues on iOS 18 Beta: Parabolic Graphs Breaking
type: UnansweredQuestion
score: 1
tagged with: ios18
favorite count: 0
type: Question

http://stackoverflow.com/a/78934162
upvote count: 1
answers question: http://stackoverflow.com/q/78934033
downvote count: 0
type: Answer
has body: after adding 2 more col tag with 100px width then it fit with 14 column else you can remove all colgroup it will automatically fit.
has comment: http://stackoverflow.com/comment/139203967
score: 1

http://stackoverflow.com/comment/139208156
type: Comment
comment on: http://stackoverflow.com/q/78954173
score: 2
has text: It wont be possible to tell anything without looking at your code. Please share the code for better understanding.
type: QuestionComment

http://stackoverflow.com/comment/139202129
score: 0
has text: Actually, I may be misunderstanding it. I guess it's just a single datepicker that shows two months at a time (this is a common style in airline and hotel reservation sites).
comment on: http://stackoverflow.com/a/78950845
type: AnswerComment
type: Comment

http://stackoverflow.com/comment/139357108
score: 0
type: QuestionComment
has text: @Paulie_D [`.siblings()`](https://api.jquery.com/siblings/) method belong to jQuery
type: Comment
comment on: http://stackoverflow.com/q/79035000

http://stackoverflow.com/a/79032111
has body: In your code, when click next or before buttons, you didn't allowed the action if the index is not available. But to make it like infinite loop, I allowed the action and updated currentIndex with first or last index of images. let currentIndex = 0; const prevBtn = document.querySelector('.prev'); const nextBtn = document.querySelector('.next'); const carouselInner = document.querySelector('.carousel-inner'); const totalImages = document.querySelectorAll('.carousel-inner img').length; function moveToSlide(index) { carouselInner.style.transition = 'transform 0.5s ease-in-out'; carouselInner.style.transform = `translateX(-${index * 66.66}%)`; } nextBtn.addEventListener('click', () =&gt; { currentIndex++; if (currentIndex &gt;= totalImages) { currentIndex = 0; } moveToSlide(currentIndex); }); prevBtn.addEventListener('click', () =&gt; { currentIndex--; if (currentIndex &lt; 0) { currentIndex = totalImages - 1; } moveToSlide(currentIndex); }); .banner-section { display: flex; justify-content: space-between; align-items: center; padding: 50px; background-color: #f9f9f9; } .text-content { width: 30%; } .category-label { color: #8a7f6e; font-weight: bold; margin-bottom: 10px; } .text-content h1 { font-size: 2rem; margin-bottom: 20px; } .text-content p { margin-bottom: 30px; } .view-all-btn { padding: 10px 20px; background-color: #000; color: #fff; border: none; cursor: pointer; font-size: 1rem; } .carousel { position: relative; width: 65%; overflow: hidden; } .carousel-inner { display: flex; transition: transform 0.5s ease-in-out; width: calc(75% * 1.5); } .carousel-inner img { width: calc(100% / 1.5); border-radius: 10px; margin-right: 10px; } .carousel-inner img:last-child { margin-right: 0; } .carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(0, 0, 0, 0.5); color: white; border: none; padding: 10px; cursor: pointer; font-size: 2rem; } .carousel-btn.prev { left: 10px; } .carousel-btn.next { right: 10px; } &lt;div class="banne…
answers question: http://stackoverflow.com/q/79031961
score: 0
has comment: http://stackoverflow.com/comment/139351498
has comment: http://stackoverflow.com/comment/139351472
type: Answer

http://stackoverflow.com/q/78955926
has comment: http://stackoverflow.com/comment/139244282
type: Question
tagged with: fonts
has comment: http://stackoverflow.com/comment/139215315
score: 0
tagged with: monospace
has comment: http://stackoverflow.com/comment/139212253
has comment: http://stackoverflow.com/comment/139213290
answer count: 0
has body: The SF Mono font is present on modern Macs, but I can't seem to target it in my CSS font stack for Chrome? It works just fine on Safari, but not in Chrome. I know ui-monospace doesn't work (yet) in Chrome, but neither do all these variations: font-family: 'SF mono', SFMono-Regular, ui-monospace, monospace; I even tried this to no avail: @font-face { font-family: SFMono-Regular; src: local("SFMono-Regular"); }
type: UnansweredQuestion
tagged with: css
tagged with: google-chrome
has title: How do I use SF Mono in Chrome?

http://stackoverflow.com/q/78926774
upvote count: 1
has comment: http://stackoverflow.com/comment/139158304
tagged with: css
has body: Here's what I'm trying to achieve: -when the elements become visible to the user, the scroll-driven rotate animation starts on them one-by-one,and all 3 elements become sticky (meaning that they do not disappear while the user is scrolling down) until the animation on the last one is finished. -when the animation is finished, the page returns to its normal behavior Executable code: This code doesn't make the elements sticky when needed. document.addEventListener('DOMContentLoaded', function() { const elements = document.querySelectorAll('.animation'); let delay = 0; const observer = new IntersectionObserver((entries) =&gt; { entries.forEach(entry =&gt; { if (entry.isIntersecting) { entry.target.style.animationDelay = `${delay}s`; entry.target.style.animationPlayState = 'running'; console.log('running'); // Add sticky class when the element is in view entry.target.classList.add('sticky'); delay += 2.5; // Increase delay for the next element observer.unobserve(entry.target); // Stop observing once the animation is triggered } }); }, { threshold: 0.5 }); // Trigger when 50% of the element is in view elements.forEach(element =&gt; { console.log('paused'); element.style.animationPlayState = 'paused'; // Pause animation until triggered observer.observe(element); // Remove sticky class after the animation ends element.addEventListener('animationend', () =&gt; { console.log('animationend') element.classList.remove('sticky'); }); }); }); .content { width: 75%; max-width: 800px; margin: 0 auto; } p, h1 { font-family: Arial, Helvetica, sans-serif; } h1 { font-size: 3rem; } p { font-size: 1.5rem; line-height: 1.5; } .animation { view-timeline: --subjectReveal block; animation-timeline: --subjectReveal; width: 200px; height: 200px; background-color: bisque; animation-iteration-count: 1; animation-name: mymove; animation-duration: 3s; position: relative; /* Normal position */ } .animation:nth-child(1) { animation-delay: calc(var(--subjectReveal) * 1); } .animation:nth-child(2) { …
has answer: http://stackoverflow.com/a/78928149
accepted answer: http://stackoverflow.com/a/78928149
score: 1
has comment: http://stackoverflow.com/comment/139158407
favorite count: 0
has comment: http://stackoverflow.com/comment/139158221
tagged with: css-animations
type: Question
tagged with: http://stackoverflow.com/tag/html
downvote count: 0
has comment: http://stackoverflow.com/comment/139158709
answer count: 1
has title: Make the element sticky untill the scroll driven animation is finished
type: AnsweredQuestion
tagged with: scroll
has comment: http://stackoverflow.com/comment/139158612
has comment: http://stackoverflow.com/comment/139158748
tagged with: javascript
has comment: http://stackoverflow.com/comment/139158690

http://stackoverflow.com/comment/139249287
type: AnswerComment
has text: remove the overflow-wrap: break-word; i have updated the code snippet
type: Comment
comment on: http://stackoverflow.com/a/78972203
score: 0

http://stackoverflow.com/q/79030661
tagged with: flexbox
has comment: http://stackoverflow.com/comment/139348691
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139348704
type: Question
has title: flex item not shrinking less than width
has comment: http://stackoverflow.com/comment/139348685
linked to: http://stackoverflow.com/q/36247140
score: 0
duplicate of: http://stackoverflow.com/q/36247140
has comment: http://stackoverflow.com/comment/139348717
answer count: 0
has body: I can't understand why aren't the cards shrinking post 300px. Based on my understanding of flexbox, if there is no available space, flex-shrink comes into play. What's interesting to me is that when i use flex-basis instead of width, it works perfectly fine and it shrinks normally; But when it is set to auto which if im not mistaken falls back to width, it just overflows the container width and i can't understand why there is no shrinking. I know that i can fix the overflow by using flex-wrap: wrap, but the problem is that i can't understand the behaviour. * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; margin: 0; min-height: 100vh; display: flex; flex-direction: column; } .header { height: 72px; background: darkmagenta; color: white; font-size: 32px; font-weight: 900; display: flex; align-items: center; padding-left: 16px; } .footer { height: 72px; background: #eee; color: darkmagenta; } .sidebar { width: 300px; background: royalblue; box-sizing: border-box; padding: 16px; flex-shrink: 0; } .card { border: 1px solid #eee; box-shadow: 2px 4px 16px rgba(0, 0, 0, .06); border-radius: 4px; width: 300px; flex: 0 1 auto; padding: 16px; } .footer { display: flex; align-items: center; justify-content: center; } .main-section { flex: 1; display: flex; } a { text-decoration: none; color: white; font-size: 24px; } .sidebar ul { list-style: none; display: flex; flex-direction: column; gap: 16px; } .cards { padding: 48px; display: flex; /* flex-wrap: wrap; */ gap: 32px; } MY AWESOME WEBSITE ⭐ - link one ‍♂️ - link two ️ - link three - link four Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, eveniet? Dolorem dignissimos maiores non delectus possimus dolor nulla repudiandae vitae provident quae, obcaecati ipsam unde impedit corrupti veritatis minima porro? Lorem ipsum dolor sit, amet consectetur adipisicing elit. …
tagged with: css
has comment: http://stackoverflow.com/comment/139348771

http://stackoverflow.com/comment/139267665
has text: Think about a layout like this: https://en.raceroms.com/car/audi/q3/u8-mk1-9-2011-2014 But the third column would contain 3 items, not just 2.
type: Comment
comment on: http://stackoverflow.com/q/78986368
type: QuestionComment
score: 0

http://stackoverflow.com/q/79031961
answer count: 1
has answer: http://stackoverflow.com/a/79032111
tagged with: javascript
score: 0
downvote count: 2
has comment: http://stackoverflow.com/comment/139351383
tagged with: css
has body: I have this carousel that shows some text on the left and a full image and half of the other. I need help to make my carousel infinite. That is, as I navigate with the next and previous buttons, the carousel flows infinitely, so that the carousel does not restart. I would appreciate any help. let currentIndex = 0; const prevBtn = document.querySelector('.prev'); const nextBtn = document.querySelector('.next'); const carouselInner = document.querySelector('.carousel-inner'); const totalImages = document.querySelectorAll('.carousel-inner img').length; nextBtn.addEventListener('click', () =&gt; { if (currentIndex &lt; totalImages - 1) { currentIndex++; carouselInner.style.transform = `translateX(-${currentIndex * 66.66}%)`; } }); prevBtn.addEventListener('click', () =&gt; { if (currentIndex &gt; 0) { currentIndex--; carouselInner.style.transform = `translateX(-${currentIndex * 66.66}%)`; } }); .banner-section { display: flex; justify-content: space-between; align-items: center; padding: 50px; background-color: #f9f9f9; } .text-content { width: 30%; } .category-label { color: #8a7f6e; font-weight: bold; margin-bottom: 10px; } .text-content h1 { font-size: 2rem; margin-bottom: 20px; } .text-content p { margin-bottom: 30px; } .view-all-btn { padding: 10px 20px; background-color: #000; color: #fff; border: none; cursor: pointer; font-size: 1rem; } .carousel { position: relative; width: 65%; overflow: hidden; } .carousel-inner { display: flex; transition: transform 0.5s ease-in-out; width: calc(75% * 1.5); } .carousel-inner img { width: calc(100% / 1.5); border-radius: 10px; margin-right: 10px; } .carousel-inner img:last-child { margin-right: 0; } .carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(0, 0, 0, 0.5); color: white; border: none; padding: 10px; cursor: pointer; font-size: 2rem; } .carousel-btn.prev { left: 10px; } .carousel-btn.next { right: 10px; } &lt;div class="banner-section"&gt; &lt;div class="text-content"&gt; &…
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139351459
has title: Make infinite carousel
favorite count: 0
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139351148
type: Question
upvote count: 2

http://stackoverflow.com/q/78923710
has comment: http://stackoverflow.com/comment/139152796
answer count: 1
type: AnsweredQuestion
has answer: http://stackoverflow.com/a/78923806
accepted answer: http://stackoverflow.com/a/78923806
has comment: http://stackoverflow.com/comment/139152451
linked to: http://stackoverflow.com/q/57339302
has comment: http://stackoverflow.com/comment/139152494
has comment: http://stackoverflow.com/comment/139153210
has comment: http://stackoverflow.com/comment/139152442
linked to: http://stackoverflow.com/q/6996632
downvote count: 0
tagged with: css
has comment: http://stackoverflow.com/comment/139153194
has title: How are fonts substituted in CSS font-family
upvote count: 1
tagged with: fonts
has body: Recently, I've stumbled upon a code like this: span { font-family: Helvetica, 'Segoe UI'; } Lorem ipsum I don't have Helvetica on my computer but Segoe UI is present, so the expected outcome is that the text will be rendered using Segoe. However, Arial is used (as verified in the DevTools). After some playing, I'm sure that my browser treats Helvetica entry as if it was Arial, so the font-picking process stops there – at an unexisting font. How is it decided? Are there any font substitution lists? I can't find anything like this in the CSS Fonts Module spec. It happens both in Chromium Edge and Firefox, on Windows 11.
score: 1
favorite count: 0
has comment: http://stackoverflow.com/comment/139153185
type: Question
duplicate of: http://stackoverflow.com/q/57339302

http://stackoverflow.com/a/78985201
type: Answer
score: 0
has body: You can set the variables of angular material, to suit your desired style. There was a bug which caused the calendar icon to be hidden - github issue To fix this we need display: block. Please try out the below CSS. SCSS: .custom-height { --mat-form-field-container-height: 30px; --mat-form-field-container-vertical-padding: 5px; .mat-mdc-input-element::-webkit-calendar-picker-indicator { display: block; } } HTML: some error Stackblitz Demo
answers question: http://stackoverflow.com/q/78984992

http://stackoverflow.com/a/79061626
type: Answer
downvote count: 4
answers question: http://stackoverflow.com/q/79061543
has body: either add overflow:hidden to your button, it will keep the max-height and cut your description accordingly, or remove the button css completely so all buttons will take the same height as the one with the largest description. .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); grid-auto-rows: 1fr; gap: 10px; } Button 1 Description 1 Button 2 Description 2 Button 3 Description 3 Description 3 Description 3 Description 3 Description 3 Button 4 Description 4 Button 5 Description 5 Button 6 Description 6
upvote count: 0
score: -4

http://stackoverflow.com/comment/139252715
score: 0
type: AnswerComment
has text: I doubt i understand the problem very well. Can you give me more information about it. Its hard to understand from the image you posted.
comment on: http://stackoverflow.com/a/78976492
type: Comment

http://stackoverflow.com/a/78912790
has comment: http://stackoverflow.com/comment/139132410
answers question: http://stackoverflow.com/q/78912766
type: Answer
has body: Besides using position:absolute suggested by @Meet, one possible way to display text or even html content in the svg tag is through foreignObject tags. Using your codes, import React from "react"; import "../styles/About.css"; const About = () => { return ( We serve in following technologies Reactjs Wordpress PHP /* REMARK: Use the `foreignObject` tag, with manual `width` and `height` properties */ The text or HTML content you want to display, right here. ); }; export default About; Through this method, you can even embed forms or other html tags inside the svg. For example, const About = () => { return ( /* ...other content */ /* ...other content */ ); } P.S.1 For the scope that foreignObject tag can support, check this: What can be rendered in foreignObject element when SVG is embedded in HTML5? P.S.2 For using plain JavaScript methods to embed texts in svg, check this: how to change svg text tag using javascript innerHTML
score: 0
has comment: http://stackoverflow.com/comment/139132376
has comment: http://stackoverflow.com/comment/139132382
has comment: http://stackoverflow.com/comment/139132394
has comment: http://stackoverflow.com/comment/139132390

http://stackoverflow.com/q/78993233
type: AnsweredQuestion
has answer: http://stackoverflow.com/a/78997503
tagged with: itext
upvote count: 1
tagged with: css
tagged with: html2pdf
accepted answer: http://stackoverflow.com/a/78997503
score: 1
favorite count: 0
tagged with: android
type: Question
has body: Hi I try to use itext library (html2pdf) to convert my html into a PDF. Almost everything is fine except for SVG style. This is the part of my html that doesn't work : <path class="darkable" d="PATH" style="stroke-width:.264583;fill-opacity:1" transform="translate(-66.675 -125.148)"/> I tried to apply the style inline and it worked BUT for internal reasons (HTML is generated dynamically and I can't set style in inline, this criteria is not questionable btw) I need it to be under style tag. If you have any idea why and how to fix that I would glad to read you ! PS : this is how I convert my html val dir = createPDFReportDirectory() val pdfFile = File(dir, "$name.pdf").apply { createNewFile() } val pdfWriter = PdfWriter("$dir/$name.pdf") val pdfDocument = com.itextpdf.kernel.pdf.PdfDocument(pdfWriter) val inputStream = ByteArrayInputStream(html.toByteArray()) HtmlConverter.convertToPdf(inputStream, pdfDocument)
has title: Android Itext HTML to PDF CSS on SVG work only in inline
answer count: 1
downvote count: 0

http://stackoverflow.com/comment/139352354
has text: I have one question why setting `right:0` is not wokeing why we have to make `left:40%` and also why you have removed `display:grid` from `.content` class, could you please add that explanation? Thank you :)
type: AnswerComment
comment on: http://stackoverflow.com/a/79029558
type: Comment
score: 0

jquery
tags question: http://stackoverflow.com/q/79055349
tags question: http://stackoverflow.com/q/79006902
tags question: http://stackoverflow.com/q/78975874
tags question: http://stackoverflow.com/q/79007335
tags question: http://stackoverflow.com/q/78953159
tags question: http://stackoverflow.com/q/79024254
tags question: http://stackoverflow.com/q/78944147
tags question: http://stackoverflow.com/q/79054875
tags question: http://stackoverflow.com/q/78999352
tags question: http://stackoverflow.com/q/78960154
tags question: http://stackoverflow.com/q/78906077
tags question: http://stackoverflow.com/q/79044235
tags question: http://stackoverflow.com/q/78914182
tags question: http://stackoverflow.com/q/79035218
tags question: http://stackoverflow.com/q/78928853
tags question: http://stackoverflow.com/q/78940245
tags question: http://stackoverflow.com/q/79033378
tags question: http://stackoverflow.com/q/79033436
tags question: http://stackoverflow.com/q/78960221
type: Tag
tags question: http://stackoverflow.com/q/78937649
tags question: http://stackoverflow.com/q/78938538
tag name: jquery
tags question: http://stackoverflow.com/q/78950799
tags question: http://stackoverflow.com/q/78924311
tags question: http://stackoverflow.com/q/78991428
tags question: http://stackoverflow.com/q/79058968
tags question: http://stackoverflow.com/q/79028680
tags question: http://stackoverflow.com/q/79035000
tags question: http://stackoverflow.com/q/78912664
tags question: http://stackoverflow.com/q/79069976
tags question: http://stackoverflow.com/q/79178872
tags question: http://stackoverflow.com/q/79151916
tags question: http://stackoverflow.com/q/79072402
tags question: http://stackoverflow.com/q/79199870
tags question: http://stackoverflow.com/q/79086933
tags question: http://stackoverflow.com/q/79217632
tags question: http://stackoverflow.com/q/79225816
tags question: http://stackoverflow.com/q/79092106
tags question: http://stackoverflow.com/q/79163571
tags question: http://stackoverflow.com/q/79230576
tags question: http://stackoverflow.com/q/79150846
tags question: http://stackoverflow.com/q/79223789
tags question: http://stackoverflow.com/q/79230368
tags question: http://stackoverflow.com/q/79091588
tags question: http://stackoverflow.com/q/79142155
tags question: http://stackoverflow.com/q/79213143
tags question: http://stackoverflow.com/q/79151566
tags question: http://stackoverflow.com/q/79243929
tags question: http://stackoverflow.com/q/79241708
tags question: http://stackoverflow.com/q/79073058
tags question: http://stackoverflow.com/q/79220240
tags question: http://stackoverflow.com/q/79235776
tags question: http://stackoverflow.com/q/79214880
tags question: http://stackoverflow.com/q/79106473
tags question: http://stackoverflow.com/q/79121102
tags question: http://stackoverflow.com/q/79098178
tags question: http://stackoverflow.com/q/79156750
tags question: http://stackoverflow.com/q/79269941
tags question: http://stackoverflow.com/q/79406920
tags question: http://stackoverflow.com/q/79360370
tags question: http://stackoverflow.com/q/79410056
tags question: http://stackoverflow.com/q/79330891
tags question: http://stackoverflow.com/q/79390753
tags question: http://stackoverflow.com/q/79325278
tags question: http://stackoverflow.com/q/79323602
tags question: http://stackoverflow.com/q/79385548
tags question: http://stackoverflow.com/q/79412564
tags question: http://stackoverflow.com/q/79267610
tags question: http://stackoverflow.com/q/79296693
tags question: http://stackoverflow.com/q/79275057
tags question: http://stackoverflow.com/q/79366941
tags question: http://stackoverflow.com/q/79371804
tags question: http://stackoverflow.com/q/79369348
tags question: http://stackoverflow.com/q/79338752
tags question: http://stackoverflow.com/q/79296047
tags question: http://stackoverflow.com/q/79326009
tags question: http://stackoverflow.com/q/79268645
tags question: http://stackoverflow.com/q/79337700
tags question: http://stackoverflow.com/q/79257818

http://stackoverflow.com/q/78998768
answer count: 1
type: AnsweredQuestion
accepted answer: http://stackoverflow.com/a/78998820
tagged with: javascript
has title: How to change content in an onclick function for all elements inside a button tag?
tagged with: loops
tagged with: css
has body: I have a layout where if the image and/or text are clicked, then it populates different information below it. If I have an img and paragraph inside the button, it will only work if you click anywhere OUTSIDE the img and h tag. It also only works if there is nothing inside the button tag except for plain text for some reason (no p tag, no header, etc). I'm not well versed with JavaScript so my question is: why is my JavaScript not allowing me to click on the content inside the button to populate the info below it, and only outside of it? Do I need to make the button into a div tag instead? const wmButton = document.querySelector("button"); const tabs = document.querySelector(".wrapper"); const tabButton = document.querySelectorAll( " .tab-button, .toggle-text, .toggle-img" ); const contents = document.querySelectorAll(".content"); const wmWhiteBg = document.querySelector(".workmarket-active-bg"); if (tabs) { tabs.onclick = (e) => { const id = e.target.dataset.id; if (id) { tabButton.forEach((btn) => { btn.classList.remove("active"); }); e.target.classList.add("active"); contents.forEach((content) => { content.classList.remove("active"); }); const element = document.getElementById(id); element.classList.add("active"); } }; } #tab-toggle--workmarket .container, #tab-toggle--profservices .container { margin: 30px auto; } #tab-toggle--workmarket #tab1, #tab-toggle--workmarket #tab2, #tab-toggle--workmarket #tab3, #tab-toggle--workmarket #tab4, #tab-toggle--workmarket #tab5, #tab-toggle--workmarket #tab6, #tab-toggle--profservices #tab1, #tab-toggle--profservices #tab2, #tab-toggle--profservices #tab3, #tab-toggle--profservices #tab4, #tab-toggle--profservices #tab5, #tab-toggle--profservices #tab6 { display: inline-flex; align-items: center; justify-content: center; width: 100%; gap: 50px; padding-top: 50px; } #tab-toggle--workmarket .wrapper, #tab-toggle--profservices .wrapper { max-width: 1330px; margin: auto; border-radius: 10px; } #tab-toggle--profservices .buttonWra…
downvote count: 0
tagged with: onclick
upvote count: 1
score: 1
tagged with: click
favorite count: 0
type: Question
has answer: http://stackoverflow.com/a/78998820

http://stackoverflow.com/a/78983987
answers question: http://stackoverflow.com/q/78979629
score: 0
has body: autosize i think is not working with angular material 3, but somehow you can create a work around. sharing you some sample I bumped around when I work on this as well. Autosize Sidenav Credit to the author of this. Hope it helps! Cheers!
type: Answer

http://stackoverflow.com/comment/139184362
comment on: http://stackoverflow.com/q/78941057
score: 1
has text: Yes maybe with grid column span 3 here
type: Comment
type: QuestionComment

http://stackoverflow.com/comment/139339833
comment on: http://stackoverflow.com/q/79023871
type: Comment
has text: @JSONDerulo, very interesting, it seems that the simplest solution has escaped me.... However, I don't know if it will work on all browsers, but thanks anyway!
score: 0
type: QuestionComment

http://stackoverflow.com/comment/139156572
score: 0
has text: or may be you can create a new replica application only for external users to visit?
type: AnswerComment
type: Comment
comment on: http://stackoverflow.com/a/78921469

http://stackoverflow.com/comment/139141228
score: 0
type: QuestionComment
has text: Because there is no alt tag. I'm coding the HP that maybe blind people use. But at last, I should use the background...
comment on: http://stackoverflow.com/q/78916876
type: Comment

daisyui
tags question: http://stackoverflow.com/q/79009310
type: Tag
tags question: http://stackoverflow.com/q/79035771
tag name: daisyui
tags question: http://stackoverflow.com/q/79108020

http://stackoverflow.com/a/78911196
has comment: http://stackoverflow.com/comment/139131425
has comment: http://stackoverflow.com/comment/139179051
has comment: http://stackoverflow.com/comment/139179036
type: Answer
score: 0
answers question: http://stackoverflow.com/q/78908954
has body: For http://127.0.0.1:8000/scripts/scripts.js:- Could you try to visit the URL from your browser and check whether the file is loading? You can also debug through developer's tools in your browser, click F12, and go to the Network tab. For styles.css:- Could you add this to your settings.py file? STATIC_URL = '/static/' STATICFILES_DIRS = [ BASE_DIR / "static", ] Now, if your file path is /static/somepath/styles.css You can easily access the file with this. {% load static %} #your code Link

http://stackoverflow.com/comment/139163499
comment on: http://stackoverflow.com/a/78928402
type: AnswerComment
score: 0
type: Comment
has text: Please be aware that AI generated content is banned on this site.

http://stackoverflow.com/comment/139324519
comment on: http://stackoverflow.com/a/79017211
has text: Many websites use “skip to content” link which lets users pass navigation and go directly to main content
type: Comment
score: 0
type: AnswerComment

http://stackoverflow.com/a/78915276
accepted answer of: http://stackoverflow.com/q/78915244
has comment: http://stackoverflow.com/comment/139136887
has comment: http://stackoverflow.com/comment/139136521
has comment: http://stackoverflow.com/comment/139136961
score: 1
type: AcceptedAnswer
downvote count: 0
type: Answer
has body: You can use flexbox on #title_and_menu, with justify-content: space-between; for the left/right distribution and align-items: center; for the vertical centering of both: #drop_menu { display: inline-block; /*float: right;*/ } .hamburger_menu { width: 35px; height: 1px; background-color: black; margin: 6px 0; } img { width: 100%; height: auto; max-width: 100%; display: inline-block; } #myHeader { display: inline-block; background-color: white; color: black; text-align: left; padding-top: 25px; padding-bottom: 25px; padding-left: 25px; padding-right: 25px; } #myHeader:hover { background-color: black; color: white; } body { padding-top: 25px; padding-bottom: 25px; padding-left: 25px; padding-right: 25px; } #title_and_menu { display: flex; justify-content: space-between; align-items: center; } 9.
has comment: http://stackoverflow.com/comment/139136558
upvote count: 1
answers question: http://stackoverflow.com/q/78915244

http://stackoverflow.com/q/79049518
has body: After applying scale on an element, the width of the child elements calculated by getComputedStyle and getBoundingClientRect are different, why does this happen and which value is correct? Here is a minimal implementation: https://codepen.io/lai9fox/pen/wvVMyOq const child = document.getElementById("child"); const getComputedStyleWidth = getComputedStyle(child).width; const getBoundingClientRectWidth = child.getBoundingClientRect().width; const span = document.createElement("span"); span.innerText = ` width for getComputedStyle: ${getComputedStyleWidth} width for getBoundingClientRect: ${getBoundingClientRectWidth} `; document.body.appendChild(span); #parent { width: 500px; transform: scale(2); transform-origin: 0 0; } #child { background: yellow; } &lt;div id="parent"&gt; &lt;div&gt; &lt;div id="child"&gt; child &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;
has comment: http://stackoverflow.com/comment/139383695
score: 0
tagged with: javascript
tagged with: getcomputedstyle
answer count: 0
tagged with: css
has title: getComputedStyle and getBoundingClientRect give different width results when the element is scaled
type: UnansweredQuestion
type: Question
has comment: http://stackoverflow.com/comment/139384094
tagged with: getboundingclientrect
tagged with: http://stackoverflow.com/tag/html

http://stackoverflow.com/q/78931488
has answer: http://stackoverflow.com/a/78931621
has comment: http://stackoverflow.com/comment/139166918
tagged with: css
has comment: http://stackoverflow.com/comment/139166946
accepted answer: http://stackoverflow.com/a/78931621
linked to: http://stackoverflow.com/q/42946454
has comment: http://stackoverflow.com/comment/139166919
duplicate of: http://stackoverflow.com/q/42946454
type: Question
tagged with: http://stackoverflow.com/tag/html
has title: Convert HTML table to flexbox - how to mimic td with rowspan="2"
answer count: 1
type: AnsweredQuestion
score: 0
has body: I have a HTML table that I am trying to replace with divs using flexbox. I have most of it working but I cannot figure out to replicate the look of a td with rowspan="2". This is my HTML table and the related CSS: #divMain table { width: 100%; table-layout: fixed; border: 1px solid black; } #divMain table tr { height: 100px; } #divMain table td { vertical-align: top; border: 1px solid black; background: yellow; } blah blah blah blah blah blah blah blah This is my set of divs using flexbox and the related CSS: .table { display: flex; flex-flow: column nowrap; border: 1px solid black; } .row { display: flex; } .cell { height: 100px; vertical-align: top; border: 1px solid black; background: yellow; display: flex; flex: 1; justify-content: left; align-items: top; } blah blah blah blah blah blah blah blah blah In this picture the red chunk is a td with rowspan="2". How do I achieve the same when using divs with flexbox?

http://stackoverflow.com/q/78957189
type: UnansweredQuestion
tagged with: qtstylesheets
type: Question
has title: PyQt6 QSS Style Sheet with Embedded SVG
has body: I am working on putting together a QSS Stylesheet template that I can use for all of my PyQt6 applications. When I use the stylesheet to modify the style of a QComboBox, I lose the down arrow. It's my understanding that if I style one part of the combo box, I have to style the whole combo box, which isn't a problem. In my stylesheet template, I use flags like background-color: @widget-background;. I then have a separate files for each color theme (i.e. light & dark) with a corresponding entry of @widget-background = #777777 for a light gray color. At runtime I simply read in the template as a sting and perform a replace for each of the color tags. This works awesome and makes it easy to add color themes without recreating the entire stylesheet. Where I am having my problem is with the down-arrow sub-element of the QComboBox. I know that I can supply a PNG or SVG image in the stylesheet, which works reasonably well. But, it's not as elegant as I would like. First of all, I have to create a separate image file for each color theme. Second, I have to open the SVG file as a text file and manually change the colors (Yes, I know I could automate this). So, what I would like to do is embed the SVG content into the stylesheet directly. It's my understanding that this is possible and I have found an example on StackOverflow (Inline SVG in CSS). Based on that solution, I've put together the following basic application with a single QComboBox with it's stylesheet applied. import sys from PyQt6.QtWidgets import QApplication, QComboBox, QVBoxLayout, QWidget class ComboBoxTest(QWidget): def __init__(self): super().__init__() self.init_ui() def init_ui(self): # Create a QComboBox combo_box = QComboBox(self) combo_box.addItems(["Option 1", "Option 2", "Option 3"]) # Minimal stylesheet with embedded SVG for down arrow combo_box.setStyleSheet(""" QComboBox { background-color: #f0f0f0; color: #000000; border: 1px solid #0078d4; border-radius: 4px; padding: 2px; } QComboBox::drop-down …
tagged with: http://stackoverflow.com/tag/svg
score: 0
tagged with: python
has comment: http://stackoverflow.com/comment/139214198
has comment: http://stackoverflow.com/comment/139221805
answer count: 0
tagged with: css
has comment: http://stackoverflow.com/comment/139213866
has comment: http://stackoverflow.com/comment/139221786
has comment: http://stackoverflow.com/comment/139221772
linked to: http://stackoverflow.com/q/10768451
tagged with: pyqt

http://stackoverflow.com/q/79057124
has body: I am scaling (and translating) an HTML canvas via its CSS transform attribute. This works as expected in most environments, however, in Firefox on a mobile device (Android 14) the content does not fit its canvas towards the bottom right corner. By content I mean something drawn to the canvas using e.g. either ctx.fillRect(...) or ctx.putImageData(...). This mismatch can be seen by giving the canvas a background color (pink in the example) and drawing to it using ctx.fillRect(...) or ctx.putImageData(...) (grey in the example). This Codepen directly showcases the problem (the checkerboard highlights individual canvas pixels). The code below also showcases the problem but does not highlight the canvas pixels (it still shows the mismatch) in order to be more concise. Note that the canvas's content always perfectly fits the canvas in the top left corner. By that I mean that in the top left corner of the canvas, i.e. at (0,0) in canvas coordinates, there is no visible mismatch / offset. This suggests that the content is aligned properly to the top left corner and it's its dimensions (width, height) which do not match those of the canvas. I have briefly tested this in Firefox, Edge, Chrome and Opera on both desktop and mobile and the problem occurs solely in Firefox on mobile. The mismatch in Firefox on mobile The mismatch in Firefox on mobile with highlighted canvas element Expected Expected with highlighted canvas element index.html: main.js: const canvas = document.getElementById('canv') const ctx = canvas.getContext('2d') ctx.fillStyle = `rgba(100, 100, 100, 0.5)` ctx.fillRect(0, 0, canvas.width, canvas.height) style.css: body { margin: 0; } #canv { background-color: palevioletred; transform: translate(-14800px, -7000px) scale(100); } Among other things I suspected this to have something to do with fractional scaling or translations, but in this minimal example there are no fractions involved, it's all integer values. The codepen demonstrates that it's not about too m…
tagged with: http://stackoverflow.com/tag/html
tagged with: android
answer count: 0
type: UnansweredQuestion
tagged with: canvas
tagged with: css
type: Question
has title: Canvas content escapes canvas on mobile in Firefox
score: 0
tagged with: firefox

http://stackoverflow.com/q/79021574
has body: This is what I want to have: This is what I am getting at the moment. * { box-sizing: border-box; margin: 0; padding: 0; } .container { display: grid; grid-template-columns: 150px 1fr; gap: 20px; grid-auto-rows: minmax(150px, auto); max-width: 1000px; margin: 0 auto; } .image { grid-row: span 1; grid-column: 1; } .image img { width: 100%; height: auto; border-radius: 50%; } .content { grid-column: 2; grid-row: 1 / span 2; margin-left: 20px; } p { margin-bottom: 10px; } @media (max-width: 768px) { .container { grid-template-columns: 1fr; grid-auto-rows: auto; } .image { grid-column: 1; } .content { grid-column: 1; margin-left: 0; } } Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed elit ex. Fusce vitae egestas magna. Vestibulum et aliquet diam. Curabitur vulputate est vel arcu vehicula sollicitudin. Nam iaculis neque nec lorem dignissim lobortis. Aliquam ultricies, dui a volutpat lobortis, ipsum nisi malesuada mi, ut gravida nisl velit et purus. Vivamus volutpat cursus elementum. Sed et nisi eu mauris dictum accumsan et id nisi. Sed bibendum quam velit, nec dictum nibh pretium ut. Fusce volutpat erat hendrerit dictum vehicula. Nam lobortis iaculis ligula in cursus. Sed eleifend sem feugiat, tempor justo vel, pulvinar felis. Quisque ante libero, aliquet sed quam sit amet, hendrerit egestas enim. Fusce fermentum ex sed neque venenatis pharetra. In elit neque, elementum sit amet felis eu, dignissim ultricies urna. Duis pharetra lacus sem. Proin maximus ipsum ultricies, commodo dui fermentum, dictum tortor. Vestibulum in ipsum eget ex eleifend consequat. Vestibulum ultrices lorem nisl, quis sollicitudin ex vehicula eget. Nunc eleifend turpis quis facilisis suscipit. Nunc et iaculis diam, et pharetra nisi. Donec sem arcu, imperdiet ut consequat quis, vehicula ac urna. Curabitur nisl enim, volutpat sit amet turpis eget, tristique suscipit neque. Etiam sed sagittis sapien. Sed venenatis dui non dolor tincidunt, eget iaculis urna aliquet. Vestibulum nibh n…
tagged with: css
has title: How to make text automatically take full width after image, I basically need to expand text in L structure
type: UnansweredQuestion
has answer: http://stackoverflow.com/a/79021898
type: Question
answer count: 1
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139332423
has comment: http://stackoverflow.com/comment/139332420
score: 0

http://stackoverflow.com/q/78949680
has title: How to lazy import a CSS file created by Tailwind in NextJS?
has body: I check my site performance in GTMETRIX and it says : Eliminate render-blocking resources. I use NextJS &amp; Tailwind. GTMETRIX says for solve the probolm use this: A tag that appears in the of the document and doesn't have a defer or async attribute. A tag that does not have a disabled or media attribute. A tag that does not have an async attribute. How can I set these attributes in NextJS14? While next automatically creates the CSS and puts it in the header
tagged with: tailwind-css
score: 0
upvote count: 1
tagged with: reactjs
answer count: 0
tagged with: css
has comment: http://stackoverflow.com/comment/139202534
downvote count: 1
type: UnansweredQuestion
favorite count: 0
tagged with: gtmetrix
type: Question
tagged with: nextjs14

http://stackoverflow.com/q/78962822
answer count: 2
has comment: http://stackoverflow.com/comment/139224579
tagged with: css
has comment: http://stackoverflow.com/comment/139224466
has comment: http://stackoverflow.com/comment/139224554
accepted answer: http://stackoverflow.com/a/78963125
has body: I have a dropdown menu that works as expected when using a element. The menu appears right below the button as it should be. However, when I change the element to an tag, the dropdown menu appears on top of the , not below it. Why is the behavior different between the and elements? How can I make the dropdown menu appear below the tag just like it does with the ? Any help would be appreciated! HTML (with a href it's not working) Dropdown 1 Link 1 Link 2 Link 3 HTML (with button it's working) Dropdown 2 Link 1 Link 2 Link 3 CSS .dropdown { float: left; overflow: hidden; } .dropdown .dropbtn { display: block; background-color: #1f7ac4; color: #f2f2f2; border: 1px solid #1f7ac4; text-align: center; padding: 14px 16px; margin: 0px 0px 0px 0px; text-decoration: none; font-size: 19px; line-height: 36px; /* Must be the same as font-size .topnav a.logo */ } .dropdown .dropbtn:hover{ background-color: #2f8fde; border-top-left-radius: 12px; border-top-right-radius: 12px; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; border: 1px solid #2f8fde; color: #f2f2f2; } .dropdown-content { display: none; position: absolute; background-color: #ffffff; border-top-left-radius: 12px; border-top-right-radius: 12px; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; border: 1px solid #d6d2d2; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); min-width: 160px; margin: 0px 0px 0px 0px; padding: 10px 10px 5px 10px; z-index: 1; } .dropdown-content a { float: none; background-color: #ffffff; border-top-left-radius: 12px; border-top-right-radius: 12px; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; border: 0px; color: #3c4043; text-decoration: none; display: block; font-size: 16px; line-height: 32px; text-align: left; margin: 0px 0px 5px 0px; } .dropdown-content a:hover { background-color: #f5f5f5; color: #3c4043; border: 0px; } .dropdown:hover .dropdown-content { display: block; } I found the following solution I changed margin: 66px 0px 0px 0p…
has comment: http://stackoverflow.com/comment/139225103
has answer: http://stackoverflow.com/a/78963125
has answer: http://stackoverflow.com/a/78962840
type: Question
tagged with: http://stackoverflow.com/tag/html
type: AnsweredQuestion
score: 0
has comment: http://stackoverflow.com/comment/139225083
has comment: http://stackoverflow.com/comment/139225098
possible better answer: http://stackoverflow.com/a/78962840
has title: Dropdown menu behaves wrong when is changed to

http://stackoverflow.com/comment/139194895
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78946626
type: Comment
has text: @NINE I added it. please check.

http://stackoverflow.com/q/79046546
tagged with: emotion
has body: In Material UI v4, I used makeStyles and withStyles from @mui/styles to override the default styles for components, which was a straightforward approach to customize the look and feel of my application. However, after upgrading to Material UI v5, makeStyles has been deprecated and the styling system seems to have changed significantly with the introduction of the sx prop and the styled API. How can I override default component styles (like changing the MuiButton padding or color) in Material UI v5? What are the best practices now for overriding default styles globally or locally in MUI v5, and how does it differ from v4? Would also appreciate examples for both global overrides (like theming) and specific overrides (like using the sx prop or styled API). Additional query: If I need to change the style of a component depends on where it is used or say if I am creating a custom component using any of the mui component. Like in this example: import { Box } from "@mui/material"; function App() { return ( theme.palette.grey[100], p: 4 }}> Hello world ); } export default App; I am able to use sx prop to update the style for the mui component but for the span inside I cannot use sx prop but still I need to add a color from the theme.
score: 0
tagged with: reactjs
accepted answer: http://stackoverflow.com/a/79046701
tagged with: material-ui
tagged with: css
has answer: http://stackoverflow.com/a/79046701
has title: How to override default styles in Material UI v5 compared to v4?
type: Question
answer count: 1
type: AnsweredQuestion

http://stackoverflow.com/q/79013519
upvote count: 1
favorite count: 0
has body: Between the border and background color there are some white pixels showing. The background does not fill the buttons background 100% which is annoying to look at. I've played around with sizes of the button::before but it doesn't seem to help. button { border: 2px solid #000; border-radius: 100px; overflow: hidden; color: #fff; pointer-events: auto; cursor: pointer; background: #e7e7e7; padding: 1.5rem 3rem; margin: 0; position: relative; display: inline-block; } button p { padding: 0; margin: 0; font-family: "ClashGrotesk-Medium"; font-size: 3em; position: relative; mix-blend-mode: difference; } button::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 100px; content: ""; background: #000; transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1); } button:hover::before { transform: translate3d(0, -100%, 0); } Lorem Ipsum
tagged with: http://stackoverflow.com/tag/html
type: Question
has answer: http://stackoverflow.com/a/79013701
answer count: 1
tagged with: css
downvote count: 0
has title: how can i remove the white pixels between the background color and border on a button?
type: UnansweredQuestion
score: 1

http://stackoverflow.com/a/78921012
has comment: http://stackoverflow.com/comment/139147632
has body: The reason is the display: flex; for .section1 – it arranges the p and all following images next to each other by default. Either remove that display: flex; from .section1 or add flex-direction: column; if you want the p text and all images below each other. If you want the images below the p text, but still in one row, wrap another div container around the images and add display: flex; to that one.
type: Answer
answers question: http://stackoverflow.com/q/78920993
score: 0

http://stackoverflow.com/q/78931907
type: Question
score: -3
has comment: http://stackoverflow.com/comment/139167722
downvote count: 3
answer count: 1
type: AnsweredQuestion
tagged with: styling
accepted answer: http://stackoverflow.com/a/78932074
has comment: http://stackoverflow.com/comment/139167568
has title: CSS Styling Without Using z-index, Absolute and Relative Positioning
tagged with: css
upvote count: 0
has answer: http://stackoverflow.com/a/78932074
has body: I want to style a web page like thisWhat I Would Like To Do All I could think of is z-indexing, absolute and relative positioning. So this is what I did: I first tried doing a table but the background had gaps in it. .section2 { width: 100%; background-color: #f5f5f5; height: 750px; position: relative; z-index: 0; } .square1 { width: 300px; height: 300px; background-color: #969696; position: relative; z-index: 1; } .text1 { width: 300px; height: 260px; position: absolute; top: 0px; left: 370px; z-index: -1; } .text2 { width: 300px; height: 260px; position: relative; z-index: 1; top: 50px; left: 0px; } .square2 { background: #969696; width: 300px; height: 300px; position: absolute; top: 350px; left: 370px; z-index: -1; } .button { display: block; width: 115px; height: 20px; background: #969696; padding: 5px; text-align: center; border-radius: 5px; color: white; font-weight: bold; line-height: 25px; } Heading Title Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip LINK Heading Title Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip LINK Which works well on its own. I adjusted it for a width of screen size of width 100%, square size of 650px width and 425px height and top 530px for the second square and plugged it into my code. It is messing up the existing code with divs being intertwined and the code overflowing into the next div. Does anyone know how to achieve the objective without doing what I did. What I am looking for is a totally different approach and an out-of-the-box solution.
has comment: http://stackoverflow.com/comment/139167604
favorite count: 0
tagged with: http://stackoverflow.com/tag/html

http://stackoverflow.com/q/79034015
has comment: http://stackoverflow.com/comment/139354894
has title: How can I get final hex color in Javascript from a relative CSS color string?
has comment: http://stackoverflow.com/comment/139354900
tagged with: colors
tagged with: css
upvote count: 2
has answer: http://stackoverflow.com/a/79034068
accepted answer: http://stackoverflow.com/a/79034068
favorite count: 0
type: Question
answer count: 1
has body: Let's say I have a CSS like that, which uses CSS Relative Colors syntax: .my-element { color: rgb(from #aabbcc calc(r + 30) g calc(b - 30) / 80%); } (Updated to the correct syntax according to the comments below) (in real life, this example would use CSS variables which I know how to substitute with actual values, so I simplified it). In CSS it calculates a color with increased red and decreased blue channels, and with 80% alpha-channel. I need to get that color and further manipulate it in my JS. Tried using getComputedStyle - it doesn't help, just returns the initial string representation of the color. So, is there a way to get that final color in JS? Any built-in solution or a library?
score: 2
downvote count: 0
type: AnsweredQuestion
tagged with: javascript

http://stackoverflow.com/q/78981277
tagged with: css
has comment: http://stackoverflow.com/comment/139259337
tagged with: bootstrap-5
has body: I have a header with a background-image defined inline and I also use an SVG as an overlay. I use the BS 5.3 framework However, when I reduces screen size the SVG stops spanning the header from top to bottom. As an alternative I used a linear-gradient with stops to mimic the SVG, but this resulted in the bands having sawtooth appearance. Tus the overlay works great untill around 600px then the SVG leaved a gap between itself and the bottom of the header. How can I let the SVG span the whole header from top to bottom whilst perverving its aspect ratio on all screen sizes? :root { /*add some transparency */ --mark-bg-light: linear-gradient(0deg, transparent 20%, rgba(255, 255, 255, 0.75) 20%, rgba(255, 255, 255, 0.75) 84%, transparent 84%); --hero-mark: var(--mark-bg-light); } .hero-section { background-position: center center; background-repeat: no-repeat; background-size: cover; min-height: 70vh; } mark.mark-hero { background: var(--hero-mark); padding: 0.5rem; animation: none; } @media (prefers-color-scheme: dark) { h1 .mark-hero { color: black; } } .band--header__image__overlay { position: absolute; display: block; top: 0; bottom: 0; width: 100%; height: 100%; max-width: 2500px; transform: translateX(-70%); z-index: 0; background-size: cover; } Hero Section Background-Image Inline CSS DMollit anim commodo consequat cillum eiusmod commodo ipsum sit ut occaecat pariatur tempor. Excepteur sint laboris aliquip quis enim. Cillum dolor eiusmod elit reprehenderit proident nulla velit dolor velit enim sit. Do reprehenderit commodo ut officia eu in dolore consequat amet consequat nisi adipisicing nisi nisi. Est id magna incididunt incididunt in eiusmod amet anim velit culpa duis eu. Eiusmod id reprehenderit enim esse dolor in aliqua. Ex nisi mollit esse est minim enim sunt est quis do ipsum ipsum. Sint fugiat Ullamco consequat minim in ullamco anim dolor amet commodo labore sit reprehenderit elit minim ullamco. Esse ea id Lorem amet in tempor. Lorem adipisicing sint enim e…
has comment: http://stackoverflow.com/comment/139258531
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139258621
tagged with: http://stackoverflow.com/tag/html
has title: Let SVG span on all screen sizes
type: Question
has comment: http://stackoverflow.com/comment/139258633
has comment: http://stackoverflow.com/comment/139258902
has comment: http://stackoverflow.com/comment/139260941
tagged with: http://stackoverflow.com/tag/svg
score: 0
has comment: http://stackoverflow.com/comment/139258588
has comment: http://stackoverflow.com/comment/139258581
answer count: 0

http://stackoverflow.com/comment/139124889
score: 0
has text: @NINE Thanks, but that would end up targeting all elements that start with `#shopify-section-template--`.
type: QuestionComment
comment on: http://stackoverflow.com/q/78907243
type: Comment

http://stackoverflow.com/q/78961161
tagged with: javascript
tagged with: loops
tagged with: css
answer count: 0
has title: Smooth Carousel Not Looping Properly - Jumps After Last Image
type: UnansweredQuestion
has body: I'm working on creating a smooth carousel, but I'm running into an issue. After the last image is displayed, the website background shows up before it jumps back to the first image. I want the transition to be seamless, with the carousel smoothly looping back to the start without any gaps or jumps. Thank you! .image-container { overflow-x: hidden; max-width: 999px; /* Adjust the max-width as needed */ margin-left: auto; margin-right: auto; padding-top: 1rem; /* Add padding to the top */ padding-bottom: 1rem; /* Add padding to the bottom */ } .image-wrapper { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (0.5rem * (var(--per-view) - 1))) / var(--per-view)); /* Adjusted grid-gap */ grid-gap: 0.5rem; /* Reduced gap between images */ position: relative; left: 0; transition: .3s; } .image-wrapper > * { aspect-ratio: 4 / 3; } .image-wrapper img { width: 100%; height: 100%; object-fit: cover; /* Ensures the entire image is visible without cutting off */ display: block; border-radius: 1.5rem; /* Apply rounded corners to left and right sides only */ } // IMAGE SLIDER const imageWrapper = document.querySelector('.image-wrapper'); const imageItems = document.querySelectorAll('.image-wrapper > *'); const imageLength = imageItems.length; const perView = 3; let totalScroll = 0; const delay = 2000; imageWrapper.style.setProperty('--per-view', perView); // Clone the first few images and append them to the end for (let i = 0; i < perView; i++) { imageWrapper.appendChild(imageItems[i].cloneNode(true)); } let autoScroll = setInterval(scrolling, delay); function scrolling() { totalScroll++; const widthEl = document.querySelector('.image-wrapper > :first-child').offsetWidth + 24; imageWrapper.style.transition = '.3s'; imageWrapper.style.left = `-${totalScroll * widthEl}px`; if (totalScroll === imageLength) { setTimeout(() => { imageWrapper.style.transition = '0s'; imageWrapper.style.left = '0'; totalScroll = 0; }, 300); // Match the transition duration } } Steps…
has comment: http://stackoverflow.com/comment/139224424
type: Question
score: 0
tagged with: carousel

http://stackoverflow.com/comment/139139346
score: 0
has text: Agreed. As long as each page has the div/button set up the same way with classes, etc, once you add some text between the button tags, they should be visible on each page.
type: AnswerComment
comment on: http://stackoverflow.com/a/78916719
type: Comment

http://stackoverflow.com/comment/139264770
has text: But we can't help you without some code, meaning a reproducable example of code.
type: QuestionComment
comment on: http://stackoverflow.com/q/78979287
type: Comment
score: 0

http://stackoverflow.com/comment/139278101
has text: @user2804429, One question: what is preventing me from narrowing the window beyond a certain point? (MacOS Chrome & Safari)
type: Comment
comment on: http://stackoverflow.com/a/78986353
score: 0
type: AnswerComment

http://stackoverflow.com/a/79546630
score: 0
has body: Support and improvements for TailwindCSS v4 are in progress. As of the fix in TailwindCSS Intellisense VSCode extension since February 2025 (v0.14.3), it is possible to specify the new CSS-first configuration as a configuration file. [...] Since TailwindCSS no longer supports Sass, Less, or Stylus preprocessors from v4 onwards, the Intellisense extension will also not consider them starting from v4. tailwindlabs/tailwindcss-intellisense PR #1159: Ignore preprocessor files when looking for v4 configs Source: VSCode Tailwind CSS Intellisense autocompletion and suggestions not working after installing Tailwind v4 - StackOverflow
answers question: http://stackoverflow.com/q/78920122
type: Answer

http://stackoverflow.com/comment/139350930
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/79030517
type: Comment
has text: Bootstrap 2 reached [end of life](https://github.com/twbs/release) _11 years ago_. Not only that, it's badly out of date from a best practices standpoint. You really need to upgrade your site.

http://stackoverflow.com/a/79009174
type: Answer
score: 0
has body: Flickering is completely avoided if the desired CSS properties are already sent by the server depending on the user setting. To make this possible, the user setting must not be remembered via localStorage.getItem and localStorage.setItem but in a cookie, via cookieStore.get and cookieStore.set. The following snippet shows a server-side implementation with express and ejs: app.js app.get("/", function(req, res) { var mode = (req.get("Cookie") || "").match(/(^|; )mode=(.*?)($|; )/)?.[2]; res.render("page.ejs", {mode}); }); page.ejs ... ...
answers question: http://stackoverflow.com/q/78987305

http://stackoverflow.com/q/79037411
tagged with: http://stackoverflow.com/tag/html
has answer: http://stackoverflow.com/a/79037432
downvote count: 0
answer count: 3
score: 1
upvote count: 1
accepted answer: http://stackoverflow.com/a/79037429
tagged with: css
type: Question
has answer: http://stackoverflow.com/a/79038610
possible better answer: http://stackoverflow.com/a/79037432
has body: I have these two markup up patterns: Title and Title linklink I want to target the former but not the latter with CSS and use ::after to insert a visual flourish. I prefer not to use a class. I just can't seem to get it! h3>span+span:not(h3>span+span>a)::after { border: solid 1px transparent; content: '\2199'; display: inline-block; color: gray; }
type: AnsweredQuestion
has title: CSS selectors, target an empty span but not span that has an tag or tags in it
favorite count: 0
has answer: http://stackoverflow.com/a/79037429

http://stackoverflow.com/comment/139241335
score: 1
has text: Instead of using ` Title ` for the title, you should be using ` `.
type: Comment
comment on: http://stackoverflow.com/q/78971885
type: QuestionComment

http://stackoverflow.com/q/79022741
has body: Consider the following markup which is using Bootstrap classes: The layout consists of two cards placed left and right using flex-row. The cards are fitted to the available vertical space using flex-fill. Whilst The cards use the available vertical space, their content should scroll if it overflows the card. I have demonstrated large content using the .example-large-content class. The cards have shadows. html, body { overscroll-behavior: none; } .example-large-content { min-height: 20rem; } Large content Large content Large content Large content Large content Large content Large content The problem has something to do with using overflow-auto and shadow together. The far-left, far-right, and bottom of the shadows is cut off, but they appear in the gap between the left and right cards: Is there a way to solve this?
tagged with: flexbox
has answer: http://stackoverflow.com/a/79022827
tagged with: bootstrap-5
type: Question
answer count: 1
type: AnsweredQuestion
has title: Flex layout cuts off shadow when using overflow-hidden or overflow-auto
accepted answer: http://stackoverflow.com/a/79022827
score: 0
tagged with: css

http://stackoverflow.com/comment/139198384
type: Comment
comment on: http://stackoverflow.com/q/78948750
has text: Which of the height of content-2, container, body, and html is the standard? Setting the height of `.status` to 100% allows you to follow the height of your parent and use 'overflow: auto'. Alternatively, you can add scrolling when the number of elements inside the `.status` exceeds the desired number.
type: QuestionComment
score: 1

mobile
tags question: http://stackoverflow.com/q/79060259
tags question: http://stackoverflow.com/q/78984919
tags question: http://stackoverflow.com/q/78999725
tags question: http://stackoverflow.com/q/79004878
tags question: http://stackoverflow.com/q/78994787
tags question: http://stackoverflow.com/q/78932133
type: Tag
tags question: http://stackoverflow.com/q/78932696
tags question: http://stackoverflow.com/q/78986984
tags question: http://stackoverflow.com/q/79046527
tags question: http://stackoverflow.com/q/78929415
tags question: http://stackoverflow.com/q/79023414
tag name: mobile
tags question: http://stackoverflow.com/q/79107002
tags question: http://stackoverflow.com/q/79239510
tags question: http://stackoverflow.com/q/79198956
tags question: http://stackoverflow.com/q/79122000
tags question: http://stackoverflow.com/q/79140118
tags question: http://stackoverflow.com/q/79083768
tags question: http://stackoverflow.com/q/79298521
tags question: http://stackoverflow.com/q/79309575
tags question: http://stackoverflow.com/q/79504860
tags question: http://stackoverflow.com/q/79528980
tags question: http://stackoverflow.com/q/79478335
tags question: http://stackoverflow.com/q/79470461

http://stackoverflow.com/comment/139217497
has text: unfortunately ... guess which browser still doesn't support [`d` property](https://caniuse.com/?search=d)? To be fair, it seems to be a webkit issue in general (same limitations for CSS `d` manipulations on linux (debian/mint) epiphany/web or midori) and not specific to safari. Hopefully, they will *finally* fix this.
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78954352

http://stackoverflow.com/comment/139202377
type: QuestionComment
comment on: http://stackoverflow.com/q/78951014
has text: @Phil I didn't know that was a thing? yeah I do and that fixes the issue. Can you please make an Answer and I will approve it
type: Comment
score: 0

http://stackoverflow.com/a/78961147
score: 1
answers question: http://stackoverflow.com/q/78961046
type: Answer
has body: I can't provide a full solution because I don't have access to the entire source code, but if you make the display property of the "nav-links" div, which contains the items that need to be stacked, flex and set the flex-direction to column, it can be fixed. @media screen and (max-width: 1170px) { .nav-links.responsive { display:flex; flex-direction: column; } }
downvote count: 0
upvote count: 1
has comment: http://stackoverflow.com/comment/139223749

http://stackoverflow.com/comment/139222447
has text: Can you share with us (with the code) how are you exporting the doc, because the `word-break: break-word` should have done it too in the exported document.
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78927597
type: Comment

velo
tags question: http://stackoverflow.com/q/78937437
type: Tag
tag name: velo
tags question: http://stackoverflow.com/q/79090673

http://stackoverflow.com/q/79003946
has comment: http://stackoverflow.com/comment/139300084
has body: My problem is that in the submenu, the menubutton1 and 2 padding is stretching to fit the submenu width to the right, and not just 10px around the text like the left and top is, and the other menu buttons at the top of the page. I tried to explain that as best as I could, but how would I get the menubuttons in the submenu to behave like the ones in the parent menubackground div? How would i make the padding not stretch out to the right like that? Also, the menubuttons in the submenu div don't appear to have any top margin in relation to the submenu. Why is this? I tried using box-sizing: border-box; as that was a solution to a similar problem I read, but it didn't do anything. I am new to css and this website is a learning experience, I've been able to do everything so far on my own, but I am completely stuck on this. .container { height: 100vh; display: flex; align-items: center; } .subcontainer { height: 100vh; } .menubackground { width: 91%; height: auto; border-radius: 25px; margin: auto; background: rgba(255, 255, 255, 0.7); max-height: 90%; min-height: 90%; overflow-y: auto; } .submenu { width: 80%; height: auto; border-radius: 25px; margin: auto; background: white; min-height: 10%; } .title { margin: 20px; text-align: center; } .bodytextcss { margin-left: 20px; margin-right: 20px; margin-bottom: 20px; text-align: left; } .menubuttons { float: left; } #menubutton1 { border-radius: 25px; margin: 10px; padding: 10px; background-color: #451255; color: #ffffff; } #menubutton2 { border-radius: 25px; margin: 10px; padding: 10px; background-color: #451255; color: #ffffff; } body { background-image: url("background5.png"); background-size: cover; background-color: #451255; } titletext { font-size: 22px; color: #000000; font-weight: bold; } bodytext { font-size: 20px; color: #000000; } buttontex { font-size: 20px; } home recipies Welcome to the stories section This is where I will upload short stories that I write story title 1 story title 2
favorite count: 0
tagged with: http://stackoverflow.com/tag/html
type: Question
has answer: http://stackoverflow.com/a/79005980
accepted answer: http://stackoverflow.com/a/79004004
has title: css child padding is stretching to fit the parent
type: AnsweredQuestion
score: 0
upvote count: 1
answer count: 2
has comment: http://stackoverflow.com/comment/139300112
has answer: http://stackoverflow.com/a/79004004
tagged with: css
possible better answer: http://stackoverflow.com/a/79005980
downvote count: 1

http://stackoverflow.com/comment/139209521
comment on: http://stackoverflow.com/q/78950094
type: Comment
has text: @TemaniAfif There's nothing wrong with this method.
score: 0
type: QuestionComment

http://stackoverflow.com/a/78971467
downvote count: 0
score: 1
upvote count: 1
type: AcceptedAnswer
answers question: http://stackoverflow.com/q/78971420
accepted answer of: http://stackoverflow.com/q/78971420
type: Answer
has body: As question includes several points I will try to tackle them all: I am having issue with setting an image as background for a div In order to display the image as background, you need to ensure that the div takes up space. Currently, the inner div where the background image is applied does not have a specified height or width, which means it might not be visible. You need to ensure that this div is given a size to display the background image. I then want add some text inside this div which then appear on top the image You need to check the positioning the text on top of the image. By default, the text might appear below the image or outside the image area. To ensure the text is positioned on top of the image, we can use relative or absolute positioning. The code snippet: .gbimage { height: 100%; width: 100%; position: relative; color: #fff; } .gbimage div { height: 500px; width: 100%; background-image: url("https://img.freepik.com/free-photo/sports-car-driving-asphalt-road-night-generative-ai_188544-8052.jpg"); background-repeat: no-repeat; background-size: cover; position: relative; display: flex; align-items: center; justify-content: center; } .gbimage div a { margin: 0 10px; color: #ffffff; font-size: 18px; text-decoration: none; } text number 1 text number 2 text number 3 text number 4 text number 5 As your folder structure is like: src/ ├── app/ │ ├── home/ │ │ ├── home.component.ts │ │ ├── home.component.html │ │ ├── home.component.css ├── assets/ │ ├── img/ │ │ ├── book1.jpg it might already work, but even not, you need to ensure that Angular is picking up the image correctly. Angular uses the /assets/ folder by default for serving static assets. The path /assets/img/book1.jpg should work correctly, but double-check the image name and folder structure to make sure it's accurate.

http://stackoverflow.com/comment/139201321
type: Comment
score: 0
has text: See also ["How to create a smooth, curved SVG mask for a block's top-right corner?"](https://stackoverflow.com/questions/78916038/how-to-create-a-smooth-curved-svg-mask-for-a-blocks-top-right-corner/) You can extend the described concepts for your needs
type: QuestionComment
comment on: http://stackoverflow.com/q/78948289

http://stackoverflow.com/comment/139276839
type: QuestionComment
has text: Interestingly, I see the same up/down movement, however when I took screenshots and compared them zoomed in, the movement actually seems to go from left/right by about half a pixel.
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78991256

http://stackoverflow.com/a/79039010
answers question: http://stackoverflow.com/q/79038945
has body: To make a fixed CSS element stay within the boundaries of its parent without overflowing, you can use a combination of CSS properties. Here's a short code example that demonstrates how to achieve this: Sticky Footer body { margin: 0; height: 100vh; overflow: hidden; /* Prevent overflow from body */ } .container { display: flex; flex-direction: column; height: 100%; } .content { flex: 1; position: relative; overflow-y: auto; /* Allow vertical scrolling */ } .white-separator { position: absolute; top: 0; left: 50%; /* Center it */ width: 1px; height: 100%; background: white; } .red-separator { position: fixed; left: 50%; /* Center it */ width: 2px; height: 50%; /* 50% of the content height */ background: red; top: 50%; /* Center it vertically */ transform: translateY(-50%); pointer-events: none; /* Prevent interaction */ } .footer { height: 50px; background: gray; } For further guidance, you may want to check the solution that a developer has posted on AskFullStack, which also addresses similar issues with fixed elements and scrolling behavior.
type: Answer
score: 0

http://stackoverflow.com/q/78909194
upvote count: 1
score: -1
has comment: http://stackoverflow.com/comment/139128798
has comment: http://stackoverflow.com/comment/139128931
tagged with: frontend
has comment: http://stackoverflow.com/comment/139128906
tagged with: css
has title: Responsive Design Breaks in Mobile View During Preloading Phase
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139128909
has comment: http://stackoverflow.com/comment/139128935
downvote count: 2
tagged with: web-frontend
favorite count: 0
tagged with: http://stackoverflow.com/tag/html
type: Question
answer count: 1
has answer: http://stackoverflow.com/a/78910959
has body: #loading-animation { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image:url('data:image/'); background-repeat: no-repeat; background-size: cover ; display: flex; justify-content: center; align-items: center; z-index: 9999; } .loader { border-top: 9px solid #00a2ed; border-radius: 80%; width: 12vw; height: 12vw; animation: spin 2s linear infinite; position: absolute; left: 44%; top: 46%; / transform: translate(-50%, -50%); /* the transformation required for the circular ring to be exactly in the middle. */ } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } Greetings, I used the following values ​​on the 1366*768 resolution screen to create a proportional image between the half-blue rotating animation and the fixed ring image on the picture. width: 12vw; height: 12vw; left: 44%; top: 46%; However, when I opened the application on my mobile phone (1080 x 2340), the same image as on the desktop did not appear. It was not a responsive design. How do I make them both look the same? full code: https://drive.google.com/file/d/1W9q5ny4yGKIvqPI3cVSVPveeimru6Wvg/view?usp=sharing Actual image as Base64: https://drive.google.com/file/d/1Jo-UxOPk0sG0CTUonMSMJUw31GWTjmhK/view?usp=sharing &gt;&gt; on mobile: &gt;&gt; on desktop:
tagged with: javascript

http://stackoverflow.com/a/79034214
has body: You need to know the distance between the image's left edge and screen's left edge, so try putting everything that stand between them to variables and use calc to translate the image. * { margin: 0; padding: 0; box-sizing: border-box; } /* Put the main column's width, padding left, border left width in variables... */ .column { --column-width: 50vw; --column-padding: 20px; --column-border-width: 1px; width: var(--column-width); margin: auto; padding: var(--column-padding); border: var(--column-border-width) solid #ccc; border-radius: 5px; text-indent: 2rem; } /* ...and use them to calculate the position of the large object */ .large-obj-wrapper { width: 100vw; transform: translateX(calc(0px - (100vw - var(--column-width)) / 2 - var(--column-padding) - var(--column-border-width))); position: relative; padding: 20px; border: 1px dashed #c00; } .large-obj { height: 100px; background-color: #7df; display: flex; justify-content: center; align-items: center; } Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure excepturi unde cumque ad, ipsa vel dolorum autem omnis praesentium fugiat impedit modi ex nostrum atque hic odit facere eveniet quis! Large image or object Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure excepturi unde cumque ad, ipsa vel dolorum autem omnis praesentium fugiat impedit modi ex nostrum atque hic odit facere eveniet quis!
answers question: http://stackoverflow.com/q/79032875
type: Answer
score: 0

http://stackoverflow.com/comment/139385017
score: 0
comment on: http://stackoverflow.com/q/79050234
has text: `item-content` is the first level menu and the last `item-content` with div and strong elements is the second level menu whick should be outside `.block`
type: Comment
type: QuestionComment

http://stackoverflow.com/q/79030241
answer count: 0
tagged with: iphone
has comment: http://stackoverflow.com/comment/139371035
type: UnansweredQuestion
has body: I am trying to add motion blur effect while sliding images, it works fine in android and web, but not working in iPhone. below is the codpen URL and FVG filter code. https://codepen.io/VijayDhanvai/pen/KKOwJPe <feGaussianBlur in="SourceGraphic" stdDeviation="0 0" /> <feGaussianBlur in="SourceGraphic" stdDeviation="5 0" /> <feGaussianBlur in="SourceGraphic" stdDeviation="12 0" /> <feGaussianBlur in="SourceGraphic" stdDeviation="20 0" /> <feGaussianBlur in="SourceGraphic" stdDeviation="35 1" /> <feGaussianBlur in="SourceGraphic" stdDeviation="50 1" />
score: 1
favorite count: 0
type: Question
tagged with: animation
tagged with: svg-filters
downvote count: 0
tagged with: javascript
upvote count: 1
has comment: http://stackoverflow.com/comment/139393547
has title: Motion blur SVG filter not working in iPhone
tagged with: css

outlook
tags question: http://stackoverflow.com/q/79043462
tags question: http://stackoverflow.com/q/78956829
tag name: outlook
type: Tag
tags question: http://stackoverflow.com/q/79104063
tags question: http://stackoverflow.com/q/79340240
tags question: http://stackoverflow.com/q/79413123
tags question: http://stackoverflow.com/q/79418443
tags question: http://stackoverflow.com/q/79374567
tags question: http://stackoverflow.com/q/79427820

http://stackoverflow.com/comment/139304745
comment on: http://stackoverflow.com/q/79006007
type: QuestionComment
has text: Have you used your browser devtools inspect facility to see exactly what HTML is being generated and exactly what CSS is being applied to it? We need to see the generated HTML (not as an image but as code in your question).
type: Comment
score: 0

http://stackoverflow.com/a/79014575
type: AcceptedAnswer
downvote count: 0
type: Answer
has body: Since it's unclear how to achieve that result by using air-datepicker without implementing a custom solution I may suggest a similar approach by using a different library https://flatpickr.js.org/ This one supports the chance to show an arbitrary amount of consecutive months by setting the showMonths prop in the object used for initializing the date picker. Such option might be decided based on the available width using an arbitrary breakpoint (I used 768 in this example). To make sure the picker will be adapted to the current viewport, the picker must be initialized every time the window is resized (thus I added the handling of the resizeevent). This looks like the way to get that result with the minimum effort. The configuration speaks for itself for the other options like firstDayOfWeek, rangeSeparator, dateFormat. You may also style the picker using css if you need further customization. function initializeDatePicker() { //this decides how many consecutive months (1 or 2) based on available width const numberOfMonths = window.innerWidth <= 768 ? 1 : 2; flatpickr("#datepicker-input", { mode: "range", inline: true, showMonths: numberOfMonths, minDate: "today", dateFormat: "d.m.Y", locale: { firstDayOfWeek: 1, rangeSeparator: " - ", } }); } initializeDatePicker(); //re-initialize the date picker on window resize (so to adapt the correct 1/2 months according to width) window.addEventListener('resize', function() { document.querySelector("#datepicker-input")._flatpickr.destroy(); initializeDatePicker(); }); body { padding: 20px; } input { width: 100%; max-width: 400px; padding: 10px; border: 1px solid #ccc; border-radius: 4px; margin-bottom: 20px; } Select Date Range
upvote count: 1
answers question: http://stackoverflow.com/q/79013255
accepted answer of: http://stackoverflow.com/q/79013255
score: 1

http://stackoverflow.com/q/79027340
has answer: http://stackoverflow.com/a/79046469
has comment: http://stackoverflow.com/comment/139343433
type: Question
tagged with: http://stackoverflow.com/tag/html
answer count: 1
has comment: http://stackoverflow.com/comment/139343459
score: 0
has title: How can I set print dimensions to a specific size in inches?
tagged with: css
has comment: http://stackoverflow.com/comment/139343908
has body: I need to print the contents of a div in the dimensions of a 3x5 index card on letter sized paper (according to a conversion site - 3&quot; = 288px and 5&quot; = 480px). When using the following CSS, it targets the appropriate DIV but the (print preview displayed and actual printed) size is much smaller than the specified 3x5 (or 288px x 480px). @media print { @page { size: letter; } body { visibility: hidden; } #section-to-print { visibility: visible; position: absolute; left: 0; top: 0; width: 288px; /* I've also tried width: 3in; */ height: 480px; /* I've also tried width: 5in; */ } } Although I want this printed on letter sized paper, I have also tried the @page size setting to be size: 3in 5in; and size: 288px 480px; but these do not work either - these produce the same results as size: letter;, size: letter portrait;, and size: letter landscape;. Any assistance that can be provided would be greatly appreciated and thanks for your time. Take care and have a good day. In case it is requested, here's a watered-down version of my HTML (Razor Page) and its corresponding CSS: HTML (Razor Page): @page @model ExampleProject.Pages.IndexCardModel @{ ViewData[&quot;Title&quot;] = &quot;Index Card Print-Out&quot;; ViewData[&quot;ContentBGColor&quot;] = &quot;#FFF&quot;; } &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot; /&gt; &lt;title&gt;INDEX CARD EXAMPLE&lt;/title&gt; &lt;link href=&quot;~/css/indexcard.css&quot; rel=&quot;stylesheet&quot; /&gt; &lt;/head&gt; &lt;body&gt; &lt;div class=&quot;indexcard-config-3x5-portrait&quot; id=&quot;section-to-print&quot;&gt; &lt;h3 class=&quot;indexcard-title&quot;&gt;HEADER&lt;/h3&gt; &lt;div class=&quot;ic-table&quot;&gt; &lt;label&gt;Form Here&lt;/label&gt; &lt;/div&gt; &lt;div class=&quot;ic-table&quot;&gt; &lt;label&gt;Table Here&lt;/label&gt; &lt;/div&gt; &lt;div class=&quot;footer&quot;&gt; &lt;label class=&quot;footer&quot;&gt;&amp;#x2610; Notes on back &amp;#x2192;&lt;/label&gt; &lt;/div&gt;…
type: UnansweredQuestion

http://stackoverflow.com/comment/139400292
has text: This doesn't appear to work unfortunately. The gifs are still being styled as the other image filetypes.
type: Comment
comment on: http://stackoverflow.com/a/79058981
score: 0
type: AnswerComment

http://stackoverflow.com/comment/139181669
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78939256
type: QuestionComment
has text: If you had just: `top: 0; background: #fff;` to your `#title_and_menu` in your css, it works no ? or I miss something

http://stackoverflow.com/a/79059479
upvote count: 1
answers question: http://stackoverflow.com/q/79058968
accepted answer of: http://stackoverflow.com/q/79058968
score: 1
has body: Thanks so much for your help, guys, and especially you, redoc! I think I figured it out through this kluge: I just specified the size for each filetype. Now they're constrained to the div with the class "items", and each image has the correct size and position. :D .items { display: flex; flex-direction: row; flex-wrap: wrap; position: relative; width: auto; max-width: 100%; height: auto; max-height: 100%; object-fit: contain; margin: 5px; border: 2px solid blue; /*Example style for div..*/ } /*This targets only JPG images within .items*/ .items img[src$=".jpg"] { border: 2px solid green; /*Example style for jpgs..*/ width: 100%; max-width: 200px; height: auto; max-height: 100%; object-fit: contain; object-position: center bottom; margin: 5px; } /*This targets only PNG images within .items*/ .items img[src$=".png"] { border: 2px solid blue; /*Example style for jpgs..*/ width: 100%; max-width: 200px; height: auto; max-height: 100%; object-fit: contain; object-position: center bottom; margin: 5px; } /*This targets only GIF images within .items*/ .items img[src$=".gif"] { border: 2px solid red; /*Example style for GIFs..*/ width: 100%; max-width: 80px; height: auto; max-height: 100%; object-fit: contain; object-position: center bottom; margin: 5px; }
has comment: http://stackoverflow.com/comment/139401257
type: AcceptedAnswer
downvote count: 0
type: Answer

http://stackoverflow.com/q/78946868
tagged with: http://stackoverflow.com/tag/html
has answer: http://stackoverflow.com/a/78948068
tagged with: drop-down-menu
answer count: 2
has body: After a lot of struggle, I finally managed to get my dropdown buttons to display at the top of the screen, fit in the navbar, and appear next to each other. However, now the dropdown menus for both are overlayed on each other and both drop under the "About Us" section instead of their respective button. Here is a screenshot of my site. #headbar { width: 100%; position: fixed; top: 0; left: 0; right: 0; height: 50px; z-index: 2; border: 2px black solid; display: inline; background-color: #ff0000; } #logo { display: inline; height: 50px; width: 50px; border: none; } #title { display: inline; text-align: center; font-size: 20px; min-width: 100%; border: 2px solid black; } .button-container { display: flex; left: 190px; min-width: 100%; min-height: 50px; border: 2px solid black; top: 0; position: absolute; } #button-1 { background-color: red; color: white; padding: 15px 10px 15px 10px; font-size: 15px; text-align: center; font-weight: bold; display: inline; border: none; border: 2px solid black; height: 50px; width: 100px; position: relative; } #button-2 { background-color: red; color: white; padding: 15px; font-size: 15px; text-align: center; font-weight: bold; display: inline; border: none; border: 2px solid black; height: 50px; width: 100px; position: relative; left: 100px; } .dropdown { position: absolute; display: inline-block; } .dropdown-content a { color: white; padding: 8px 10px; text-decoration: none; display: block; } .dropdown-content a:hover { background-color: #ff0000; } .dropdown:hover .dropdown-content { display: block; } .dropdown:hover .dropbtn { background-color: #ff0000; } DAILY BUGLE About Us What We Are Journalist Oath Editors Writers Photographers Politics Super-Politics Local United States Global Galactic I'm not sure what to put for what I've tried because I've been messing with this for 2 hours and have a poor memory.
tagged with: css
tagged with: dropdown
has comment: http://stackoverflow.com/comment/139195056
tagged with: navbar
score: 0
type: UnansweredQuestion
has answer: http://stackoverflow.com/a/78946960
type: Question
has title: How to fix my dropdown display overlapping with each other?

reactjs
tags question: http://stackoverflow.com/q/79040807
tags question: http://stackoverflow.com/q/78905359
tags question: http://stackoverflow.com/q/78932878
tags question: http://stackoverflow.com/q/78986438
tags question: http://stackoverflow.com/q/79032861
tags question: http://stackoverflow.com/q/79014407
tags question: http://stackoverflow.com/q/78985828
tags question: http://stackoverflow.com/q/78980184
tags question: http://stackoverflow.com/q/79060236
tags question: http://stackoverflow.com/q/78989831
tags question: http://stackoverflow.com/q/79026163
tags question: http://stackoverflow.com/q/78967832
tags question: http://stackoverflow.com/q/79042490
tags question: http://stackoverflow.com/q/79040050
tags question: http://stackoverflow.com/q/78925434
tags question: http://stackoverflow.com/q/79012481
tags question: http://stackoverflow.com/q/78985675
tags question: http://stackoverflow.com/q/79061980
tags question: http://stackoverflow.com/q/78928520
tags question: http://stackoverflow.com/q/79035988
type: Tag
tags question: http://stackoverflow.com/q/79052206
tags question: http://stackoverflow.com/q/78989459
tags question: http://stackoverflow.com/q/79030341
tags question: http://stackoverflow.com/q/79067649
tags question: http://stackoverflow.com/q/78960176
tags question: http://stackoverflow.com/q/79005516
tags question: http://stackoverflow.com/q/79048153
tags question: http://stackoverflow.com/q/78928449
tags question: http://stackoverflow.com/q/78979648
tags question: http://stackoverflow.com/q/79043745
tags question: http://stackoverflow.com/q/78920429
tags question: http://stackoverflow.com/q/79000488
tags question: http://stackoverflow.com/q/78940168
tags question: http://stackoverflow.com/q/78952405
tags question: http://stackoverflow.com/q/79000174
tags question: http://stackoverflow.com/q/78979198
tags question: http://stackoverflow.com/q/78954702
tags question: http://stackoverflow.com/q/79002937
tags question: http://stackoverflow.com/q/78940137
tags question: http://stackoverflow.com/q/78958156
tags question: http://stackoverflow.com/q/79046546
tags question: http://stackoverflow.com/q/79055839
tags question: http://stackoverflow.com/q/79050052
tags question: http://stackoverflow.com/q/79007922
tags question: http://stackoverflow.com/q/78967875
tags question: http://stackoverflow.com/q/78967491
tags question: http://stackoverflow.com/q/78947941
tags question: http://stackoverflow.com/q/78997366
tags question: http://stackoverflow.com/q/78966188
tags question: http://stackoverflow.com/q/78955529
tags question: http://stackoverflow.com/q/78903909
tags question: http://stackoverflow.com/q/79063149
tags question: http://stackoverflow.com/q/79019426
tags question: http://stackoverflow.com/q/78947221
tags question: http://stackoverflow.com/q/78921976
tags question: http://stackoverflow.com/q/79060548
tags question: http://stackoverflow.com/q/78949680
tags question: http://stackoverflow.com/q/79036821
tags question: http://stackoverflow.com/q/79049832
tags question: http://stackoverflow.com/q/78944756
tags question: http://stackoverflow.com/q/79007150
tags question: http://stackoverflow.com/q/78991256
tags question: http://stackoverflow.com/q/78989612
tags question: http://stackoverflow.com/q/78942849
tags question: http://stackoverflow.com/q/79027712
tags question: http://stackoverflow.com/q/78976041
tags question: http://stackoverflow.com/q/78929676
tags question: http://stackoverflow.com/q/78960268
tags question: http://stackoverflow.com/q/78985736
tags question: http://stackoverflow.com/q/79063167
tags question: http://stackoverflow.com/q/79054759
tags question: http://stackoverflow.com/q/79041461
tags question: http://stackoverflow.com/q/78912766
tags question: http://stackoverflow.com/q/78938339
tags question: http://stackoverflow.com/q/78988424
tags question: http://stackoverflow.com/q/78988200
tags question: http://stackoverflow.com/q/79068036
tags question: http://stackoverflow.com/q/78973373
tags question: http://stackoverflow.com/q/78937517

http://stackoverflow.com/comment/139396584
comment on: http://stackoverflow.com/a/79055818
type: Comment
score: 0
type: AnswerComment
has text: forgive me, that styling is not the original of the problem, but rather an unfinished solution. Here is the original header layout...

http://stackoverflow.com/a/79021390
has body: You can fix the footer by taking 2 divs. 1 will contain all areas like header, banner etc and 2nd will contain footer. You have to add 1 extra blank div with main content area having height will be same of the footer height. Try this code CSS code: body, html{ height: 100%; } .outer-container{ margin: 0px auto -200px; } .push{ height: 200px; } HTML Structure: other content section divs footer content
downvote count: 1
upvote count: 0
type: Answer
answers question: http://stackoverflow.com/q/79021002
score: -1

http://stackoverflow.com/comment/139130917
comment on: http://stackoverflow.com/q/78911737
type: QuestionComment
has text: Do you mean number rather than integer? Perhaps if you could show what you are updating total to that would help - e.g. is it just adding 1 each time?
type: Comment
score: 0

http://stackoverflow.com/q/78937046
score: -1
tagged with: javascript
has comment: http://stackoverflow.com/comment/139177320
has comment: http://stackoverflow.com/comment/139177056
tagged with: css
downvote count: 1
tagged with: dom
has title: Waiting for element to rererender
upvote count: 0
type: UnansweredQuestion
has body: Take this piece of code: document.querySelector(":root").style.setProperty("--image-size", "100px"); console.log(document.querySelector("#item").offsetHeight); And this stylesheet: :root { --image-size: 10px; } #item { width: var(--image-size); } The output of the javascript code will be 19. What I was expecting is 190. This is because the element hasn't rerendered yet. I have found another issue where the solution was to wait for one animation frame. Updated code looks like this: document.querySelector(":root").style.setProperty("--image-size", "100px"); requestAnimationFrame(() => { requestAnimationFrame(() => { console.log(document.querySelector("#item").offsetHeight); }): }); This still outputs 19. Am I missing something here? How can I wait for the element to rerender in this case?
favorite count: 0
has comment: http://stackoverflow.com/comment/139177245
type: Question
has comment: http://stackoverflow.com/comment/139177078
answer count: 1
tagged with: http://stackoverflow.com/tag/html
has answer: http://stackoverflow.com/a/78937092

http://stackoverflow.com/q/79016259
answer count: 1
has title: Input fields created using React are not editable
has body: I'm learning React and have created a two page application. The first presents the user with a list of customers from a database, with Add, Edit, Delete, View buttons, my 'App.js'. The second presents a "dialog box" using a CustomerForm component, which is visible when one of four variables is set to true (isAdding, isEditing, isDeleting, isViewing). CustomerForm.js presents fields from the Customer recor, as input boxes, and should allow the user to perform the appropriate operation on them. I've got as far as displaying the data when the user clicks edit, but the fields appear uneditable. The issue relates to the value attribute below: value={customer != null ? customer[field.name] : ""} When I omit this, the text is editable, however the customer record is not shown. The full listing of App.css, CustomerForm.css and CustomerForm.js follow: App.css: .App { text-align: center; } .App-logo { height: 40vmin; pointer-events: none; } @media (prefers-reduced-motion: no-preference) { .App-logo { animation: App-logo-spin infinite 20s linear; } } .App-header { background-color: #282c34; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: calc(10px + 2vmin); color: white; } .App-link { color: #61dafb; } @keyframes App-logo-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } button { border: none; /* Remove the border */ border-radius: 0; /* Make the corners square (0 radius) */ box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3); /* Shadow to the bottom-right */ padding: 5px 10px; /* vert, horiz. Add some padding */ background-color: darkgray; /* Button background color */ color: #FFFFFF; /* Button text color */ font-size: small; /* Font size */ cursor: pointer; /* Show a pointer cursor on hover */ outline: none; /* Remove the default outline on focus */ margin: 4px 4px; /* very, horiz. Add horizontal space between buttons */ } h1 { color: black; font-weight: bold; font-family: 'Verdana', 'Arial'…
type: AnsweredQuestion
has answer: http://stackoverflow.com/a/79016545
tagged with: input
tagged with: reactjs
accepted answer: http://stackoverflow.com/a/79016545
tagged with: javascript
linked to: http://stackoverflow.com/q/78997429
downvote count: 0
tagged with: css
score: 1
has comment: http://stackoverflow.com/comment/139323997
upvote count: 1
favorite count: 0
tagged with: http://stackoverflow.com/tag/html
type: Question

http://stackoverflow.com/comment/139322900
score: 0
has text: If Javascript can't work in the engine you use to print, what else doesn't work?
type: QuestionComment
comment on: http://stackoverflow.com/q/79016277
type: Comment

http://stackoverflow.com/q/79030788
score: 0
tagged with: javascript
answer count: 0
tagged with: css
has title: Rendering many records in a table in Vue with an appropriate scrollbar size
tagged with: vue.js
type: UnansweredQuestion
has body: I want to render a table with many records. I've realized that the browser renders the records very slowly in this case. const { createApp, ref } = Vue createApp({ setup() { const records = ref([]) for (let i = 0; i < 10000; i++) { records.value.push({ id: i + 1, name: `Record ${i + 1}` }) } return { records } } }).mount('#app') #app { height: 200px !important; overflow-y: scroll; } ID Name {{ record.id }} {{ record.name }} I thought that if I only display what is visible on the screen and hide the rest, it would solve my problem. However, the scrollbar doesn't display properly. It doesn't indicate that I could scroll through the 10.000 records. So, the expected scrollbar size would be as if the table had rendered all 10.000 records. As I scroll, I would then render new rows. const { createApp, ref, onMounted } = Vue createApp({ setup() { const records = ref([]) const visibleRecords = ref([]) const rowHeight = 20 + 1 + 1 /* row height + paddingTop + paddingBottom */ const scrollableTable = ref(null) let tableHeight = 0 /* without header */ onMounted(() => { if (scrollableTable.value) { tableHeight = scrollableTable.value.clientHeight - rowHeight /* tableHeight - headerHeight */ } }) for (let i = 0; i < 10000; i++) { records.value.push({ id: i + 1, name: `Record ${i + 1}` }) } const updateVisibleRecords = () => { if (scrollableTable.value) { const start = Math.floor(scrollableTable.value.scrollTop / rowHeight) /* due to scrollTop, we can determine how many records no longer need to be displayed */ const visibleCount = Math.ceil(tableHeight / rowHeight) visibleRecords.value = records.value.slice(start, start + visibleCount) } } onMounted(() => { updateVisibleRecords() /* first render */ scrollableTable.value.addEventListener('scroll', updateVisibleRecords) /* event when scrolled */ }) return { visibleRecords, scrollableTable } } }).mount('#app') #app { height: 200px !important; overflow-y: scroll; } table { height: 100%; border-collapse: collapse; /* border: 0px */ } …
type: Question

http://stackoverflow.com/comment/139126405
score: 1
type: Comment
comment on: http://stackoverflow.com/q/78909592
type: QuestionComment
has text: There isn't a Unicode emoji for an unchecked checkbox, unfortunately (but there is a non-emoji pair, [they aren't pretty](https://emojipedia.org/ballot-box)) - so I don't recommend doing this.

ms-word
tag name: ms-word
type: Tag
tags question: http://stackoverflow.com/q/78927597
tags question: http://stackoverflow.com/q/79249351
tags question: http://stackoverflow.com/q/79417914

http://stackoverflow.com/a/78931303
has body: The URL for the font is wrong in relation to where the CSS file is; URLs in stylesheets are resolved relative to the stylesheet's location. Since the CSS file is static/css/style.css, it should refer to ../fonts/Nunito-Italic-VariableFont_wght.ttf. Your current static/fonts/Nunito-Italic-VariableFont_wght.ttf has the browser request static/css/static/fonts/... (which you can verify by looking at the Network inspector in your browser's developer tools). In addition, of course, you will need to refer to the font, e.g. body { font-face: Nunito; }
type: Answer
score: 0
answers question: http://stackoverflow.com/q/78931291
accepted answer of: http://stackoverflow.com/q/78931291
has comment: http://stackoverflow.com/comment/139166674
type: AcceptedAnswer

http://stackoverflow.com/comment/139138851
score: 0
has text: Please trim your code to make it easier to find your problem. Follow these guidelines to create a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example).
type: QuestionComment
comment on: http://stackoverflow.com/q/78914728
type: Comment

http://stackoverflow.com/comment/139170298
has text: you might use ::before and/or ::after along with :hover selector in CSS to do something like that. https://developer.mozilla.org/en-US/docs/Web/CSS/::before https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover
type: QuestionComment
comment on: http://stackoverflow.com/q/78932108
score: 0
type: Comment

http://stackoverflow.com/q/78980450
favorite count: 0
has title: Hiding a parent div based on all child inputs being disabled
has answer: http://stackoverflow.com/a/78984751
answer count: 6
has answer: http://stackoverflow.com/a/78980588
has answer: http://stackoverflow.com/a/78980481
tagged with: http://stackoverflow.com/tag/html
has answer: http://stackoverflow.com/a/78984974
downvote count: 0
tagged with: javascript
type: UnansweredQuestion
has answer: http://stackoverflow.com/a/78981159
type: Question
upvote count: 2
tagged with: css
has answer: http://stackoverflow.com/a/78980655
has body: I am trying to {display:none} on class="filter-form__group" only if ALL child Input's are 'disabled'. Thanks! I tried some CSS but they do not seem to work and I believe this may have to be done in JS.
score: 2

http://stackoverflow.com/a/79013172
has comment: http://stackoverflow.com/comment/139324247
upvote count: 0
answers question: http://stackoverflow.com/q/79013129
type: Answer
has body: .circular-gradient { width: 300px; height: 300px; background: radial-gradient(circle at center, rgba(255, 255, 255, 1) 0%, enter code here rgba(240, 240, 255, 1) 25%, rgba(230, 230, 255, 1) 50%, rgba(220, 220, 255, 1) 75%, rgba(210, 210, 255, 1) 100% ); } This should do it
score: -1
downvote count: 1

http://stackoverflow.com/q/78938538
accepted answer: http://stackoverflow.com/a/78938640
has comment: http://stackoverflow.com/comment/139181754
type: Question
has comment: http://stackoverflow.com/comment/139181742
has body: I am making a website with JQuery, and I want a signup bar to slide down when I click a button. For some reason, when I first click it, the signup form appears before the div containing it slides down. The div contains the background color, so it is a very noticeable difference. I am using the following code to make the form slide up first and down last. if (signupBarDown) { $signup.slideUp(); $login.slideUp(); } $signupOrLoginDiv.slideToggle(400); if (!signupBarDown) { $signup.slideDown(); $login.slideDown(); } signupBarDown = !signupBarDown; As I said before this works perfectly if its not the first time sliding down/up I have no idea why this happens. The forms are absolutely positioned which forced me to right this code to begin with, but I don't know why that would stop it from working the first time. signupBarDown also starts as false. I tried changing the positioning to fixed, because positioning it absolutely changed the effects of the script before, but it is still the same.
answer count: 1
type: AnsweredQuestion
score: 0
tagged with: javascript
tagged with: jquery
has title: The first time a div slides down the child elements it contains appear first JQuery
has answer: http://stackoverflow.com/a/78938640
tagged with: css

http://stackoverflow.com/comment/139249415
comment on: http://stackoverflow.com/a/78972034
type: Comment
score: 0
type: AnswerComment
has text: ` ` works with `style="mso-rotate: 90"`. You can mso conditional that, or I think having `style="mso-rotate: 90; height: auto;"` should fix it for other emial clients

http://stackoverflow.com/comment/139343516
type: QuestionComment
comment on: http://stackoverflow.com/q/79027712
type: Comment
score: 0
has text: I never reached at this prop before, it looks like css trying to draw an svg on screen, is it? i'm going to try this. Thank you!

http://stackoverflow.com/q/78970645
favorite count: 0
has title: How to place a div next to a centered div in a flexbox?
tagged with: http://stackoverflow.com/tag/html
type: Question
answer count: 1
linked to: http://stackoverflow.com/q/36191516
score: 0
has comment: http://stackoverflow.com/comment/139238986
upvote count: 1
has comment: http://stackoverflow.com/comment/139239706
has body: I want to have a div in the center of the window and place another one right next to it without moving it. Right now I have: .wrapper { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } .centered { text-align: center; } With this code the divs are centered horizontally and vertically, but the div with class draw-area is not exactly in the middle of the window because of the div with class result. Can someone please help me? Is flexbox the wrong tool to use here? Edit: Here is more of my code for more context: Clear Area Submit I want the image to be next to the canvas.
has answer: http://stackoverflow.com/a/78970732
tagged with: css
has comment: http://stackoverflow.com/comment/139240921
tagged with: flexbox
downvote count: 1
type: UnansweredQuestion

http://stackoverflow.com/comment/139132347
has text: If your goal is to just add text to svg screen then create a text element below or above svg and then position it with `position: absolute;` or any other property.
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78912766
type: QuestionComment

http://stackoverflow.com/q/79037039
has answer: http://stackoverflow.com/a/79037362
answer count: 2
tagged with: http://stackoverflow.com/tag/html
tagged with: css-position
has body: I'm trying to create a circular graph using only CSS and HTML, where each segment has a border with rounded ends at both the start and end. However, I'm struggling with positioning the ::before and ::after pseudo-elements to correctly mark the start and end of each segment's border. Here's what I'm currently working with: I'm using conic-gradient to fill the circle based on a percentage (--value). I want to add small rounded borders (12px diameter) at both the start (::before) and end (::after) of the border for each segment. I'm using calc() along with cos() and sin() to try to calculate the position of the ::after pseudo-element based on the percentage of the circle filled (--value). However, it doesn't seem to be working correctly. How can I accurately position the ::after pseudo-element at the end of the filled segment on the circular graph, ensuring that it aligns with the edge of the filled arc? Thank you for your help! This is a simplified version of my CSS: .circular { &__graph { grid-area: b; max-width: 100%; width: 100%; margin-top: 36px; justify-content: center; display: flex; flex-direction: column; padding-left: 65px; &-chart{ display: flex; width: 100%; height: 500px; } } &__circles{ display: flex; align-content: center; justify-content: center; align-items: center; position: relative; width: 100%; } &__dial-circle { --size: 320px; --thickness: 12px; width: var(--size); height: var(--size); border-radius: 60%; background: conic-gradient(var(--color, #1e90ff) calc(var(--value)* 1%), #F9F9F9 0); mask: radial-gradient(farthest-side, transparent calc(100% - var(--thickness)), white calc(100% - var(--thickness) + 1px)); position: absolute; //transform: rotate(180deg); &::before, &::after { content: ' '; width: 12px; height: 12px; position: absolute; background: var(--color, #1e90ff); left: calc(50% - 7px); top: 0; border-radius: 50%; } &::after{ border: 1px solid red; --angle: calc(var(--value) * 3.6); --radius: calc((var(--size) / 2) - var(--thickness)); l…
accepted answer: http://stackoverflow.com/a/79037362
has answer: http://stackoverflow.com/a/79037047
has comment: http://stackoverflow.com/comment/139360454
linked to: http://stackoverflow.com/q/52205399
has title: How to position rounded end borders correctly on a circular graph using only CSS?
tagged with: css
type: Question
duplicate of: http://stackoverflow.com/q/52205399
type: AnsweredQuestion
possible better answer: http://stackoverflow.com/a/79037047
score: 0

http://stackoverflow.com/q/78944847
has comment: http://stackoverflow.com/comment/139191873
type: Question
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139194108
duplicate of: http://stackoverflow.com/q/31854185
score: 0
tagged with: javascript
has comment: http://stackoverflow.com/comment/139191889
tagged with: pseudo-class
has body: I have this as required design: All 6 figures you see are buttons and they must have different title. The design however is almost identical except bg-color. So I created my styled-btn component: interface StyledBtnProps { title: string; transaction?: boolean; } const ScreenBtn: React.FC<StyledBtnProps> = ({ title, transaction = false, }) => { return ( <InboxArrowDownIcon className="w-8 h-8" /> {title} ); }; I use additional created class in my globals.css to create the polygon: .clip-trapezoid { position: relative; clip-path: polygon(15px 0%, 100% 0%, 100% calc(100% - 25px), calc(100% - 25px) 100%, 0% 100%, 0% 15px); } .clip-trapezoid::before { content: ''; position: absolute; top: -4px; left: -4px; right: -4px; bottom: -4px; border: 4px solid red; clip-path: "inherit"; z-index: -1; } The problem is that the pseudo class is not working. I again cannot see the red border for the cropped corners. This is the actual result: How to fix that?
linked to: http://stackoverflow.com/q/31854185
answer count: 0
tagged with: css
has title: Cannot provide border after clip-path usage
type: UnansweredQuestion
tagged with: pseudo-element

http://stackoverflow.com/a/78926787
upvote count: 2
has body: This might be an xy problem, however its often useful to be able to check details on the current computed css. You're probably looking for the Window method getComputedStyle(). Something to keep in mind, this will not let you know if you set the style, just what is currently rendered by the browser. A good idea is to check if it is your desired style, if not, apply your desired style. Enjoy this small demo of getComputedStyle. const box = document.querySelector(".moving-box"); const centerBox = () =&gt; { box.style.cssText = ` top: 50%; left: 50%; translate: -50% -50%; `; }; const alignBoxToTopLeft = () =&gt; { box.style.cssText = ` top: 0; left: 0; translate: unset; `; }; box.addEventListener("mouseenter", () =&gt; { const compStyles = window.getComputedStyle(box); const currentTopValue = compStyles.getPropertyValue("top"); if (currentTopValue === "0px") { centerBox(); } else { alignBoxToTopLeft(); } }); .moving-box { position: absolute; top: 50%; left: 50%; translate: -50% -50%; padding: 1rem; font-size: 20pt; border-radius: 10px; background-color: lightgrey; box-shadow: 0 0 2px black; user-select: none; transition: background-color 0.25s; } &lt;div class="moving-box"&gt;&lt;/div&gt; Of course it's often better just to toggle a class that encapsulates your css, hopefully this answers the question you had. If you need any clarification, don't hesitate to ask.
type: Answer
score: 2
has comment: http://stackoverflow.com/comment/139158241
downvote count: 0
answers question: http://stackoverflow.com/q/78926741
has comment: http://stackoverflow.com/comment/139158293
has comment: http://stackoverflow.com/comment/139158260

http://stackoverflow.com/q/78920605
duplicate of: http://stackoverflow.com/q/114543
type: Question
tagged with: css
has comment: http://stackoverflow.com/comment/139146675
has title: Why cant I change the position of the canvas tag in my html file?
score: 0
tagged with: http://stackoverflow.com/tag/html
answer count: 0
linked to: http://stackoverflow.com/q/114543
has body: I want to center the canvas Basic Partical System Change Spawn Color Frame Count: 0 Rectangle Count: 0 I am have no idea where I am making a mistake. or if canvas can even be moved. Any help would be appreciated after trying these in the canvas tag: position: relative; position: center; margin-left: auto; margin-left: 100px; Nothing has changed and it stays on the left of the page and will not move at all.
tagged with: javascript
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139146673

http://stackoverflow.com/comment/139165714
type: AnswerComment
has text: That svg has red object and white background. if it's the other way around.. we'll have to deal with svg with object that is white..
type: Comment
score: 0
comment on: http://stackoverflow.com/a/78930658

http://stackoverflow.com/a/79022827
upvote count: 2
score: 2
answers question: http://stackoverflow.com/q/79022741
type: AcceptedAnswer
accepted answer of: http://stackoverflow.com/q/79022741
type: Answer
downvote count: 0
has body: I gave main the p-5 class and removed it from the body. Now main can take the whole width of the body, which was causing the cutoff. body still can have the p-5 but then the cards are getting smaller. html, body { overscroll-behavior: none; } .example-large-content { min-height: 20rem; } Large content Large content Large content Large content Large content Large content Large content

http://stackoverflow.com/a/78956442
type: Answer
has comment: http://stackoverflow.com/comment/139214076
has comment: http://stackoverflow.com/comment/139223620
score: 0
accepted answer of: http://stackoverflow.com/q/78956414
has comment: http://stackoverflow.com/comment/139219821
has comment: http://stackoverflow.com/comment/139219361
has comment: http://stackoverflow.com/comment/139214111
answers question: http://stackoverflow.com/q/78956414
has body: You didn't include the JS code which processes the form submission, or state explicitly where the success message is shown, but I assume the response message that submit.php returns is placed into ? If so you can add a simple CSS rule which targets that element by its id and changes its style, e.g. #responseMessage { color: red; } You can add the CSS rule either in a .css file linked to from the contact.php file (via a type of link), or a tag inline within the page. A 3rd option is to put the rule directly into the style attribute of the but generally that's not as readable or maintainable, so most people would advise you to avoid doing that unless for some reason you have no other option. N.B. Centring the may be a little more complex than simply adding a style directly to the div itself - I leave that as a research exercise for the reader for now..the question was about how/where to add the CSS, which is explained here.
has comment: http://stackoverflow.com/comment/139218226
has comment: http://stackoverflow.com/comment/139218260
type: AcceptedAnswer

http://stackoverflow.com/q/78952405
score: 0
answer count: 0
tagged with: reactjs
type: UnansweredQuestion
tagged with: next.js
tagged with: material-ui
has title: NextJS 14 and MUI 6 dynamic theme switcher
tagged with: css
has body: Hey i've been struggling for hours for something that seams simple as first glance. Idea is simple i have Theme with dark and light pallete and i want to switch between them using the useColorScheme hook. my client Provider: 'use client'; import { CssBaseline, ThemeProvider, useColorScheme } from '@mui/material'; import theme from '@/styles/theme'; import { ReactNode, useEffect } from 'react'; interface Props { children: ReactNode; } export default function ClientThemeProvider({ children }: Props) { const { mode, setMode } = useColorScheme(); // useColorScheme to manage theme // Set the theme mode based on the stored value or default to dark useEffect(() => { const storedMode = localStorage.getItem('mui-mode'); if (!storedMode) { setMode('dark'); // Set dark mode as default } else { setMode(storedMode as 'light' | 'dark'); // Set stored mode (light or dark) } }, [setMode]); // Save the mode in localStorage every time it changes useEffect(() => { if (mode) { localStorage.setItem('mui-mode', mode); } }, [mode]); // Dynamically apply the theme based on the current mode const appliedTheme = { ...theme, palette: { mode } }; return ( <CssBaseline /> {children} ); } my theme: 'use client'; import { extendTheme } from '@mui/material/styles'; import { Roboto } from 'next/font/google'; // Load Roboto font from Google Fonts const roboto = Roboto({ weight: ['300', '400', '500', '700'], subsets: ['latin'], display: 'swap', }); // Create the extended theme with color schemes (light and dark) const theme = extendTheme({ cssVarPrefix: 'mui', // Enable CSS variables typography: { fontFamily: roboto.style.fontFamily, }, colorSchemes: { light: { palette: { mode: 'light', background: { default: '#f5f5f5', // Light mode background color paper: '#ffffff', }, text: { primary: '#000000', }, }, }, dark: { palette: { mode: 'dark', background: { default: '#121212', // Dark mode background color paper: '#1e1e1e', }, text: { primary: '#ffffff', }, }, }, }, }); export default theme; my root layo…
type: Question

http://stackoverflow.com/q/78923173
has title: Gradient Border and gradient Shadow with glassmorphism on card
has body: This gives me a animated gradient effect. The problem here is that when I make the background of the card transparent or in my case I want to apply a backdrop-filter for glassmorphism, the gradient effect is seen not only on the borders but also inside the card's background. I just want the gradient effect to be on the borders and also want the animated gradient shadow with the blur on it and also the glassmorphism on the main card. Can anyone help me, please? /* Card Design */ @property --angle { syntax: "&lt;angle&gt;"; inherits: true; initial-value: 0deg; } .card { position: relative; width: 300px; min-height: 300px; border-radius: 10px; background: rgba(0, 0, 0, 0.7); } .card::before, .card::after { content: ""; position: absolute; width: 100%; height: 100%; border-radius: inherit; background-image: conic-gradient( from var(--angle), #ea2dd8, #001bf1, #ea2dd8 ); animation: autoRotate 2s linear infinite; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; padding: 5px; box-sizing: unset; } .card::after { filter: blur(30px); } @keyframes autoRotate { to { --angle: 360deg; } } &lt;div class="card"&gt;&lt;/div&gt;
score: -1
tagged with: css
tagged with: linear-gradients
downvote count: 1
type: UnansweredQuestion
upvote count: 0
favorite count: 0
type: Question
answer count: 1
has answer: http://stackoverflow.com/a/78944155

http://stackoverflow.com/a/78964325
upvote count: 1
has comment: http://stackoverflow.com/comment/139235976
has body: It looks like there’s one incorrect nested selector: .flynt-component[name='BackgroundImagesStackable']::after This should be written as &amp;::after. Other than that, everything looks good! Could you share your component markup to investigate this further?
type: AcceptedAnswer
type: Answer
has comment: http://stackoverflow.com/comment/139228505
answers question: http://stackoverflow.com/q/78960395
accepted answer of: http://stackoverflow.com/q/78960395
downvote count: 0
score: 1

http://stackoverflow.com/comment/139347763
type: QuestionComment
comment on: http://stackoverflow.com/q/79029100
score: 1
has text: Plenty of JS plugins available to create such overlay scrollbars, maybe you want to look into one of those? Like f.e. https://kingsora.github.io/OverlayScrollbars/
type: Comment

http://stackoverflow.com/comment/139166007
type: AnswerComment
type: Comment
comment on: http://stackoverflow.com/a/78930971
score: 0
has text: If you scroll down you will see two cards. The first one is never blurred until you hover the second one, wasn't this your request?

http://stackoverflow.com/comment/139174782
has text: I tried creating a hidden cell in the fourth row ` &nbsp; ` with CSS height and width zero and border none, and putting the letter i in a fifth row, which gets pretty close, but not technically the answer. You can see the code here: https://jsfiddle.net/j3pydev/ayjguvm3/
type: Comment
type: QuestionComment
score: 1
comment on: http://stackoverflow.com/q/78935678

http://stackoverflow.com/a/79129230
downvote count: 0
answers question: http://stackoverflow.com/q/79048027
score: 1
upvote count: 1
has comment: http://stackoverflow.com/comment/139555837
has body: You could achieve something like this using CSS @container queries. * { box-sizing: border-box; } .resize { resize: both; overflow: auto; outline: 1px solid red; } body { margin: 0; } .main-menu { /* border: 3px solid rgb(230, 121, 38);*/ padding-block: 0.5rem; margin: 0 auto; display: flex; justify-content: center; /* define main menu as container reference */ container-type: inline-size; } .main-menu ul { list-style: none; padding: 0; margin: 0; display: flex; } /* switch to vertical layout if menu is less than 32rem wide */ @container (max-width: 32rem) { .main-menu ul { flex-direction: column; } } .main-menu ul li a { display: block; padding: 0.7rem; text-decoration: none; color: black; text-transform: uppercase; font-weight: bold; font-size: 1.2rem; border: 1px solid black; text-align: center; } Link 1 Link 2 Link 3 Link 4 Link 5 Link 6 Link 7 We need to define the parent menu/nav as a container reference by applying container-type: inline-size; Then we can define a container query - very similar to a media query: /* switch to vertical layout if menu is less than 32rem wide */ @container (max-width: 32rem) { .main-menu ul { flex-direction: column; } } Further reading "Container Queries: a Quick Start Guide"
type: Answer

http://stackoverflow.com/comment/139148203
score: 1
type: Comment
comment on: http://stackoverflow.com/a/78917761
type: AnswerComment
has text: There is an insurmountable amount of logic in your response that's beyond my knowledge and skillset. It's frustrating to realize how much more there is learn in R. Nonetheless, it goes without saying how much your response, and the time you took to draft it, helps me. Thanks and much appreciated. Accepting your answer.

http://stackoverflow.com/q/78948123
has body: In Django I use a background-image stored on a remote web-storage (Digitalocean Spaces) like this: &lt;style&gt; .bg-image { background-image: url(&quot;{{ instance.background.url }}&quot;); } &lt;/style&gt; but the request gets blocked A resource is blocked by OpaqueResponseBlocking. The same image is loaded in another place on the same page through a img tag without problems. To understand the problem: What is the difference on the server-side requests that the css-url gets blocked while the img-url passes?
tagged with: cross-site
has comment: http://stackoverflow.com/comment/139230001
type: Question
has comment: http://stackoverflow.com/comment/139230369
has comment: http://stackoverflow.com/comment/139230673
accepted answer: http://stackoverflow.com/a/78974992
has comment: http://stackoverflow.com/comment/139230623
type: AnsweredQuestion
has title: Background-image in CSS url blocked by Opaque Response Blocking
possible better answer: http://stackoverflow.com/a/78966140
has comment: http://stackoverflow.com/comment/139197998
has comment: http://stackoverflow.com/comment/139230160
tagged with: django
score: 0
answer count: 2
has comment: http://stackoverflow.com/comment/139230471
has comment: http://stackoverflow.com/comment/139197268
has answer: http://stackoverflow.com/a/78974992
has comment: http://stackoverflow.com/comment/139197339
tagged with: cors
has comment: http://stackoverflow.com/comment/139229871
tagged with: css
has answer: http://stackoverflow.com/a/78966140

routes
type: Tag
tags question: http://stackoverflow.com/q/78959933
tag name: routes
tags question: http://stackoverflow.com/q/79332871
tags question: http://stackoverflow.com/q/79537183

http://stackoverflow.com/a/79023260
upvote count: 3
score: 3
type: AcceptedAnswer
type: Answer
downvote count: 0
has body: Using the new :nth-child(An + B of S) syntax. In your case tr:nth-child(even of :not([style*="none"])) Demo: .table thead th{ background: #f6f6f6; } .table > tbody > tr:nth-child(even of :not([style*="none"])) > td { background: #f6f6f6; } Firstname Lastname Email John Doe john@example.com John Doe john@example.com Jane Doe jane@example.com Mary Moe mary@example.com John Doe john@example.com July Dooley july@example.com
answers question: http://stackoverflow.com/q/79022855
accepted answer of: http://stackoverflow.com/q/79022855

http://stackoverflow.com/q/78960154
has title: Showing and Hide a div with JS/jQuery in a Wordpress loop
type: Question
type: AnsweredQuestion
accepted answer: http://stackoverflow.com/a/78960452
has answer: http://stackoverflow.com/a/78960963
score: 0
answer count: 2
has body: I am looking for some help using JS or jQuery to show and hide a div. I have social media share in Wordpress loop. I understand how to make show and hide div on click. But in Wordpress loop, when I click share button all divs appear. jQuery(document).ready(function() { $('.loop-item .share-btn').click(function(){ $('.loop-item .share-icon').toggle(); }); }); body { font-family: Arial; font-size: 16px; } .loop-container { display: flex; } .loop-item { width: 200px; margin: 10px; padding: 15px; border: 1px solid #dedede; } .loop-item h4 { margin-top: 0; } .social-share-box { font-size: 14px; } .social-share-box .share-btn { cursor: pointer; margin-bottom: 8px; } .social-share-box .share-icon { display: none; } .social-share-box .share-icon.active { display: block; } .social-share-box .share-icon a { font-size: 12px; width: 14px; height: 14px; border: 1px solid #dedede; border-radius: 90px; display: inline-block; text-align: center; padding: 2px; } Item Title Loop 1 Click here share: F T P Item Title Loop 2 Click here share: F T P As in my code, if I click "Click here share:" the social icon will appear in all posts. My questions: How can I make the social icon only appear on the post I clicked? How to hide the active social media icon when I click on another "Click here share:"? How to hide the active social media icon if I click outside?
tagged with: jquery
tagged with: css
possible better answer: http://stackoverflow.com/a/78960963
has answer: http://stackoverflow.com/a/78960452

http://stackoverflow.com/q/79008567
has comment: http://stackoverflow.com/comment/139308639
tagged with: css
tagged with: z-index
has answer: http://stackoverflow.com/a/79008657
possible better answer: http://stackoverflow.com/a/79008657
has answer: http://stackoverflow.com/a/79008614
has title: z-index not working as intended, wondering what is causing the issue
accepted answer: http://stackoverflow.com/a/79008614
type: Question
has comment: http://stackoverflow.com/comment/139308620
type: AnsweredQuestion
score: 0
answer count: 2
has body: I am trying to make a border around a button. This border is supposed to be a gradient so i am simply trying to make a bigger button without functionality underneath the button above. For some reason, no matter what I do they won't layer the way I want them to. Code below: About me I have tried changing the z-index around, i have also tried to mess around in the wrapper div but nothing works afaik.

http://stackoverflow.com/a/78905399
score: 0
has comment: http://stackoverflow.com/comment/139118763
has body: Basically you have to remove position:fixed at some point (e.g when scrolled "shrink" amount of pixels) As idea of position:fixed is to keep item where it was while scroll
answers question: http://stackoverflow.com/q/78905359
type: Answer

http://stackoverflow.com/comment/139250957
type: Comment
comment on: http://stackoverflow.com/a/78975278
type: AnswerComment
score: 1
has text: The option 2 probably has more drawbacks readability wise than repeating the `child`. `is` is indeed an elegant solution, I didn't know about it, thanks. Although not great if it has a performance hit, I'll need to read a bit about that, a quick search doesn't yield much info about its performance.

http://stackoverflow.com/q/79008654
tagged with: javascript
has title: How to define an icon like FA icons in my webpage?
tagged with: css
downvote count: 1
type: UnansweredQuestion
has body: As Codeberg icon is not in FA, I try to include in my webpage (links simplified) as follows: ... where js/faCodeberg.js is 'use strict'; Object.defineProperty(exports, '__esModule', { value: true }); var prefix = 'fab'; var iconName = 'codeberg'; var width = 512; var height = 512; var aliases = []; var unicode = 'f366'; var svgPathData = 'M0.00 8.56C0.00 14.69 4.25 14.69 4.25 14.69 4.25 14.69 10.92 6.07 10.92 6.07 10.87 5.84 10.65 6.07 10.65 6.07 10.65 6.07 17.04 6.07 17.04 6.07 17.04 6.07 15.04 6.07 15.04 6.07 15.04 6.07 14.84 6.07 14.84 6.07 14.84 6.07 12.76 6.07 12.76 6.07 12.76 6.07 11.42 6.07 11.42 6.07 11.42 6.07 8.97 6.07 8.97 6.07 8.97 6.07 8.65 6.07 8.65 6.07 8.65 6.07 6.07 6.07 6.07 6.07 6.07 6.07 4.89 6.07 4.89 6.07 4.89 6.07 9.41 6.07 9.41 6.07 9.41 6.07 9.82 6.07 9.82 6.07 9.82 6.07 12.89 6.07 12.89 6.07 12.89 6.07 13.94 6.07 13.94 6.07 13.94 6.07 10.59 6.07 10.59 6.07 10.59 6.07 10.08 6.07 10.08 6.07 10.08 6.07 6.54 6.07 6.54 6.07 6.54 6.07 5.61 6.07 5.61 6.07 5.61 6.07 9.92 6.07 9.92 6.07 9.92 6.07 10.48 6.07 10.48 6.07 10.48 6.07 14.50 6.07 14.50 6.07 14.50 6.07 15.36 6.07 15.36 6.07 15.36 6.07 10.18 6.07 10.18 6.07 10.18 6.07 10.73 6.07 10.73 6.07 10.73 6.07 14.78 6.07 14.78 6.07 15.58 3.57 10.81 1.81 14.78 1.65 11.20 -6.35 6.78 -6.35 6.78 -6.35 6.78 -6.35 0.00 4.14 0.00 8.56ZM10.44 13.30C10.44 13.30 10.99 13.30 10.99 13.30 10.99 13.30 14.54 13.30 14.54 13.30 14.54 13.30 14.88 12.86 14.88 12.86 14.88 12.86 10.44 13.30 10.44 13.30ZM13.71 12.86C13.71 12.86 13.15 12.86 13.15 12.86 13.15 12.86 10.78 12.86 10.78 12.86 10.78 12.86 10.30 12.43 10.30 12.43 10.30 12.43 13.71 12.86 13.71 12.86ZM9.13 12.43C9.13 12.43 8.58 12.43 8.58 12.43 8.58 12.43 7.78 12.43 7.78 12.43 7.78 12.43 7.08 12.00 7.08 12.00 7.08 12.00 9.13 12.43 9.13 12.43Z'; exports.definition = { prefix: prefix, iconName: iconName, icon: [ width, height, aliases, unicode, svgPathData ]}; exports.faCodeberg = exports.definition; exports.prefix = prefix; exports.iconName = iconName; exports.width …
upvote count: 0
favorite count: 0
type: Question
score: -1
tagged with: font-awesome
answer count: 1
has answer: http://stackoverflow.com/a/79009343
has comment: http://stackoverflow.com/comment/139310307

http://stackoverflow.com/comment/139331350
type: Comment
comment on: http://stackoverflow.com/q/79020132
score: 0
type: QuestionComment
has text: You can use something like `padding-left: 100px` or `margin-left: 5%` to move elements to right but always start with lower values and then increase as you need so you can understand how much you need. if you use high values it messes your UI.

http://stackoverflow.com/q/79045034
has title: Redux useSelector not logging state in console - Issue with habits state in React app
type: UnansweredQuestion
has body: I am trying to learn redux code by implementing the below tutorial I am not able to see the console log for habits in the browser providing my code snippet below can you let me know how to fix it https://www.youtube.com/watch?v=-ovliZG617g&t=1310s https://codesandbox.io/p/sandbox/yxtwjg?file=%2Fsrc%2Fcomponents%2Fhabits-list.tsx%3A9%2C6 import React from "react"; import { useSelector } from "react-redux"; import { RootState } from "../store/store"; import { Box } from "@mui/material"; const HabitList: React.FC = () => { const { habits } = useSelector((state: RootState) => { state.habits; }); return {console.log("habits", habits)} ; }; export default HabitList;
type: Question
tagged with: css
has answer: http://stackoverflow.com/a/79046209
score: 0
answer count: 2
has answer: http://stackoverflow.com/a/79045166
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139383610
has comment: http://stackoverflow.com/comment/139375904
tagged with: reactjs

http://stackoverflow.com/comment/139198584
type: Comment
score: 0
has text: Undo the z-index change, and just apply the same styles that you are currently applying for `b:hover ~ .item__overlay`, for `.item__overlay:hover` as well.
type: QuestionComment
comment on: http://stackoverflow.com/q/78948897

http://stackoverflow.com/comment/139357102
comment on: http://stackoverflow.com/q/79035218
type: Comment
has text: Oh, I didn't see that before. Yeah that is the syntax for creating a new element, it's not going to match the element that's already on the page. Try `$('.loadingDiv').hide()`
score: 0
type: QuestionComment

http://stackoverflow.com/q/78954084
tagged with: ruby
has body: there is a project called TheForeman (v3.3.0) for which I want to override some ERB templates with spree/deface (v1.5.3), for example _managed.html.erb, and add something at the end of it. # in app/overrides/nic/manageds/_managed/add_my_partial.html.erb.deface <%= render 'my/partial', :f => f %> Works great! Now, there are 5 more templates of the same kind, where the same approach works. But then I have to supply the identical .deface for each template. It would be more sensible and maintainable if I were to put my partial at the end of the other partial, which is rendered in each template (my current deface select target), right? Sadly, I failed to achieve that with deface, which brought me here. What I've tried so far... deface cannot go directly to the end of a file deface insert_after cannot use closing_selector and it looks like it doesn't recognize which ERB elements start and end Ruby blocks selecting erb[silent]:contains('if') inserts as second line in the file selecting erb[silent]:contains('end') inserts three times, once after each <% end %> Using :root or :last as CSS selectors yield very strange results I cannot explain. Both select more than the root and final elements, which makes no sense. The CSS selector last-of-type seems to be completely ignored and therefor erb[silent]:last-of-type selects every silent ERB element nth-child seems to be processed, but... erb[silent]:contains('end'):nth-child(3) hits nothing erb[silent]:nth-child(5) hits the second <% end %> erb[silent]:nth-child(6) hits nothing erb[silent]:nth-last-child(1) after each <% end %> :root>erb[silent]:contains('end') inserts after the second <% end %> Since I failed to find any example for deface's cut action, I wouldn't know how to paste whatever was cut back for other ludicrous tests like... Cut everything insert my partial insert before my partial what was cut Maybe, if there was a way to let deface show me the concrete pseudo HTML markup of an ERB file, I could experiment with CSS …
answer count: 1
type: AnsweredQuestion
accepted answer: http://stackoverflow.com/a/78955965
tagged with: erb
tagged with: deface
has title: Insert after closing ERB tag with spree/deface
tagged with: css
has answer: http://stackoverflow.com/a/78955965
score: 0
tagged with: theforeman
type: Question

http://stackoverflow.com/q/78996100
tagged with: angular
type: UnansweredQuestion
has title: Edit icon in mobile view missing
has comment: http://stackoverflow.com/comment/139286637
type: Question
tagged with: http://stackoverflow.com/tag/html
has body: When I go to mobile responsive view in a web browser the Edit pencil icon currently doesn’t show under the ‘Attachments’ column if the name of the file is really long like in the picture below. I found where the problem is in the developer tools. It is in the span class called d-flex. When I uncheck .d-flex: display: flex !important the icon shows. In the code solution there currently isn’t a scss file so what would be the best way to handle this to get the icon to show based off of what I found. Create a new scss file to handle showing the icon when in mobile view only like @media only screen? If so how would I set that up in the scss file? Here are the two pics before and after removing the .d-flex css rule And this is the code for the column with the span tag 0; else emptyCell"> 0" type="link" icon="{{ row.attachments[0].matIcon.icon }}" iconColor="{{ row.attachments[0].matIcon.color }}" [iconTooltip]="row.attachments[0].filename" (onClick)="$event.stopPropagation(); openAttachment(row.attachments[0].url)"> {{ (row.attachments[0].filename | truncateFilename: 18) }} 1 ? 'more_vert' : (row.attachments?.length > 0 ? 'edit' : 'add')" [iconTooltip]="row.attachments?.length > 1 ? ('+' + (row.attachments.length - 1) + ' Additional Attachment' + (row.attachments.length - 1 === 1 ? '' : 's')) : null" (onClick)="$event.stopPropagation(); showManageAttachmentsDialog(row)">
has comment: http://stackoverflow.com/comment/139286639
score: 0
answer count: 0
tagged with: css

http://stackoverflow.com/q/79000085
tagged with: javascript
has body: I have the following code: const data = [ { text: "Forage" }, { text: "Four\ndollar" }, // { text: 'Interior\ndesign' }, // { text: 'Salvia\nnormcore' }, // { text: 'Typewriter' }, // { text: 'Bicycle\nrights' }, // { text: 'Try-hard\nenamel' }, // { text: 'Grailed' }, // { text: 'Fingerstache' }, ]; const canvas = document.getElementById("metaballs__canvas"); let circles = []; let blob = null; const random = (min, max) =&gt; Math.random() * (max - min) + min; const orbitRadius = random(8, 16); const orbitSpeed = random(0.001, 0.005); paper.setup(canvas); paper.view.autoUpdate = true; blob = new paper.CompoundPath({ children: [], strokeColor: "white" }); const createCircles = (content, position) =&gt; { const text = new paper.PointText({ point: position, content: content, fontFamily: "Instrument Sans", fontWeight: "400", fontSize: 24, justification: "center", fillColor: "white" }); const circle = new paper.Path.Circle({ center: position, radius: text.bounds.width / 2 + 48, fillColor: "transparent" }); const group = new paper.Group([text, circle]); group.onMouseDrag = (event) =&gt; { group.position = group.position.add(event.delta); }; circles.push({ group: group, circle: circle, text: text, angle: random(0, 360), center: position, orbitRadius: orbitRadius, orbitSpeed: orbitSpeed }); }; const createBlob = () =&gt; { blob.removeChildren(); const unitedPath = circles.reduce((acc, { circle }) =&gt; { if (acc) return acc.unite(circle); else return circle; }, null); if (unitedPath) blob.addChild(unitedPath); }; const animateCircles = () =&gt; { circles.forEach( ({ group, circle, text, angle, center, orbitRadius, orbitSpeed }, index ) =&gt; { angle += orbitSpeed; const x = center.x + orbitRadius * Math.cos(angle); const y = center.y + orbitRadius * Math.sin(angle); circle.position = new paper.Point(x, y); text.position = new paper.Point(x, y); group.position = new paper.Point(x, y); circles[index].angle = angle; } ); }; data.forEach((item) =&gt; { createCircles( item.text,…
answer count: 0
has comment: http://stackoverflow.com/comment/139308437
has title: Making metaballs from compound path / Paper.js
tagged with: css
type: UnansweredQuestion
tagged with: paperjs
type: Question
has comment: http://stackoverflow.com/comment/139313665
has comment: http://stackoverflow.com/comment/139308433
tagged with: http://stackoverflow.com/tag/html
score: 0

http://stackoverflow.com/q/79054124
answer count: 2
has answer: http://stackoverflow.com/a/79054330
tagged with: css
has answer: http://stackoverflow.com/a/79054154
type: UnansweredQuestion
has body: I have a div with two spans inside it. The position of spans is that span1 uses a sticky position from the center of the div while span2 is at the bottom of the div. The idea is that, as the user scrolls, span1, which is initially at opacity 0 becomes visible and after further scrolling, span2 becomes visible. I tried achieving this by manually tweaking the points they become visible. Is there an optimal way to achieve this? I am attaching my code as reference window.addEventListener('scroll', function() { const message = document.querySelector('.message'); const deathSpan = document.querySelector('.message > span'); const vhDiv = document.querySelector('.vh'); const rect = message.getBoundingClientRect(); const windowHeight = window.innerHeight; const fadeStart1 = windowHeight * 0.3; const fadeEnd1 = windowHeight * 0.6; const fadeStart2 = windowHeight * 0.5; const fadeEnd2 = windowHeight * 0.9; if (rect.top <= fadeEnd1 && rect.bottom >= fadeStart1) { let opacity1 = (fadeEnd1 - rect.top) / (fadeEnd1 - fadeStart1); opacity1 = Math.min(Math.max(opacity1, 0), 1); deathSpan.style.opacity = opacity1; } else { deathSpan.style.opacity = 0; } if (rect.top <= fadeEnd2 && rect.bottom >= fadeStart2) { let opacity2 = (fadeEnd2 - rect.top) / (fadeEnd2 - fadeStart2); opacity2 = Math.min(Math.max(opacity2, 0), 1); vhDiv.style.opacity = opacity2; } else { vhDiv.style.opacity = 0; } }); .above-divs a{ font-size:10rem; background-color: black; color: white; } .message { width: 100%; height: 150vh; display: flex; position: relative; background-color: rgb(0, 0, 0); align-items: center; } .message span { font-size: 10vw; color: rgb(255, 255, 255); } .message>span { position: sticky; top: 50%; opacity: 0; transition: opacity 0.5s ease; } .vh { position: absolute; bottom: 0; right: 10%; opacity: 0; transition: opacity 0.5s ease; } hello Text1 (span1) Text2 (span2)
type: Question
tagged with: http://stackoverflow.com/tag/html
score: 0
tagged with: javascript
has title: Control text opacity based on scroll using javascript

http://stackoverflow.com/comment/139260371
comment on: http://stackoverflow.com/q/78982161
type: QuestionComment
has text: @G-Cyrillus.. can you please show an example of centering the `.element` without the container being nor a flex nor a grid.. and yet just using `max-height` and `max-width` please? because at those condition nor by using `transform` but also using the `flex` itself, the content takes any `height`/`width` by using the corresponding `max-height` and `max-width`. At the same time the quickest solution, given that width is less than height, was just setting the `height` 100% and yet retaining the flex layout for the sake of centering.
type: Comment
score: 0

http://stackoverflow.com/q/79019992
score: 5
upvote count: 5
has title: CSS Sub Grid and Container Queries crashing Chrome
tagged with: css
tagged with: google-chrome
has comment: http://stackoverflow.com/comment/139329471
has comment: http://stackoverflow.com/comment/139329737
type: UnansweredQuestion
favorite count: 0
type: Question
answer count: 1
downvote count: 0
tagged with: crash
has body: Tested using version 129.0.6668.59 of Chrome for Windows. Chrome seems to crash every time I try to use subgrid and container queries together. .comparison-grid { display: grid; grid-template-columns: 1fr 1fr; } .comparison-item { container-type: inline-size; display: grid; grid-template-rows: subgrid; } button { @container (min-width: 460px) { position: absolute; bottom: 2rem; right: 2rem; } } Item number 1 test Item number 2 test The Error Message
tagged with: subgrid
has answer: http://stackoverflow.com/a/79028403

http://stackoverflow.com/comment/139267738
type: Comment
type: QuestionComment
has text: Do you absolutely need to use flexbox?
comment on: http://stackoverflow.com/q/78986368
score: 1

http://stackoverflow.com/q/78916890
has body: I am new to web coding, and met a strange behavior when using flexbox. When a parent is using flex-grow: 1, the child element height: 100% doesn't work. I saw several solutions but doesn't work for me. Does anyone could explain the reason and share some solutions? Thanks! * { box-sizing: border-box; margin: 0; padding: 0; } html, body { min-height: 100vh; } body { display: flex; flex-direction: column; } header { flex: 0 0 auto; background-color: aqua; } main { flex: 1 0 auto; /* Enable flex grow */ background-color: blanchedalmond; } footer { flex: 0 0 auto; background-color: brown; } div#this_should_fill_main { height: 100%; /*This doesn't work！*/ background-color: cornflowerblue; } Document This is a header This is main content This is a footer I tried to add height: 0 to , but when the content is overflow, the footer will not be sticky. I also tried other solutions mentioned in this queestion How can I make Flexbox children 100% height of their parent?, but make no sense for me. add align-items: stretch to ; no change at all add align-self: stretch to ; no change at all use display: flex again in ; it works, but why doesn't only height: 100% work? Could you please help me to solve: Why height: 100% doesn't work in this case? How to solve this without using flexbox again? Thanks for all your answers!
has title: Why height: 100% doesn't work when it is under a parent using flex-grow
tagged with: flexbox
type: UnansweredQuestion
has answer: http://stackoverflow.com/a/78916977
tagged with: http://stackoverflow.com/tag/html
type: Question
score: 0
linked to: http://stackoverflow.com/q/15381172
answer count: 2
tagged with: css
has answer: http://stackoverflow.com/a/78917865

http://stackoverflow.com/q/79023969
tagged with: safari
tagged with: http://stackoverflow.com/tag/html
answer count: 1
score: 0
has title: Safari image in grid scales too far
has body: Why is this image so greedy in height in Safari? I have seen the other posts on Safari grid height issue, but here nothing seems to work. I've tried display: grid and max-height on parent. I suppose the only option would be to switch to max-height image or flex. .parent { max-width: 1500px; margin: auto; } .container { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 20px; align-items: center; } .left { grid-column: span 3 / span 3; } .right { grid-column: span 2 / span 2; } img { height: 100%; max-width: 100%; object-fit: cover; } Test it out Why is this so strangely not working on safari or whatever is happening? Why is this so strangely not working on safari or whatever is happening? Why is this so strangely not working on safari or whatever is happening? Why is this so strangely not working on safari or whatever is happening Why is this so strangely not working on safari or whatever is happening? Why is this so strangely not working on safari or whatever is happening? Why is this so strangely not working on safari or whatever is happening? Why is this so strangely not working on safari or whatever is happening Why is this so strangely not working on safari or whatever is happening? Why is this so strangely not working on safari or whatever is happening? Why is this so strangely not working on safari or whatever is happening? Why is this so strangely not working on safari or whatever is happening
tagged with: css
has answer: http://stackoverflow.com/a/79024020
tagged with: css-grid
type: UnansweredQuestion
type: Question

http://stackoverflow.com/q/78940168
score: 0
tagged with: javascript
tagged with: reactjs
tagged with: react-datepicker
has body: I need to show calender for available dates in react. For that I have used react-datepicker library as below on my page. //in state availableDates: [ new Date("2024-08-14"), new Date("2024-08-15"), new Date("2024-07-16"), new Date("2024-09-10"), ], //in long form having multiple field inputs, datepicker is at bottom before submit button <DatePicker selected={ new Date(this.state.eventStart) } onChange={(date) => { this.handleEventStartChange( date, "date" ); }} includeDates={this.state.availableDates} dateFormat="MM-d-yyyy" inline /> Due to inline property of datepicker my page is automatically going down when I come to that page. Also if I try to edit each other fields and click outside then also it's like forcefully going down. I tried css solutions like overflow: hidden on it's container div, some other css positioning css but nothing worked. I couldn't find any property of react-datepicker that will prevent this. Is there any solution of this problem? Please guide and help. Thanks.
tagged with: css
answer count: 0
type: UnansweredQuestion
type: Question
tagged with: datepicker
has title: react datepicker's inline property causing automatic bottom scroll. how to prevent that?

http://stackoverflow.com/comment/139315928
type: Comment
has text: Probably related to https://issues.chromium.org/issues/358393574 ? Could you confirm? Could you also create a [mre]?
score: 0
comment on: http://stackoverflow.com/q/79012374
type: QuestionComment

http://stackoverflow.com/q/79021330
tagged with: javascript
has comment: http://stackoverflow.com/comment/139362005
has comment: http://stackoverflow.com/comment/139362848
answer count: 2
has comment: http://stackoverflow.com/comment/139358999
has comment: http://stackoverflow.com/comment/139337551
upvote count: 7
has comment: http://stackoverflow.com/comment/139367014
has comment: http://stackoverflow.com/comment/139332602
linked to: http://stackoverflow.com/q/77466909
has comment: http://stackoverflow.com/comment/139357434
has comment: http://stackoverflow.com/comment/139353082
has comment: http://stackoverflow.com/comment/139365691
tagged with: css
tagged with: google-chrome
has comment: http://stackoverflow.com/comment/139361996
has body: I'm using the following HTML, CSS and Javascript to disguise a video player as an audio player. It works perfectly in Firefox but in Chrome pressing the play button does not actually play anything. What is preventing it from working in chrome and how can I get it to work in Chrome too? Update: I want to expand on a observation that I think maybe helpful (A special thank you to @AHaworth for making a similar observation in the comments): If I remove iframe { display: none; } & the video player initially loads alongside the audio player, the audio player controls (still) has NO effect on the video player. However, if I click play on the video player and then hide it completely using CSS I am now able to fully control the video player through the audio player.. even though the video player is completely hidden. This observation is similar to @AHaworth in the comments "The error in the console that seems most relevant is the one saying that can't play the video because the user has not interacted." So the right approach is to force "interactivity" but how? Check out the CodePen here. let player; const playBtn = document.getElementById('play'); const rewindBtn = document.getElementById('rewind'); const forwardBtn = document.getElementById('forward'); const progressBar = document.getElementById('progress-bar'); const currentTimeEl = document.getElementById('current-time'); const endTimeEl = document.getElementById('end-time'); const speedControl = document.getElementById('speed-control'); const volumeBtn = document.getElementById('volume-btn'); const volumeSlider = document.getElementById('volume-slider'); let duration = 0; window.addEventListener('load', function() { player = new playerjs.Player(document.getElementById("bunny-stream-embed")); player.on('ready', () => { console.log('Player is ready'); player.getDuration(d => { duration = d; endTimeEl.innerText = formatTime(duration); progressBar.max = duration; }); // Set initial volume to 70% player.setVolume(70); volume…
type: UnansweredQuestion
has answer: http://stackoverflow.com/a/79041195
has comment: http://stackoverflow.com/comment/139332621
has comment: http://stackoverflow.com/comment/139332438
has comment: http://stackoverflow.com/comment/139361999
favorite count: 0
score: 7
type: Question
tagged with: firefox
has comment: http://stackoverflow.com/comment/139336292
tagged with: http://stackoverflow.com/tag/html
has answer: http://stackoverflow.com/a/79055447
has comment: http://stackoverflow.com/comment/139359021
has title: Disguised Audio Player Works Perfectly in Firefox but not in Chrome
has comment: http://stackoverflow.com/comment/139337473
has comment: http://stackoverflow.com/comment/139331931
downvote count: 0
has comment: http://stackoverflow.com/comment/139354682

http://stackoverflow.com/comment/139136398
type: QuestionComment
comment on: http://stackoverflow.com/q/78913738
score: 0
type: Comment
has text: @AHaworth Yes. li>ul should match. li>:not(ul)>ul should match. Also li>[:not(ul) times n]>ul should match.

http://stackoverflow.com/a/79032852
has comment: http://stackoverflow.com/comment/139353771
score: 0
has body: Force a layout recalculation on load You can simulate the same behavior that happens when you open the console (resize or layout reflow) by forcing a resize event or recalculating layout dimensions after the document is fully loaded. Adjust the mouse wheel event handler The scrolling might not work as expected because the deltaY value represents vertical scrolling by default. By switching to deltaX, you ensure that it correctly handles horizontal scrolling. example: $(window).on('load', function() { $(window).trigger('resize'); }); $('#imageContainer').on('wheel', function(event) { event.preventDefault(); //$(this).scrollLeft($(this).scrollLeft() + event.originalEvent.deltaY); $(this).scrollLeft($(this).scrollLeft() + (event.originalEvent.deltaY > 0 ? 100 : -100)); }); $(window).on('load', function() { $(window).trigger('resize'); }); $('#imageContainer').on('wheel', function(event) { event.preventDefault(); //$(this).scrollLeft($(this).scrollLeft() + event.originalEvent.deltaY); $(this).scrollLeft($(this).scrollLeft() + (event.originalEvent.deltaY > 0 ? 100 : -100)); }); .mx-6 { margin-left: 1.5rem; margin-right: 1.5rem; } .mt-6 { margin-top: 1.5rem; } .flex { display: flex; } .h-\[60dvh\] { height: 60dvh; } .w-\[35dvh\] { width: 35dvh; } .w-fit { width: fit-content; } .snap-x { scroll-snap-type: x var(--tw-scroll-snap-strictness); } .snap-mandatory { --tw-scroll-snap-strictness: mandatory; } .snap-start { scroll-snap-align: start; } .overflow-x-scroll { overflow-x: scroll; } .scroll-smooth { scroll-behavior: smooth; } .bg-white { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); }
answers question: http://stackoverflow.com/q/79031849
type: Answer

http://stackoverflow.com/comment/139188531
score: 0
type: QuestionComment
has text: Because the circle's width != height?
comment on: http://stackoverflow.com/q/78943132
type: Comment

http://stackoverflow.com/comment/139227168
comment on: http://stackoverflow.com/q/78963829
has text: What happens if you change useState({ left: 100, width: 400 }) to useState({ right: 100, width: 400 })? Also, please make a runnable snippet in your question to make it easier for us to debug.
type: Comment
score: 0
type: QuestionComment

http://stackoverflow.com/comment/139197739
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78948434
has text: Have you reviewed the [documentation for `mask`](https://developer.mozilla.org/en-US/docs/Web/CSS/mask)?
type: Comment

http://stackoverflow.com/a/78933663
type: AcceptedAnswer
downvote count: 1
upvote count: 2
type: Answer
answers question: http://stackoverflow.com/q/78933627
accepted answer of: http://stackoverflow.com/q/78933627
has body: The content inside your buttons is different (text &amp; svg) and with inline-flex the elements are aligned based on their content. Adding vertical-align: middle; to your button should fix the alignment issues you're facing.
score: 1

http://stackoverflow.com/a/79059918
type: Answer
answers question: http://stackoverflow.com/q/79059752
score: 0
has body: Here is a way using a couple of div containers with overflow-y:hidden; and overflow-y:scroll; as well as object-position: to show you how to achieve this. The div with the red border shows you how to show only the top part of the image. The div with the green border shows you the image scrolling so that you can verify for yourself which part of the image is actually being shown in the red div. To adjust which part of the image is being shown, you need to change the value of: object-position: 0px 0px; to something like: object-position: 0px -200px; For more information, please refer to: object-position on MDN .fixed-container { width: 100%; height: 100px; border: solid 3px red; overflow-y: hidden; } .scrolling-container { width: 100%; height: 100px; border: solid 3px green; overflow-y: scroll; } img { width: 100%; height: 500px; display: block; } .offset-image { object-position: 0px 0px; } &lt;div class="fixed-container"&gt; &lt;img class="offset-image" src="https://picsum.photos/seed/picsum/500/500"&gt; &lt;/div&gt; &lt;br/&gt; &lt;div class="scrolling-container"&gt; &lt;img src="https://picsum.photos/seed/picsum/500/500"&gt; &lt;/div&gt;

http://stackoverflow.com/comment/139314490
type: Comment
score: 0
has text: Thank you! Do you have a suggestion for a Javascript solution?
type: QuestionComment
comment on: http://stackoverflow.com/q/79010419

http://stackoverflow.com/q/78994346
tagged with: html-email
tagged with: css
downvote count: 0
accepted answer: http://stackoverflow.com/a/78996025
has answer: http://stackoverflow.com/a/78996025
score: 1
upvote count: 1
favorite count: 0
tagged with: http://stackoverflow.com/tag/html
type: Question
tagged with: gmail
has comment: http://stackoverflow.com/comment/139282414
tagged with: ios
has body: So I noticed, that Gmail App on iOS amends the colors of my email template when in dark mode (i.e. black to white, white to black). Unfortunately, I have no idea how to avoid this. It happens only on this client and os. Gmail App on Android for example works as intended. Is there an easy tweak to force clients to only work with original colors (especially this combination where I have this issue)? meta tags seem to be ignored by Gmail on iOS. media is already in use. so prefers color scheme wont work. Password reset To reset your password, please follow the instructions in this email ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ PASSWORD RESET Hello {{login}}, We have received a request from you to reset your password. To reset your password, please click on the button below. RESET NOW 2024 © All rights reserved
answer count: 1
type: AnsweredQuestion
has title: How to deactivate color-scheme/dark mode in email template?
has comment: http://stackoverflow.com/comment/139283251

http://stackoverflow.com/q/79064146
type: AnsweredQuestion
score: 0
possible better answer: http://stackoverflow.com/a/79064223
answer count: 2
tagged with: css
has comment: http://stackoverflow.com/comment/139410264
has title: Convert SVG link to the format in css
upvote count: 1
favorite count: 0
has body: I have css like this below, background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%20%3Cpath%20d%3D%22M23.7%2020.8%2019%2016.1c-.2-.2-.5-.3-.8-.3h-.8c1.3-1.7%202-3.7%202-6C19.5%204.4%2015.1%200%209.7%200S0%204.4%200%209.7s4.4%209.7%209.7%209.7c2.3%200%204.3-.8%206-2v.8c0%20.3.1.6.3.8l4.7%204.7c.4.4%201.2.4%201.6%200l1.3-1.3c.5-.5.5-1.2.1-1.6zm-14-5.1c-3.3%200-6-2.7-6-6s2.7-6%206-6%206%202.7%206%206-2.6%206-6%206z%22%20fill%3D%22%23767d83%22%3E%3C%2Fpath%3E%20%3C%2Fsvg%3E'); It shows the magnifying glass icon. Now I want to change this icon to home button. I can find the icon on fontawesome page and get the link <path d="M575.8 255.5c0 18-15 32.1-32 32.1l-32 0 .7 160.2c0 2.7-.2 5.4-.5 8.1l0 16.2c0 22.1-17.9 40-40 40l-16 0c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1L416 512l-24 0c-22.1 0-40-17.9-40-40l0-24 0-64c0-17.7-14.3-32-32-32l-64 0c-17.7 0-32 14.3-32 32l0 64 0 24c0 22.1-17.9 40-40 40l-24 0-31.9 0c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2l-16 0c-22.1 0-40-17.9-40-40l0-112c0-.9 0-1.9 .1-2.8l0-69.7-32 0c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z"/> However this is the bit different the one I got in css. Is it convertable? or am I wrong from the begginng?
type: Question
has comment: http://stackoverflow.com/comment/139410246
downvote count: 1
has answer: http://stackoverflow.com/a/79064207
tagged with: font-awesome
has comment: http://stackoverflow.com/comment/139520879
accepted answer: http://stackoverflow.com/a/79064207
has answer: http://stackoverflow.com/a/79064223

http://stackoverflow.com/comment/139145640
has text: I would suggest capitalizing the “T” for “Team” in your import statement in App.jsx
type: QuestionComment
comment on: http://stackoverflow.com/q/78920045
type: Comment
score: 0

http://stackoverflow.com/comment/139161550
has text: Your code only contains two square. Is there a fixed amount of squares e.g. 6 squares in your expected output? Or are they generated dynamically?
type: QuestionComment
score: 0
comment on: http://stackoverflow.com/q/78928087
type: Comment

http://stackoverflow.com/comment/139251059
score: 0
comment on: http://stackoverflow.com/a/78977191
type: AnswerComment
has text: Brilliant! Thanks a lot, that's exactly what I was after!
type: Comment

http://stackoverflow.com/q/78920429
answer count: 0
has comment: http://stackoverflow.com/comment/139153441
downvote count: 0
tagged with: css
has title: Can I make AccordionSummary into a box instead of fill the row
has comment: http://stackoverflow.com/comment/139148216
has comment: http://stackoverflow.com/comment/139150091
type: UnansweredQuestion
has body: Here is my codesandbox I'm using Accordion component from MUI, if it's expanded, the content is displayed. I wanted to make the clickable "Status" like a small box (as imagine below/red box) and when it's expanded, the full content is displayed/fill the row. I'm having a hard time to make the AccordionSummary section into a box Full working example code is in the sandbox. If it's collapsed I just want the firs small box to be displayed.
favorite count: 0
type: Question
tagged with: accordion
upvote count: 2
score: 2
tagged with: reactjs
has comment: http://stackoverflow.com/comment/139147982
has comment: http://stackoverflow.com/comment/139153333
has comment: http://stackoverflow.com/comment/139153278
has comment: http://stackoverflow.com/comment/139155244
has comment: http://stackoverflow.com/comment/139148157
tagged with: material-ui

http://stackoverflow.com/q/78969513
answer count: 0
tagged with: css
tagged with: dropdown
has title: Dynamic placement and width of dropdown box (activated on click)
type: UnansweredQuestion
has body: I'm building the following page: https://jsfiddle.net/t9f2ca4n/212/ Raw code at the very bottom. The challenge I'm facing is that for each of the line items (Item I or Item II) need to include 2 buttons (to look at setup details, "Category" and "Setup"). Either of these buttons generate/show a hide dropdown box with the relevant details. However, my dropdown items, when you select either "category" or "setup" is not being placed correctly, and everything I have tried doesn't have a stable enough and dynamic impact. I like where the pop-up box starts on the left, but it should end at the equivalent place to the right. Not going all the way to the end. Also, I can't find a way to dynamically ensure that the dropdown box always starts at the bottom of it's selected item row (example below of "ideal" behaviour). it looks correct on "jsfiddle" because of the limit page size. But if you open the page separately, you will see what I mean. To be clear, this only superficially fixes where it starts on a vertical axis (right hand side is still incorrect). What happens now (when you click the button highlighted in yellow) - NOT JSFIDDLE: As you can see, the box appears too far down, and it ends too far to the right. What it currently looks like in JSFiddle Because the page size just happens to be just the right height, the placement of the dropdown looks correct, but isn't because we know that a larger page does work (see above). And, the width of the dropdown is still wrong. Ultimately, this is still not dynamic enough for the dropdowns placement AND width. (the red X's highlight what should NOT exist) what It should look like - Ideal behaviour: What I have tried: I have tried iterations, including: Changing the display type away from absolute to other (relative, fixed, etc..) However, some of these either start taking over other elements, or they are pushed too away outside of all of these related elements. Using the Bottom (and other directional placement parameters). You c…
type: Question
tagged with: http://stackoverflow.com/tag/html
score: 0
tagged with: javascript

http://stackoverflow.com/q/78977235
tagged with: javascript
has body: I am facing some trouble implementing the layout of a page I am working on. I have attached a screenshot of the desired layout. The main element is the box in the bottom right showing tab-content and header; I want that box to take 50% of the visible right half. This is the code snippet showing what I am attempting. Questions that I have Why is overflow-y: auto not taking effect on element 1? In the linked question Make a div fill the height of the remaining screen space, the content height is not dependent on the sibling, and there are no nested flex containers. I think the issue here is happening because of a combination of nested flex and the usage of relative height for elements. html, body { height: 100%; display: flex; flex-direction: column; overflow: hidden; } .header { background: lightcoral; height: 50px; } .main { background: blue; flex: 1; } .page { height: 100%; background: white; display: flex; flex-direction: column; } .page-header { height: 50px; background: yellow; } .page-content { background: lightgoldenrodyellow; flex: 1; display: flex; } .element1 { background: lightgreen; width: 50%; height: 100% max-height: 100%; overflow-y: auto; } .element-1-content { height: 1000px; } .element2 { width: 50%; background: lightblue; display: flex; height: 50%; flex-direction: column; } .tab { background: lightslategrey; height: 20px; } .tab-content { flex: 1; background: lightpink; } some header page header Element 1 content tab header tab content
has title: CSS Issues: Controlling height of a div in a flex (row) container when the content of the sibling is going beyond available height
answer count: 0
tagged with: css
type: UnansweredQuestion
type: Question
duplicate of: http://stackoverflow.com/q/90178
tagged with: http://stackoverflow.com/tag/html
linked to: http://stackoverflow.com/q/90178
score: 0

http://stackoverflow.com/comment/139374881
score: 0
comment on: http://stackoverflow.com/a/79009343
has text: @MarkSchultheiss Thank you, I updated my answer.
type: AnswerComment
type: Comment

http://stackoverflow.com/q/78994787
has body: I'm creating a website with angular 16 and using bootstrap 5.3.3. Somethings don't work on iPhone 13 but works on iphone 8. For example, I have a canvas inside a bootstrap column TOTAL SALES .ag-charts-canvas { display: block !important; width: 100% !important; } On desktop and android this works well, but on iPhone 13, Google Chrome Browers doesn't work. Note: iphone 8 the same solution work. Screenshot - iphone not working Screenshot - android/desktop working I tried put the canva display as block and width with 100%, but doesn't work. I can't reproduce this scenario using chrome user agent
answer count: 0
tagged with: mobile
tagged with: iphone
tagged with: bootstrap-5
downvote count: 1
type: UnansweredQuestion
favorite count: 0
type: Question
tagged with: ios
has comment: http://stackoverflow.com/comment/139315786
score: 0
upvote count: 1
has title: Why canvas size are smaller on iphone 13 then android?
tagged with: css

http://stackoverflow.com/comment/139240450
type: QuestionComment
score: 1
comment on: http://stackoverflow.com/q/78971081
has text: Apparently you're after `grid-template-columns: repeat(auto-fill, minmax(260px, 400px));`. So fill, not fit.
type: Comment

http://stackoverflow.com/a/79012651
has body: At this point flex-direction: column-reverse will be not best solution cause there are more then only those 2 items. So i would go more like @media(max-width: 600px) { .customcontainer { display: flex; flex-direction: column; } .customcontainer &gt; * { /* preserver rest of childrens after title and subtitle */ order: 3; } /* make title first */ .customcontainer &gt; .custom-title { order: 1; } /* make subtitle second */ .customcontainer &gt; .custom-subtitle-order { order: 2; } } ==================== Edit: Theres a issue that this class is rendered dynamicaly (looks like its generated by and framework like vue, angular, react or something like this) At this point we cannot use those id's/classes that are dynamically rendered each reload. To style those elements you have to add an hardcoded class'es to keep styling.
type: Answer
score: 0
has comment: http://stackoverflow.com/comment/139316186
has comment: http://stackoverflow.com/comment/139315993
answers question: http://stackoverflow.com/q/79012618
has comment: http://stackoverflow.com/comment/139316009
has comment: http://stackoverflow.com/comment/139316071

http://stackoverflow.com/comment/139307921
score: 0
has text: Thanks for pointing out the issue. I already correct the bootstrap version. I used ```overflow-y:auto; margin-left:260px``` .
type: QuestionComment
comment on: http://stackoverflow.com/q/79004964
type: Comment

http://stackoverflow.com/comment/139135684
has text: Welcome to SO. You might find reading the site [help section](https://stackoverflow.com/help) useful when it comes to [asking a good question](https://stackoverflow.com/help/how-to-ask). To get the best answers to your question we like to see that you've attempted to solve the problem yourself first using a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example). Here's a [question checklist](https://meta.stackoverflow.com/questions/260648/stack-overflow-question-checklist) you might find useful...
comment on: http://stackoverflow.com/q/78914728
type: Comment
score: 0
type: QuestionComment

http://stackoverflow.com/a/79021675
has comment: http://stackoverflow.com/comment/139332516
has body: Try putting translate3d before rotate: $(document).ready(() => { var tx = 0; var ty = 0; var ag = 0; var el = $('#test'); setTimeout(() => { ag = 45; el.css('transform', 'rotate('+ag+'deg)'); }, 1000); setTimeout(() => { tx = 100; ty = 0; el.css('transform', 'translate3d('+tx+'px, '+ty+'px, 0) rotate('+ag+'deg)'); }, 2000); }); #test{ width: 200px; height: 100px; background-color: red; transform-origin: center; } Another approach is to use translate and rotate separately, instead of transform (but be aware of their coverage): $(document).ready(() => { var tx = 0; var ty = 0; var ag = 0; var el = $('#test'); setTimeout(() => { ag = 45; el.css('rotate', `${ag}deg`); }, 1000); setTimeout(() => { tx = 100; ty = 0; el.css('translate', `${tx}px ${ty}px 0px`); }, 2000); }); #test{ width: 200px; height: 100px; background-color: red; transform-origin: center; }
upvote count: 3
answers question: http://stackoverflow.com/q/79021658
accepted answer of: http://stackoverflow.com/q/79021658
type: AcceptedAnswer
downvote count: 0
type: Answer
score: 3

http://stackoverflow.com/comment/139409152
has text: This is not as simple as I was expecting, but it works perfectly and includes relative responsive sizing of the inputs, so the entire fieldset can easily expand and contract with the viewport, without the need to respect hard-coded px sizes. It also puts the control button after the inputs in the document flow, a plus for accessibility and tabstop ordering.
type: AnswerComment
comment on: http://stackoverflow.com/a/79061341
score: 1
type: Comment

http://stackoverflow.com/a/79018993
answers question: http://stackoverflow.com/q/79018085
upvote count: 2
type: Answer
score: 2
has body: It is generally not a good idea to use inline event handlers. Use addEventListener to handle events within the scripting. Muhammad Aleem Hashmi already explained the issues with your code. I took the liberty to create a timer factory. Maybe its useful for your project. To demonstrate its use here is a minimal reproducable example based on your code. The handling uses event delegation. document.addEventListener(`click`, handle); const myTimer = timerFactory(document.querySelector(`#timer`)); // a factory to show a timer (counting backwards) in [timerDiv] function timerFactory(timerDiv) { let start, running; return function(seconds) { if (!running) { start = new Date(); running = true; runTimer(seconds); } }; function runTimer(seconds) { if (seconds >= 0) { const [min, sec] = diff(seconds); timerDiv.textContent = `${min} : ${sec}`; return setTimeout(_ => runTimer(seconds - 1), 1000); } running = false; } function diff(secondsLeft) { const end = new Date(start); const diff = new Date( end.setSeconds(end.getSeconds() + secondsLeft) - start ); return [ `${diff.getUTCMinutes()}`.padStart(2, `0`), `${diff.getUTCSeconds()}`.padStart(2, `0`)]; } } function handle(evt) { if (evt.target.id === `startTimer`) { console.clear(); return handleTimer(); } } function handleTimer() { const inp = document.querySelector(`#nSeconds`); const seconds = +inp.value; if (seconds < +inp.min || seconds > inp.max) { return console.log(`${seconds} seconds not within limits (${ inp.min} - ${inp.max} seconds)`); }; return myTimer(seconds); } body { background-color: #262626; } input#nSeconds { width: 40px; margin-right: 0.3rem; } #startTimer { margin-left: 0.3rem; } .center { display: flex; justify-content: center; span.white { color: white } } .timer { color: white; margin-top: 30px; font-size: 80px; color: white; font-family: 'Roboto', sans-serif; } 00 : 00 seconds start timer
downvote count: 0

http://stackoverflow.com/comment/139202841
type: AnswerComment
has text: Well that's embarrassing, I had thought of `justify-content` (even mentioned it in the post), but must've made a typo or added it to the wrong element accidentally, would've (largely) done what I had wanted! I had also wrongly assumed `flex: 1 1 auto` wouldn't work with the wrapping at all, but that looks great! Thanks so much for the help!
comment on: http://stackoverflow.com/a/78948659
type: Comment
score: 0

http://stackoverflow.com/comment/139158905
has text: @NINE There is no problem about a totally different solution, if it's pure css and working with images, instead of divs, as well.
type: QuestionComment
comment on: http://stackoverflow.com/q/78926909
type: Comment
score: 0

http://stackoverflow.com/a/79404046
type: Answer
score: 0
has body: Only solution I've found so far was to set the local source in the font-faces to load from while running on localhost, e.g., @font-face { font-family: 'Inter Medium'; src: local('Inter Medium'), url('./resources/fonts/Inter-Medium.woff2') format('woff2'); } At Firefox 134.0.2 it finally stopped showing the error (and does show the 'Inter' font of course), also on a server run by Vite.
answers question: http://stackoverflow.com/q/79013530

http://stackoverflow.com/a/79260606
answers question: http://stackoverflow.com/q/79063741
type: Answer
score: 0
has body: Future peeps can find this in the docs for the ux Ext.ux.TabReorderer : https://docs.sencha.com/extjs/7.8.0/classic/Ext.ux.TabReorderer.html

http://stackoverflow.com/comment/139155661
has text: Let's start with the rarity of this phenomenon. You say it occurs once in every ~25 tables generated, but you don't say anything about reproducibility. So if you take the exact same table, does it break consistently where you don't want it, or only sometimes?
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78925311
type: QuestionComment

http://stackoverflow.com/comment/139132054
score: 0
comment on: http://stackoverflow.com/q/78912512
type: Comment
has text: The idea is that I can add/remove the transform class (or otherwise put the scale on a pseudoclass) whenever needed.
type: QuestionComment

http://stackoverflow.com/comment/139374312
has text: Please create a runnable snippet (including images we can actually see) which demonstrates the problem.
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/79044341
type: Comment

http://stackoverflow.com/q/78988200
type: UnansweredQuestion
duplicate of: http://stackoverflow.com/q/31854185
type: Question
tagged with: http://stackoverflow.com/tag/html
tagged with: clip-path
tagged with: tailwind-css
has body: I wanted to create a slanting line in a section.On that section I wanted a border / line which should be a linear gradient.Or such that the line should be cut in some interval and then continue.I am attaching the image of the design as I wanted. Now let me explain my strategy.I am using a section and on that section tag I have applied clip-path.But that clip-path has only gave me a slanting line which is 100% responsive across multiple devices.Now the issue of the orange breaking line.How should I strategize in order to solve this problem. My code. .section-two{ clip-path: polygon(100% 15%, 0 0%, 0 100%, 100% 100%); position: relative; z-index: 1; display: flex; flex-direction: column; background-color: #1A2227; padding-bottom: 2.5rem; /* This is the equivalent of pb-10 in Tailwind (10 * 0.25rem) */ height: auto; } &lt;section className="section-two flex flex-col bg-[#1A2227] md:h-[85vh] h-max pb-10"&gt; &lt;/section&gt; I am attaching the design I wanted. This is what I have done so far but still it is not working.
tagged with: reactjs
score: 0
linked to: http://stackoverflow.com/q/31854185
answer count: 0
tagged with: css
has title: How to make a slanting line as a border on a section on which clip-path is applied in reactjs tailwindCSS

http://stackoverflow.com/a/79281413
score: 0
has body: That is because the container has the border, and the inner (background) div is "next to it" inside it. The solution would be to define the border around the inner div. For convenience, I've added a calc to calculate the difference by subtracting the border-width variable from the height and the width, like so: :root{ --border-width: 2px; } .container { height: 300px; width: 300px; overflow: hidden; } .background { background: green; height: calc(100% - var(--border-width) * 2); width: calc(100% - var(--border-width) * 2); border: var(--border-width) solid red; border-radius: 15px; }
answers question: http://stackoverflow.com/q/78970968
type: Answer

http://stackoverflow.com/q/78997151
type: Question
tagged with: http://stackoverflow.com/tag/html
has answer: http://stackoverflow.com/a/79016151
has body: Im having trouble having a svg overlay take up 100% width, but modifying the height so it aligns where i need it to so the curve is visible over the video see screenshot. What is the best way to overlay a SVG to make it align and display properly, Thanks. * { font-family: "Montserrat"; } .video-section { width: 100vw; height: 100vh; overflow: hidden; position: relative; z-index: -1; margin: 0; /* Ensure no margin */ padding: 0; /* Ensure no padding */ } .vimeo-wrapper { top: 0; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; overflow: hidden; } .vimeo-wrapper iframe { width: 100vw; height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */ min-height: 100vh; min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .text-overlay { position: absolute; text-align: center; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2 !important; font-size: 48px; color: #fcfdfd; font-weight: bold; line-height: 1; } .video-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgb(0, 0, 0); z-index: 1 !important; opacity: 22% !important; } .text-section { margin-top: -200px; padding: 20px; text-align: center; } .text-content { max-width: 800px; margin: 0 auto; font-weight: 600; } .text-content p { font-size: 48px; letter-spacing: -2px; line-height: 50pt; color: #020202; } .learn-more-btn { display: inline-block; padding: 10px 20px; margin: 30px 0 45px; border-radius: 50px; background-color: #f7cd46; color: black; text-decoration: none; } .svg-overlay { position: absolute; top: 173px; left: 0; width: 100%; height: 100%; z-index: 2; object-fit: cover; } .svg-overlay svg { width: 100%; height: 100%; } .services { font-family: "Montserrat"; margin-top: 20px; font-size: 28px; font-weight: 600; color: rgb(252, 253, 253); font-weight: bold; text-align: center; white-space: nowrap; } .down-arrow { margin-top: 20px; wid…
answer count: 1
tagged with: http://stackoverflow.com/tag/svg
score: 0
tagged with: overlay
has comment: http://stackoverflow.com/comment/139288112
tagged with: css
has comment: http://stackoverflow.com/comment/139290980
type: UnansweredQuestion
has title: SVG overlay on background video CSS
has comment: http://stackoverflow.com/comment/139288938

http://stackoverflow.com/q/78921571
answer count: 1
score: 0
has body: I have a table inside a div. The table has position: absolute with inset defined: https://jsfiddle.net/dp4k9oc1/ hello hello hello hello table { position: absolute; inset: 50px; background-color: green; border-collapse: collapse; } div { width: 400px; height: 400px; background-color: yellow; } label { background: red; } table, th, td { border: 1px solid black; } It looks like this: How can I make the table's width and height to fill the div, and still respect the inset? E.g. something like this:
tagged with: css
has title: How can I make a table that has position:absolute to expand and fill available spaces in its container?
has answer: http://stackoverflow.com/a/78921838
type: UnansweredQuestion
type: Question

http://stackoverflow.com/comment/139326118
comment on: http://stackoverflow.com/q/79017763
type: Comment
type: QuestionComment
score: 1
has text: Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking.

firefox
tags question: http://stackoverflow.com/q/78991638
tags question: http://stackoverflow.com/q/79021330
type: Tag
tags question: http://stackoverflow.com/q/79057124
tag name: firefox
tags question: http://stackoverflow.com/q/79047851
tags question: http://stackoverflow.com/q/79013530
tags question: http://stackoverflow.com/q/79128894
tags question: http://stackoverflow.com/q/79099577
tags question: http://stackoverflow.com/q/79107715
tags question: http://stackoverflow.com/q/79113547
tags question: http://stackoverflow.com/q/79171480
tags question: http://stackoverflow.com/q/79104161
tags question: http://stackoverflow.com/q/79125468
tags question: http://stackoverflow.com/q/79174527
tags question: http://stackoverflow.com/q/79372188
tags question: http://stackoverflow.com/q/79331817
tags question: http://stackoverflow.com/q/79278247
tags question: http://stackoverflow.com/q/79283413
tags question: http://stackoverflow.com/q/79352728
tags question: http://stackoverflow.com/q/79296636
tags question: http://stackoverflow.com/q/79302116
tags question: http://stackoverflow.com/q/79294198
tags question: http://stackoverflow.com/q/79245584
tags question: http://stackoverflow.com/q/79374232
tags question: http://stackoverflow.com/q/79255631
tags question: http://stackoverflow.com/q/79377132
tags question: http://stackoverflow.com/q/79288236
tags question: http://stackoverflow.com/q/79521593
tags question: http://stackoverflow.com/q/79505159
tags question: http://stackoverflow.com/q/79455640
tags question: http://stackoverflow.com/q/79489514
tags question: http://stackoverflow.com/q/79449360
tags question: http://stackoverflow.com/q/79481760
tags question: http://stackoverflow.com/q/79463499
tags question: http://stackoverflow.com/q/79487508
tags question: http://stackoverflow.com/q/79439511
tags question: http://stackoverflow.com/q/79422620
tags question: http://stackoverflow.com/q/79546729
tags question: http://stackoverflow.com/q/79507235

http://stackoverflow.com/q/79061205
has answer: http://stackoverflow.com/a/79155744
score: 0
tagged with: javascript
linked to: http://stackoverflow.com/q/37789476
has title: How to add a fixed watermark on a video in fullscreen mode using an iframe in HTML?
has comment: http://stackoverflow.com/comment/139404714
tagged with: css
has comment: http://stackoverflow.com/comment/139405062
has body: I am working on a project that requires displaying a video in fullscreen mode within an iframe. I want to add a watermark on the video that remains fixed in the center even when fullscreen is activated. The issue is that the default styles applied by the browser when entering fullscreen mode affect the layout of the elements, causing the watermark to change its position. When I enter fullscreen mode, the properties of .watermark are affected, causing it to change its position or not appear correctly. How can I ensure that the watermark stays fixed in the center even when switching to fullscreen mode? I am using HTML, CSS, and JavaScript. I have tried adjusting styles, but it seems that there are default (user agent styles) affecting the layout of the elements. I implemented a watermark overlay on a video inside an iframe that switches to fullscreen mode. I expected the watermark to remain centered on the video even in fullscreen. However, the watermark's position shifts unexpectedly due to the browser's default styles, and it sometimes gets hidden behind other elements or doesn't scale properly in fullscreen mode.
linked to: http://stackoverflow.com/q/23507096
type: UnansweredQuestion
tagged with: iframe
has comment: http://stackoverflow.com/comment/139404742
type: Question
tagged with: fullscreen
tagged with: http://stackoverflow.com/tag/html
answer count: 1
has comment: http://stackoverflow.com/comment/139404974

http://stackoverflow.com/comment/139181644
type: QuestionComment
has text: @DiegoD Instead of having a duplicate class hamburger_menu I used this instead `#drop_menu>*` Please see edit
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78939256

http://stackoverflow.com/comment/139214914
type: Comment
score: 0
type: QuestionComment
has text: But it's this `home.blog .site-header, .home.page:not(.page-template-template-homepage) .site-header, .home.post-type-archive-product .site-header { margin-bottom: 4.235801032em; }`
comment on: http://stackoverflow.com/q/78957784

http://stackoverflow.com/comment/139373289
type: QuestionComment
has text: Wrap the text (but not the ``) in a block like a ` `.
type: Comment
score: 0
comment on: http://stackoverflow.com/q/79041981

http://stackoverflow.com/a/79068048
score: 2
downvote count: 0
type: Answer
has body: As you said you can access http://localhost:8080/main.css, you have main.css generated under resources/static folder By default, this handler serves static content from any of the /static, /public, /resources, and /META-INF/resources directories that are on the classpath. All you have to do is to make link main css from your url accessible path and not from project folder path. Another thing I noted that tailwind was not generating utility classes. For me it only worked by specifying relative path scanning in tailwind.config.js. '../jte/**/*.jte', // Ensure Tailwind scans your JTE files
upvote count: 2
answers question: http://stackoverflow.com/q/79058417
accepted answer of: http://stackoverflow.com/q/79058417
has comment: http://stackoverflow.com/comment/139422168
type: AcceptedAnswer

http://stackoverflow.com/comment/139406014
type: Comment
score: 0
has text: @Paulie_D I want that the column amount should change to 2
type: QuestionComment
comment on: http://stackoverflow.com/q/79061543

http://stackoverflow.com/comment/139215997
comment on: http://stackoverflow.com/a/78958022
score: 0
type: AnswerComment
has text: thank you. I modified the formula thusly
type: Comment

http://stackoverflow.com/comment/139291223
type: AnswerComment
has text: No problem, glad to help
comment on: http://stackoverflow.com/a/78998820
type: Comment
score: 0

http://stackoverflow.com/comment/139198258
comment on: http://stackoverflow.com/q/78948718
type: QuestionComment
type: Comment
score: 0
has text: If you defined the colours that you want in light more and in dark mode higher up (e.g. on the `body`), e.g. using something like [the new `light-dark` function](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark), then I think it would inherit just fine

http://stackoverflow.com/comment/139218104
comment on: http://stackoverflow.com/q/78959126
score: 2
type: Comment
has text: Can you please provide the `code` of the section where you wanna add a video as `background`?
type: QuestionComment

http://stackoverflow.com/comment/139294920
comment on: http://stackoverflow.com/q/78998686
score: 0
type: Comment
has text: @AHaworth I know that the text and the image are siblings. So if the x-height=1/2 of the "x" letter height literally, it means it is 8 pixels. But it's not!!!!!!!!!!! The offset is 5 pixels, not 8 pixels!!!!!!! How does this work?????
type: QuestionComment

http://stackoverflow.com/comment/139400298
score: 0
type: AnswerComment
has text: The code example worked! Thank you so much!
type: Comment
comment on: http://stackoverflow.com/a/79058981

http://stackoverflow.com/q/79063741
has title: drag and drop functionality for extjs tab panel
tagged with: extjs7
tagged with: css
has answer: http://stackoverflow.com/a/79063780
has body: I have been searching for a way to implement drag and drop functionality for reordering tab items inside a tab panel component. I am using ExtJS 7 and as far as I know this functionality was only available back in ExtJS 4, using a plugin called Ext.ux.panel.DDTabPanel. Any ideas on if there is another way to drag and drop tab panel items?
possible better answer: http://stackoverflow.com/a/79260606
score: 0
type: Question
type: AnsweredQuestion
tagged with: extjs
accepted answer: http://stackoverflow.com/a/79063780
has answer: http://stackoverflow.com/a/79260606
answer count: 2
tagged with: javascript

http://stackoverflow.com/comment/139293355
comment on: http://stackoverflow.com/q/79000174
type: Comment
score: 0
has text: Normally elements will size themselves based on their content. In this case, I need to size the element based on a string that may not be in the actual element. I don't know how to do that.
type: QuestionComment

http://stackoverflow.com/comment/139315829
type: AnswerComment
comment on: http://stackoverflow.com/a/79011686
type: Comment
score: 0
has text: This is closed question, no others work on it. It is not currently accepting answers.

http://stackoverflow.com/q/78954173
has title: ExtJS Change color of checkbox, background, and border color
tagged with: extjs6.5.1
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139208156
has comment: http://stackoverflow.com/comment/139208503
tagged with: css
has answer: http://stackoverflow.com/a/78966037
type: Question
answer count: 1
has body: I need help changing the appearance of the checkboxes inside a grid panel. I want to have a white check mark, a blue background, and a gray border outline. I tried tinkering with the CSS but when changing the background color, it looks to bleed to outside the border and when changing the color of the check mark, the border color changes to the same color. Is there a way to do this or am I going to have to use an image column and have the check marks be images?
score: 0
tagged with: http://stackoverflow.com/tag/html
tagged with: extjs

http://stackoverflow.com/comment/139322527
comment on: http://stackoverflow.com/q/79015820
type: Comment
has text: You are just missing min-height:0 and probably you want to switch the height 400px to width 400px
score: 0
type: QuestionComment

http://stackoverflow.com/q/78954204
favorite count: 0
type: Question
has body: document.addEventListener("DOMContentLoaded", (event) =&gt; { const hamburgerButtons = document.querySelectorAll('.hm-button'); const hamburgerLines = [ { closed: { x1: 13, x2: 37, y1: 13, y2: 13, }, open: { x1: 13, x2: 37, y1: 37, y2: 13, } }, { closed: { x1: 13, x2: 37, y1: 25, y2: 25, }, open: null, }, { closed: { x1: 13, x2: 37, y1: 37, y2: 37, }, open: { x1: 13, x2: 37, y1: 13, y2: 37, } } ] const handleHamburgerClick = (event) =&gt; { const button = event.target.closest('.hm-button'); const lines = button.querySelectorAll('line'); if (!button.classList.contains('open')) { lines.forEach((line, idx) =&gt; { if (hamburgerLines[idx].open) { line.setAttribute('x1', hamburgerLines[idx].open.x1) line.setAttribute('y1', hamburgerLines[idx].open.y1) line.setAttribute('x2', hamburgerLines[idx].open.x2) line.setAttribute('y2', hamburgerLines[idx].open.y2) } }); button.classList.add('open'); } else { if (button.classList.contains('open')) { lines.forEach((line, idx) =&gt; { if (hamburgerLines[idx].closed) { line.setAttribute('x1', hamburgerLines[idx].closed.x1) line.setAttribute('y1', hamburgerLines[idx].closed.y1) line.setAttribute('x2', hamburgerLines[idx].closed.x2) line.setAttribute('y2', hamburgerLines[idx].closed.y2) } }); button.classList.remove('open'); } } }; hamburgerButtons.forEach((button) =&gt; { button.addEventListener("click", handleHamburgerClick); }); }); .hm-button { width: 50px; height: 50px; cursor: pointer; } .hm-button.open .hm-line2 { stroke: none; } .hm-outline { x: 2px; y: 2px; width: 46px; height: 46px; rx: 4px; fill: none; } .hm-outline, [class^="hm-line"] { stroke-width: 4px; stroke: black; } [class^="hm-line"] { stroke-linecap: round; transition: all 0.25s ease; } &lt;svg class="hm-button" role="button"&gt; &lt;rect class="hm-outline" /&gt; &lt;line class="hm-line1" x1="13" x2="37" y1="13" y2="13" /&gt; &lt;line class="hm-line2" x1="13" x2="37" y1="25" y2="25" /&gt; &lt;line class="hm-line3" x1="13" x2="37" y1="37" y2="37" /&gt; &lt;/svg&gt; I…
downvote count: 0
type: AnsweredQuestion
score: 3
possible better answer: http://stackoverflow.com/a/78962599
tagged with: http://stackoverflow.com/tag/svg
has answer: http://stackoverflow.com/a/78954352
tagged with: javascript
has title: Transitioning SVG Line Position
answer count: 2
tagged with: css
has answer: http://stackoverflow.com/a/78962599
accepted answer: http://stackoverflow.com/a/78954352
has comment: http://stackoverflow.com/comment/139208386
upvote count: 3

http://stackoverflow.com/comment/139224554
comment on: http://stackoverflow.com/q/78962822
has text: Can you make the code into a runnable snippet (use <> in the editor) and check that it definitely shows the problem, because I cannot reproduce it - I just see the second example having the drop down without such a big margin/padding above it. I don't see any overwriting.
type: QuestionComment
score: 0
type: Comment

http://stackoverflow.com/a/78973672
has comment: http://stackoverflow.com/comment/139244519
type: AcceptedAnswer
upvote count: 2
type: Answer
has comment: http://stackoverflow.com/comment/139244475
score: 2
has comment: http://stackoverflow.com/comment/139244445
has comment: http://stackoverflow.com/comment/139264167
has comment: http://stackoverflow.com/comment/139244525
answers question: http://stackoverflow.com/q/78973631
downvote count: 0
has comment: http://stackoverflow.com/comment/139244420
has body: Use a clip-path with an SVG path(). For the below example, I traced the path from the graphics in the question in Affinity Designer, exported an SVG with a single <path>, ran the export through SVGOmg for optimization and tweaked it very slightly in my SVGPathology tool. If the design has been shipped to you in vector form, you don't need to trace it by hand – just move the orange path to the origin of the drawing and export it. #outer { position: relative; width: 720px; } #orange { position: absolute; top: 0; left: 0; background: orange; font-size: 32pt; width: 720px; height: 750px; clip-path: path('M0 89C0 40 40 0 89 0h485a43 43 0 0 1 43 43v8a44 44 0 0 0 43 43h4a52 52 0 0 1 52 52l-2 511c0 51-42 93-93 93H198a90 90 0 0 1-90-90V505c0-26-21-46-47-46h-8c-29 0-53-24-53-53V89Z'); } #blob1 { position: absolute; top: 0; right: 10px; background: #111; width: 80px; height: 80px; border-radius: 100%; text-align: center; font-size: 50px; line-height: 1; align-content: center; } This is in the orange container. This is in the orange container. This is in the orange container. This is in the orange container. This is in the orange container.
accepted answer of: http://stackoverflow.com/q/78973631

http://stackoverflow.com/comment/139363022
comment on: http://stackoverflow.com/q/79038356
has text: So I have already seen the question with which this is marked as duplicate. However, that is not the same as this. Here div 1 and div 5 are two separate `div`s and it's not just the same div with a bigger height.
type: Comment
score: 0
type: QuestionComment

http://stackoverflow.com/comment/139194832
type: QuestionComment
has text: Can you attach the html, and executable code?
score: 0
comment on: http://stackoverflow.com/q/78946626
type: Comment

http://stackoverflow.com/q/78951420
has body: I am building a portfolio with bootstrap and I have carousal on the top, but it is overflowing more which make it to scroll horizontally. Carousal html Previous Next here is my css /* Ensure the carousel spans the full width of its container */ .carousel { width: 100%; margin: 0 auto; /* Center the carousel within its container */ } /* Remove extra padding and margin around the images */ .carousel-item img { width: 100%; /* Ensures the image covers the full width of the item */ height: 600px; /* Adjusts the height based on the width */ } I need the carousal to be in the size of browser without overflowing and still be responsive as it is
tagged with: bootstrap-4
tagged with: css
answer count: 3
has answer: http://stackoverflow.com/a/78951712
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139207683
score: 0
has comment: http://stackoverflow.com/comment/139207746
has answer: http://stackoverflow.com/a/78953732
has answer: http://stackoverflow.com/a/78951535
tagged with: http://stackoverflow.com/tag/html
type: Question
has comment: http://stackoverflow.com/comment/139203197
has title: How can I prevent my Bootstrap carousel from overflowing?

http://stackoverflow.com/comment/139386623
score: 0
comment on: http://stackoverflow.com/q/79044610
type: QuestionComment
has text: Even then, making PHP not do that and instead making it generate a ` ` element for the SVG element by giving the actual ` ` element an `id` and generating the styles tied to that id selector is probably worth it. That way you still get the power to change things at generation, while also getting better source code out of it.
type: Comment

http://stackoverflow.com/comment/139219638
type: QuestionComment
comment on: http://stackoverflow.com/q/78960206
has text: This question is similar to: [How to toggle show and hide with JS](https://stackoverflow.com/questions/61472948/how-to-toggle-div-show-and-hide-with-js). If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem.
type: Comment
score: 0

http://stackoverflow.com/comment/139217419
type: Comment
has text: prefer to use `if (rootElement.classList.toggle('dark')) {` directly ...
type: AnswerComment
comment on: http://stackoverflow.com/a/78958855
score: 0

http://stackoverflow.com/comment/139275665
type: Comment
has text: @RichDeBourke It works fine with the latest version as you mentioned, but I am searching to ensure the design works well for users with older versions who may not have updated
type: QuestionComment
comment on: http://stackoverflow.com/q/78989459
score: 0

http://stackoverflow.com/q/78934387
answer count: 0
tagged with: css
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139172629
score: 0
tagged with: http://stackoverflow.com/tag/html
type: Question
tagged with: tailwind-css
has title: The custom dynamic plugins that i typed in tailwind isn't working can someone tell me why?
has body: const plugin = require('tailwindcss/plugin') module.exports = { content: ["./src/**/*.{html,js,jsx}"], theme: { extend: { fontFamily:{ nerko: "Nerko One" }, keyframes:{ 'bouncer':{ '0%,100%':{transform: 'translateY(0)'}, '50%':{transform: 'translateY(-50px)'} } }, animation:{ 'bounce-50': 'bouncer 1s ease-in-out' }, }, }, plugins: [ plugin(function({matchComponents, theme}){ matchComponents( { circle:(value)=>({ width:value, height:value, borderRadius:theme('borderRadius.full') }) }, { value:theme('spacing') } ) }), plugin(function({matchComponents, theme}){ matchComponents( { gradientShadow:(color) => ({ boxShadow:`0 180px 700px -20px ${color}, 0 -180px 700px -20px ${color}, 180px 0 700px -20px ${color}, -180px 0 700px -20px ${color}` }) }, { color:theme('colors') }, ) }) ], } Give above is the piece of code of my config.js file from tailwind where i tried to implement custom dynamic plugins but after that also non of the classes are shown in the html can someone please help me i have already set the input and output file and run it so that is not the issue so please help me i tried rewriting the code and i tried different plugins but non of them show up so yea
tagged with: javascript

mudblazor
tags question: http://stackoverflow.com/q/78966785
tags question: http://stackoverflow.com/q/79015656
tags question: http://stackoverflow.com/q/78991187
tags question: http://stackoverflow.com/q/79054912
tag name: mudblazor
tags question: http://stackoverflow.com/q/78989496
type: Tag
tags question: http://stackoverflow.com/q/79176733
tags question: http://stackoverflow.com/q/79325278
tags question: http://stackoverflow.com/q/79356633
tags question: http://stackoverflow.com/q/79321500

http://stackoverflow.com/q/78932696
tagged with: http://stackoverflow.com/tag/html
type: Question
answer count: 1
score: 0
tagged with: javascript
has answer: http://stackoverflow.com/a/78933008
tagged with: css
has body: I've recently asked about this issue, but I am still facing problems with video autoplay on mobile devices. While my code works on certain phones, on others, the video remains paused, and users have to tap the screen to start the video. Here's what I've tried so far: - Muted the video to enable autoplay as per mobile browser requirements. - Used "preload" and "autoplay" attributes in the video tag. - Followed various recommendations from the community, but the issue persists. I’ve also experimented with some JavaScript functions suggested by ChatGPT, but the problem still occurs inconsistently across different devices. Below is my current code: Video Background Your browser does not support the video tag. function playVideo() { var video = document.getElementById('background-video'); video.play().then(function() { console.log('Video is playing'); }).catch(function(error) { console.log('Video playback failed:', error); }); } document.addEventListener('DOMContentLoaded', function() { var video = document.getElementById('background-video'); document.body.addEventListener('click', playVideo); document.body.addEventListener('touchstart', playVideo); video.play().catch(function(error) { console.log('Auto-play failed:', error); }); setTimeout(function() { window.location.href = 'menu.html'; }, 3000); }); document.addEventListener('visibilitychange', function() { var video = document.getElementById('background-video'); if (document.hidden || video.muted === false) { video.pause(); } else { video.play(); } }); html, body { margin: 0; padding: 0; height: 100%; width: 100%; overflow: hidden; position: relative; } video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; } Despite implementing these solutions, the video still does not autoplay on all devices, and I’m unsure why. On some phones, the video is paused, and users have to tap the video to start playback. Does anyone know why this might be happening or have any additional …
has comment: http://stackoverflow.com/comment/139169143
tagged with: mobile
has comment: http://stackoverflow.com/comment/139169648
has comment: http://stackoverflow.com/comment/139170571
type: UnansweredQuestion
has title: Video autoplay issue on some mobile devices—works on some but not others

http://stackoverflow.com/q/78995412
has comment: http://stackoverflow.com/comment/139284724
linked to: http://stackoverflow.com/q/79440738
downvote count: 0
tagged with: css
has body: I'm exploring replacing some JavaScript modals with native HTML and CSS only modals using the new Popover API and I've noticed that pointer-events like hover and click are propagating through to the underlying layer. ::backdrop { background: rgba(255, 255, 255, 0.4); backdrop-filter: grayscale(40%) blur(3px); } Show popover Popover content Links How can I prevent clicks propagating to underlying layer elements when the ::backdrop is being shown? I've attempted pointer-events: none but seen no success. If it's not currently possible, are there browser bugs to follow for tracking this functionality?
type: UnansweredQuestion
has answer: http://stackoverflow.com/a/78995513
favorite count: 0
tagged with: popover
type: Question
has title: How to stop mouse events through CSS ::backdrop
tagged with: http://stackoverflow.com/tag/html
has answer: http://stackoverflow.com/a/78995645
upvote count: 3
score: 3
linked to: http://stackoverflow.com/q/25864259
answer count: 2

http://stackoverflow.com/comment/139359570
type: Comment
has text: pleas provide a visual of the desired output here to enhance clarity
type: QuestionComment
comment on: http://stackoverflow.com/q/79035820
score: 1

http://stackoverflow.com/q/78906077
has answer: http://stackoverflow.com/a/78907387
tagged with: javascript
upvote count: 1
accepted answer: http://stackoverflow.com/a/78907387
tagged with: jquery
tagged with: css
has comment: http://stackoverflow.com/comment/139122578
has comment: http://stackoverflow.com/comment/139122368
score: 1
favorite count: 0
has body: I need a button to reset draggable items position to original to the following fiddle. fiddle here https://jsfiddle.net/adgram/714w6x3t/20/ $(document).ready(function() { $('.event').on("dragstart", function(event) { var dt = event.originalEvent.dataTransfer; dt.setData('Text', $(this).attr('id')); }); $('table td').on("dragenter dragover drop", function(event) { event.preventDefault(); if (event.type === 'drop') { var data = event.originalEvent.dataTransfer.getData('Text', $(this).attr('id')); if ($(this).find('span').length === 0) { de = $('#' + data).detach(); de.appendTo($(this)); //alert("ok"); //mine document.getElementById("done").innerHTML = data + " moved!"; } }; }); }) table th, table td { height: 30px; width: 200px; } table span { display: block; background-color: #09C; height: 100%; width: 100%; } Jun 1 Jun 2 Jun 3 Jun 4 Jun 5 aaa bbb ccc dddd eeee ffff gggg hhhh original https://jsfiddle.net/videma/2RuBh/ fiddle here https://jsfiddle.net/adgram/714w6x3t/20/ When draggable is true the cell can move. I tried if the draggable should revert but not works.if someone can help, I dont need all the items to reset. Because my programm when I make the first drop it runs code , I need only the first move to reset
has title: reset draggable items to original position
type: Question
answer count: 1
type: AnsweredQuestion
downvote count: 0

http://stackoverflow.com/q/79008324
score: 1
type: Question
answer count: 1
tagged with: http://stackoverflow.com/tag/html
downvote count: 0
has comment: http://stackoverflow.com/comment/139308121
type: AnsweredQuestion
has answer: http://stackoverflow.com/a/79008522
has body: The magenta and cyan divs are wrong. They should be aligned to the right of the encompassing yellow div. I have put in right: 0px; on the magenta and cyan divs, but this does not work as expected. Also I have heard floats are cumbersome. How do I clear all the floats so any divs below are not affected?
upvote count: 1
tagged with: css
has comment: http://stackoverflow.com/comment/139308167
accepted answer: http://stackoverflow.com/a/79008522
favorite count: 0
has title: CSS Stacking Groups of Divs, But Getting Them Aligned On The Right

http://stackoverflow.com/q/79018918
has body: I'm starting a new .Net 8 Blazor application. When I run the dotnet publish -c Release command and start the published application I get a 404 error for my css file. This doesn't happen when I developing (using the dotnet watch or dotnet run). Here you can see it works on the dotnet run command This is the error I am running into Any help would be appreciated! I've tried starting a new application in the hopes that I accidentally passed some arguments wrong. edit: Here are the steps to reproduce the error: in your terminal run dotnet new blazor -o ./Blazor.Host run cd ./Blazor.Host rundotnet publish run dotnet path/to/app/Blazor.Host.dll It doesn't look like any of the static files are getting served
has answer: http://stackoverflow.com/a/79025310
tagged with: .net-8.0
has comment: http://stackoverflow.com/comment/139327468
tagged with: css
type: UnansweredQuestion
score: 1
has comment: http://stackoverflow.com/comment/139327857
favorite count: 0
type: Question
answer count: 1
has title: .Net 8 Blazor - Missing CSS file after publish
has comment: http://stackoverflow.com/comment/139329396
downvote count: 0
tagged with: blazor
upvote count: 1

http://stackoverflow.com/comment/139325076
has text: That's the closest so far, thank you. I try to work out a solution, so the outer border is not shown.
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/79015809

http://stackoverflow.com/a/78996025
has body: There are various different approaches that email clients use. Gmail iOS use what I call a blind invert. They change the colours blindly without consideration of things like whether it's already dark, or accessibility. As you've seen, it also does not support the media query 'prefers-color-scheme'. Fortunately there are hacks. First is wherever you specify a background-color, or bgcolor, use background: linear-gradient(#0d0e18, #0d0e18). The color there should be the same as the background color. That will keep it the same. Second is the text, which will continue to get inverted and so be black on black! Hack number two is written up in full here https://www.hteumeuleu.com/2021/fixing-gmail-dark-mode-css-blend-modes/ but the nuts and bolts are as follows: Add some blend mode trickery: Add a class 'darkmode' to your : Add two divs with the gmail-blend-* classes around the text you want to keep white (this only works with white) PASSWORD RESET Alternatively, run a diff check between your code as above and this. Password reset To reset your password, please follow the instructions in this email ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ PASSWORD RESET Hello {{login}}, We have received a request from you to reset your password. To reset your password, please click on the button below. RESET NOW 2024 © All rights reserved
has comment: http://stackoverflow.com/comment/139290048
downvote count: 0
has comment: http://stackoverflow.com/comment/139303023
upvote count: 1
has comment: http://stackoverflow.com/comment/139294116
score: 1
has comment: http://stackoverflow.com/comment/139297459
type: AcceptedAnswer
type: Answer
answers question: http://stackoverflow.com/q/78994346
accepted answer of: http://stackoverflow.com/q/78994346

http://stackoverflow.com/a/78928360
answers question: http://stackoverflow.com/q/78928087
has comment: http://stackoverflow.com/comment/139161248
accepted answer of: http://stackoverflow.com/q/78928087
type: AcceptedAnswer
downvote count: 0
type: Answer
has body: We start with the base of our HTML: And style: .section5 { position: relative; width: 800px; height: 600px; background-color: #f5f5f5 } .base { position: relative; width: 600px; height: 400px; background-color: #e2e2e2; left: 100px; top: 100px; } .square { position: absolute; width: 150px; height: 120px; background-color: #969696; } Now we can use nth-of-type to make the odd squares white: .square:nth-child(odd) { background-color: white; } To calculate the absolute position of the squares, if we want the first and last square to have a 50px gap from the .section5 square, and we have n squares, we can calculate the distance d between two adjacent squares like this: d = (W - 2x - w) / (n - 1) where W is the width of the .section5 and x is the 50px gap we mentioned earlier. So the d in this case will be 110px, so the left of each square needs to be increased by 110px from the previous one. The same logic applies to the top. And by applying those, we get the final result (open it in full view) .section5 { position: relative; width: 800px; height: 600px; background-color: #f5f5f5; } .base { position: relative; width: 600px; height: 400px; background-color: #e2e2e2; left: 100px; top: 100px; } .square { position: absolute; width: 150px; height: 120px; background-color: #969696; } /* Apply alternating background color to odd squares */ .square:nth-child(odd) { background-color: white; } /* Positioning the squares */ .square:nth-child(2) { left: 50px; top: 50px; } .square:nth-child(3) { left: 160px; top: 126px; } .square:nth-child(4) { left: 270px; top: 202px; } .square:nth-child(5) { left: 380px; top: 276px; } .square:nth-child(6) { left: 490px; top: 354px; } .square:nth-child(7) { left: 600px; top: 430px; } An alternative approach using CSS variables: .square { position: absolute; width: 150px; height: 120px; background-color: #969696; left: calc(50px + 110px * var(--i)); top: calc(50px + 76px * var(--i)); } .square:nth-child(2) { --i: 0; } .square:nth-child(3) { --i: 1; …
score: 3
upvote count: 3

http://stackoverflow.com/a/78969734
downvote count: 0
type: Answer
answers question: http://stackoverflow.com/q/78969671
has body: You can use grid-auto-rows: 1fr; .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; grid-auto-rows: 1fr; /* all rows are the same height */ } .item { background: lightblue; padding: 20px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: stretch; /* Ensure content stretches to fill the item */ } Item 1 Item 2 with more content Item 3 Item 4 with even more content that makes it taller
upvote count: 1
score: 1

http://stackoverflow.com/q/78955207
type: Question
score: 0
tagged with: scroll
has title: How To Have Div Scroll When Out-Of-Bounds, While Using Flex?
tagged with: overflow
tagged with: css
answer count: 0
tagged with: flexbox
type: UnansweredQuestion
has body: I have a main div, which is a child and is centered by a content div. This content div is siblings with a header div and footer div, which are children of a wrapper div. The content div is made to grow and that is what I want so that the content always takes up all the screen besides the header and footer div with their set sizes. And when I shrink thee screen small enough that the main div overflows the screen, which is what I want, I want to be able to scroll it back into the screen, however that does not work fully and it gets cut off. I already have margin on the main div, so that it overflows properly with the header and footer divs. The problem remains no matter what I do. I've tried to set max/min-width on the content div and a variety of other things, even completely rethinking about how to do it and drawing it out. But I haven't come to a conclusion of how to have the main div scroll back to being visible and not cut off once it clips out. html { height: 100%; } body { /* background:linear-gradient(90deg,#1a1536,rgb(40, 9, 90), rgb(18, 29, 87),#1a1536); */ height: 100%; overflow: hidden; margin: 0; } .text { ] white-space: nowrap; margin: 0; color: white; } #wrapper { display: flex; height: 100%; flex-direction: column; } /* HEADER */ #header { height: 70px; width: 100%; background: black; border-bottom: solid white 1px; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; } #variant { margin-top: -10px; } /*CONTENT*/ #content { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; overflow: auto; /* max-width:100%; min-width:100%; */ } #main_div { position: relative; height: 675px; width: 1350px; background:linear-gradient(aqua, blue,red,purple); } /* FOOTER */ #footer { width: 100%; height: 30px; background: black; border-top: solid white 1px; z-index: 1; display: flex; align-items: center; justify-content: space-evenly } Map Variant Return

http://stackoverflow.com/comment/139279827
has text: Could you describe further what 'breaks' means? A picture of the resulting problem might be helpful.
score: 0
comment on: http://stackoverflow.com/q/78992567
type: QuestionComment
type: Comment

http://stackoverflow.com/q/79039256
has body: I have a simplified reproduction of my issue here. When the browser does its calculation to see if the anchored element will fit in the given space and then moves it, my JS still returns the original coordinates of the element before it was moved. I've tried using requestAnimationFrame() that was suggested to me but this also does not work as expected. Am I using it correctly or is there some other method I can use to run my script after the browser has rendered? You will notice the red triangles one point on the first few divs all follow the mouse pointer until it moves to a different div. When you reach a div where the browser determines that there is not enough space for the popup to fit and then moves it to a different location, you will notice the triangle point will still use coordinates from the popup when it was in its original position. const hoverTrigger = document.querySelectorAll(".menu"); let currentHoverElement; function handleMousemove(event) { const mouseX = event.clientX; const mouseY = event.clientY; hoverTrigger.forEach((element) => { if (element.matches(":hover")) { requestAnimationFrame(() => { const boundingRect = element.getBoundingClientRect(); const elementY = Math.round(boundingRect.y); const offsetY = mouseY - elementY; if (mouseX === 0 || mouseX <= boundingRect.width) { element.style.setProperty("--x", mouseX + "px"); element.style.setProperty( "--w", boundingRect.width / 2 + mouseX + 16 + "px" ); } if (mouseY === elementY || mouseY <= elementY + boundingRect.height) { element.style.setProperty("--y", offsetY + "px"); } currentHoverElement = element; }); } }); } function handleMouseleave(event) { if (currentHoverElement) { currentHoverElement.style.setProperty("--x", "0"); currentHoverElement.style.setProperty("--y", "-24px"); currentHoverElement.style.setProperty("--w", "100%"); } } document.addEventListener("mousemove", handleMousemove); document.addEventListener("mouseleave", handleMouseleave); @position-try --custom-bottom { top: unse…
tagged with: css
has title: event does not return correct coordinates of element when moved using CSS position-try
has comment: http://stackoverflow.com/comment/139364863
type: UnansweredQuestion
type: Question
answer count: 1
has answer: http://stackoverflow.com/a/79039495
score: 0
tagged with: javascript

http://stackoverflow.com/q/79044837
has comment: http://stackoverflow.com/comment/139379929
tagged with: css
has title: How should i style the content using Tailwind CSS?
tagged with: next.js
has comment: http://stackoverflow.com/comment/139381052
has comment: http://stackoverflow.com/comment/139375988
has body: I'm trying to style my header item container and inside that i have a home icon and i'm pulling that icon from the header page and everything is working like if i try to give header or p tag but when i'm styling the icon or any p tag etc. i'm not getting any results on the webpage i think it must be tailwind css problem but i'm not able to figure out what is it. This is the Header.js import { BadgeCheckIcon, CollectionIcon, HomeIcon, LightningBoltIcon, SearchIcon, UserIcon, } from "@heroicons/react/24/outline"; import Image from "next/image"; import HeaderItem from "./HeaderItem"; function Header() { return ( {/* This is for icons that i'm using on the components section */} <HeaderItem title ='HOME' Icon = {HomeIcon}/> {/* This is the logo image we are going to add in header component */} <Image className="object-contain" src='/images/hulu.png' width={200} height={100} /> ) } export default Header and this is HeaderItem.js function HeaderItem({ Icon, title }) { return ( <Icon className='h-8 mb-1'/> {title} ); } export default HeaderItem; This is my tailwind.config.js file /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./src/pages/**/*.{js,ts,jsx,tsx,mdx}", "./src/components/**/*.{js,ts,jsx,tsx,mdx}", "./src/app/**/*.{js,ts,jsx,tsx,mdx}", ], theme: { extend: { colors: { background: "var(--background)", foreground: "var(--foreground)", }, }, }, plugins: [], }; you can see ii was styling using tailwind but it is not reflecting on my webpage.
has comment: http://stackoverflow.com/comment/139375341
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139375998
has comment: http://stackoverflow.com/comment/139375391
type: Question
has comment: http://stackoverflow.com/comment/139376174
tagged with: http://stackoverflow.com/tag/html
answer count: 1
tagged with: tailwind-css
has answer: http://stackoverflow.com/a/79047718
score: 0
tagged with: javascript
has comment: http://stackoverflow.com/comment/139375417
has comment: http://stackoverflow.com/comment/139380484
has comment: http://stackoverflow.com/comment/139375447

http://stackoverflow.com/q/78961046
tagged with: navigation
tagged with: web-frontend
has comment: http://stackoverflow.com/comment/139226723
type: Question
has title: How can I add style to my responsive menu navbar?
tagged with: http://stackoverflow.com/tag/html
answer count: 1
has answer: http://stackoverflow.com/a/78961147
has body: I created a navbar with a logo on the left side, links on the right side and another 2 links that are highlighted and I added a icon menu, which appears on small screens, but, the problem is that when I open the menu, the links are side by side and I want it to stay in column format. I tried a lot of codes, but it doesn't work — nothing happens. Also, I want to make the highlighted buttons stay inside the menu box too. By the way, I'm a completely beginner, so it's really hard to me work with css, it's kinda confusing. Could anyone save me please? Here's the code: Bryant Ecom Início Link 2 Link 3 Link 4 Link 5 Link 6 Login Contato :root{ /* cores */ --cor-principal: #186fdb; --cor-secundaria: #000000; --cor-adicional: #ffffff; /* fontes */ --ff:"Manrope", sans-serif; --h1: bold 4rem/1em var(--ff); --h2: bold 3rem/1.2em var(--ff); --h3: bold 2.25rem/1.2em var(--ff); --h4: bold 1.5rem/1.6em var(--ff); --p: 1rem/1.6em var(--ff); --fw: 600; --logo: 150px; } body { font-family: var(--ff); margin: 0; padding: 28px 8%; box-sizing: border-box; } header { width: 100%; /* ocupa toda a largura da tela */ } #logo { height: var(--logo); cursor: pointer; } /* navbar */ #navbar { width: 100%; display: flex; /* um elemento ao lado do outro */ align-items: center; justify-content: space-between; } .nav-links { display: flex; gap: 80px; } .nav-links a { text-decoration: none; color: var(--cor-secundaria); font: var(--p); font-weight: var(--fw); position: relative; } .nav-links a::after{ content: ''; position: absolute; width: 0; height: 3px; background-color: var(--cor-principal); left: 0; bottom: 0; transition: width 0.3s ease; } .nav-links a:hover::after { width: 100%; } .nav-links a.active::after { width: 100%; } .nav-links.active a { color: var(--cor-principal); border-bottom: 3px solid var(--cor-principal); } /* botões personalizados */ .highlight-links { /* essa class altera o espaçamento apenas entre os dois botões */ display: flex; gap: 10px; list-style: none; } .nav-btn { te…
score: 0
tagged with: javascript
tagged with: css
type: UnansweredQuestion

http://stackoverflow.com/a/78957410
type: Answer
score: 0
answers question: http://stackoverflow.com/q/78954572
accepted answer of: http://stackoverflow.com/q/78954572
has body: Just in case anyone runs into this challenge and simply wants a parent selector around pico's styling, the following resource on conditional styling has helped me out. Adding that variable into my pico css setup now displays my parent id in the DOM. // Pico lightweight version @use "../../node_modules/@picocss/pico/scss/index" with ( $enable-semantic-container: true, $semantic-root-element: "#nffaac", $parent-selector: "#nffaac", //this is making all the difference $enable-classes: true, $modules: ( "themes/default": true, "content/code": false, "forms/input-color": false, "forms/input-date": false, "forms/input-file": false, "forms/input-range": false, "forms/input-search": false, "components/accordion": false, "components/card": false, "components/dropdown": false, "components/loading": false, "components/modal": false, "components/nav": false, "components/progress": false, "components/tooltip": true, "utilities/accessibility": false, "utilities/reduce-motion": false)); I now see the following loaded... #nffaac input, #nffaac select, #nffaac textarea {....}
type: AcceptedAnswer

http://stackoverflow.com/q/78983946
tagged with: http://stackoverflow.com/tag/html
answer count: 1
type: AnsweredQuestion
has body: In the example below you can see the issue. I have tried changing the grid-tample-colums property of the grid-container (ol) to grid-template-columns: min-content 1fr 0; . But I am stuck. ol { counter-reset: Nr; list-style: none; display: grid; grid-template-columns: min-content 1fr; border: 2px solid rgba(255, 0, 0, .2); padding: 1rem; li { counter-increment: Nr; background-color: rgba(0, 0, 0, .1); grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; margin-bottom: 2pt; &::before { margin-right: 0.1rem; content: counters(Nr, ".") "\00a0"; text-align: end; } } } This works This is the first list item. This is the second list item. This is the third list item. This is broken This is the first list item. This is the second list item. This is a nested list item. This is a nother nested list item. This is the third list item. ol { counter-reset: Nr; list-style: none; display: grid; grid-template-columns: min-content 1fr 0; border: 2px solid rgba(255, 0, 0, .2); padding: 1rem; li { counter-increment: Nr; background-color: rgba(0, 0, 0, .1); grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; margin-bottom: 2pt; &::before { margin-right: 0.1rem; content: counters(Nr, ".") "\00a0"; text-align: end; } } } My Attempt This is the first list item. This is the second list item. This is a nested list item. This is a nother nested list item. This is the third list item.
downvote count: 0
tagged with: css
tagged with: flexbox
tagged with: css-grid
has answer: http://stackoverflow.com/a/78983968
has title: How can I fix nested gird layout?
accepted answer: http://stackoverflow.com/a/78983968
score: 1
upvote count: 1
favorite count: 0
tagged with: html-lists
type: Question

dropdown
tags question: http://stackoverflow.com/q/79016921
tags question: http://stackoverflow.com/q/79025318
tag name: dropdown
type: Tag
tags question: http://stackoverflow.com/q/78969513
tags question: http://stackoverflow.com/q/78946868
tags question: http://stackoverflow.com/q/79153165
tags question: http://stackoverflow.com/q/79487781
tags question: http://stackoverflow.com/q/79422446
tags question: http://stackoverflow.com/q/79526420

http://stackoverflow.com/a/79042374
upvote count: 1
score: 1
has comment: http://stackoverflow.com/comment/139371456
type: AcceptedAnswer
type: Answer
has body: transform and background-clip should belong to the same element body { background-color: #000; overflow: hidden; } .scrolling-text { --offset: 10px; /* adjust this to control the movement */ transform: translateX(var(--offset)); font-size: 50px; font-weight: bold; background: linear-gradient(90deg, orange 50%, white 0) calc(50% - var(--offset))/400% 100%; background-clip: text; color: transparent; } MASKED TEXT MASKED TEXT MASKED TEXT
answers question: http://stackoverflow.com/q/79042088
accepted answer of: http://stackoverflow.com/q/79042088
downvote count: 0

http://stackoverflow.com/comment/139306693
score: 0
type: QuestionComment
has text: Scale? Perhaps.
type: Comment
comment on: http://stackoverflow.com/q/79007601

http://stackoverflow.com/comment/139178459
has text: Then the labels should be positioned in relation to the dots. I'd move those spans into the dot divs to start and go from there.
score: 2
type: Comment
comment on: http://stackoverflow.com/q/78937749
type: QuestionComment

http://stackoverflow.com/comment/139183877
comment on: http://stackoverflow.com/a/78940190
score: 0
type: AnswerComment
has text: Why is your first header cell content not white? `.header div:first-child, .cell:first-child { color: white; }`
type: Comment

http://stackoverflow.com/comment/139881454
has text: It seems to be working just fine: https://jsfiddle.net/y2v4o9nw/ Try with another computer/trackpad/mouse to see if that's the issue in your case.
comment on: http://stackoverflow.com/q/78997557
type: Comment
score: 0
type: QuestionComment

http://stackoverflow.com/comment/139225279
type: AnswerComment
comment on: http://stackoverflow.com/a/78963058
score: 2
type: Comment
has text: This is exactly the answer to your question

http://stackoverflow.com/q/79052687
tagged with: css
has body: I'm working on a Blazor project using Radzen components, and I'm struggling to align a form and button horizontally within the same row using flexbox. The form contains dropdowns, and I want the button to sit next to the dropdowns, but the alignment seems off. Here's my code: <RadzenDropDown /> <RadzenDropDown /> <RadzenButton Text="Add Members" Click="buttonClick" Style="height: 40px; display: flex; align-items: center;" /> How can I ensure that the RadzenFormField and RadzenButton are properly aligned within the same row using flexbox in this layout?
accepted answer: http://stackoverflow.com/a/79052733
score: 0
tagged with: radzen
type: Question
answer count: 1
tagged with: blazor
type: AnsweredQuestion
tagged with: blazor-server-side
has answer: http://stackoverflow.com/a/79052733
tagged with: c#
has title: Alignment Issue inside RadzenStack

http://stackoverflow.com/q/78905081
tagged with: http://stackoverflow.com/tag/pdf
type: Question
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139118250
score: 0
has title: How to render a dynamic html template across multiple pages with header and footer?
has comment: http://stackoverflow.com/comment/139127726
answer count: 0
tagged with: css
has body: Im working on a project where I need to print rendered HTML to a PDF. The content of the HTML is fairly dynamic, and I need to maintain a fixed content size per page, along with rendering of header and footer at each printed page. This is an example setup of the HTML to be printed: <front-page></> <static-content-page-1></> <static-content-page-2></> <dynamic-content-page-1></> <static-content-page-3></> <dynamic-content-page-2></> The front page and pages with static content are fine, and this is a simple example of them: //Hardcoded HTML The page-layout looks like this: The simulated page breaks are just for visual help during development. CSS: .single-page { position: relative; display: block; box-sizing: border-box; width: 798px; height: 1126px; page-break-after: always; break-inside: avoid; overflow: visible; background-color: white; } .page-content { width: 698px; height: 954px; padding: 50px; position: relative; overflow: hidden; break-inside: avoid; } Now, the CSS of the single-page and page-content works perfectly for printing, but as you can see, I had to define the height of each to be able to make the pages break at the correct height for the PDF printing. The problem arises for the pages containing dynamic content. The dynamic content consists of some static column headers, page titles etc, and a mix of different custom components that vary a lot in terms of rendered height. For these pages, I need to make sure that the dynamic content is split out across multiple instances of the page whenever the total content height exceeds the height defined in the page-content (954px). I have been able to implement a somewhat working implementation already, where I first render all content inside a hidden container, and then use this as a base for dividing content out into multiple pages, but it is too rigid and dependent on pre-defining the dynamic elements in order to make it work for more complex HTML structures. The more I dig into this rabbit hole of a solutio…
tagged with: angular
type: UnansweredQuestion

http://stackoverflow.com/comment/139310625
comment on: http://stackoverflow.com/q/79009556
type: Comment
has text: Well, my idea was wrong. I had a look at your MRE and saw: 1. That class `playerInfo` has a width of 200 pixels as given in the CSS. This is therefore the width of the text field block as well. 2. That you stop increasing the font size when it's 30 pixels and then reduce it to 24 pixels. 3. At that stage the names are less than 100 pixels wide, and so have no change of making the text field block wider than 200 pixels. I increased the maximum font size in the loop from 30 to 100 and then it seems to work.
score: 0
type: QuestionComment

http://stackoverflow.com/q/78946005
linked to: http://stackoverflow.com/q/67596440
has title: how can I create a dashed line with two color grey and light grey
answer count: 2
score: -1
linked to: http://stackoverflow.com/q/32500570
possible better answer: http://stackoverflow.com/a/78946276
has answer: http://stackoverflow.com/a/78946100
tagged with: css
upvote count: 2
favorite count: 0
type: Question
has answer: http://stackoverflow.com/a/78946276
tagged with: gradient
has body: I want to create a dashed line like the image below using only CSS and HTML with minimal code. The distribution percent of dashes between two color may vary depending on another CSS variable, so I should be able to set a (percent of grey) and (100%—(percent of grey)) for light grey. I also want to be able to set the width and height of dashes and the width of gaps between them. And no matter how much I try repeat(), grid, etc, I can not achieve this. I also read these two but could not make changes to fit my needs: How to create a dashed border with two alternating colours? Gradient line with dashed pattern Can you guys please help me to solve this challenge? I tried using background-image,background-size,background-position, and background-repeat attributes with a combination of linear-gradient() and repeating-linear-gradient() functions, but I could not succeed in using them in any combination with different values. I expect this
downvote count: 3
accepted answer: http://stackoverflow.com/a/78946100
tagged with: http://stackoverflow.com/tag/html
type: AnsweredQuestion

http://stackoverflow.com/a/79047525
has comment: http://stackoverflow.com/comment/139380369
has comment: http://stackoverflow.com/comment/139382521
accepted answer of: http://stackoverflow.com/q/79044341
has comment: http://stackoverflow.com/comment/139393627
upvote count: 1
has comment: http://stackoverflow.com/comment/139383939
has comment: http://stackoverflow.com/comment/139392157
has comment: http://stackoverflow.com/comment/139391080
score: 1
has body: If you want the glint to "contain itself to only the opaque parts of the image" then mask is the answer. I also changed the imgs to pseudo elements to tidy up the HTML code a bit. .icon { position: relative; display: inline-block; background-color: #fff; width: 24px; height: 24px; overflow: hidden; } .icon::before { content: ''; display: block; position: absolute; inset: 0; background-image: url('https://omeo.one/images/icons.png'); background-position: calc(-24px * (var(--index, 1) - 1)) 0px; } .icon::after { content: ''; display: block; position: absolute; inset: 0; background-image: url('https://omeo.one/images/glint.webp'); mix-blend-mode: lighten; mask-image: url(https://omeo.one/images/icons.png); mask-position: calc(-24px * (var(--index, 1) - 1)) 0px; } .icon:nth-child(2) { background: #800; } .icon:nth-child(3) { background: #080; } .icon:nth-child(4) { background: #008; } .icon:nth-child(5) { background: #888; }
type: AcceptedAnswer
downvote count: 0
answers question: http://stackoverflow.com/q/79044341
type: Answer

http://stackoverflow.com/a/78917419
has body: There are multiple ways to achieve the desired layout using CSS Grid. The trick is to have the grid items in the first column to span multiple rows to allow the grid items in the second and third columns to be aligned in the middle of the grid item that is placed at second row, first column. The following example uses grid-template-areas to achieve the desired output: .grid-container { display: grid; height: 300px; grid-gap: 3px; grid-template-rows: repeat(6, 1fr); grid-template-areas: "sm1 wd1 wd2" "sm1 wd1 wd2" "sm2 wd1 wd2" "sm2 wd3 wd4" "sm3 wd3 wd4" "sm3 wd3 wd4"; } .grid-item { background: #999; } .grid-item:nth-of-type(1) { grid-area: sm1; } .grid-item:nth-of-type(2) { grid-area: wd1; } .grid-item:nth-of-type(3) { grid-area: wd2; } .grid-item:nth-of-type(4) { grid-area: sm2; } .grid-item:nth-of-type(5) { grid-area: wd3; } .grid-item:nth-of-type(6) { grid-area: wd4; } .grid-item:nth-of-type(7) { grid-area: sm3; }
upvote count: 1
answers question: http://stackoverflow.com/q/78917255
score: 1
has comment: http://stackoverflow.com/comment/139140591
type: AcceptedAnswer
accepted answer of: http://stackoverflow.com/q/78917255
downvote count: 0
type: Answer

http://stackoverflow.com/a/78912341
answers question: http://stackoverflow.com/q/78912182
has body: In your code, you can set style in "marquee__row__item" class to set space. also if you want to change the speed just change time of animation "animation: marquee 25s linear infinite;" and it will pause on hover. Below is an example according to your code you can check. Sets how the text is scrolled within the marquee Sets the interval between each scroll movement in milliseconds Fires when the marquee has reached the end of its scroll position. The key to controlling the speed is the animation-duration property in seconds When the user hovers over .marquee-container, the animation-play-state is set to paused, stopping the animation temporarily.
has comment: http://stackoverflow.com/comment/139132037
type: Answer
score: 0

http://stackoverflow.com/comment/139217739
comment on: http://stackoverflow.com/q/78958654
type: Comment
score: 0
has text: sooraj s pillai, @visualVim: Please prefer to include working snippets - external examples should be complementary or a last resort, e.g. if the example code exceeds SO character limits. You may accidentally delete external snippets, making a question or answer less helpful for future users.
type: QuestionComment

http://stackoverflow.com/q/78927597
has body: I am trying to export a word document from html. A lot of items are inside a table. When there is a large text without space, the td content takes a lot of space and the title of the table row shrinks so I used word-break: break-all property for word break but it is also breaking a small word which I do not want. Project Description Redevelopment will include updating mechanical, electrical, and plumbing systems throughout the ground-floor commercial space and office space. Updates include, but are not limited to new cooling towers, water boilers, hydronic system pumps, and piping. asdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa The "word-break:break-all" property breaks the long word but it also breaks a word like "Updates", "hydration" as seen in the picture. I do not want to break those words. I tried word-break: break-word property which seems to work in normal css but not in the exported document from html. Am i missing something?
answer count: 4
type: UnansweredQuestion
has answer: http://stackoverflow.com/a/78963877
tagged with: ms-office
has title: Word break not working properly in exported document from html template
type: Question
has answer: http://stackoverflow.com/a/78963866
tagged with: css
tagged with: ms-word
has answer: http://stackoverflow.com/a/78928397
has comment: http://stackoverflow.com/comment/139222447
score: 0
has answer: http://stackoverflow.com/a/78945844
tagged with: doc

http://stackoverflow.com/comment/139294441
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/79000658
type: Comment
has text: well the later layer's css will always overwrite the former layer's css disregarding the higher class specificity from :hover.

http://stackoverflow.com/comment/139375773
type: QuestionComment
type: Comment
comment on: http://stackoverflow.com/q/79044377
score: 0
has text: My apologies for the delayed response. I took the same structure you had and applied all of my elements (without size and proportions) [codepen.io/smeya/pen/GRVoyBa](https://codepen.io/smeya/pen/GRVoyBa) Here, I am achieving the result I want. However, on my website, the text, when hovered over (and is in front of a white background), turns to purple instead of green (because of the difference).

http://stackoverflow.com/a/79044811
has comment: http://stackoverflow.com/comment/139385358
has body: Ah, you are so close. since everything is named "parent" it gets difficult to exclude the center part. so, what i did is name the individual sectors only as "parent". The mid part is not named anything, because we don't want to change anything there. And then have two styles in css - one which says that if a "parent" element is hovered over, keep its opacity, brightness at 100% (you could just not have a style and it should still work, i guess). The other style is to tell that the mouse is hovered over the svg-container div, but is not hovered over a "parent" element, the lower the opacity and brightness. * { margin: 0px 0px 0px 0px; /* Top Right Bottom Left */ padding: 0px 0px 0px 0px; /* Top Right Bottom Left */ border: 0px solid #00FF00; box-sizing: border-box; } body { background-color: #002233; color: #FFC355; font-family: "Helvetica", "Arial", sans-serif; font-size: 16px; overflow-y: scroll; display: flex; align-items: center; justify-content: center; } /* fade transitions on hover - DIV, SVG, TEXT */ #parent>div, path, text { transition: 0.2s; transition-delay: 5ms; } /* fade ALL out on parent hover - SVG (Sector Groups) */ .parent:hover { filter: opacity(100%) blur(0px) brightness(100%); } .svg-container:hover .parent:not(:hover) { filter: opacity(50%) blur(0px) brightness(80%); } <circle cx='250' cy='250' r='240' stroke='black' fill='black' stroke-width='0' fill-opacity='1' /> <g stroke-width='2.5' stroke-linecap='butt' stroke-linejoin='miter' stroke='black'> <g class='parent'> <path d='M 250 250 L 250 25 A 225 225, 0, 0, 1, 458.7056796681 334.06508950971 Z' fill='#d35400' /> <circle cx='250' cy='250' r='123.75' stroke='black' fill='black' stroke-width='0' fill-opacity='1' /> 8.21 KH/s 31.1% </g> <g class='parent'> <path d='M 250 250 L 458.7056796681 334.06508950971 A 225 225, 0, 0, 1, 171.59428106039 460.89699674856 Z' fill='#aa2200' /> <circle cx='250' cy='250' r='123.75' stroke='black' fill='black' stroke-width='0' fill-opacity='1' /> 6.49 KH/s 24.6% </g…
type: Answer
score: 0
has comment: http://stackoverflow.com/comment/139387114
answers question: http://stackoverflow.com/q/79044610

http://stackoverflow.com/comment/139273863
type: Comment
score: 0
comment on: http://stackoverflow.com/a/78989599
type: AnswerComment
has text: @Kvasimodo on which browser? on chrome and firefox it is seamless.

http://stackoverflow.com/q/79059060
has title: comment reply in wordpress
tagged with: wordpress
answer count: 0
tagged with: php
tagged with: css
downvote count: 0
type: UnansweredQuestion
upvote count: 1
score: 1
favorite count: 0
type: Question
has body: I'm trying to build a theme and a part of the single page doesn't work and that is the comment reply part. I use wp_comment_list for setting type & style & callback function. نظرات <?php wp_list_comments([ 'type' => 'comment', 'style' => 'ul', 'callback' => 'calb_comment' ], get_comments(['post_id' => get_the_ID() ])); ?> and calb_comment function for callback contains comment_reply_link function calb_comment($comment, $args, $depth) { ?> <?php echo get_avatar($comment, '128'); ?> <?php printf( __( '%s says:' ), get_comment_author_link() ); ?> <a href="<?php echo htmlspecialchars( get_comment_link( $comment->comment_ID ) ); ?>"> <?php /* translators: 1: date, 2: time */ printf( __('%1$s at %2$s'), get_comment_date('l,Y,m'), get_comment_time() ); ?> <?php comment_text(); ?> <?php comment_reply_link( array_merge( $args, array( 'add_below' => 'comment', 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ); ?> <?php } and comment_form for building a form for comment and reply that contains some inputs and a button پیام بگذارید <?php comment_form([ 'fields' => [ 'author' => ' ', 'email' => ' ', 'url' => ' ' ], 'comment_field' => ' ', 'title_reply' => '', 'submit_field' => ' %1$s %2$s ', 'submit_button' => ' ارسال ' ]); ?>
tagged with: http://stackoverflow.com/tag/html

http://stackoverflow.com/comment/139207912
type: AnswerComment
has text: Thanks! It looks like it works :) Can't believe the answer was so simple...
comment on: http://stackoverflow.com/a/78953900
type: Comment
score: 0

http://stackoverflow.com/q/78969309
answer count: 1
has comment: http://stackoverflow.com/comment/139267166
score: 0
has title: How to make nested element scrollable without using `flex flex-col flex-1 overflow-hidden` repeatedly?
tagged with: tailwind-css
has body: I am creating a UI using Tailwind CSS. For simplicity, let's say the UI looks like this: Some text Click me text text more text Alot of content overflowing the screen! All these elements are placed in a vertical flow. The div with h-[2000px] is deeply nested in my UI, and because of its size, I want to make the parent div scroll through the large div. I had a hard time making this work, but finally figured out this solution: Some text Click me text text more text Alot of content overflowing the screen! I have to set the classes flex flex-col flex-1 overflow-hidden on every nested layer of elements, and to make the nested div scrollable, I have to set flex flex-col flex-1 overflow-auto. In this example, the large element is not that deeply nested, but in my real case scenario, I am writing flex flex-col flex-1 overflow-hidden about 5 times. This ends up getting hard to keep track of... Is there any simpler way of making a large element deeply nested within the DOM scrollable?
type: UnansweredQuestion
has answer: http://stackoverflow.com/a/78986039
tagged with: css
type: Question

http://stackoverflow.com/a/79057154
upvote count: 1
answers question: http://stackoverflow.com/q/79029152
accepted answer of: http://stackoverflow.com/q/79029152
has body: Your .input textarea is wrapeed by div. And that div is automatically styled. Solution: Add id="wrapper" to div where both textareas are. Then add this to your css file: #wrapper > div { min-width: 90% !important; } Delete w-[54px] and add below min-width: 10%; You can experiment, but that's the idea. Ps. You can change width of .input textarea in your css using w-[600px], for example. Div which wraps input will resize. But it will be harder to make page responding.
score: 1
type: AcceptedAnswer
downvote count: 0
type: Answer

http://stackoverflow.com/a/78985298
upvote count: 0
score: -1
has body: It's hard to decode this but general rule is if you move a button (or anything) if it has a hover or active state, make sure to leave something behind that is still clickable/hoverable. You could use :before pseudo elements to do this or wrap it in a parent container and have the parent not move. This may be the problem you are describing, the solution puts an invisible before pseudo in the -50px offset so something can still be :hover as the other stuff moves. The below code while rather shows this rough concept. button:after { content: &quot;&quot;; position: absolute; top: 0; left: 0; right: -5px; bottom: -5px; outline: 1px solid red; } button:active:after { top: -3px; left: -3px; right: -2px; bottom: -2px; } While the CSS spec has changed a bit since the below demo/example: https://codepen.io/chriscoyier/pen/npERPW https://www.youtube.com/watch?v=xG418MfI3g8
type: AcceptedAnswer
answers question: http://stackoverflow.com/q/78985086
downvote count: 1
accepted answer of: http://stackoverflow.com/q/78985086
type: Answer

http://stackoverflow.com/q/79039436
has body: enter image description here how to achieve a wing style curved shape for image as per the attached screenshot using css Tried with css border radius and alos with clip path css generator we were not able to achieve as per required curve shape for image
has comment: http://stackoverflow.com/comment/139365009
downvote count: 4
tagged with: css
has comment: http://stackoverflow.com/comment/139365063
score: -4
type: Question
has title: how to achieve a wing style curved shape for image as per the attached screenshot
answer count: 1
tagged with: image
tagged with: curve
has answer: http://stackoverflow.com/a/79039504
upvote count: 0
type: AnsweredQuestion
favorite count: 0
tagged with: path
tagged with: clip
accepted answer: http://stackoverflow.com/a/79039504

http://stackoverflow.com/comment/140103478
score: 0
comment on: http://stackoverflow.com/a/78995645
type: Comment
type: AnswerComment
has text: Similar. I already have a working, pure-CSS solution here: https://stackoverflow.com/questions/79440738/how-to-prevent-clicking-buttons-under-a-css-popovers-backdrop

http://stackoverflow.com/q/78972900
type: UnansweredQuestion
tagged with: class
has title: Today, VS Code has started underlining my inline CSS classes in Vue 3 components. How can I remove this?
type: Question
has answer: http://stackoverflow.com/a/78972928
answer count: 1
has comment: http://stackoverflow.com/comment/139246909
score: 0
tagged with: underline
tagged with: visual-studio-code
tagged with: css
tagged with: inline
has body: Not sure, why, tried disabling all extensions to check, and checked in preferences, but as of this morning my Vue 3 component has underlines for classes, regardless of color theme. Like so: Any coffee injected ideas as to how I can remove these darn underlines from the css classes. Thanks in advance!

http://stackoverflow.com/comment/139181736
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78939019
type: Comment
has text: Use your browser inspector to see which style rules are being applied to `#suggestions` and its `li` children. One of them is probably inheriting a rule from somewhere else. For example, is something applying `display: flex` to `#suggestions`? If so, you could override that with `display: block`, or roll with flex and simply add `flex-direction: column`.

http://stackoverflow.com/a/78925160
type: Answer
score: 0
accepted answer of: http://stackoverflow.com/q/78912045
has body: I tried putting the text into a container. Surprisingly, setting display: flex or display: inline-block for the container prevents chrome from font resizing. The reason why the first section has the original font size is that it is a flex container! I do not understand why chrome does this! They should just leave such issues to the designer of the website. This hack also works by setting max-height: 1000000px in a reset setting or for the container. Here is a modified version of the above code. Webpage Some sample text in original font size. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum magni eligendi officia velit corporis dolorum reiciendis autem aperiam veniam, voluptatum illum cum est. Accusamus deleniti numquam corporis mollitia libero tempora? and the output is
type: AcceptedAnswer
answers question: http://stackoverflow.com/q/78912045

http://stackoverflow.com/q/79045866
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139377300
favorite count: 0
tagged with: http://stackoverflow.com/tag/html
type: Question
has body: On a page there is the css rule : :root{color-scheme: dark;} In that page, I want to prevent a specific element to not be affected by this css rule. I try these rules on the specific element color-scheme: normal; or color-scheme: only light; but it's not working. You could find a testing example of my problem bellow, where I want to be always in light mode (ie. text color always black) How I could do that ? let root = document.querySelector(":root"); let button = document.querySelector("button"); button.addEventListener("click", () => { event.preventDefault(); root.classList.toggle("light"); }); :root { color-scheme: dark; } body { display: grid; font-size: 1.25rem; place-items: center; } button { font-size: 1.25rem; line-height: 1.35; width: 300px; } .only-light { color-scheme: normal; } .light { color-scheme: light; } Heading 1 Toggle Color
has comment: http://stackoverflow.com/comment/139377383
score: 2
has comment: http://stackoverflow.com/comment/139377244
has comment: http://stackoverflow.com/comment/139377438
upvote count: 2
answer count: 1
has answer: http://stackoverflow.com/a/79045992
has comment: http://stackoverflow.com/comment/139377329
downvote count: 0
tagged with: css
has comment: http://stackoverflow.com/comment/139377194
has title: Prevent css color-scheme to be applied to an element
has comment: http://stackoverflow.com/comment/139377364

http://stackoverflow.com/comment/139187465
has text: you mention "cross-browser" - but you are using the Chromium-family only `animation-timeline` and `ScrollTimeline` *Experimental* features - so, you'll need to think again
type: QuestionComment
comment on: http://stackoverflow.com/q/78942230
type: Comment
score: 0

http://stackoverflow.com/q/78993924
answer count: 1
has title: Position sticky in grid container works not as expected
score: 2
has answer: http://stackoverflow.com/a/78994088
downvote count: 0
tagged with: scroll
has comment: http://stackoverflow.com/comment/139281758
tagged with: css
upvote count: 2
tagged with: css-grid
type: UnansweredQuestion
favorite count: 0
tagged with: sticky
type: Question
has body: When scrolling the page I need the imageContainer to be sticky untill the end of itemFeatures box scroll down to the end of this box. Both of these containers are in thumb. Thumb is display: grid. When I copy this code to sandbox it works as expected. I tried to use overflow-y: auto then vertical scrollbar appears in itemFeatures container. But I don't need it. .thumb { display: grid; grid-template-columns: 1fr; grid-template-rows: auto; .imageContainer { height: 442px; width: 340px; @media screen and (min-width: 768px) { height: 925px; width: 712px; } @media screen and (min-width: 1360px) { position: sticky; top: 0; height: 800px; width: 650px; } .swiper { width: 100%; height: 300px; margin-left: auto; margin-right: auto; } .swiper-slide { background-size: cover; background-position: center; } .mySwiper3 { height: 80%; width: 100%; } .mySwiper4 { height: 20%; box-sizing: border-box; padding: 10px 0; } .mySwiper4 .swiper-slide { width: 25%; height: 100%; opacity: 0.4; } .mySwiper4 .swiper-slide-thumb-active { opacity: 1; } .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; } } .itemImg { display: block; height: 100%; width: 100%; * { display: block; } } .itemDescription { font-size: 18px; font-weight: 600; padding-top: 40px; @media screen and (min-width: 768px) { font-size: 20px; padding-top: 60px; } } .itemDescriptionText { font-size: 12px; padding: 20px 0 40px 0; text-align: justify; @media screen and (min-width: 768px) { font-size: 18px; padding: 30px 0 60px 0; } } @media screen and (min-width: 1360px) { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; height: 1200px; .itemImg { img { width: 650px; } } } } &lt;div class="cardContainer"&gt; &lt;nav aria-label="breadCrumb"&gt; &lt;ul class="breadCrumb"&gt; &lt;li class="breadCrumbItem"&gt;&lt;a href="index.html" title="На головну сторінку"&gt;&lt;svg width="12px" height="12px" class="homeIcon"&gt; &lt;use href="~images/svg/house.svg#house"&gt;&lt;/use&gt; &lt;/svg&gt;&lt;/a&g…

http://stackoverflow.com/a/79068151
score: 1
type: AcceptedAnswer
has body: By default, every element is styled with flex-shrink: 1 which means that if it happens to be a flexbox item, it will shrink in size rather than causing the flexbox to overflow. You can override this style to prevent this behaviour. Just add the following declaration: .qrComponent__link { flex-shrink: 0; } Note that I was unable to reproduce this problem in Safari, so it seems that Safari and Chrome have some rendering differences. .attribution { font-size: 11px; text-align: center; } .attribution a { color: hsl(228, 45%, 44%); } .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } :root { /* color-scheme */ --white: hsl(0, 0%, 100%); --Slate300: hsl(212, 45%, 89%); --Slate500: hsl(216, 15%, 48%); --Slate900: hsl(218, 44%, 22%); --blue: hsl(216, 97%, 59%); } *::before, *, *::after { box-sizing: border-box; } p { font-size: 15px; font-family: "Outfit", sans-serif; } body { background-color: var(--Slate300); } .qrComponent { background-color: var(--white); border-radius: 20px; height: 499px; width: 320px; padding: 16px; display: flex; flex-direction: column; } .qrComponent__content { margin-top: 20px; padding: 0 16px; margin-bottom: 40px; } .qrComponent__image { display: block; height: 100%; width: 100%; border-radius: 20px; } .qrComponent__link { display: block; height: 288px; width: 288px; background-color: var(--blue); flex-shrink: 0; } QR component Improve your front-end skills by building projects Scan the QR code to visit Frontend Mentor and take your coding skills to the next level Challenge by Frontend Mentor . Coded by Nitr0Skay .
type: Answer
has comment: http://stackoverflow.com/comment/139427834
has comment: http://stackoverflow.com/comment/139427361
downvote count: 0
answers question: http://stackoverflow.com/q/79067407
accepted answer of: http://stackoverflow.com/q/79067407
upvote count: 1

http://stackoverflow.com/q/79011645
type: Question
answer count: 1
score: 0
tagged with: http://stackoverflow.com/tag/svg
has comment: http://stackoverflow.com/comment/139315146
has answer: http://stackoverflow.com/a/79011686
tagged with: css
has body: I don't know what could be the problem with the SVG code below. It is not displayed in the browser, but it looks nice when displayed directly. If I replace them in the CSS with any other SVG, they all show up. ul.custom li:before { content: ''; position: absolute; height: 23px; width: 23px; left: 0; top: 50%; transform: translateY(-50%); background-size: contain; background-repeat: no-repeat; background-image: url('data:image/svg+xml, <g fill="#CC902D" clip-path="url(#a)"><path d="M10.748 16.251a.65.65 0 0 1-.461-.191l-4.53-4.54a.652.652 0 0 1 0-.922l2.165-2.165a.652.652 0 0 1 .46-.19h.001a.65.65 0 0 1 .461.191l1.905 1.913 3.408-3.408a.652.652 0 0 1 .921 0l2.165 2.165a.652.652 0 0 1 0 .921l-6.035 6.036a.651.651 0 0 1-.46.19Zm-3.61-5.191 3.61 3.618 5.114-5.113-1.244-1.244-3.41 3.41a.652.652 0 0 1-.46.19h-.001a.65.65 0 0 1-.461-.191L8.38 9.816 7.138 11.06Z"/><path d="M22.349 23H.65A.651.651 0 0 1 0 22.349V.65C0 .291.292 0 .651 0h21.697c.36 0 .652.292.652.651v17.302a.651.651 0 1 1-1.303 0V1.303H1.303v20.394h21.045a.651.651 0 1 1 0 1.303Z"/><path d="M19.184 19.836H3.815a.651.651 0 0 1-.651-.651V6.929a.651.651 0 1 1 1.303 0v11.604h14.066V4.467H3.815a.651.651 0 1 1 0-1.303h15.37c.36 0 .65.292.65.652v15.369c0 .36-.29.651-.65.651Z"/></g> <path fill="#fff" d="M0 0h23v23H0z"/> '); }
has title: SVG icon not visible
has comment: http://stackoverflow.com/comment/139314846
type: UnansweredQuestion

http://stackoverflow.com/q/79063318
upvote count: 1
has comment: http://stackoverflow.com/comment/139409471
tagged with: css
has body: I have a spotlight to have on the background of my website. It essentially shows through a dark grey layer to show a gradient on the background layer. I really want the circle to be morphing as I'm moving the mouse around, but right now it's deviating off the center of where the mouse is. I was hoping for the blob to stay centered on the mouse like it is in this example. When I run my code, the rotating looks fine at first, but once I continue to move my mouse, the blob moves away from my mouse and rotates even off the screen before returning to my mouse. But in the example, the blob stays on track with the mouse movement and if there is no movement the blob stays stationary despite continuing to rotate. I'm wondering if it's because the background layer is a rectangle and how I can fix it? Thank you! Here is my code! document.addEventListener("DOMContentLoaded", () =&gt; { const blob = document.getElementById("blob"); window.onpointermove = event =&gt; { const { clientX, clientY } = event; blob.animate({ left: `${clientX}px`, top: `${clientY}px` }, { duration: 2500, fill: "forwards" }); }; }); body { background-color: #222020; height: 100vh; margin: 0; overflow: hidden; position: relative; } #gradient-color { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(50% 123.47% at 50% 50%, #00ff94 0%, #720059 100%), linear-gradient(121.28deg, #669600 0%, #ff0000 100%), linear-gradient(360deg, #0029ff 0%, #8fff00 100%), radial-gradient(100% 164.72% at 100% 100%, #6100ff 0%, #00ff57 100%), radial-gradient(100% 148.07% at 0% 0%, #fff500 0%, #51d500 100%); background-blend-mode: screen, color-dodge, overlay, difference, normal; } #blob { width: 1px; height: 1px; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); overflow: visible; background-color: white; mix-blend-mode: multiply; } #blob::before { content: ""; display: block; width: 200vw; height: 200vh; position: absolute; left: 50%; top: 50%; transform: translat…
has title: Animated blob keeps drifting off the mouse
downvote count: 1
has answer: http://stackoverflow.com/a/79063961
has comment: http://stackoverflow.com/comment/139409262
score: 0
favorite count: 0
type: Question
answer count: 1
tagged with: http://stackoverflow.com/tag/html
type: AnsweredQuestion
accepted answer: http://stackoverflow.com/a/79063961
tagged with: javascript

http://stackoverflow.com/a/78937092
score: 1
type: Answer
has body: Maybe you can force the browser to perform a reflow (layout recalculation) by accessing properties like offsetHeight or clientHeight. This should be used with caution since it can cause performance issues. document.querySelector(":root").style.setProperty("--image-size", "100px"); // Force a reflow by accessing offsetHeight or another reflow-triggering property document.querySelector("#item").offsetHeight; requestAnimationFrame(() =&gt; { console.log(document.querySelector("#item").offsetHeight); // Should reflect the correct height }); :root { --image-size: 10px; } #item { width: var(--image-size); height: var(--image-size); box-sizing: border-box; padding: 0; margin: 0; border: none; background-color: lightblue; /* To make the element visible */ } &lt;div id="item"&gt; ITEM &lt;/div&gt; Notice box-sizing property which is important to calculate width and height properly. Let me know if you need further assistance.
has comment: http://stackoverflow.com/comment/139177261
has comment: http://stackoverflow.com/comment/139177417
answers question: http://stackoverflow.com/q/78937046
has comment: http://stackoverflow.com/comment/139177269
upvote count: 2
has comment: http://stackoverflow.com/comment/139177164
downvote count: 1

fonts
type: Tag
tags question: http://stackoverflow.com/q/79023236
tags question: http://stackoverflow.com/q/78968270
tags question: http://stackoverflow.com/q/78955926
tag name: fonts
tags question: http://stackoverflow.com/q/78981553
tags question: http://stackoverflow.com/q/79035373
tags question: http://stackoverflow.com/q/79043889
tags question: http://stackoverflow.com/q/78923710
tags question: http://stackoverflow.com/q/78996274
tags question: http://stackoverflow.com/q/79031966
tags question: http://stackoverflow.com/q/79204791
tags question: http://stackoverflow.com/q/79201509
tags question: http://stackoverflow.com/q/79176091
tags question: http://stackoverflow.com/q/79154156
tags question: http://stackoverflow.com/q/79216464
tags question: http://stackoverflow.com/q/79189186
tags question: http://stackoverflow.com/q/79075951
tags question: http://stackoverflow.com/q/79139497
tags question: http://stackoverflow.com/q/79085620
tags question: http://stackoverflow.com/q/79239410
tags question: http://stackoverflow.com/q/79074714
tags question: http://stackoverflow.com/q/79224235
tags question: http://stackoverflow.com/q/79216247
tags question: http://stackoverflow.com/q/79091369
tags question: http://stackoverflow.com/q/79317941
tags question: http://stackoverflow.com/q/79251100
tags question: http://stackoverflow.com/q/79347273
tags question: http://stackoverflow.com/q/79354511
tags question: http://stackoverflow.com/q/79339313
tags question: http://stackoverflow.com/q/79338600
tags question: http://stackoverflow.com/q/79297729
tags question: http://stackoverflow.com/q/79369590
tags question: http://stackoverflow.com/q/79408385
tags question: http://stackoverflow.com/q/79303825
tags question: http://stackoverflow.com/q/79287743
tags question: http://stackoverflow.com/q/79418882
tags question: http://stackoverflow.com/q/79376772
tags question: http://stackoverflow.com/q/79439932
tags question: http://stackoverflow.com/q/79527052
tags question: http://stackoverflow.com/q/79476395
tags question: http://stackoverflow.com/q/79470658
tags question: http://stackoverflow.com/q/79472224
tags question: http://stackoverflow.com/q/79468235
tags question: http://stackoverflow.com/q/79495618
tags question: http://stackoverflow.com/q/79491018

http://stackoverflow.com/q/79001772
has answer: http://stackoverflow.com/a/79002130
has comment: http://stackoverflow.com/comment/139296206
has body: I created a CSS tick mark for a success message, but it appears flipped in the wrong direction. I would like to mirror it to resemble a proper tick mark. The tick mark is currently oriented in the wrong direction. Instead of resembling a proper tick mark (✓), it appears as if it’s flipped. Any suggestions on this with explanation to why this is happening. body, html { margin: 0; padding: 0; height: 100%; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f0f8ff; display: flex; justify-content: center; align-items: center; text-align: center; } .container { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); max-width: 600px; width: 100%; } h2 { color: #1F75FE; margin-bottom: 20px; } p { color: #333; margin-bottom: 20px; } a { color: #1F75FE; text-decoration: none; font-weight: bold; } a:hover { text-decoration: underline; } .tick { display: inline-block; width: 70px; height: 70px; border-radius: 50%; background-color: #d4edda; color: #28a745; font-size: 40px; line-height: 70px; margin-bottom: 20px; position: relative; animation: scale 0.5s ease-in-out forwards; } .tick:before { content: ''; position: absolute; top: 20px; left: 15px; width: 30px; height: 15px; border: solid #28a745; border-width: 0 5px 5px 0; transform: rotate(45deg); opacity: 0; animation: fadeIn 0.5s forwards 0.5s; } @keyframes scale { 0% { transform: scale(0); } 100% { transform: scale(1); } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } Order Complete! Your order is completed successfully
upvote count: 1
type: UnansweredQuestion
tagged with: css
has answer: http://stackoverflow.com/a/79004624
type: Question
downvote count: 1
score: 0
favorite count: 0
has title: How to modify CSS to flip (mirror) a tick mark so it points in the correct direction?
answer count: 2

http://stackoverflow.com/comment/139139888
score: 1
type: Comment
type: AnswerComment
comment on: http://stackoverflow.com/a/78916942
has text: @Frankey: If you can target the parent precisely, like `body > div` or something, then nesting everything in `body > div:not(.theme)` should work. Otherwise, there’s probably a Sass way to do it, but it gets very complicated and I would recommend looking for another approach (like a `.not-theme` class, maybe applied with JavaScript).

http://stackoverflow.com/comment/139224966
has text: still it doesnt answer my question. why it is not running transition animation on the first time?
comment on: http://stackoverflow.com/a/78963058
type: Comment
score: 0
type: AnswerComment

background-position
tags question: http://stackoverflow.com/q/78919901
tag name: background-position
type: Tag
tags question: http://stackoverflow.com/q/79443212

http://stackoverflow.com/a/78941789
answers question: http://stackoverflow.com/q/78941752
score: 1
downvote count: 0
type: Answer
upvote count: 1
has body: Try adding something like a margin-top: 20px; to your menu-dropdown class yet.

http://stackoverflow.com/comment/139310529
has text: `transform-origin`?
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/79009672
type: Comment

http://stackoverflow.com/q/78905266
tagged with: mobile-safari
type: Question
has body: You have to have access to a Safari, from iOS (using a tap to see the hover effect) or macOS. I have the latests versions of iOS and macOS. I have a div with an img, and some text. I want to make a drop-shadow appear on hover, and I want the image to scale, while preserving its size. I also want the whole div to have rounded corners. here is a recreation of what I describe : .has-over-effect { width: 200px; transition-property: filter; transition-duration: 0.5s; filter: drop-shadow(0 0 0 white); padding: 0; background-color: red; border-radius: 10px; overflow: hidden; } .overflow-hidden { overflow: hidden; } .has-over-effect:hover { filter: drop-shadow(10px 10px 10px black); } .has-over-effect img { transition-property: transform; transition-duration: 0.5s; } .has-over-effect p { padding: 1em; } .has-over-effect:hover img { transform: scale(1.2); } test Lorem ipsum odor amet, consectetuer adipiscing elit. Curae primis velit conubia class primis volutpat. Vitae orci facilisi suscipit maecenas gravida nibh sagittis. It works as intended on chrome and firefox, but in safari, the animation takes place, and when it ends, the drop-shadow disappears, and then when you hover out, it suddenly reappears, and animates to the original state. I identified the cause : the whole div has an overflow: hidden, to make the image have rounded corners. If I remove that, it works as intended, but judging from chrome and firefox, overflow: hidden shouldn't have an impact on drop-shadow. Also notable is that you can see the animation in and out, but not its final state while hovering.
tagged with: css
score: 0
has title: Safari : is the behaviour of overflow hidden and drop-shadow as it should be?
tagged with: safari
answer count: 0
type: UnansweredQuestion

http://stackoverflow.com/a/79003749
type: Answer
score: 0
accepted answer of: http://stackoverflow.com/q/79003079
has body: That were focusin/focusout event handlers. If they are set, Chrome deduces the element is tabbable. In my case, the handlers were set by popper.js 2.x ($('.cloudHolder svg .entry').tooltip();).
type: AcceptedAnswer
answers question: http://stackoverflow.com/q/79003079

http://stackoverflow.com/a/78950122
upvote count: 1
has body: .arrow-down { width: 0; height: 0; border-left: 5vw solid transparent; border-right: 5vw solid transparent; border-top: 5vh solid #f00; } &lt;div class="arrow-down"&gt;&lt;/div&gt;
has comment: http://stackoverflow.com/comment/139200703
type: Answer
answers question: http://stackoverflow.com/q/78950094
score: -1
downvote count: 2

http://stackoverflow.com/a/79027100
score: -1
type: Answer
downvote count: 1
answers question: http://stackoverflow.com/q/79026458
has body: Why don't you create it with css? Here's an example: .oval { width: 100px; height: 50px; background: wheat; border: 1px solid red; border-radius: 50%; } &lt;div class="oval"&gt;&lt;/div&gt;
upvote count: 0

http://stackoverflow.com/comment/139166072
type: Comment
comment on: http://stackoverflow.com/a/78930971
score: 0
type: AnswerComment
has text: Hi Thomas yes, I did see that. And I see this works, but for unknown reasons, maybe something inside of my cascade., it does not work in my current poject.

tableheader
type: Tag
tags question: http://stackoverflow.com/q/78998005
tag name: tableheader

http://stackoverflow.com/q/78919730
tagged with: azure-active-directory
upvote count: 1
linked to: http://stackoverflow.com/q/73760373
has title: Is there a way to use Azure AD authentication on a web app that is already setup for ASP.NET Identity?
tagged with: .net-8.0
has answer: http://stackoverflow.com/a/78921469
has body: We've got an older app that is already setup to use ASP.NET Identity. It's actually two web apps, one is for external use (customers) and one is for internal use (staff). Currently both web apps use the same authentication. You could login to the internal web app with the same user/pass as what you log into the external web app as. You just wouldn't have permissions to access anything unless you were given them. A few years ago we started making all of our internal web apps use Azure AD and our external web apps use Azure B2C. For this app though, we want to keep the external web app using ASP.NET Identity but change the internal web app to use Azure AD. The issue I'm running into is that we still need to be able to use the UserManager, SignInManager, and RoleManager that are part of the ASP.NET Identity package. We need these in order for our staff to support our customers. Which means I still need to setup ASP.NET Identity in my Startup.cs. I've added the code to use Azure AD in the Startup.cs as well, but it seems like the web app prioritizes the ASP.NET Identity auth instead of the Azure AD auth. The web app has been upgraded to .NET 8. In my Startup.cs I have: services.AddAuthentication(OpenIdConnectDefaults.AuthenticationScheme) .AddMicrosoftIdentityWebApp(Configuration.GetSection("AzureAd")); services.AddIdentity<ApplicationUser, ApplicationRole>(options => { options.Password.RequireNonAlphanumeric = false; }) .AddEntityFrameworkStores<IdentityDbContext>() .AddDefaultTokenProviders(); I tried changing the order, it didn't seem to affect anything. If I remove the services.AddIdentity line then the app will properly use the Azure Ad for auth, but then all the code we have for managing users is broken.
tagged with: css
type: UnansweredQuestion
tagged with: asp.net-core-identity
score: 1
favorite count: 0
type: Question
tagged with: asp.net-core
answer count: 1
downvote count: 0

http://stackoverflow.com/q/78921276
type: AnsweredQuestion
has answer: http://stackoverflow.com/a/78921529
score: 0
tagged with: javascript
tagged with: css
has title: Form elements not working on a div overlapping a bootstrap modal
accepted answer: http://stackoverflow.com/a/78921529
has body: I am trying to overlap div on a bootstrap modal using only css and javascript but the form elements are not even clickable so I cannot change their values except for the select. bootstrap modal show modal Sample Modal overlap div1 overlap div2 Close overlapping div check google 1 2 css .overlapDivContainer { background-color: rgba(0,0,0,.6); width: 100%; height: 100%; position: fixed; z-index: 1056; visibility: hidden; } .overlapDiv { width: 60%; margin-top: 2%; }
tagged with: http://stackoverflow.com/tag/html
type: Question
answer count: 1

http://stackoverflow.com/comment/139291077
has text: Oups, hello, you probably need a mask which tailwind doesn't manage. but via a custom rule https://tailwindcss.com/docs/adding-custom-styles#arbitrary-properties , you could do something alike : https://codepen.io/gc-nomade/pen/jOjgNWE
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78996966

http://stackoverflow.com/comment/139150138
type: QuestionComment
type: Comment
has text: Yes, idea is to have the image partially hidden across x and y-axes by some percentage on all viewports. For width - let's say it should be always half the container, for height let's say min 20% and max 40% of the container. Hope that makes sense.
score: 0
comment on: http://stackoverflow.com/q/78919901

http://stackoverflow.com/a/78995466
has body: You need to set custom sx for each row using '&.MuiTableRow-root:hover' selector like this: test1 test2 test3 You can take a look at this StackBlitz for a live working example.
type: Answer
score: 0
answers question: http://stackoverflow.com/q/78977902

http://stackoverflow.com/q/78979629
type: UnansweredQuestion
has body: The width of the sidenav does not adapt automatically when I hide the items and stay only with the icons. It remains a fixed width, no matter if I collapse the sidenav or not. I have set the autosize to true and nothing. I using "@angular/material": "^18.2.3" and angular 18. HTML FILE: chevron_right @for (item of menuItems; track $index) { {{ item.title }} } TS FILE: import { CommonModule } from '@angular/common'; import { ChangeDetectionStrategy, Component, ViewChild } from '@angular/core'; import { routes } from '../../app.routes'; import { RouterModule } from '@angular/router'; import { MatSidenav, MatSidenavModule } from '@angular/material/sidenav'; import { MatButtonModule } from '@angular/material/button'; import { MatRadioModule } from '@angular/material/radio'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { MatIconModule } from '@angular/material/icon'; import { MatListModule } from '@angular/material/list'; import { MatToolbarModule } from '@angular/material/toolbar'; @Component({ selector: 'app-side-menu', standalone: true, imports: [ CommonModule, RouterModule, MatButtonModule, MatRadioModule, FormsModule, ReactiveFormsModule, MatSidenavModule, MatIconModule, MatListModule, MatToolbarModule ], templateUrl: './side-menu.component.html', styleUrl: './side-menu.component.css', changeDetection: ChangeDetectionStrategy.OnPush, }) export class SideMenuComponent { public menuItems = routes .map( route => route.children ?? [] ) .flat() .filter( route => route?.path ) .filter( route => !route.path?.includes(':') ) isExpanded: boolean = true; constructor() { } } CSS FILE: :host { display: block; } mat-sidenav-container { height: 100%; } .menu-item { margin-left: 8px; } .chevron-button { transition: 300ms ease-in-out; transform: rotate(0deg); } .chevron-button.rotated { transform: rotate(180deg); }
tagged with: css
has answer: http://stackoverflow.com/a/78983987
type: Question
tagged with: angular
score: 0
has title: Angular Material18 SideNav autosize not working
answer count: 2
tagged with: angular-material
has answer: http://stackoverflow.com/a/79152309
tagged with: sidenav
tagged with: mat-sidenav

resize
tags question: http://stackoverflow.com/q/78958406
tag name: resize
tags question: http://stackoverflow.com/q/78963829
type: Tag
tags question: http://stackoverflow.com/q/79114062
tags question: http://stackoverflow.com/q/79091458
tags question: http://stackoverflow.com/q/79165947
tags question: http://stackoverflow.com/q/79282303
tags question: http://stackoverflow.com/q/79440202

http://stackoverflow.com/comment/139117429
type: Comment
type: QuestionComment
score: 1
comment on: http://stackoverflow.com/q/78904335
has text: The requirement needs more specifying. What do you want it to look like on different aspect-ratios - is it important to maintain the same angle? If so, is the start distance from the top on the left or on the right the important one to keep constant (in relative terms) or is it important to have the banner rotated about its center and that to be at a defined distance down? Or are the relative ditances of the left and right ends from the top the things that are to remain constant? (in which case the angle will differ).

http://stackoverflow.com/a/78958367
answers question: http://stackoverflow.com/q/78958156
has body: Looks like you forgot to add the name of your animation: slideAnimation to animation property. It should be: animation: slideAnimation 2s linear infinite; Or you could split it to such properties as animation-name, animation-duration etc.
accepted answer of: http://stackoverflow.com/q/78958156
score: 2
upvote count: 2
type: AcceptedAnswer
downvote count: 0
type: Answer

http://stackoverflow.com/comment/139253746
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78978726
has text: thank you for the response. unfortunately this is not an option, as I don't want to give away my css code. made an edit to my question. sorry @jeremy-denis I forgot to add that part
type: Comment

http://stackoverflow.com/q/79028709
has comment: http://stackoverflow.com/comment/139347674
has answer: http://stackoverflow.com/a/79028763
has comment: http://stackoverflow.com/comment/139345800
score: 0
has body: TL; DR: Trying to make a dummy button with hover effect in a clickable container. A preface: I'm looking for HTML/CSS solutions ONLY (I already know how to do this with JS). I am working on a simple card design made of a container and a button link. I want the whole container to act as a link, i.e., the user can click anywhere inside the container to get to their destination. My goal is to do this without using multiple a elements. The requirements for the behavior of this card are: The user hovers over the button, and they see the button's hover effect. The user hovers over the container, and they see NO hover effect on the button. The user clicks anywhere within the container, including on the button, and it takes them to the linked page. --- What I've tried ---- To avoid multiple a elements or wrapping the entire container in an a element, I went with the following approach: I absolutely positioned the real a element to accept clicks from anywhere inside the container. I created a dummy button div instead to replace the real a element, and brought it to the front so it can be hovered (using z-index). .container { position: relative; /* This is the important one, the rest is styling */ width: 200px; height: 200px; padding: 16px; border: solid 1px black; display: flex; justify-content: center; align-items: center; } .button { z-index: 1; /* This is the important one, the rest is styling */ width: min-content; height: min-content; padding: 8px; background: red; white-space: nowrap; color: white; } .button:hover { background: darkred; cursor: pointer; } a.cover { display: block; position: absolute; inset: 0; width: 100%; height: 100%; } Real link Dummy link This approach satisfies the 1st and 2nd of the required behaviors listed above, but not the 3rd. Clicks on the dummy button are not passed to the a element below. If I use pointer-events: none on the dummy button to pass the click through to the a element, then there is no hover animation on the dummy button, whic…
upvote count: 1
has answer: http://stackoverflow.com/a/79028919
tagged with: css
tagged with: css-selectors
downvote count: 1
has comment: http://stackoverflow.com/comment/139348747
answer count: 4
has comment: http://stackoverflow.com/comment/139345246
has comment: http://stackoverflow.com/comment/139345859
has answer: http://stackoverflow.com/a/79031070
has comment: http://stackoverflow.com/comment/139361083
type: UnansweredQuestion
favorite count: 0
has title: Creating a "dummy" button for a clickable container
type: Question
has answer: http://stackoverflow.com/a/79029631
tagged with: http://stackoverflow.com/tag/html

http://stackoverflow.com/q/79048153
tagged with: css
tagged with: antd
has body: I am using the slider component from antd (version ^5.11.1): https://ant.design/components/slider The issue I'm facing is that the slider is not dragging via the tooltip on touch screen devices, but it works fine when dragged using a mouse on laptops, computers, etc. I'm not sure what the problem is so any help would be greatly appreciated. Slider component <Slider range={{ draggableTrack: false }} max={11} min={-1} defaultValue={[-1, 11]} value={[Number.parseInt(value[0]), Number.parseInt(value[1])]} step={1} tooltip={{ open: true, zIndex: 100, arrow: false, rootClassName: "slider-pointer-event", className: "font-weight-bold ", color: "#28bdbb", placement: "bottom", autoAdjustOverflow: false, formatter: noformatter, }} onChange={onChange} />
has title: Antd Slider not dragging via it's tooltip on mobile devices (working on PC)
type: UnansweredQuestion
score: 0
type: Question
has comment: http://stackoverflow.com/comment/139810041
tagged with: reactjs
tagged with: javascript
tagged with: next.js
answer count: 0

http://stackoverflow.com/comment/139430159
comment on: http://stackoverflow.com/a/79066670
type: Comment
score: 0
type: AnswerComment
has text: I have added a code sandbox link see this

http://stackoverflow.com/comment/139290510
has text: read the duplicate carefully (no need to delete and repeat the question). You will find the exact definition of "middle" which is not what you think about
type: QuestionComment
comment on: http://stackoverflow.com/q/78998686
type: Comment
score: 0

http://stackoverflow.com/comment/139358550
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/79035574
has text: Likely with the scrolling you will have to use some JS. See the following codepen, it s a great example showing how to nest ul, li lists as a nav with nested uls in a parent li. https://codepen.io/paulobrien/pen/vYxWppv

http://stackoverflow.com/q/78964909
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139229604
type: Question
has comment: http://stackoverflow.com/comment/139229113
tagged with: http://stackoverflow.com/tag/html
answer count: 1
has title: Positioning navbars based on window scroll
score: 0
tagged with: javascript
has body: I have a page with three navbars. During scrolling navbar1 must remain fixed, navbar2 must scroll away, navbar3 must append to navbar1. Also in main I have a sidebar where I can't manage the height so it doesn't come out of its container. The sidebar must remain fixed during scrolling of the page, and move upwards when I start to no longer see its container. I'm stuck for both problems, does anyone have a solution? I'm not using all of Bootstrap, only the Grid system and Responsive utilities downloadable from this link: https://getbootstrap.com/docs/3.4/customize/ window.onscroll = function() { var sidebar = document.getElementById("sidebar"); var footer = document.getElementById("footer"); var sidebarHeight = sidebar.offsetHeight; var scrollPosition = window.scrollY + window.innerHeight; var footerPosition = footer.offsetTop; // if (window.scrollY > 100) { // sidebar.classList.add("active"); // } else { // sidebar.classList.remove("active"); // } if (scrollPosition > footerPosition) { sidebar.style.position = 'absolute'; sidebar.style.top = (footerPosition - sidebarHeight) + 'px'; sidebar.style.width = sidebar.offsetWidth + 'px'; } else { sidebar.style.position = 'fixed'; sidebar.style.top = '0'; sidebar.style.width = '100%'; } }; @import url(/00.Asset/Reset-grid-Mquery/bootstrap/css/bootstrap.css); /*===HEADER===*/ .nav1 { background-color: aquamarine; height: 150px; min-height: 150px; width: 100%; max-width: 100%; top: 0px; position: fixed; } .intro { background-color: orange; height: 150px; min-height: 150px; width: 100%; top: 150px; position: sticky; } .nav2 { background-color: violet; height: 150px; min-height: 150px; width: 100%; position: relative; } /*===MAIN===*/ .content { padding: 20px; height: 100vh; } .sidebar { position: fixed; top: 0; right: 0; width: 100%; max-width: 100px; height: 100vh; background-color: #f4f4f4; padding: 20px; box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1); display: flex; align-items: center; justify-content: center; flex-direction: c…
tagged with: css
has answer: http://stackoverflow.com/a/78965584

http://stackoverflow.com/comment/139320942
has text: the problem being that `background-image` doesn't give `height` to the element thus making hard for the picture to scale 100% width while adapting the height to the aspect ratio coming from the picture itself. This is true even by using `background-size` like `cover` .. yet because that's supposed to cover an initial height given. There are tricks inferring the ratio but it's convoluted. Also `height: fit-content` is a trick that wouldn't work because it's not strictly a content. There are plenty of questions here revolving around this of the like _background image with 100% width_ .
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/79015030
type: Comment

http://stackoverflow.com/comment/139281094
type: Comment
comment on: http://stackoverflow.com/q/78992932
score: 0
type: QuestionComment
has text: Thanks! With the running code, I was able to see how it works and the error much faster than by pasting it here. Although I agree that the logical error was already present in the pasted code, I found it hard to notice without reproduction.

http://stackoverflow.com/a/78961329
score: 1
has body: The issue you're facing with centering the nav is likely due to the fact that it has a width set to 100% by default so setting margin: 0 auto; does not have any effect because there is no room for it to be centered. quick fix: nav { max-width: 90%; /* Set a maximum width less than 100% */ margin: 0 auto; /* Center the nav */ } If you are using custom grid classes (xs-col-11 col-10), make sure these classes are not conflicting or overriding the widths.
answers question: http://stackoverflow.com/q/78961311
downvote count: 0
type: Answer
upvote count: 1

http://stackoverflow.com/q/78931768
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139167336
type: AnsweredQuestion
has body: I'm making a calculator with Javascript and I want to make a button that if I click on it whole style of my project changes and if I click again whole style changes again and at third click it returns to initial style I don't have any Idea how I can change whole style for three times just with one button?
tagged with: javascript
has title: Javascript-How can I change style of my app in a click and change again in a second click and return to my initial style in third click
answer count: 2
downvote count: 3
tagged with: css
has comment: http://stackoverflow.com/comment/139167332
has answer: http://stackoverflow.com/a/78931803
accepted answer: http://stackoverflow.com/a/78931803
score: -2
upvote count: 1
has answer: http://stackoverflow.com/a/78931901
possible better answer: http://stackoverflow.com/a/78931901
favorite count: 0
type: Question

http://stackoverflow.com/comment/139358355
comment on: http://stackoverflow.com/a/79031647
has text: Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer).
type: Comment
score: 0
type: AnswerComment

http://stackoverflow.com/comment/139399882
has text: I overlooked something: the ``p i { color:red }`` is a higher specificity than ``p { color:red }``, so that red is applied. The ```` is not _still_ colored red; but _again_ colored red. Here is a JSFiddle to play with: https://jsfiddle.net/WebComponents/em3bva29/
type: Comment
comment on: http://stackoverflow.com/a/79058183
type: AnswerComment
score: 1

http://stackoverflow.com/q/79061170
downvote count: 1
tagged with: flexbox
has answer: http://stackoverflow.com/a/79061900
type: UnansweredQuestion
favorite count: 0
answer count: 1
type: Question
tagged with: positioning
score: 0
upvote count: 1
has comment: http://stackoverflow.com/comment/139404788
has body: Im new to html/css and from my understanding a absolutely positioned element thats inside of a container with position relative should move with it when resizing window etc, but it does not work at all. Medlemsida West Coast Golf Personlig Information Namn: Hasse Eriksson Adress: Smetvägen 4 Lindköping Telefonnummer: 0705243566 Betalsätt: Autogiro Medlemskap Avsluta Medlemskap Handikapp CSS https://jsfiddle.net/g3f5s8zu
has title: Absolute element that are inside container with relative positioning does not move when resizing window
tagged with: css
has comment: http://stackoverflow.com/comment/139404856

http://stackoverflow.com/q/78974973
tagged with: web-development-server
answer count: 1
has title: No text except heading on counter website error
tagged with: javascript
score: 0
has body: I'm trying to create a simple counter website using HTML, CSS and JS (Hypertext Markup Language, Cascading Stylesheets and JavaScript). I use this HTML code: jswebsite.html JS Website Counter This CSS code: styles3.css body { background-color: rgb(255, 169, 0); } h1, p { text-align: center; color: rgb(255, 69, 0); background-color: rgb(148, 43, 226); margin-left: auto; margin-right: auto; } And this JS code: script1.js var number = 0; var i = 0; while (i < 1) { document.getElementById("counter").innerHTML = number; number++; } Instead of giving me a counter, it just shows the heading and give me no other text. Am I doing anything wrong? Nothing to see on the expansion.
has answer: http://stackoverflow.com/a/78975023
tagged with: css
duplicate of: http://stackoverflow.com/q/14028959
type: UnansweredQuestion
type: Question
linked to: http://stackoverflow.com/q/14028959
tagged with: http://stackoverflow.com/tag/html

http://stackoverflow.com/comment/139347955
comment on: http://stackoverflow.com/q/79030134
type: Comment
has text: The added code-snippet is misleading because you have the proper padding below the md screen size, but not above it. In any case, I didn't want to interfere with your code.
score: 3
type: QuestionComment

http://stackoverflow.com/q/79050854
tagged with: javascript
has answer: http://stackoverflow.com/a/79051631
has answer: http://stackoverflow.com/a/79051264
tagged with: css
has answer: http://stackoverflow.com/a/79080668
answer count: 3
favorite count: 0
possible better answer: http://stackoverflow.com/a/79051631
accepted answer: http://stackoverflow.com/a/79051264
score: 1
has body: I want to change color of all a tags with the help of banner class. Can I do that in CSS? MxForm antiX Forum contributes .banner { background-color: #114653; color: white; }
has title: How to chage color of all tag at once using css
type: Question
has comment: http://stackoverflow.com/comment/139385899
tagged with: http://stackoverflow.com/tag/html
downvote count: 0
type: AnsweredQuestion
upvote count: 1

http://stackoverflow.com/comment/139377811
type: Comment
score: 0
comment on: http://stackoverflow.com/a/79045116
type: AnswerComment
has text: Hi, amazing demo. The "inline-flex" is necessary to animate with framer motion. Is there any other solutions rather than manual kerning?

http://stackoverflow.com/comment/139402614
type: Comment
score: 0
has text: In Electron, I want to animate the browser width on the left side, which is basically not possible because of this behavior.
type: QuestionComment
comment on: http://stackoverflow.com/q/79059286

http://stackoverflow.com/a/78921838
score: 0
has body: hello hello hello hello table { position: absolute; inset: 50px; background-color: green; border-collapse: collapse; width: calc(100% - 100px); /* 100% minus the horizontal inset */ height: calc(100% - 100px); /* 100% minus the vertical inset */ } div { width: 400px; height: 400px; background-color: yellow; position: relative; /* Ensure the div is the containing block */ } label { background: red; } table, th, td { border: 1px solid black; }
answers question: http://stackoverflow.com/q/78921571
type: Answer

http://stackoverflow.com/a/79026980
has body: &lt;style&gt; @media print { .ads, .ad { display: none !important; } } &lt;/style&gt; Add this to your Head Tag , Here, .ads and .ad are common classes used for ads. You can adjust the class names based on what your theme uses.
type: Answer
answers question: http://stackoverflow.com/q/79023748
score: -1
has comment: http://stackoverflow.com/comment/139377715
downvote count: 1
has comment: http://stackoverflow.com/comment/139343288
upvote count: 0
has comment: http://stackoverflow.com/comment/139370758

http://stackoverflow.com/q/79054759
tagged with: reactjs
has title: How can I change the color of MUI Datagrid Column Dropdown Radio Buttons?
has comment: http://stackoverflow.com/comment/139406170
tagged with: material-ui
answer count: 0
tagged with: css
has comment: http://stackoverflow.com/comment/139453055
has comment: http://stackoverflow.com/comment/139542829
tagged with: mui-x-data-grid
type: UnansweredQuestion
tagged with: sx
type: Question
has body: I am trying to change the primary color used in the accents of the MUI Datagrid to a specific green color, however I am having difficulty accessing the css class of the dropdown menu's radio buttons as well as the "HIDE ALL" and "SHOW ALL" buttons within that dropdown through the sx attribute. How can I target them correctly? MUI Datagrid Column Dropdown <DataGrid density="compact" columns={cols} rows={searchResData} className="mx-auto min-h-[300px] bg-white" initialState={{ pagination: { paginationModel: { pageSize: 10 } }, columns: { columnVisibilityModel: {}, }, }} pageSizeOptions={[5, 10, 15, 20]} autoHeight slots={{ toolbar: GridToolbar, noRowsOverlay: () => noRowsOverlay(keyword as string), noResultsOverlay: () => noResultsOverlay(), }} style={{ minWidth: "80%" }} loading={loading} sx={{ "& .MuiSwitch-switchBase.Mui-checked": { backgroundColor: bpi_light_green, }, "& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track": { backgroundColor: bpi_light_green, }, "& .MuiButtonBase-root": { color: bpi_light_green, // Changes the color of the buttons }, }} /> I've already tried taking the css class from the developer tools but that doesn't seem to be working for me
score: 0

http://stackoverflow.com/q/78904335
type: AnsweredQuestion
tagged with: tailwind-css
accepted answer: http://stackoverflow.com/a/78904813
has answer: http://stackoverflow.com/a/78904621
score: 0
tagged with: responsive-design
has comment: http://stackoverflow.com/comment/139116965
answer count: 2
tagged with: css
has comment: http://stackoverflow.com/comment/139117111
has comment: http://stackoverflow.com/comment/139116953
has body: I saw the below design and would like to implement something similar in my web application, but how do I make the div tilted on the top (as shown in the image)? My output: WELCOME TO OUR WEBSITE I also tried tailwind skew and transform rotate but there was no luck I got a horizontal scrollbar and there is white space after turning the div Expected: Similar to the first image I posted, I want to make a proper responsive tilted div using tailwind. It should be full width tilted on the top with a two-tone color and a straight bottom.
possible better answer: http://stackoverflow.com/a/78904621
has answer: http://stackoverflow.com/a/78904813
has comment: http://stackoverflow.com/comment/139117429
has comment: http://stackoverflow.com/comment/139116951
has comment: http://stackoverflow.com/comment/139116944
has comment: http://stackoverflow.com/comment/139116931
type: Question
has title: How to change the shape of a div yet keep its functionality as a normal div?
tagged with: http://stackoverflow.com/tag/html

http://stackoverflow.com/comment/139140591
type: AnswerComment
has text: Your solution is really an ingenious one. 2*3=6, then divide the table into six rows, haha
comment on: http://stackoverflow.com/a/78917419
type: Comment
score: 0

http://stackoverflow.com/comment/139287205
comment on: http://stackoverflow.com/q/78996817
score: 0
type: Comment
has text: Looks like you have an extra "-" in front of "-webkit-animation"
type: QuestionComment

http://stackoverflow.com/q/78968063
answer count: 0
tagged with: css
tagged with: media
has comment: http://stackoverflow.com/comment/139237711
type: UnansweredQuestion
has title: @media (orientation) does not work on Safari mobile
has body: I cannot get @media (orientation) working on mobile Safari. iOS 15.8.3, iPhone SE The code I have written works the way it should on Chrome and Firefox, tested on Windows/Linux/OSX and Android. Also tested on Safari on OSX where it works the way it should. If I skip using the @media query, that is just use normal height and font-size tags everything works but then I have no chance to know if the phone is in portrait or landscape mode. The users for the code, when I get it right, will have a mixture of iOS and Android devices so I must be able to find out if it is portrait/landscape on various both iOS and Android devices I tried to write the @media tag in many different ways but I cannot get it to work. .jma_mobile_html { height: -webkit-fill-available; height: 100%; width: 100%; margin: 0; overflow: hidden; padding: 0; } .jma_mobile_body { min-height: 100dvh; min-height: -webkit-fill-available; } .jma_mobile_title_center { color: #FFFFFF; background: #AAAAAA; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; @media (orientation: portrait) { height:8dvh; font-size: 4dvh; } @media (orientation: landscape) { height: 10dvh; font-size: 5dvh; } overflow:hidden; } .jma_mobile_title_sub_center { color: #FFFFFF; background: #AAAAAA; display: flex; justify-content: center; align-items: center; @media (orientation: portrait) { font-size:1.5dvh; } @media (orientation: landscape) { font-size: 2dvh; } width:100%; overflow:hidden; } .jma_mobile_page { @media (orientation: portrait) { height:87dvh; font-size: 3dvh; } @media (orientation: landscape) { height: 80dvh; font-size: 5dvh; } background: #EEEEEE; vertical-align: middle; text-align: center; overflow:auto; } .jma_mobile_footer { color: #FFFFFF; background: #AAAAAA; overflow: hidden; width: 100%; @media (orientation: portrait) { height:5dvh; font-size: 2.5dvh; } @media (orientation: landscape) { height: 10dvh; font-size: 6dvh; } display: flex; justify-content: center; align-item…
type: Question
tagged with: safari
has comment: http://stackoverflow.com/comment/139234124
tagged with: ios
has comment: http://stackoverflow.com/comment/139234230
tagged with: screen-orientation
score: 0

http://stackoverflow.com/q/79067407
score: -1
tagged with: height
tagged with: css
has title: Can't figure out why element's height is not what I set it to
downvote count: 1
has body: The height of my element was cut from 288px to 212.975px for some reason (even while I using !important) and I don't know why and where the problem is. Why is it cut to this value and how to fix that? .attribution { font-size: 11px; text-align: center; } .attribution a { color: hsl(228, 45%, 44%); } .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } :root { /* color-scheme */ --white: hsl(0, 0%, 100%); --Slate300: hsl(212, 45%, 89%); --Slate500: hsl(216, 15%, 48%); --Slate900: hsl(218, 44%, 22%); --blue: hsl(216, 97%, 59%); } *::before, *, *::after { box-sizing: border-box; } p { font-size: 15px; font-family: "Outfit", sans-serif; } body { background-color: var(--Slate300); } .qrComponent { background-color: var(--white); border-radius: 20px; height: 499px; width: 320px; padding: 16px; display: flex; flex-direction: column; } .qrComponent__content { margin-top: 20px; padding: 0 16px; margin-bottom: 40px; } .qrComponent__image { display: block; height: 100%; width: 100%; border-radius: 20px; } .qrComponent__link { display: block; height: 288px; width: 288px; background-color: var(--blue); } QR component Improve your front-end skills by building projects Scan the QR code to visit Frontend Mentor and take your coding skills to the next level Challenge by Frontend Mentor . Coded by Nitr0Skay .
upvote count: 0
favorite count: 0
type: Question
has answer: http://stackoverflow.com/a/79068151
tagged with: http://stackoverflow.com/tag/html
answer count: 1
type: AnsweredQuestion
accepted answer: http://stackoverflow.com/a/79068151
has comment: http://stackoverflow.com/comment/139416211

http://stackoverflow.com/q/78946720
score: -1
has answer: http://stackoverflow.com/a/78947206
upvote count: 1
has answer: http://stackoverflow.com/a/78946893
tagged with: responsive-design
tagged with: css
has title: Implementing a Responsive Navigation Menu with HTML, CSS, and JavaScript
answer count: 3
has body: I'm working on a travel agency website and I'm trying to implement a responsive navigation menu using HTML, CSS, and JavaScript. I want the menu to be fully functional on both desktop and mobile devices. Markup: Home Destinations Book Now Question: how can I make this navigation menu responsive, so that it collapses into a hamburger menu on mobile devices and expands on desktop devices? I've tried using CSS media queries, but I'm not sure how to implement the hamburger menu icon and toggle functionality. Any help or guidance would be appreciated!
type: UnansweredQuestion
favorite count: 0
downvote count: 2
type: Question
tagged with: http://stackoverflow.com/tag/html
has answer: http://stackoverflow.com/a/78947045
has comment: http://stackoverflow.com/comment/139194879

http://stackoverflow.com/q/79010977
has title: I can't get bootstrap icons to center vertically next to text
has answer: http://stackoverflow.com/a/79011555
tagged with: vertical-alignment
tagged with: http://stackoverflow.com/tag/svg
tagged with: bootstrap-4
has answer: http://stackoverflow.com/a/79011332
has answer: http://stackoverflow.com/a/79011453
has comment: http://stackoverflow.com/comment/139312984
has comment: http://stackoverflow.com/comment/139316178
tagged with: css
upvote count: 2
downvote count: 1
has body: I can't get bootstrap star icons to center next to review text in a website I am designing. I imbedded the svgs in my code. I am using some bootstrap 4 classes here as well for context. Here's how it looks right now: Appearance of review star icons and text: My code: .reviews { color: black; } .review-name { font-weight: 700; margin-bottom: 2px; margin-top: 40px; } .review-location { font-weight: 400; } .stars-container { vertical-align: center; } .stars {} .review-date { font-weight: 400; } .review-content { font-size: .9rem; } Brian C. REVIEW LOCATION <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" /> <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" /> <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" /> <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" /> <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" /> Jul 10, 2019 REVIEW TEXT Yelp I tried using the vertical-align property to no avail. It made no real difference in the s…
answer count: 4
has comment: http://stackoverflow.com/comment/139313086
type: UnansweredQuestion
score: 1
favorite count: 0
has comment: http://stackoverflow.com/comment/139313267
has answer: http://stackoverflow.com/a/79011343
has comment: http://stackoverflow.com/comment/139315800
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139312995
type: Question

http://stackoverflow.com/q/78915026
has comment: http://stackoverflow.com/comment/139136852
answer count: 1
tagged with: html-table
score: 0
has body: I have a long and wide table inside a width: 100%; overflow-x: auto; container, and I'm trying to achieve the following at the same time: make the header row stick to the viewport's top edge; make the first column stick to the container's left edge. Here's an extremely simplified example of the page I have: codepen. Sometimes the viewport can be wide enough, but there are too many rows, so the vertical scroll appears: Sometimes the table is too wide for the given viewport, so the horizontal scroll appears: Sometimes both vertical and horizontal scroll can happen at the same time. I can easily make the first column stick to the left edge by the following styles: th:first-child, td:first-child { position: sticky; left: 0; z-index: 1; } However, I failed to make the header row sticky to the top edge without breaking the basic layout: .container { width: 100%; /* overflow-x: auto; */ /* no way! */ } th { position: sticky; top: 0; } How can I overcome this problem? Thanks for any ideas. I obviously can not abandon the container-based horizontal scroll in favour of the viewport scroll because then the content above the table will also be scrollable.
has answer: http://stackoverflow.com/a/78915820
has comment: http://stackoverflow.com/comment/139137331
tagged with: css
has comment: http://stackoverflow.com/comment/139137340
has title: How to make elements stick to different scrollable containers for different scroll directions?
type: UnansweredQuestion
tagged with: sticky
type: Question
tagged with: http://stackoverflow.com/tag/html

http://stackoverflow.com/q/78974044
tagged with: http://stackoverflow.com/tag/html
downvote count: 0
type: AnsweredQuestion
tagged with: slideshow
has body: I am having some trouble figuring out why my first slides aren't showing while having multiple carousels running. I have little knowledge on coding and kind of stitched/modified some I've found, mostly from w3schools. There won't be any interaction for the page, just need it displayed. jsfiddle demo Will have to lower the page magnification to see the whole demo page. CODE var myIndex = 0; var yrIndex = 0; var i; var u = document.getElementsByClassName("firstSlides"); var v = document.getElementsByClassName("secondSlides"); var w = document.getElementsByClassName("firstInfo"); var z = document.getElementsByClassName("secondInfo"); var allThumbs = [u, w]; var rightThumbs = [v, z]; var myInterval = setInterval(carousel, 4500); var yourInterval = setInterval(slideshow, 3000); function carousel() { myIndex++; for (i = 0; i < allThumbs.length; i++) { allThumbs[i][(myIndex - 1) % allThumbs[i].length].style.display = "none"; allThumbs[i][myIndex % allThumbs[i].length].style.display = "inline-block"; } } function slideshow() { yrIndex++; for (i = 0; i < rightThumbs.length; i++) { rightThumbs[i][(yrIndex - 1) % rightThumbs[i].length].style.display = "none"; rightThumbs[i][yrIndex % rightThumbs[i].length].style.display = "inline-block"; } } body { overflow: hidden; margin: 0; padding: 0; background: black; } @font-face { font-family: regional; src: url("Files/Fonts/regional-blackexpanded.otf?") format("opentype"); } @font-face { font-family: destra; src: url("Files/Fonts/Destra-Medium.otf?") format("opentype"); } font { font-size: 32px; text-transform: uppercase; } .image { height: 1080px; width: 1920px; } .one { font-family: 'regional'; font-size: 48px; color: white; text-transform: uppercase; height: 45px } .two { display: flex; align-items: center; font-family: 'destra'; font-size: 26px; padding: 0px 20px 0px 20px; background-color: white; height: 30px } .three { font-family: 'regional'; font-size: 75px; color: white; text-align: right; height: 45px } .firstSlides:not(:fir…
upvote count: 1
tagged with: carousel
tagged with: javascript
tagged with: css
has answer: http://stackoverflow.com/a/78974737
accepted answer: http://stackoverflow.com/a/78974737
favorite count: 0
has title: First slides not showing when using multiple javascript carousels
score: 1
type: Question
answer count: 1

http://stackoverflow.com/q/78996058
score: 0
has body: I made a copy of Instagram using tailwind, however tailwind works everywhere on the page, except for one image (main image), and even on other images it is working and as I am a beginner I was unable to solve this problem. I tried the following code: Tailwind Entrar Log in with Facebook Forgot password? Don't have an account? Sign up Get the app Meta About Blog Jobs Help API Privacy Terms Locations Instagram Lite Threads Contact Uploading & Non-Users Meta Verified English © 2024 Instagram from Meta and the result was this: image of how it turned out
has comment: http://stackoverflow.com/comment/139292600
has comment: http://stackoverflow.com/comment/139293396
answer count: 0
tagged with: css
has comment: http://stackoverflow.com/comment/139292384
has title: I'm having problems with the tailwind of my project
has comment: http://stackoverflow.com/comment/139285863
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139299508
has comment: http://stackoverflow.com/comment/139292154
has comment: http://stackoverflow.com/comment/139293309
type: Question
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139296897
tagged with: tailwind-css

http://stackoverflow.com/q/79004878
score: 0
accepted answer: http://stackoverflow.com/a/79005805
has body: I am developing an app using React Native, and I want to create a bottom tab bar with rounded corners. While I managed to round the corners using borderTopEndRadius and borderTopLeftRadius, the corners have a white background, and I want them to be transparent. The rest of the tab bar should retain its color, but I need the corners to be transparent. Here’s the current styling I’m using: tabBarStyle: { backgroundColor: "#990540", height: 63, borderTopEndRadius: 15, borderTopLeftRadius: 15, borderTopWidth: 0, } With this configuration, the corners are rounded, but they still show a white background. How can I make only the corners transparent while keeping the rest of the tab bar background color intact? I haven't tried it yet because I can't think of anything.
tagged with: react-native
tagged with: css
has title: How to Make Bottom Tab Bar Corners Transparent in React Native?
tagged with: mobile
answer count: 1
type: Question
tagged with: typescript
has answer: http://stackoverflow.com/a/79005805
type: AnsweredQuestion

http://stackoverflow.com/comment/139382901
comment on: http://stackoverflow.com/a/79037267
type: AnswerComment
has text: Yes, The issue is that the user agent stylesheet sets the background-image to `none !important`, making them non-overridable which means our background image won’t show when users select saved data. According to the MDN documentation, we can’t easily change this. You can check out: https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill
type: Comment
score: 0

http://stackoverflow.com/q/78984306
favorite count: 0
type: Question
tagged with: http://stackoverflow.com/tag/html
answer count: 1
tagged with: browser
downvote count: 0
tagged with: javascript
has body: Given an animating (transforming) row of images, detect when each one reaches the center so we can make some changes (e.g., adding styling like filter: grayscale) I've enlisted IntersectionObserver and gotten close. In fact my solution works great in Firefox but only works in Chrome if the mouse is moving and doesn't work at all in Safari. Even if I tweak the options parameter behavior seems sporadic unless in Firefox. Codepen const options = { root: document.body, rootMargin: '0% -50% 0% -50%', threshold: 0, } const observer = new IntersectionObserver((entries) =&gt; { entries.forEach((entry) =&gt; { if (entry.isIntersecting) { entry.target.style.filter = 'grayscale(0%)' } else { entry.target.style.filter = 'grayscale(100%)' } }) }, options) const items = document.querySelectorAll('.img-container img'); items.forEach(img =&gt; observer.observe(img))
has title: detect when horizontally animating element reaches center of viewport
upvote count: 1
tagged with: intersection-observer
tagged with: css
has answer: http://stackoverflow.com/a/78985158
type: UnansweredQuestion
score: 1

http://stackoverflow.com/comment/139312494
type: Comment
score: 0
has text: Do you mean, “To achieve this…”?
type: AnswerComment
comment on: http://stackoverflow.com/a/79007174

http://stackoverflow.com/comment/139181365
type: Comment
comment on: http://stackoverflow.com/q/78938680
type: QuestionComment
has text: screenshot added, thanks for the suggestion for the question
score: 1

background
type: Tag
tags question: http://stackoverflow.com/q/78914356
tag name: background
tags question: http://stackoverflow.com/q/79005724
tags question: http://stackoverflow.com/q/79146811
tags question: http://stackoverflow.com/q/79122546
tags question: http://stackoverflow.com/q/79111203
tags question: http://stackoverflow.com/q/79390788
tags question: http://stackoverflow.com/q/79335506
tags question: http://stackoverflow.com/q/79408440
tags question: http://stackoverflow.com/q/79246383
tags question: http://stackoverflow.com/q/79463588
tags question: http://stackoverflow.com/q/79538849
tags question: http://stackoverflow.com/q/79475540

http://stackoverflow.com/comment/139174637
has text: @m-sarabi it’s the two fs which needed explaining. Truly tabular data would not have that!
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78935678

http://stackoverflow.com/comment/139310307
type: Comment
comment on: http://stackoverflow.com/q/79008654
type: QuestionComment
score: 1
has text: Have you checked the ‘official’ way to include your own icon? But this won’t work if that code is already taken.

http://stackoverflow.com/a/79063888
answers question: http://stackoverflow.com/q/79063788
type: Answer
has body: A simple solution would be to use a matching border instead of padding (or in addition to it). .container { height: 100px; width: 300px; overflow-y: scroll; background-color: black; color: white; border: 10px solid black; } dogs dogs dogs dogs dogs dogs dogs dogs dogs dogs dogs dogs dogs dogs dogs
downvote count: 0
score: 1
upvote count: 1

http://stackoverflow.com/q/78966243
tagged with: interactjs
tagged with: drag-and-drop
tagged with: overflow
answer count: 0
tagged with: css
has title: Sidebar with vertical scroll that contains drag and drop items that are not visible outside
type: UnansweredQuestion
has body: I have a sidebar with some divs that overflow the height and so vertical scrollbar is needed. The problem it's that these divs can be drag and dropped outside the sidebar. So the sidebar must have the overflow property to visible in order to let the divs appears outside, but with overflow visible the vertical scrollbar disappear... Here an example: https://jsfiddle.net/4p6m72js/ If you set overflow-y: visible at line 15 in css, the vertical scrollbar disappear and the divs overflows, but when you drag and drop one div outside the sidebar works well. I'm using the library InteractJS for drag and drop feature.
type: Question
score: 0

http://stackoverflow.com/comment/139126462
type: Comment
type: QuestionComment
comment on: http://stackoverflow.com/q/78909592
score: 1
has text: You said you need `::before` and `::after` for something else - well, we kinda need to see that in your posted code in order for us to help you with finding alternatives to syle your checkbox without those psuedoelements.

http://stackoverflow.com/q/78955529
has body: I am using React DnD library version 16.0.1. When I drag a component, the object I drag is too transparent. This is my code: &lt;div ref={(node) =&gt; drag(drop(node))} className={`col-12 col-md-6 col-lg-2 mb-3 draggable ${isDragging ? 'is-dragging' : ''}`}&gt; &lt;ServerComponent /&gt; &lt;/div&gt; This is my css: .draggable { opacity: 1; cursor: move; transition: transform 0.2s; } .is-dragging { transform: scale(1.01); box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); }
has title: Customize the css of the dragged object of react DnD
tagged with: react-dnd
type: Question
tagged with: reactjs
score: 0
tagged with: drag-and-drop
answer count: 0
tagged with: css
type: UnansweredQuestion

http://stackoverflow.com/a/79063036
has comment: http://stackoverflow.com/comment/139422234
type: Answer
has comment: http://stackoverflow.com/comment/139439869
has comment: http://stackoverflow.com/comment/139409924
has comment: http://stackoverflow.com/comment/139427461
has body: One of the way of doing this is seprating image with div using ::before. Make the position:fixed and set top bottom left right to 0,then add background properties and at last use z-index then make your animation. body { margin: 0; font-family: Arial, sans-serif; } main div.full-banner { position: relative; width: 100%; height: 100vh; overflow: hidden; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5); } div.full-banner::before { content: ''; position: fixed; /* Keep the background fixed */ top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://avatars.githubusercontent.com/u/183603772?v=4'); background-position: center; background-attachment:fixed; background-size: cover; z-index: 1; opacity: 0.8; transform: scale(0); transform-origin: center; animation: scale-out-image 5s forwards; } div.full-banner div.banner-content { position: relative; z-index: 2; text-align: center; transform: scale(0); animation: scale-out 2s forwards; height:1000vh; } @keyframes scale-out { to { transform: scale(1); } } @keyframes scale-out-image{ to { transform: scale(1); } } Hello world! Lorem Ipsum Dolor Sit Amet Hope this helps...
has comment: http://stackoverflow.com/comment/139408772
answers question: http://stackoverflow.com/q/79062969
has comment: http://stackoverflow.com/comment/139439828
has comment: http://stackoverflow.com/comment/139434556
has comment: http://stackoverflow.com/comment/139439457
score: 0
has comment: http://stackoverflow.com/comment/139427104
has comment: http://stackoverflow.com/comment/139422429
has comment: http://stackoverflow.com/comment/139427444

http://stackoverflow.com/comment/139250342
type: Comment
has text: Yes, it will probably require a bit of work and manual testing to get the layout just as you want it, but it will work.
score: 1
type: QuestionComment
comment on: http://stackoverflow.com/q/78971306

uikit
tag name: uikit
tags question: http://stackoverflow.com/q/79055607
type: Tag
tags question: http://stackoverflow.com/q/79230957

http://stackoverflow.com/a/78968701
upvote count: 1
answers question: http://stackoverflow.com/q/78966785
score: 1
accepted answer of: http://stackoverflow.com/q/78966785
type: AcceptedAnswer
has body: And when using the same .razor page's markup in a .NET8 MAUI Blazor Hybrid App then MudStack's MudContainer elements have large empty margins on the left and the right sides To remove the large empty margins on the left, you need to set the Align Content to align-content-start which will control the row to left side, so just add Class="d-flex align-content-start flex-wrap flex-grow-1 " to <MudStack> like below. For the right margins, I think it's defined by the actual width of the items you place, you can't eliminate it. <MudPaper Outlined="true" Spacing="1" Style="background-color:aquamarine;padding:10px 10px 10px 10px;"> <MudStack Elevation="1" Row="false" Class="d-flex align-content-start flex-wrap flex-grow-1 " Style="background-color:moccasin;padding:10px 10px 10px 10px;align-items:stretch" Outlined="true"> For more details, you can refer to https://mudblazor.com/utilities/justify-content#class-reference.
type: Answer
has comment: http://stackoverflow.com/comment/139235838
downvote count: 0

http://stackoverflow.com/q/78949483
type: Question
has comment: http://stackoverflow.com/comment/139201264
answer count: 1
has body: This issue is happening for one specific user, even though all the default settings are applied. The error affects the display of some text and button styles, as shown in the images below. For this user, the text alignment and shadows on the button seem to be rendered inconsistently compared to other users or devices. Specifically: The text size appears to change. Shadows around the button text are inconsistent between the two cases. Our Setup: We're using React for the front-end. ChakraUI is used for styling, and we're applying the default Chakra theme with no custom overrides. All users are accessing the app via Safari on iOS, but this issue only occurs for one specific user. Debugging Attempts: We've confirmed that the issue persists across page reloads and browser cache clearing. There are no user-specific styles being applied that could explain this. Questions: What could be causing this inconsistency in text rendering for one user? Is there any known issue with Safari or ChakraUI that could result in text or button shadows displaying incorrectly? Any insights or suggestions would be greatly appreciated!
has answer: http://stackoverflow.com/a/78951810
score: 0
tagged with: chakra-ui
tagged with: ios
type: UnansweredQuestion
has title: Text and Button Shadow Inconsistencies in React ChakraUI on Safari for Specific User
has comment: http://stackoverflow.com/comment/139201267
tagged with: css

http://stackoverflow.com/comment/139135752
has text: Added image to original post.
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78914768

http://stackoverflow.com/comment/139387318
type: QuestionComment
has text: Does the posted code reproduce your problem, because I can't see anything happening that matches what you describe (other than the links opening entirely new pages, when clicked; which of course are different).
type: Comment
comment on: http://stackoverflow.com/q/79051072
score: 0

http://stackoverflow.com/q/79035246
score: 0
has title: Use container query for standard css properties
tagged with: css
tagged with: css-selectors
type: UnansweredQuestion
has body: I tried to get the container style query working, but found some oddities. Consider the following code: html ... CSS .parent { --test-var: red; background-color: grey; } @container style(background-color: grey) /* @container style(--test-var: red) */ { .child { background-color:red; } } The above css rule does not apply the 'child-style' eventhough this should work following the MDN documentation about this feature. Using the query on custom properties (i.e. by using the commented css-query), things work as expected/documented (tested with chrome version 128.0.6613.138, among other things). Maybe this feature is not ready yet to be used in this way. But if I missed something, I would love to know. Added a jsfiddle if someone wants to try this out.
tagged with: http://stackoverflow.com/tag/html
type: Question
has answer: http://stackoverflow.com/a/79036313
has comment: http://stackoverflow.com/comment/139357174
answer count: 1

flexbox
tags question: http://stackoverflow.com/q/78904561
tags question: http://stackoverflow.com/q/78912380
tags question: http://stackoverflow.com/q/78916890
tags question: http://stackoverflow.com/q/78966497
tags question: http://stackoverflow.com/q/78947535
tags question: http://stackoverflow.com/q/79015820
tags question: http://stackoverflow.com/q/78978286
tags question: http://stackoverflow.com/q/79048332
tags question: http://stackoverflow.com/q/79017553
tags question: http://stackoverflow.com/q/79006007
tags question: http://stackoverflow.com/q/79000908
tags question: http://stackoverflow.com/q/78930583
tags question: http://stackoverflow.com/q/78912015
tags question: http://stackoverflow.com/q/78955207
tags question: http://stackoverflow.com/q/79050055
tags question: http://stackoverflow.com/q/78954897
tags question: http://stackoverflow.com/q/79061980
tags question: http://stackoverflow.com/q/78932133
tags question: http://stackoverflow.com/q/79057813
tags question: http://stackoverflow.com/q/79058041
tags question: http://stackoverflow.com/q/78962714
tags question: http://stackoverflow.com/q/78938577
tags question: http://stackoverflow.com/q/78936472
tags question: http://stackoverflow.com/q/79013683
tags question: http://stackoverflow.com/q/78946665
tags question: http://stackoverflow.com/q/78920209
tags question: http://stackoverflow.com/q/78940065
tags question: http://stackoverflow.com/q/78943212
tags question: http://stackoverflow.com/q/79058968
tags question: http://stackoverflow.com/q/79058686
tags question: http://stackoverflow.com/q/79038356
tags question: http://stackoverflow.com/q/79011399
tags question: http://stackoverflow.com/q/79030661
tags question: http://stackoverflow.com/q/78970645
tags question: http://stackoverflow.com/q/78958406
tags question: http://stackoverflow.com/q/78915295
tags question: http://stackoverflow.com/q/78907430
tags question: http://stackoverflow.com/q/79039117
tags question: http://stackoverflow.com/q/79030672
tags question: http://stackoverflow.com/q/78957177
tags question: http://stackoverflow.com/q/79040017
tags question: http://stackoverflow.com/q/79064735
tags question: http://stackoverflow.com/q/79007922
tags question: http://stackoverflow.com/q/78929748
tags question: http://stackoverflow.com/q/78967340
tags question: http://stackoverflow.com/q/78986796
tags question: http://stackoverflow.com/q/79019426
tags question: http://stackoverflow.com/q/78921605
tags question: http://stackoverflow.com/q/78996269
tags question: http://stackoverflow.com/q/79029436
type: Tag
tags question: http://stackoverflow.com/q/79056369
tags question: http://stackoverflow.com/q/79061170
tags question: http://stackoverflow.com/q/78922197
tags question: http://stackoverflow.com/q/78925506
tags question: http://stackoverflow.com/q/79015656
tags question: http://stackoverflow.com/q/78939673
tags question: http://stackoverflow.com/q/78970177
tags question: http://stackoverflow.com/q/78921098
tags question: http://stackoverflow.com/q/78941096
tags question: http://stackoverflow.com/q/78910644
tags question: http://stackoverflow.com/q/78968754
tags question: http://stackoverflow.com/q/78940428
tags question: http://stackoverflow.com/q/79047361
tags question: http://stackoverflow.com/q/79060918
tags question: http://stackoverflow.com/q/78913676
tags question: http://stackoverflow.com/q/79048616
tags question: http://stackoverflow.com/q/79010725
tags question: http://stackoverflow.com/q/79000228
tag name: flexbox
tags question: http://stackoverflow.com/q/78920407
tags question: http://stackoverflow.com/q/78938496
tags question: http://stackoverflow.com/q/78961222
tags question: http://stackoverflow.com/q/78917857
tags question: http://stackoverflow.com/q/78986368
tags question: http://stackoverflow.com/q/78980674
tags question: http://stackoverflow.com/q/79056932
tags question: http://stackoverflow.com/q/78920993
tags question: http://stackoverflow.com/q/78977012
tags question: http://stackoverflow.com/q/79056227

http://stackoverflow.com/comment/139214134
has text: You can use text shadow to put the column headings in, if you know the width to displace them by.
type: Comment
score: 0
comment on: http://stackoverflow.com/a/78956802
type: AnswerComment

http://stackoverflow.com/comment/139248295
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78972283
has text: That's not quite the solution I'm going for as it crops the image's heavily. I am trying to change the size of the container with each image, not conform the images to the container size.
type: Comment

http://stackoverflow.com/q/78976920
type: Question
answer count: 1
type: AnsweredQuestion
score: 0
has body: I am trying to use handlebars js in my nest js project to send email. Email sending properly but in email body content not rendered properly. It creates responsive issue , styling issue . in my template My title ............................ So on How can I get actual view of my template in email . Thanks in advance
tagged with: nestjs
has answer: http://stackoverflow.com/a/78977147
tagged with: css
has title: Email template issue using handlebars js in nest js
tagged with: express
tagged with: node.js
accepted answer: http://stackoverflow.com/a/78977147
tagged with: handlebars.js

http://stackoverflow.com/a/78914917
has comment: http://stackoverflow.com/comment/139135832
downvote count: 0
has body: Fix: I have used the following https://codepen.io/t_afif/pen/XWaPXZO as an inspiration and updated my script accordingly and now it works as intended. jQuery(function ($) { $('.module').addClass('animate'); }); @property --stat-bar{ syntax: '&lt;number&gt;'; inherits: true; initial-value: 0; } .icon{ width: 146px; height: 146px; padding: 36px; position: relative; flex-shrink: 0; } .icon .bar { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; } .icon .bar:before { content: ''; position: absolute; border-radius: 50%; inset: 0; background: radial-gradient(farthest-side, #00a451 98%, #0000) top/22px 22px no-repeat, conic-gradient(#00a451 calc(var(--stat-bar) * 1%), #0000 0); -webkit-mask: radial-gradient(farthest-side, #0000 calc(99% - 22px), #000 calc(100% - 22px)); mask: radial-gradient(farthest-side, #0000 calc(99% - 22px), #000 calc(100% - 22px)); background-size: 0 0, auto; } .animate .icon .bar{ animation:progress-bar 1s .5s both; } @keyframes progress-bar { from{--stat-bar:0} } &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"&gt;&lt;/script&gt; &lt;section class="module"&gt; &lt;div class="icon"&gt; &lt;div class="bar" style="--stat-bar:80;"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/section&gt;
answers question: http://stackoverflow.com/q/78914182
has comment: http://stackoverflow.com/comment/139135886
upvote count: 1
score: 1
type: Answer

http://stackoverflow.com/q/78928948
has comment: http://stackoverflow.com/comment/139165885
has comment: http://stackoverflow.com/comment/139164037
type: UnansweredQuestion
type: Question
tagged with: http://stackoverflow.com/tag/html
score: 0
has comment: http://stackoverflow.com/comment/139163733
has body: When clicking the ‘Print’ button the text shows as light gray for a calendar event when I print to a printer or print as PDF. Is this a fix that can be done in the HTML/CSS code or is this due to the print settings itself and nothing can be done about it? I am providing the HTML/CSS code and a couple of screenshots: one of what the page looks like and what it looks like when printing to PDF. Have tried using @media print by testing the text '12p Test' which is a.fc-daygrid-event selector but that doesn't change the text to black text. What the page in the app looks like currently: After clicking Print button and what it looks like printing to PDF. Text is gray and a little hard to read HTML Calendar Print <lf-unit-invoices-table #unitOutstandingInvoicesTable (emitReloadUnitBalance)="this.emitReloadUnitBalance.emit($event);" [unitId]="this.unitId" [context]="'unpaid'" ></lf-unit-invoices-table> <lf-unit-recurring-charges-table [unitId]="this.unitId"></lf-unit-recurring- charges-table> Current Owner <lf-unit-account-history-table #unitAccountHistory [unitId]="this.unitId"></lf-unit-account-history-table> <lf-unit-invoices-table #unitAllInvoicesTable (emitReloadUnitBalance)="this.emitReloadUnitBalance.emit($event);" [unitId]="this.unitId" [context]="'all'" ></lf-unit-invoices-table> <lf-unit-payments-table [unitId]="this.unitId"></lf-unit-payments-table> Credits CSS :host { .lf-full-calendar { max-width: 1100px; display: block; margin-left: auto; margin-right: auto; } .google-calendar-title { font-size: 12px; } .google-calendar-list { display: flex; } .google-calendar-container { display: flex; justify-content: space-between; max-width: 1100px; select { background-color: #FFFFFF; font-size: 12px; min-width: 200px; } .spinner { height: 30px; margin-right: 5px; } } } ::ng-deep { a.fc-daygrid-event { color: #ffffff; } .fc-daygrid-dot-event:hover { color: black; } } @media print { .fc-daygrid-event { color:black !important; } }
answer count: 0
tagged with: css
has title: Calendar ‘Print’ not showing grid lines and Text light gray

http://stackoverflow.com/comment/139251948
has text: So it was not the image request that was blocked, but rather the stylesheet request?
type: Comment
comment on: http://stackoverflow.com/a/78974992
score: 0
type: AnswerComment

http://stackoverflow.com/comment/139132034
comment on: http://stackoverflow.com/a/78912278
type: Comment
score: 0
type: AnswerComment
has text: Thank you for your help, I wasn't able to use the code necessarily the way it was written but it did help me realize my problem in the end was just because I didn't have enough meat to put on the table. And calucating by hand or in advance the width of the parent made me realize I'd just be better off duplicating my HTML until there was so much that the animation couldn't ever run off with a large gap.

http://stackoverflow.com/q/78920988
score: 0
has body: Specific problem per bot comment: I cannot figure out how to get a highlighted/glowing edge on a svg like this. Bright Edge SVG All kinds of variations playing around with fill, fill opacity, stroke, stroke opacity, stroke width, with and without the filter. In hindsight I probably could have done this in photoshop a lot quicker and been done days ago. But I've invested so much time and I thought it would be nice to be able to simply change the color via hue-rotate. .hero-container { display: flex; justify-content: center; align-items: center; gap: 20px; } .hero-section { position: relative; width: 180px; height: 508px; margin-bottom: 20px; } .masked-image { width: 100%; height: 100%; mix-blend-mode: multiply; /* Does nothing in this example, was from other tests */ } /* Specific filters for each hero section */ .red-neon .masked-image { filter: brightness(1) sepia(1) hue-rotate(0deg) saturate(5) contrast(2); } .border-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } <path d="M5 498V71L85 2V429L5 498Z" fill="white" stroke="white" stroke-width="1" filter="url(#neon-filter-red)" /> <feGaussianBlur stdDeviation="3.5" result="blur" /> <feMergeNode in="blur" /> <feMergeNode in="blur" /> <feMergeNode in="SourceGraphic" />
has comment: http://stackoverflow.com/comment/139150492
answer count: 0
tagged with: css
has comment: http://stackoverflow.com/comment/139150558
has comment: http://stackoverflow.com/comment/139148888
type: UnansweredQuestion
type: Question
has title: SVG Mask Effects / CSS Filtering - "Hue Change + Bright/Glow Edge"
has comment: http://stackoverflow.com/comment/139153868
tagged with: css-filters
tagged with: svg-filters
tagged with: http://stackoverflow.com/tag/svg

http://stackoverflow.com/comment/139153611
has text: Someone said it only happens on safari, but the comments are gone.
comment on: http://stackoverflow.com/q/78923550
type: QuestionComment
type: Comment
score: 0

http://stackoverflow.com/comment/139366217
score: 0
has text: @VincentDecaux Because if this is not done, then `.chart__datasets` and `.chart__canvas` will not be centered on the `.chart`. They will be below the center by the height of the `.chart__header`
type: QuestionComment
type: Comment
comment on: http://stackoverflow.com/q/79039117

http://stackoverflow.com/comment/139169377
comment on: http://stackoverflow.com/a/78932544
has text: Actually, now thinking, a custom property could be defined with an invalid value, which then it will use the fallback or `unset` if no fallback. So I guess that whole sentence inaccurate. I've updated the answer, thanks for pointing out!
type: Comment
score: 0
type: AnswerComment

http://stackoverflow.com/comment/139183127
score: 0
type: AnswerComment
has text: @BrettDonald Good catch! Fixed that now. Commented further.
comment on: http://stackoverflow.com/a/78938633
type: Comment

http://stackoverflow.com/comment/139182641
type: AnswerComment
has text: @BrettDonald Yes it does. The box size is as big as possible while maintaining an 1:1 aspect ratio, regardless of orientation.
comment on: http://stackoverflow.com/a/78938633
type: Comment
score: 0

http://stackoverflow.com/comment/139318811
score: 1
has text: This doesn't solve my issue unfortunately as it's specific to one highlight in the paragraph. I need the button to remove and return all highlights, which is why I was using the for loop and`collection[i].classList.toggle('hidden');` instead of simply targeting the one class instance. Since it uses one variable `markedTextArray` to store I don't see how it could be adapted easily to store many. Have upvoted though as it is clever.
type: Comment
comment on: http://stackoverflow.com/a/79008359
type: AnswerComment

http://stackoverflow.com/q/78981776
has comment: http://stackoverflow.com/comment/139263637
tagged with: css
type: Question
tagged with: css-transforms
has comment: http://stackoverflow.com/comment/139264376
has title: transform-origin applied to a <clipPath> is wrong on retina displays
favorite count: 0
tagged with: css-animations
tagged with: clip-path
has comment: http://stackoverflow.com/comment/139259601
answer count: 0
downvote count: 0
tagged with: http://stackoverflow.com/tag/svg
type: UnansweredQuestion
upvote count: 1
has comment: http://stackoverflow.com/comment/139259519
score: 1
has body: Context: I'm trying to reveal an element on page scroll using the shape of a "blob" with a CSS animation-timeline animation so the code must be tested on a recent Edge or Chrome browser. The element (a ) has a clip-path: url(#blob) where #blob is the id of a element contained in a SVG: this element has clipPathUnits="objectBoundingBox" and the coordinates of the <path> create a shape of a blob. The is initially scaled to 0 and the animation linked to the animation-timeline makes it scale to 2.5. Problem: The issue is in the transform-origin of the element. On a retina display the origin of the scale transformation is wrong, while on non-retina display is correct1. Here is the minimal code to reproduce the issue (but I also made a demo on Codepen) body { margin: 0; view-timeline: --body; min-block-size: 300vh; } div { position: sticky; top: 0; display: grid; place-content: center; block-size: 100vh; background: linear-gradient(#83a3ac, #df9784); clip-path: url("#blob"); h1 { font: 7rem "system-ui"; color: #fff; } } svg { block-size: 0; inline-size: 0; clipPath { transform-origin: 50vw 50vh; transform: scale(0); animation: linear clippath 1 forwards; animation-timeline: --body; animation-range: exit-crossing 25vh exit-crossing 275vh; } } @keyframes clippath { to { transform: scale(2.5) }} Hello, World <path d="M0.8338,0.1121c0.0818,0.0416,0.1468, 0.1134,0.1623,0.1922c0.0158,0.0788-0.0178, 0.1642-0.0397,0.2459c-0.0216,0.0819-0.0316, 0.1598-0.0652,0.2489c-0.0338,0.089-0.0909, 0.1882-0.1696,0.1995c-0.0789,0.0115-0.1794 -0.065-0.2937-0.096c-0.1147-0.0312-0.2437 -0.0172-0.3109-0.065c-0.0674-0.0478-0.0726 -0.1574-0.0887-0.2649c-0.0158-0.1076-0.0412 -0.2135-0.0201-0.3188c0.0208-0.1054,0.0886 -0.2096,0.1875-0.2447c0.0986-0.0351,0.2551 -0.0011,0.3824,0.0221C0.6536,0.0593,0.7519, 0.0703,0.8338,0.1121z"/> What I actually see? (click to see the animated gif: on the left a retina display, on the right a non-retina display) What I tried? I found a workaround with a mediaquery for r…

http://stackoverflow.com/q/79002604
has answer: http://stackoverflow.com/a/79005586
tagged with: barbajs
tagged with: gsap
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139298374
tagged with: http://stackoverflow.com/tag/html
type: Question
answer count: 1
has title: Videos Stop Autoplaying After Navigating Away - Barbajs
score: 0
tagged with: javascript
has body: I am using barba.js for page transitions. I have video element on my corporate page that are set to autoplay, loop, and muted. Work well when I initially load the corporate page. However, when I navigate away from the corporate page and then return (without refreshing the page), the video is no longer autoplaying. The video only start autoplaying again if I manually reload the page. Note: I'm not using any frameworks (like React, Vue, etc.), just plain JavaScript (vanilla JS). I re-run all my JavaScript code on every page transition with Barba.js. What should i do for the video element ? How I can ensure the video continue autoplaying when navigating back to the page, without requiring a page reload? Thanks in advance!
has comment: http://stackoverflow.com/comment/139317484
tagged with: css

http://stackoverflow.com/comment/139367023
type: AnswerComment
comment on: http://stackoverflow.com/a/79037983
has text: (1) can you make it centered vertically as well? (2) is `object-position: center` still needed?
type: Comment
score: 0

tailwind-in-js
tag name: tailwind-in-js
type: Tag
tags question: http://stackoverflow.com/q/79067649
tags question: http://stackoverflow.com/q/79009310

http://stackoverflow.com/a/78951435
score: 0
has body: I don't understand why you need so many media queries. But have you tried clamp? I think it would help you. .container { max-width: clamp(300px, 50%, 600px); background-color: blue; height: 200px; /* just to make it visible */ } &lt;div class="container"&gt;&lt;/div&gt; This will make sure the container is never smaller than 300px, never larger than 600px, and will otherwise scale flexibly with 50% width. Just make sure clamp is supported. You can find more here about how clamp behaves.
answers question: http://stackoverflow.com/q/78948236
accepted answer of: http://stackoverflow.com/q/78948236
type: AcceptedAnswer
type: Answer

http://stackoverflow.com/q/78943132
type: UnansweredQuestion
score: 1
favorite count: 0
type: Question
answer count: 1
has comment: http://stackoverflow.com/comment/139188591
downvote count: 0
has body: how can I make the button perfectly round? This is my css: gtk_css_provider_load_from_data(provider, “#font_button {min-width:5px;min-height:5px;border-radius: 50%;background: white;}”, -1, NULL); gtk_widget_set_name(img_struct-&gt;sub_color , “font_button”); the flags in gtk_box_pack_start() are both set to false and even by using the circular class the button is not perfectly round as you can see in the screenshot.
tagged with: button
has comment: http://stackoverflow.com/comment/139188531
has answer: http://stackoverflow.com/a/78943395
tagged with: gtk3
upvote count: 1
tagged with: css
has title: GTK+3 round button

http://stackoverflow.com/comment/139223196
has text: Than you can edit it in css… straight for this unique class…
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78962197

razor
tags question: http://stackoverflow.com/q/78989496
tag name: razor
type: Tag
tags question: http://stackoverflow.com/q/79090375
tags question: http://stackoverflow.com/q/79344069
tags question: http://stackoverflow.com/q/79390317
tags question: http://stackoverflow.com/q/79501873

http://stackoverflow.com/q/78930892
upvote count: 2
type: AnsweredQuestion
score: 2
favorite count: 0
accepted answer: http://stackoverflow.com/a/78931052
answer count: 2
tagged with: hover
tagged with: http://stackoverflow.com/tag/html
possible better answer: http://stackoverflow.com/a/78930971
downvote count: 0
has title: How do I make cards inside a container blurred but not the first card inside of the container?
has body: So to breakdown what I am trying to achieve: I want all the cards inside of a container to be blurred besides the very first card, until you actually hover on the next card in the container to which it should then blur all of the cards besides the next card you are hovering on. I have managed to make the cards all blur and the one i am hovering on will unblur, but that means that when not hovering on the container they are all blurred. This is not what I am trying to achieve. I have put a snippet of the structurte of the list of cards I have below: 2024 - PRESENT Junior Web Developer Build and maintain a website for Dynamic Roofing Solutions Ltd. Working closely with the directors to fulfill their development needs. HTML CSS JavaScript Google Scripts .exp__card:hover { background-color: #00d20013; border: -1px solid var(--text-primary-color); } .exp__list .exp__card { filter: blur(3px); opacity: .99; } .exp__card:hover { filter: blur(0); opacity: 1; }
tagged with: styling
tagged with: css
has answer: http://stackoverflow.com/a/78931052
type: Question
has answer: http://stackoverflow.com/a/78930971

http://stackoverflow.com/a/79060366
type: AcceptedAnswer
has comment: http://stackoverflow.com/comment/139419294
type: Answer
answers question: http://stackoverflow.com/q/79060298
has body: <string> isn't a currently supported value for syntax, but you could use * to accept anything (or perhaps <custom-ident>). @property --interactive-border-top-style { syntax: "*"; inherits: true; initial-value: dotted; } Alternatively, you could list out all the possible values for border-style (or only the subset you wish to support), separating with |. @property --interactive-border-top-style { syntax: "none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset"; inherits: true; initial-value: dotted; }
accepted answer of: http://stackoverflow.com/q/79060298
downvote count: 0
has comment: http://stackoverflow.com/comment/139404704
score: 1
upvote count: 1

http://stackoverflow.com/comment/139217812
score: 0
type: AnswerComment
has text: It is tricky I had done something similar before but not a chat app. though the right calc should be fine tuned.
comment on: http://stackoverflow.com/a/78959123
type: Comment

checkbox
type: Tag
tags question: http://stackoverflow.com/q/78912664
tags question: http://stackoverflow.com/q/78909592
tag name: checkbox
tags question: http://stackoverflow.com/q/78918565
tags question: http://stackoverflow.com/q/79057467
tags question: http://stackoverflow.com/q/79152221
tags question: http://stackoverflow.com/q/79272697
tags question: http://stackoverflow.com/q/79485045

http://stackoverflow.com/comment/139177269
score: 0
comment on: http://stackoverflow.com/a/78937092
type: AnswerComment
has text: @silvenon Accessing `offsetHeight` before logging it is redundant (reading it in the argument will cause recalculation as well, before the result is logged to the console), the code would log the same result without the extra access too. Like I said, "_not reproducible_".
type: Comment

http://stackoverflow.com/a/79052514
type: Answer
score: 0
answers question: http://stackoverflow.com/q/79048247
accepted answer of: http://stackoverflow.com/q/79048247
has body: Answering my own question as I have discovered more thanks to other comments and also time. This is because it is representing in a homogeneous coordinate system. Problem: a translation is not a linear transformation because it changes the origin. In a linear system, T(0,0) == (0,0) but a translation makes it so T(0,0) != (0,0) Solution 1: using a cartesian coordinate system, perform 2D matrix multiplication, and then add the translation: M*p+tr # where M = a 2x2 marix p = a 2D point (x,y) tr = a translation (tx, ty) Solution 2: Another solution is to use a homogenous coordinate system which will move the problem up one dimension M*p M = a 3x3 matrix p = a 3D vector that represents a 2D point (x,y,1) The resulting matrix multiplication will perform a linear transformation of p by shearing in the 3rd dimension. This can be generalized to 3D graphics as well, and is why in 3D graphics programming you will often see Vector4s. YouTube videos for more information: Why use 4x4 matrices for 3D graphics? A good place to start https://www.youtube.com/watch?v=Do_vEjd6gF0 Quick understanding of homogeneous coordinates https://www.youtube.com/watch?v=o-xwmTODTUI
type: AcceptedAnswer

http://stackoverflow.com/q/79035000
tagged with: http://stackoverflow.com/tag/html
downvote count: 0
has answer: http://stackoverflow.com/a/79035237
tagged with: javascript
has comment: http://stackoverflow.com/comment/139356790
score: 1
upvote count: 1
tagged with: jquery
has answer: http://stackoverflow.com/a/79035090
tagged with: toggle
tagged with: css
linked to: http://stackoverflow.com/q/842336
has body: i have this grid with 3 columns, and i wanted to make it so that when i click one of the divs it'll go down a row and span the whole row, it also closes back up when i click on it again. and i got that to work. but i wanted to make it so that when i open a different div, itll close all the other ones if theyre open? so that theres only one open at a time? how would i do that? 1 one 2 two 3 three 4 four 5 five 6 six 7 seven 8 eight 9 nine 10 ten also, i have these other divs next to the h1 thatll have information in it, but i only want it to show if its parent div got expanded and spanned the whole row? so i want to change the display from hidden to block only IF it got opened.. i know i have to add or remove class hidesINFO but like, would i have to make a function for each div to do that? #gridALBUM { margin: 50px auto; max-width: 908px; display: grid; grid-gap: 0 4px; grid-template-columns: repeat(3, 300px); background-color: lightblue; } #gridALBUM > div { border: 1px solid black; display: flex; } .hidesINFO { display: none; } .span { grid-column: 1 / 4; background-color: blue; } also, is there a better way to do the code below? instead of having to have the same exact code but with different IDs for each to target each div? because im gonna have to add more divs and i dont want to have to copy and paste each function when theyre really only doing the same thing, just to different elements function toggles1() { document.getElementById("one").classList.toggle("span"); } function toggles2() { document.getElementById("two").classList.toggle("span"); } function toggles3() { document.getElementById("three").classList.toggle("span"); } function toggles4() { document.getElementById("four").classList.toggle("span"); } function toggles5() { document.getElementById("five").classList.toggle("span"); } function toggles6() { document.getElementById("six").classList.toggle("span"); } function toggles7() { document.getElementById("seven").classList.toggle("span"); } function to…
type: Question
has comment: http://stackoverflow.com/comment/139356945
accepted answer: http://stackoverflow.com/a/79035237
type: AnsweredQuestion
has title: how to remove class from selected dom's siblings? how to open a div and have all the other ones close? do i use siblings() or what
favorite count: 0
has comment: http://stackoverflow.com/comment/139357108
answer count: 2
possible better answer: http://stackoverflow.com/a/79035090

http://stackoverflow.com/a/79016879
has comment: http://stackoverflow.com/comment/139325033
upvote count: 1
has body: You could move your border to the bottom layered progress-bar and then use a clip-path on the segments. Then if you ever want to go 100% the border-radius will still be present. Using CSS variables will allow dynamic calculations provided you want to exclude the radius from the percentage. The clip-path - inset function defines a rectangle at the specified inset distances from each side of the reference box. So if you want to take up 70% with the first segment set the right side to 30% provided your width is 100%. Then on the :last-of-type segment if you want it to stop shy of the border-radius, calc the left side to be 100% - border-radius. I included a few examples and how the inset could be set for differing percentages. body { --br: 20px; --height: 40px; font-family: sans-serif; } .calcs { margin-left: 0.5rem; } .segment { padding-left: 2rem; color: white; } .segment:last-of-type { text-align: right; padding-right: 6rem; color: blue; } .progress-bar { position: relative; height: var(--height); width: 400px; background: lightgray; border-radius: var(--br); border: 1px solid blue; .segment { padding-right: var(--br); position: absolute; height: var(--height); box-sizing: border-box; &:first-of-type { border-radius: var(--br) 0 0 var(--br); width: 100%; clip-path: inset(0% 30% 0% 0%); /* inset top, right, bottom, and left */ background: blue; } &:last-of-type { width: 100%; /* make the width 100% */ background: lightblue; /* inset of 40% from right with a width of 100% - half the height */ clip-path: inset(0% 40% 0% calc(100% - var(--height)/2)); /* inset: top, right, bottom, and left */ } } } .progress-bar2 { position: relative; height: var(--height); width: 400px; background: lightgray; border-radius: var(--br); border: 1px solid blue; /* place your colored border-radius here */ .segment { position: absolute; height: var(--height); box-sizing: border-box; &:first-of-type { border-radius: var(--br) 0 0 var(--br); width: 100%; clip-path: inset(0% 30% 0% 0%); /* ins…
answers question: http://stackoverflow.com/q/79015795
has comment: http://stackoverflow.com/comment/139330963
accepted answer of: http://stackoverflow.com/q/79015795
has comment: http://stackoverflow.com/comment/139329756
score: 1
has comment: http://stackoverflow.com/comment/139339954
type: AcceptedAnswer
downvote count: 0
type: Answer

http://stackoverflow.com/comment/139401774
type: AnswerComment
comment on: http://stackoverflow.com/a/79057956
has text: Thanks so much! This is exactly what I was looking for, Cheers!
type: Comment
score: 0

http://stackoverflow.com/q/79029035
has title: Is @import reloaded for every shadow DOM it is used in?
score: 0
tagged with: css
tagged with: shadow-dom
tagged with: web-component
answer count: 0
has body: I am considering using either native web components or a thin library like Lit that uses web components to componentize my web application. It's an ASP Core app so I want something lightweight, that has a small footprint and no separate client build process. The only downside is that CSS encapsulation prevents my application css from applying to my components. After some research I have found a technique that seems useable, but I'm concerned that it might have performance implications. Given a web component defined like this: class UsingGlobalStyles extends HTMLElement { constructor() { super(); this.attachShadow({ mode: "open" }).innerHTML = ` Using global styles `; } } customElements.define("using-global-styles", UsingGlobalStyles); If I apply this pattern to all the components in my application, would that mean that Bootstrap and my application css are being reloaded for every web component on the page, and if so, how bad is that performance wise? If this is not performant, is there a different web component based strategy I could use to achieve the same thing? I'm already aware of inherited HTML properties, custom CSS properties and shadow DOM parts, and don't consider any of those to be remotely effective solutions. Or would I be better off just forgetting about using web components for this purpose and use Vue or some other component framework that doesn't require a separate build step instead?
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139350737
tagged with: http://stackoverflow.com/tag/html
type: Question
has comment: http://stackoverflow.com/comment/139348181

http://stackoverflow.com/comment/139134690
comment on: http://stackoverflow.com/q/78914182
type: Comment
score: 0
has text: Please go read [ask] and [mre], and then edit your question accordingly.
type: QuestionComment

http://stackoverflow.com/comment/139156037
score: 0
type: AnswerComment
has text: This worked but how come the "100" text doesn't center vertically in the white box?
comment on: http://stackoverflow.com/a/78925469
type: Comment

http://stackoverflow.com/comment/139305742
type: QuestionComment
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78990560
has text: got a better way.... onclick="location.href='website.html'"

http://stackoverflow.com/q/79021080
score: 3
favorite count: 0
upvote count: 3
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139332966
has body: I've been doing some investigation into the behaviour of browsers as it pertains to loading resources - and I was surprised to find that the loading of CSS stylesheets, via a is always render blocking - no content will be displayed until all stylesheets are loaded. See: Render blocking and CSS However - at the same time, during my googling I've been seeing questions from circa 2012 of people having the kind of opposite problem - wanting to prevent the display of content until stylesheets have loaded. For example: How to stop web content from being displayed before css/jquery is prepared? Is this something that has changed in recent years, or is this always how browsers have behaved?
downvote count: 0
accepted answer: http://stackoverflow.com/a/79022317
linked to: http://stackoverflow.com/q/50619239
linked to: http://stackoverflow.com/q/11689434
type: Question
tagged with: css
has answer: http://stackoverflow.com/a/79022317
answer count: 1
type: AnsweredQuestion
has title: Has stylesheet loading always been render blocking?

http://stackoverflow.com/comment/139223124
has text: I'm not the OP, but there is no issue as pointed out in the comments. This is answer is just incorrect
score: 1
comment on: http://stackoverflow.com/a/78962197
type: Comment
type: AnswerComment

http://stackoverflow.com/q/79030672
tagged with: css-grid
type: UnansweredQuestion
has body: How do you make sure that the image or video keeps their length? I am new to HTML and CSS and I am trying to make a project of a YouTube clone, by modifying the source code of a course. This is a screenshot. However, every time I use image other than the course's source code, it breaks and I can't understand why? I tried using flex, but items are overflowing. How do you make sure that a grid or flex item stays the same length, without content overflowing it's container? .thumbnail { width: 100%; } .video-title { margin-top: 0; font-size: 14px; font-weight: 500; line-height: 20px; margin-bottom: 10px; } .video-info-grid { display: grid; grid-template-columns: 50px 1fr; } .profile-picture { width: 36px; border-radius: 50px; } .thumbnail-row { margin-bottom: 8px; position: relative; /* object-fit: cover; */ } .thumbnail-row { object-fit: cover; } .video-author, .video-stats { font-size: 12px; color: rgb(96, 96, 96); } .video-author { margin-bottom: 4px; } .video-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; column-gap: 16px; row-gap: 40px; } @media (max-width: 750px) { .video-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 751px) and (max-width: 999px) { .video-grid { grid-template-columns: 1fr 1fr 1fr; } } @media (min-width: 1000px) { .video-grid { grid-template-columns: 1fr 1fr 1fr 1fr; } } @media (min-width: 400px) and (max-width: 600px){ .video-grid { grid-template-columns: 1fr ; } } .video-time { font-size: 12px; font-weight: 500; padding: 4px; border-radius: 2px; background-color: black;5 color: white; position: absolute; bottom: 8px; right: 5px; } &lt;main&gt; &lt;section class="video-grid"&gt; &lt;div class="video-preview"&gt; &lt;div class="thumbnail-row"&gt; &lt;img class="thumbnail" src="images/selmon-bhai.jpeg"&gt; &lt;div class="video-time"&gt;14:20&lt;/div&gt; &lt;/div&gt; &lt;div class="video-info-grid"&gt; &lt;div class="channel-picture"&gt; &lt;img class="profile-picture" src="images/hrithik.png"&gt; &lt;/div&gt; &lt;div class…
type: Question
has answer: http://stackoverflow.com/a/79030708
has title: How to make grid or flex item stays the same length, without content overflowing it's container or overlapping?
answer count: 1
tagged with: http://stackoverflow.com/tag/html
score: 0
tagged with: css
tagged with: flexbox

http://stackoverflow.com/q/79068036
tagged with: reactjs
score: -1
linked to: http://stackoverflow.com/q/28889450
has comment: http://stackoverflow.com/comment/139418607
has body: I am trying to learn React by following the below video. For some reason nothing printing inside div tag. can you let me know how to fix it. Providing the code and sandbox below. I debugged by putting console but still no luck https://www.youtube.com/watch?v=pFXYym4Wbkc&list=PL3lfepputJuGAaI3S7FvcBIutzHNtZ_pb&index=1 https://codesandbox.io/p/sandbox/l4q4pz?file=%2Fsrc%2FsortingVisualizer%2FsortingVisualizer.jsx%3A1%2C1-37%2C1 import React from "react"; const number_of_array_bars = 310; const sortingVisualizer = () => { const [array, setArray] = useState([]); useEffect(() => {}, []); const resetArray = () => { const newArray = []; for (let i = 0; i < number_of_array_bars; i++) { newArray.push(randomIntFromInterval(5, 730)); } console.log("newArray", newArray); setArray(newArray); }; const render = () => { return ( <> {console.log("array", array)} {array.map((value, index) => { test ; })} </> ); }; return render(); }; export default sortingVisualizer; function randomIntFromInterval(min, max) { return Math.floor(Math.random() * (max - min + 1) + min); }
tagged with: css
downvote count: 3
has comment: http://stackoverflow.com/comment/139417377
has answer: http://stackoverflow.com/a/79068630
duplicate of: http://stackoverflow.com/q/28889450
type: UnansweredQuestion
favorite count: 0
type: Question
upvote count: 2
has comment: http://stackoverflow.com/comment/139418608
answer count: 1
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139418795
tagged with: javascript
has comment: http://stackoverflow.com/comment/139417370
has title: merge sort using react for random number data

loops
tag name: loops
tags question: http://stackoverflow.com/q/78998768
type: Tag
tags question: http://stackoverflow.com/q/78961161
tags question: http://stackoverflow.com/q/79152221

http://stackoverflow.com/comment/139387450
comment on: http://stackoverflow.com/q/79047983
type: QuestionComment
has text: Your project seems to reproduce that output on my device, but I fail to understand what is considered the problem. "goal is to make sensitive only the part where there are the arrows to sort the column.", You need to expand on that statement. If the weights change in a particular column, how can the other results that depend on the values of that column not be expected to change and the entire table get resorted?
type: Comment
score: 0

http://stackoverflow.com/q/78951532
tagged with: alignment
tagged with: css
answer count: 4
has body: I need some help as I am a complete newbie when it comes to HTML and CSS. I am trying to create something like this: I can generate the entire container itself but the placement of the Blog Title, Blog Post Date, Blog Summary and Read More button are all formatting out bad. So far the only thing I can place correctly is the img container. The Image below is the result I get: body { margin: 0; font-family: "Bai Jamjuree", sans-serif; /* Adjust with the exact font if found */ } /* Style for Blog Container */ .blog-container { width: 1240px; overflow: auto; margin-left: auto; position: relative; left: -3px; margin-right: auto; max-width: 94%; /* Responsive for smaller screens */ padding: 5px 20px; background-color: white; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); margin-bottom: 100px; box-sizing: border-box; } .blog-post { display: flex; align-items: center; margin-bottom: 20px; margin-top: 20px; padding-bottom: 20px; border-bottom: 1px solid #ddd; } .blog-thumbnail { flex: 1; } .blog-thumbnail img { width: 150px; height: 150px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); margin-right: 20px; object-fit: cover; } .blog-post { background-color: white; border: 1px solid #ddd; border-radius: 8px; padding: 20px; max-width: 1200px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; text-align: left; } .blog-post h2 { font-size: 1.2em; margin-bottom: 20px; color: #333; } .blog-post p { font-size: 1em; color: #666; margin-bottom: 100px; } .blog-post a { color: #1e7cd6; text-decoration: none; font-weight: bold; } .blog-post a:hover { color: #104e8b; } /* Responsive Styles */ @media (max-width: 768px) { .blog-search-sort { flex-direction: column; gap: 10px; } .blog-post { width: 95%; } } .bai-jamjuree-extralight { font-family: "Bai Jamjuree", sans-serif; font-weight: 200; font-style: normal; } .bai-jamjuree-light { font-family: "Bai Jamjuree", sans-serif; font-weight: 300; font-style: normal; } .bai-jamjuree-regular…
type: UnansweredQuestion
has answer: http://stackoverflow.com/a/78951852
has answer: http://stackoverflow.com/a/78951589
has answer: http://stackoverflow.com/a/78952182
has comment: http://stackoverflow.com/comment/139203524
tagged with: http://stackoverflow.com/tag/html
type: Question
has comment: http://stackoverflow.com/comment/139203281
score: 0
has answer: http://stackoverflow.com/a/78951599
has title: Alignment issues of elements

http://stackoverflow.com/q/78953739
has title: Select class where parent is last child in
upvote count: 1
score: 1
favorite count: 0
type: Question
has answer: http://stackoverflow.com/a/78953766
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139207296
type: AnsweredQuestion
duplicate of: http://stackoverflow.com/q/13694775
answer count: 2
has answer: http://stackoverflow.com/a/78953858
tagged with: sass
possible better answer: http://stackoverflow.com/a/78953766
accepted answer: http://stackoverflow.com/a/78953858
tagged with: css
linked to: http://stackoverflow.com/q/13694775
has body: I have a simple html hierarchy: whatever whatever thing i want to select I am currently adding attributes to .custom-class but would like to add a specific attribute to only the last-child's .custom-class. However I would like to apply the style inside the .custom-class that is being used for all children. Its parent does not have a custom class, nor does the grandparent. A pseudo example would be: .custom-class { color: red; &.where-parent-is-last-child { color: green; } } Meaning, I would like to know the scss selector that can access thing I want to select without affecting the other siblings INSIDE the singular .custom-class class.
tagged with: css-selectors
downvote count: 0

http://stackoverflow.com/comment/139240498
score: 0
has text: @mrconcerned this is all the code there is, the back button is just a button, the footer is just my name and the {children} element is a two screen tall wall of text. it is a nextjs layout component
type: QuestionComment
comment on: http://stackoverflow.com/q/78970641
type: Comment

http://stackoverflow.com/q/78982161
has answer: http://stackoverflow.com/a/78986761
has comment: http://stackoverflow.com/comment/139260207
possible better answer: http://stackoverflow.com/a/78983496
score: 1
favorite count: 0
type: Question
has comment: http://stackoverflow.com/comment/139260371
type: AnsweredQuestion
tagged with: http://stackoverflow.com/tag/html
has title: Growing centered div inside div maintaining aspect ratio
has comment: http://stackoverflow.com/comment/139260535
accepted answer: http://stackoverflow.com/a/78986761
has comment: http://stackoverflow.com/comment/139260438
has comment: http://stackoverflow.com/comment/139262763
has answer: http://stackoverflow.com/a/78983496
answer count: 2
has body: I couldn't find a solution for growing a div inside div maintaining aspect-ratio except for images, but I want to do it with a div. I basically want object-fit: contain behavior for a div inside a div, with some padding. But it only works for wide, but not for narrow divs. --- .container { display: flex; background: yellow; width: 320px; /* arbitrary values for testing */ height: 190px; /* arbitrary values for testing */ justify-content: center; align-items: center; padding: 16px; } .element { background: red; aspect-ratio: 1 / 3; width: 100%; max-height: 100%; } This code works with aspect-ratio: 3 / 1; but not with aspect-ratio: 1 / 3;. .container { display: flex; background: yellow; width: 320px; height: 190px; justify-content: center; align-items: center; padding: 16px; } .element { background: red; aspect-ratio: 1 / 3; width: 100%; max-height: 100%; } My expected behavior is depending on the aspect-ratio (which I want to change via JavaScript later on, that the result looks like in the image below: Left Aspect Ratio: 3/1; Right Aspect Ratio: 1/3
has comment: http://stackoverflow.com/comment/139260390
tagged with: css
has comment: http://stackoverflow.com/comment/139260262
has comment: http://stackoverflow.com/comment/139260182
has comment: http://stackoverflow.com/comment/139260213
upvote count: 2
has comment: http://stackoverflow.com/comment/139260420
downvote count: 1

http://stackoverflow.com/comment/140283135
comment on: http://stackoverflow.com/q/78920122
type: Comment
score: 0
has text: This question is similar to: [VSCode Tailwind CSS Intellisense autocompletion and suggestions not working after installing Tailwind v4](https://stackoverflow.com/questions/79394239/vscode-tailwind-css-intellisense-autocompletion-and-suggestions-not-working-afte). If you believe it’s different, please [edit] the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem.
type: QuestionComment

http://stackoverflow.com/q/78910515
score: 0
tagged with: sass
answer count: 0
tagged with: css
has comment: http://stackoverflow.com/comment/139128536
tagged with: bootstrap-5
type: UnansweredQuestion
tagged with: node.js
has title: -webkit and -moz missing after compiling bootstrap5
tagged with: http://stackoverflow.com/tag/html
type: Question
has body: I am trying to customize bootstrap5. as a start I created scss file @import "../node_modules/bootstrap/scss/bootstrap"; when compiled using live sass compiler and compared with original bootstrap, -webkit and -moz are missing. what am I missing? Since no variables or configurations are altered, I am expecting exact bootstrap5 replica css
has comment: http://stackoverflow.com/comment/139128561

http://stackoverflow.com/a/78913998
has body: Add flex-direction: column; to your body and remove grid-template-columns from .main__container. * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Kumbh Sans', sans-serif; } /* spline interactive */ /* .background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: scale(1.3); background-color: #fff; z-index: -1; } */ .navbar { background: #1f456e; height: 80px; display: flex; justify-content: center; align-items: center; font-size: 1.2rem; position: sticky; top: 0; z-index: 999; } .navbar__container { display: flex; justify-content: space-between; height: 80px; z-index: 1; width: 100%; max-width: 1300px; margin: 0 auto; padding: 0 50px; } /*Moving img/logo to the top left*/ .logo_navbar{ position: flex; height: flex; left: 0px; width: 100px; } #navbar__logo { background-color: #f99185; background-image: linear-gradient(to top, #fde7b1 0%, #ff6700 100%); background-size: 100%; -webkit-background-clip: text; -moz-background-clip: text; -webkit-text-fill-color: transparent; -moz-text-fill-color: transparent; display: flex; align-items: center; cursor: pointer; text-decoration: none; font-size: 2rem; } .fa-g { margin-right: 0.5rem; } .navbar__menu { display: flex; align-items: center; list-style: none; text-align: center; } .navbar__item { height: 80px; } .navbar__links { color: #fff; display: flex; align-items: center; justify-content: center; text-decoration: none; padding: 0 1rem; height: 100%; } .navbar__btn { display: flex; justify-content: center; align-items: center; padding: 0 1rem; width: 100%; } .button { display: flex; justify-content: center; align-items: center; text-decoration: none; padding: 10px 20px; height: 100%; width: 100%; border: none; outline: none; border-radius: 4px; background: #f9b279; color: #fff; } .button:hover { background: #f77062; transition: all 0.3s ease; } .navbar__links:hover { color: #f77062; transition: all 0.3s ease; } @media screen and (max-width: 960px) { .navbar__container { display: fle…
answers question: http://stackoverflow.com/q/78913588
has comment: http://stackoverflow.com/comment/139149086
has comment: http://stackoverflow.com/comment/139145491
type: Answer
score: 0
has comment: http://stackoverflow.com/comment/139149067

http://stackoverflow.com/q/78960176
has body: After the page has been loaded or the user has updated it, the hyperlink or any other tags that are able to link, the site will not scroll smoothly to the desired place(lower than need). So how do I fix this so that even after rendering the page everything works fine? "use client"; import React from "react"; import { Link } from "react-scroll"; interface ButtonNavigationProps { navigateTo: string; children: React.ReactNode; } const ButtonNavigation: React.FC<ButtonNavigationProps> = ({ navigateTo, children, }) => { return ( {children} <path d="m560-240-56-58 142-142H160v-80h486L504-662l56-58 240 240-240 240Z" /> ); }; export default ButtonNavigation; Currently, there are two cases after which such a scrolling bug does not occur: Only after the user scrolls through the site independently or uses the link navigation for the second time (the first time the navigation did not scroll to the right place on the page), then all the navigation works fine. If the link doesn't have smooth behavior then everything will work fine from the first page rendering, but since I care about smooth behavior, I can't find any other options to replace it. I understand that this is not normal behavior and is most likely a smooth scrolling bug. I also checked whether the page was fully loaded so that I could scroll - it didn't help.
type: UnansweredQuestion
tagged with: react-scroll
type: Question
answer count: 1
has title: How to fix a smooth scrolling behavior bug after the initial rendering of the page?
tagged with: typescript
score: 0
has answer: http://stackoverflow.com/a/78960313
tagged with: reactjs
tagged with: next.js
tagged with: css

http://stackoverflow.com/q/78993438
answer count: 1
tagged with: http://stackoverflow.com/tag/html
accepted answer: http://stackoverflow.com/a/78993650
has comment: http://stackoverflow.com/comment/139280784
type: AnsweredQuestion
score: 0
tagged with: css
has comment: http://stackoverflow.com/comment/139280900
has body: Hi, I'm still wondering how to make a background like the one on the picture, I used the right colour background: linear-gradient(90deg, #7C84F3 0%, #1522E0 93.74%); but I don't know how to place the circles in the small container... I've tried everything, and it seems to work, but on the mobile version they are moving apart .hire__cta { background-color: #181818; padding: 130px 20px 130px 20px; } .hire-developer-needs__cta { background: linear-gradient(90deg, #7C84F3 0%, #1522E0 93.74%); padding: 50px 60px; max-width: 1400px; border-radius: 20px; color: #fff; display: flex; justify-content: space-between; align-items: center; position: relative; overflow: hidden; } Hire experienced React Developers now for Your Needs! Hire React developers to get the right specialists that will cater to the needs of your project fast. Apply to us, and we’ll get back to you to define all the requirements to candidates.
has title: How to make custom background like this?
has answer: http://stackoverflow.com/a/78993650
type: Question

http://stackoverflow.com/q/79022878
tagged with: http://stackoverflow.com/tag/html
has title: Do images respect flex box rules?
has comment: http://stackoverflow.com/comment/139334734
answer count: 0
linked to: http://stackoverflow.com/q/36247140
type: UnansweredQuestion
duplicate of: http://stackoverflow.com/q/36247140
type: Question
has comment: http://stackoverflow.com/comment/139334568
has body: In this example I would expect the image to be 80 pixels tall. I've tested in Firefox, Chrome and Safari and the image is much larger. Why is this? .imagepluslabel { display: flex; flex-direction: column; height: 100px; } img { flex: 1; object-fit: contain; } .label { flex-basis: 20px; text-align: center; } label
tagged with: css
score: 0

http://stackoverflow.com/q/79035771
answer count: 0
tagged with: css
has comment: http://stackoverflow.com/comment/139358280
has title: How to make the Link component wrap the entire summary element in Tailwindcss
type: UnansweredQuestion
type: Question
tagged with: tailwind-css
score: 0
has body: I am following this section from the DaisyUI documentation, and I am building a sidebar, I have a problem that I want the collapsible item itself to be a link. It of course works however, the link element does not cover the entire button. I want the link to cover the entire button. look at the picture bellow: Here is that section from my code (the administrators in the red color element): import Link from 'next/link' {IconComponent && <IconComponent />} {t(labelKey)} <SidebarList items={subMenuItems} /> {/* Add a new administrator, the list bellow it */}
tagged with: reactjs
tagged with: daisyui
tagged with: next.js

http://stackoverflow.com/q/79067314
type: UnansweredQuestion
has answer: http://stackoverflow.com/a/79067325
has title: Javascript/CSS - First tab doesn't switch to the "inactive color" after it is selected and then another tab selected
type: Question
answer count: 1
tagged with: tabs
has comment: http://stackoverflow.com/comment/139423162
has body: I am new to Javascript, and am trying to incorporate it into some of my projects to practice. Here is a screenshot of what I am working on. Its a simple tabbed section made with HTML, CSS, and a teensy bit of Javascript. Screenshot of project The active tab is supposed to be white, and the inactive tabs are grey-blue in color. When you first open it, the first tab is white and active. The other two are the grey-blue. If I click on another tab, the first tab changes to grey-blue and the new active tab changes to white. Which is great, but–– When I click again on the first tab and then select another, the first tab remains white, even though it is no longer active. I'm unsure how to resolve it, but it is driving me mental! Thanks in advance for any help. function openCity(evt, cityName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(cityName).style.display = "block"; evt.currentTarget.className += " active"; } .tab { overflow: hidden; display:flex; flex-basis: 0; } .tab button { background-color: #E5ECF3; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; flex-basis:100% } .active-tab{ background-color: #fff !important; } .tab button:hover { background-color: #fff; } .tab button.active { background-color: #fff; } .logo-button{ display: inline-flex; align-items: center; justify-content: center; } .lbtn1, .lbtn2, .lbtn3{ width: 100px; } /* Tab Content Style */ .tabcontent { display: none; padding: 6px 12px; background: #fff; } .tabcontent-active{ display: block; } .tab-child-elements{ display: inline-flex; width: 100%; height: 300px; flex-flow: column wrap; align-items: center; justify-content: center; p{ text-al…
score: 0
tagged with: javascript
has comment: http://stackoverflow.com/comment/139415979
tagged with: css

http://stackoverflow.com/comment/139338675
score: 0
comment on: http://stackoverflow.com/q/79023183
has text: *select2* works fine for my use-case. I have managed to add data-attributes to my items. What I miss now is to be able to use my huge dataset to populate a single "dropdown" for two or more form items. I do not want it duplicated in many all holding the same data. For example: suppose my dataset is all the names of people in office. And I have 5 populated with the same list of people (so the list is 5-plicated!) just to fill a form of which 5 are part of the first aid team. Ideally the dropdown must be "mobile". This is what I have done above. Any pointers for select2?
type: QuestionComment
type: Comment

css-filters
type: Tag
tag name: css-filters
tags question: http://stackoverflow.com/q/78920988
tags question: http://stackoverflow.com/q/79297718
tags question: http://stackoverflow.com/q/79474142

http://stackoverflow.com/comment/139148888
type: QuestionComment
has text: Can you write your code in [StackOverflow Snippet syntax](https://stackoverflow.com/help/minimal-reproducible-example) With the [<>] button in the editor. It will help readers execute your code with one click. And help create answers with one click. Thank you.
comment on: http://stackoverflow.com/q/78920988
type: Comment
score: 0

word-wrap
tags question: http://stackoverflow.com/q/79029436
tags question: http://stackoverflow.com/q/78970177
tag name: word-wrap
type: Tag
tags question: http://stackoverflow.com/q/79071488

http://stackoverflow.com/a/78920877
answers question: http://stackoverflow.com/q/78920407
type: Answer
score: 0
has body: Can you try this? I don't know why you used column-gap as % but I think it would be natural not to change depending on the width of the device. * { box-sizing: border-box; } .top { margin-bottom: 16px; } .top .card { width: 100%; display: flex; flex-wrap: wrap; border-radius: 15px; overflow: hidden; background: #000; } .top .card img { width: 50%; } .top .card .container { display: flex; flex-direction: column; width: 50%; color: #fff; padding: 16px; } .top .card .container h4 { font-size: 3rem; margin: 0; margin-bottom: 1rem; } .top .card .container p { font-size: 2rem; margin: 0; } .top .card .container .link-a { margin-top: auto; text-transform: uppercase; } .top .card .container .link-a a { text-decoration: none; color: blue; font-weight: 700; font-size: 2rem; } .alignment { display: flex; align-items: start; justify-content: space-between; column-gap: 20px; padding-bottom: 40px; } .alignment .container { padding: 2px 16px; width: 100%; } .alignment .card { /* Add shadows to create the "card" effect */ box-shadow: 0 5px 13px 0 #000; border-radius: 15px; background-color: #121212; border-color: #121212; flex-grow: 1; width: 30%; } /* On mouse-over, add a deeper shadow */ .alignment .card:hover { box-shadow: 0 8px 16px 0 000; } .alignment .card img { display: block; border-radius: 15px 15px 0px 0px; width: 100%; height: 240px; object-fit: cover; } .alignment .card .container h4 { font-size: 2rem; color: white; margin: 0; margin-bottom: 1rem; } .alignment .card .container p { margin-top: -8px; color: white; } .alignment .card .container .link-a { margin-top: auto; text-transform: uppercase; } .alignment .card .container .link-a a { text-decoration: none; color: blue; font-weight: 700; font-size: 1rem; } /* max-width 1200px */ @media screen and (max-width: 1200px) { .top .card { width: 100%; display: flex; flex-direction: column; border-radius: 15px; overflow: hidden; background: #000; } .top .card img { width: 100%; } .top .card .container { width: 100%; } .alignme…
has comment: http://stackoverflow.com/comment/139147668
has comment: http://stackoverflow.com/comment/139147663
has comment: http://stackoverflow.com/comment/139147676
has comment: http://stackoverflow.com/comment/139147454
has comment: http://stackoverflow.com/comment/139147692
has comment: http://stackoverflow.com/comment/139147436
has comment: http://stackoverflow.com/comment/139147703
has comment: http://stackoverflow.com/comment/139157655
has comment: http://stackoverflow.com/comment/139147432

http://stackoverflow.com/q/78944147
has comment: http://stackoverflow.com/comment/139189887
score: 0
has body: I'm working on a webpage using Bootstrap 4 and jQuery, and I want to create a header that shrinks in size and adds a shadow effect when the user scrolls down the page. I've written some code that mostly works, but I'm not getting the smooth transition I want, and the shadow effect isn't consistent. Problem: . The header and logo should shrink when scrolling down. . A shadow should appear under the header during the scroll. . The transition should be smooth, but mine feels choppy. Here's the HTML, CSS, and JavaScript code I've been working with: Mahyar ART GALERIE Home About Services Contact css: #logo { font-size: 2.5rem; transition: font-size 0.3s ease-in-out, padding 0.3s ease-in-out; padding: 10px 0; } .shrink #logo { font-size: 1.5rem; padding: 5px 0; } .navbar { transition: padding 0.3s ease-in-out, box-shadow 0.3s ease-in-out; padding: 20px 0; } .shrink .navbar { padding: 10px 0; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } JS : #logo { font-size: 2.5rem; transition: font-size 0.3s ease-in-out, padding 0.3s ease-in-out; padding: 10px 0; } .shrink #logo { font-size: 1.5rem; padding: 5px 0; } .navbar { transition: padding 0.3s ease-in-out, box-shadow 0.3s ease-in-out; padding: 20px 0; } .shrink .navbar { padding: 10px 0; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } My Issue: The transition isn't as smooth as I'd like, especially when viewed on slower devices. The shadow effect under the header sometimes doesn't appear correctly or flickers. What I've Tried: I've adjusted the transition timing but still experience choppiness. I've tested on different browsers, but the shadow issue persists. Question: How can I make the transition smoother and ensure the shadow effect appears consistently across different devices and browsers?
has answer: http://stackoverflow.com/a/78944228
tagged with: http://stackoverflow.com/tag/html
tagged with: bootstrap-4
tagged with: scroll
has title: How can I create a shrinking header with a shadow effect on scroll using Bootstrap and jQuery?
tagged with: jquery
accepted answer: http://stackoverflow.com/a/78944228
type: Question
tagged with: css
answer count: 1
type: AnsweredQuestion

http://stackoverflow.com/comment/139243978
type: Comment
score: 0
has text: I have one component that renders components without fixed height or width due map method on client and another one is renders on the server, but It renders not fixed height components, but in server. Without this components all works fine. The content that I’m showing you is server component. Also if I turn off smooth behavior, the navigation scrolling in right position
type: QuestionComment
comment on: http://stackoverflow.com/q/78971122

http://stackoverflow.com/comment/139348747
score: 2
type: Comment
type: QuestionComment
has text: The requirement seems so weird that I'm just making sure I fully understand. You want the user to be able to click on certain parts of the card that contain links to go to different places, but if they click anywhere else on the card they go to one place. Is that correct?
comment on: http://stackoverflow.com/q/79028709

http://stackoverflow.com/comment/139147632
type: AnswerComment
comment on: http://stackoverflow.com/a/78921012
has text: Oh I see! Thank you so much! :)
type: Comment
score: 0

http://stackoverflow.com/comment/139348795
type: AnswerComment
comment on: http://stackoverflow.com/a/79030730
type: Comment
score: 2
has text: I explained that I have to use inline styles, i think it is ... but this is not negotiable

http://stackoverflow.com/q/78943230
downvote count: 3
upvote count: 1
answer count: 2
has body: Need to create a shape attached. Remove the icon border of an specific position and move that in the top left of the rectangle using css and html with bootstrap5. image is not positioning correctly inside the rectangle. .node { position: relative; display: flex; align-items: center; background-color: #4CAF50; /* Green background color */ color: white; font-weight: bold; border-radius: 15px; width: 200px; /* Adjust as needed */ height: 80px; /* Adjust as needed */ padding-left: 50px; /* Space for the image */ } .node-image { position: absolute; left: -25px; /* Half of the circle's diameter */ width: 50px; height: 50px; background-color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden; } .node-image i { width: 40px; height: 40px; } .node-text { margin-left: 10px; } Name
tagged with: css
has answer: http://stackoverflow.com/a/78943363
tagged with: image
has answer: http://stackoverflow.com/a/78944807
has comment: http://stackoverflow.com/comment/139195971
tagged with: bootstrap-5
has title: Draw shape using html/css
type: UnansweredQuestion
score: -2
favorite count: 0
type: Question
tagged with: http://stackoverflow.com/tag/html

http://stackoverflow.com/a/78977982
has body: Consider using a grid with the contents super-centered and not needing the absolute positioning. The grid then adjusts to the content size. .container { border: 1px solid green; display: grid; place-items: center; } .spinner { display: flex; border: 1px solid red; } .spinner::before { content: "Why this text is not inside green"; font-size: 24px; } &lt;div class="container"&gt; &lt;div class="spinner"&gt; &lt;/div&gt; &lt;/div&gt; &lt;div&gt; Why this text is not below another text? &lt;/div&gt;
type: Answer
score: 2
answers question: http://stackoverflow.com/q/78977782
upvote count: 2
downvote count: 0

http://stackoverflow.com/a/79029558
score: 3
downvote count: 0
has comment: http://stackoverflow.com/comment/139352354
answers question: http://stackoverflow.com/q/78967040
accepted answer of: http://stackoverflow.com/q/78967040
has comment: http://stackoverflow.com/comment/139361726
has comment: http://stackoverflow.com/comment/139675792
has comment: http://stackoverflow.com/comment/139352346
type: AcceptedAnswer
has comment: http://stackoverflow.com/comment/139674431
has comment: http://stackoverflow.com/comment/139354294
type: Answer
upvote count: 3
has body: Change the .child's position to sticky and add bottom and left to stick it to the place you want: .main { display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto minmax(0, 100%); grid-template-areas: "header" "menu" "content"; height: 75vh; } .header { grid-area: header; } .menu { grid-area: menu; } .content { grid-area: content; overflow-y: auto; background-color: #f5f5f5; position: relative; } .child { position: sticky; bottom: 0; left: 60%; width: 40%; background-color: aqua; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; grid-template-areas: "head" "body" "footer"; height: 100%; } .child .head { grid-area: head; background-color: red; } .child .body { grid-area: body; overflow-y: scroll; } .child .footer { grid-area: footer; background-color: red; } .data { position: relative; margin-bottom: 15px; display: flex; flex-wrap: wrap; gap: 15px; } .btn { display: block; margin-block: 15px; } HTML + CSS This is header This is menu showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel …

http://stackoverflow.com/comment/139287791
type: QuestionComment
has text: Please don't fill your question with nonsense to overcome the build in rules of posting on [SO]. Check [ask].
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78997251

css-selectors
tags question: http://stackoverflow.com/q/79058968
tags question: http://stackoverflow.com/q/79000282
tags question: http://stackoverflow.com/q/79035246
tags question: http://stackoverflow.com/q/78948175
tags question: http://stackoverflow.com/q/79028709
tags question: http://stackoverflow.com/q/78920993
tags question: http://stackoverflow.com/q/79039846
tags question: http://stackoverflow.com/q/78953739
tags question: http://stackoverflow.com/q/78983131
tags question: http://stackoverflow.com/q/78926526
tags question: http://stackoverflow.com/q/79022190
tags question: http://stackoverflow.com/q/79025035
tags question: http://stackoverflow.com/q/78908209
type: Tag
tag name: css-selectors
tags question: http://stackoverflow.com/q/78976062
tags question: http://stackoverflow.com/q/79081748
tags question: http://stackoverflow.com/q/79139897
tags question: http://stackoverflow.com/q/79083259
tags question: http://stackoverflow.com/q/79123663
tags question: http://stackoverflow.com/q/79236459
tags question: http://stackoverflow.com/q/79212133
tags question: http://stackoverflow.com/q/79148383
tags question: http://stackoverflow.com/q/79234408
tags question: http://stackoverflow.com/q/79114470
tags question: http://stackoverflow.com/q/79118152
tags question: http://stackoverflow.com/q/79237185
tags question: http://stackoverflow.com/q/79373484
tags question: http://stackoverflow.com/q/79330207
tags question: http://stackoverflow.com/q/79302439
tags question: http://stackoverflow.com/q/79278544
tags question: http://stackoverflow.com/q/79366452
tags question: http://stackoverflow.com/q/79380973
tags question: http://stackoverflow.com/q/79415567
tags question: http://stackoverflow.com/q/79307490
tags question: http://stackoverflow.com/q/79326440
tags question: http://stackoverflow.com/q/79378025
tags question: http://stackoverflow.com/q/79246383
tags question: http://stackoverflow.com/q/79277215
tags question: http://stackoverflow.com/q/79314887
tags question: http://stackoverflow.com/q/79333791
tags question: http://stackoverflow.com/q/79263394
tags question: http://stackoverflow.com/q/79284139
tags question: http://stackoverflow.com/q/79295323
tags question: http://stackoverflow.com/q/79474271
tags question: http://stackoverflow.com/q/79505037
tags question: http://stackoverflow.com/q/79528344
tags question: http://stackoverflow.com/q/79437841
tags question: http://stackoverflow.com/q/79487289

http://stackoverflow.com/comment/139235178
comment on: http://stackoverflow.com/q/78967491
type: QuestionComment
has text: So, the first (larger) image is what you'd want to achieve, and the second is what you've done?
type: Comment
score: 0

http://stackoverflow.com/comment/139170537
comment on: http://stackoverflow.com/q/78933453
has text: It's pagelayer jQuery code in combined.js
score: 0
type: QuestionComment
type: Comment

http://stackoverflow.com/comment/139186077
type: Comment
comment on: http://stackoverflow.com/a/78941701
score: 0
has text: This did do the trick however, I have multiple .main-section elements to make up the content of the page, and I need them all side by side on the right but lined up vertically.
type: AnswerComment

http://stackoverflow.com/comment/139229604
comment on: http://stackoverflow.com/q/78964909
type: QuestionComment
has text: I didn't get any results
type: Comment
score: 0

http://stackoverflow.com/comment/139176708
has text: Did you try it in the fiddle? It doesn't work for me. I was wondering if you could send the updated fiddle. Just to let you know, I can't change anything in the bottom images, they are perfectly set. The only place I want to make changes is in the text and image above.
comment on: http://stackoverflow.com/a/78936756
type: Comment
score: 0
type: AnswerComment

http://stackoverflow.com/comment/139181725
comment on: http://stackoverflow.com/q/78939256
type: QuestionComment
type: Comment
has text: @VincentDecaux The logo 9. is in the right place but the hamburger menu is not showing
score: 0

http://stackoverflow.com/comment/139405362
type: AnswerComment
comment on: http://stackoverflow.com/a/79060088
has text: Its just a good programming practice that you should not name variables using capital letters. It's not that you can't, but that you should not.
type: Comment
score: 0

http://stackoverflow.com/q/79048038
tagged with: mix-blend-mode
has body: I have a UI that has some elements with position: sticky; on them. They have box shadows so that they look like they're floating over the text beneath them. I want to apply a blend mode to the box shadows, and that's causing me some problems. What I want is to make it so that shadows never really get darker when they overlap. Currently, in mildly pathological cases, the sticky elements can pile up on top of each other, and the overlapping shadows become unattractively dark; I'd like to fix this. (I am also trying to mitigate those pathological cases, but I still want to fix the shadows.) I can get the shadows to look the way I want using mix-blend-mode: darken;, but it's not playing well with position: sticky;. Here is a JSBin of a few things I've tried. Each of the six examples contains identical markup; only the CSS is different. Sorry about the painfully teal background — it makes the problem easier to identify. "badshadow" has the shadows as they are in my UI now. If you scroll the container down, you'll see elements pile up and the shadow becomes disagreeably dark. It's not the end of the world and I'll live if it's never fixed, but it could be better, I think. "goodshadow" has the shadows as I'd like them to appear. Using mix-blend-mode: darken on a ::before, plus an opaque shadow color, seems to be doing a pretty good job of making the shadows "max out" at the desired darkness (they're excessively strong for demo purposes, of course, but you get the idea). But I had to set position: absolute; to make this look right. "sticky" is exactly like "goodshadow" except my elements are position: sticky;, which is what I want. But this cancels my blend mode, so my shadows are now opaque and fully conceal the content that's shadowed, which is no good. The next container is another "goodshadow" which is only there to demonstrate that Safari is wacky. Try it in Safari for a headscratcher. The behavior in the second "goodshadow" changes when you resize the sticky container…
score: 0
tagged with: stacking-context
answer count: 0
tagged with: css
linked to: http://stackoverflow.com/q/52838406
type: UnansweredQuestion
tagged with: sticky
type: Question
has title: How to get mix-blend-mode to apply to only the box shadow of a sticky element?

http://stackoverflow.com/comment/139256164
has text: This solves my problem - thank you so much! I have one follow-up question. I want to implement a way for the user to skip the animation in case they don't want to wait for the text to be typed out. I added a function to my original post that allows the user to click on a button to skip the animation - is there any way to replicate this in your solution? I haven't been able to get one working. (*be sure to see my OG post edit*)
type: Comment
comment on: http://stackoverflow.com/a/78976989
score: 0
type: AnswerComment

http://stackoverflow.com/q/79063761
tagged with: asp.net-core-mvc
has title: Display an image to specific Razor Page
type: Question
accepted answer: http://stackoverflow.com/a/79064166
tagged with: http://stackoverflow.com/tag/html
has answer: http://stackoverflow.com/a/79064166
answer count: 1
type: AnsweredQuestion
tagged with: c#
score: 0
tagged with: .net-8.0
tagged with: css
has body: I'm trying to display an image to a login page and only on the login page. I have tried to put the image by adding it this way. See below: Login.cshtml // Other code goes here However it shows like this Not the expected behavior. I added the class to the body of the _Layout.cshtml (see below) and it will fill the whole background of the website but it should not reference the image after login user. The code for CSS is as follows: site.css .background-logo{ background-image: url(../img/image.jpg); background-repeat: no-repeat; background-position: center; background-attachment: fixed; background-size: cover; } _Layout.cshtml (for reference) @RenderBody() My question is how to set an image to just the login page but to cover the whole background?

http://stackoverflow.com/comment/139311364
type: AnswerComment
has text: Sure. Will try this
comment on: http://stackoverflow.com/a/79010120
type: Comment
score: 0

http://stackoverflow.com/a/78955355
type: Answer
score: 0
answers question: http://stackoverflow.com/q/78951136
has body: Okay, apparently I found my mistake, and it wasn't directly an issue with Tailwind, caching, or memory, but with state management. To show certain styles conditionally, I was using calculations inside the Template String, and I changed it to state, which is calculated in a useEffect. Now the behavior is as expected. Thanks!
has comment: http://stackoverflow.com/comment/139234866

http://stackoverflow.com/comment/139224579
comment on: http://stackoverflow.com/q/78962822
type: QuestionComment
score: 0
has text: I added a snippet. Just see the links "Dropdown 1" and "Dropdown 2". "Dropdown 2" is just working fine.
type: Comment

http://stackoverflow.com/comment/139354900
has text: to start with, the syntax is not correct. It should be `color: rgb(from #aabbcc calc(r + 30) g calc(b - 30) / 80%)`
comment on: http://stackoverflow.com/q/79034015
type: QuestionComment
score: 3
type: Comment

http://stackoverflow.com/a/78941548
score: 0
answers question: http://stackoverflow.com/q/78941501
type: Answer
has comment: http://stackoverflow.com/comment/139216418
has comment: http://stackoverflow.com/comment/139185262
has body: firstly made your box border size and then gave it box-shadow

gitbook
tags question: http://stackoverflow.com/q/79027960
type: Tag
tag name: gitbook

http://stackoverflow.com/q/79033531
tagged with: javascript
favorite count: 0
downvote count: 2
has answer: http://stackoverflow.com/a/79033554
accepted answer: http://stackoverflow.com/a/79033554
tagged with: css
score: -2
tagged with: modal-dialog
type: Question
has body: I have a HTML table and the following script to add a specific class to the cells, depending on their content. Now, I would like to count only the items with class = active and trigger a modal (autoOpen: true) with the number of those items. Any suggestions? &lt;script&gt; $('td').each(function() { var $this = $(this) if ($this.text().match(new RegExp(/^[0-9][A-Z]/)) !== null ) { $this.addClass('active'); } if ($this.text().match(new RegExp(/^c[0-9]/)) !== null ) { $this.addClass('none'); } }); &lt;/script&gt;
answer count: 1
has comment: http://stackoverflow.com/comment/139356739
tagged with: html-table
has title: Counting cells with a specific class in JavaScript
upvote count: 0
type: AnsweredQuestion

http://stackoverflow.com/a/78963183
score: 0
has comment: http://stackoverflow.com/comment/139292243
answers question: http://stackoverflow.com/q/78948434
has body: Apparently, the mask-size property has no effect on inline SVG references. As a workaround you may convert your mask SVG to a data URL: mask-image: url("data:image/svg+xml, <path d='M 3000 3000 L 5000 0 L 7000 3000 Z'/><path d='M 2000 3000 L 0 0 L 4000 0 Z' /> "); body { background-color: beige; } .logo { width: 50%; max-width: 300px; min-width: 150px; z-index: 10; aspect-ratio: 7/4; margin: 10px 0 25px; position: relative; } .wrapper { width: 100%; display: flex; align-items: center; flex-direction: column; } .gradient { position: absolute; width: 100%; height: 100%; object-fit: cover; mask-image: url("data:image/svg+xml, <path d='M 3000 3000 L 5000 0 L 7000 3000 Z'/><path d='M 2000 3000 L 0 0 L 4000 0 Z' /> "); background: linear-gradient(135deg, black 60%, #ea3c96, black 75%); animation: 3s cubic-bezier(0.25, 0.5, 0.75, 0.5) infinite logoGradientAnimation; background-size: 200%; mask-size: cover; mask-repeat: no-repeat; } .scale { width: 30px; height: 30px; border: 1px solid black; font-size: 15; } @keyframes logoGradientAnimation { 0% { background-position: 100%; } 100% { background-position: -100%; } } 30px
accepted answer of: http://stackoverflow.com/q/78948434
has comment: http://stackoverflow.com/comment/139287977
type: AcceptedAnswer
type: Answer

http://stackoverflow.com/q/78937508
type: Question
answer count: 1
downvote count: 1
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139178075
type: AnsweredQuestion
score: 0
has answer: http://stackoverflow.com/a/78937598
accepted answer: http://stackoverflow.com/a/78937598
has comment: http://stackoverflow.com/comment/139178081
has title: CSS resizing issue
tagged with: css
upvote count: 1
has body: im only practicing html and css my problem is why my border have the same height with the elements when in full size but when i minimize my browser the border height of the second border changes it's height on its own? body { background-color: aliceblue; height: 100vh; } .box { border: 3px solid gray; background-color: azure; text-align: center; width: 50%; padding: 25px; box-sizing: border-box; float: left; box-shadow: 3px 3px 10px; min-height: 160px; } ey Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta sed harum veniam, soluta doloremque quibusdam aspernatur unde dolorem sequi consequatur culpa exercitationem qui magnam voluptates. Corrupti nemo commodi pariatur delectus. ayo Lorem ipsum dolor sit amet consectetur, adipisicing elit. Natus quis voluptas hic vero perferendis dicta eaque corporis, sapiente numquam veniam, animi sit nostrum ex temporibus a quae nulla ullam facilis!
favorite count: 0

http://stackoverflow.com/q/78921015
has title: using sass to choose last randomly generated element even if nested
type: Question
downvote count: 1
has comment: http://stackoverflow.com/comment/139209935
answer count: 1
upvote count: 0
tagged with: sass
linked to: http://stackoverflow.com/q/75213417
score: -1
has comment: http://stackoverflow.com/comment/139147690
has body: trying to get sass to choose the last button that's rendered. i have a page with 3 of these p-elements that might, or might not, have a print button in them. and i need the last button to be yellow using sass. How do i select that if I don't know exactly know the structure ahead of time? Even if there is multiple print buttons, I can only make the last one yellow. html
has answer: http://stackoverflow.com/a/78921933
tagged with: css
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139148979
favorite count: 0

http://stackoverflow.com/comment/139310360
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/79009569
has text: can you open this file with software like Gimp?

http://stackoverflow.com/comment/139224466
has text: Please show us an example - see https://stackoverflow.com/help/minimal-reproducible-example
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78962822
type: QuestionComment

http://stackoverflow.com/comment/139329756
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/79016879
has text: @overflowed-stacker Okay, if you want the border to be around the segment:last-of-type then clip-path will not work for you as the border will also be clipped. This is why I moved the border to the progress-bar element. I showed several examples of how you could use clip-path, a couple of them included filling in the entire segment with blue. Best of luck...

http://stackoverflow.com/q/79025588
has title: Embedded Iframe content is not loading in IOS devices - safari
type: UnansweredQuestion
tagged with: iframe
has comment: http://stackoverflow.com/comment/139341349
tagged with: user-interface
tagged with: http://stackoverflow.com/tag/html
type: Question
has body: I have iframe content loading external source. my code is like this Above code works fine in android and windows devices. But not working in ios devices. Please help me to resolve this issue I have tried clearing the cache still the same issue. By adding timestamp at the end of url then also same issue.
score: 0
tagged with: javascript
tagged with: css
has comment: http://stackoverflow.com/comment/139339669
answer count: 0
has comment: http://stackoverflow.com/comment/139340907

http://stackoverflow.com/comment/139168809
type: Comment
score: 0
has text: Actually, thinking about it now, I’ve never combined a registered custom prop with this fallback pattern. I’m not sure whether, for `var()` fallback purposes, it’ll consider `--grid-row-gap` to be set when it has an initial value.
type: AnswerComment
comment on: http://stackoverflow.com/a/78932578

http://stackoverflow.com/comment/139171321
type: Comment
has text: @TemaniAfif How come?
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78933627

http://stackoverflow.com/q/78970096
score: 0
has answer: http://stackoverflow.com/a/78970225
upvote count: 1
answer count: 2
tagged with: css
tagged with: woocommerce
has answer: http://stackoverflow.com/a/78970370
has body: I'm struggling to get my WooCommerce shop page full size (or at least wider than default). I've tried all sorts of CSS codes from other posts, but they either also change my other pages, or don't do anything at all. I'm using Fascinate child theme, and WooCommerce width settings are not available in the customizer. This is my shop page: https://www.blankamorikawa.art/shop/ Ideally, I'd like it as wide as my portfolio pages - i.e.: https://www.blankamorikawa.art/portfolio/2024-2/. Any advice on how to achieve this?
downvote count: 1
tagged with: width
type: UnansweredQuestion
favorite count: 0
type: Question
has title: How to get WooCommerce shop page to show full width

primeng
tags question: http://stackoverflow.com/q/79046794
tags question: http://stackoverflow.com/q/79064664
tags question: http://stackoverflow.com/q/79057837
type: Tag
tag name: primeng
tags question: http://stackoverflow.com/q/79040155
tags question: http://stackoverflow.com/q/79049142
tags question: http://stackoverflow.com/q/79179545
tags question: http://stackoverflow.com/q/79225740
tags question: http://stackoverflow.com/q/79232127
tags question: http://stackoverflow.com/q/79212021
tags question: http://stackoverflow.com/q/79124464
tags question: http://stackoverflow.com/q/79186852
tags question: http://stackoverflow.com/q/79320586
tags question: http://stackoverflow.com/q/79312772
tags question: http://stackoverflow.com/q/79264274
tags question: http://stackoverflow.com/q/79510166
tags question: http://stackoverflow.com/q/79423752
tags question: http://stackoverflow.com/q/79437909
tags question: http://stackoverflow.com/q/79523158
tags question: http://stackoverflow.com/q/79539989

http://stackoverflow.com/comment/139198062
score: 3
type: QuestionComment
comment on: http://stackoverflow.com/q/78948544
has text: This is happening because of the Gaussian blur effect, here is your answer: https://stackoverflow.com/a/12224347/13970434
type: Comment

http://stackoverflow.com/comment/139130446
type: Comment
score: 0
has text: @dalelandry when opacity is used it means that the text is there but is not being shown while the display none will make the text disappear
comment on: http://stackoverflow.com/q/78911526
type: QuestionComment

http://stackoverflow.com/comment/139286257
has text: With flexbox **you can't** since it is not inherited. At best you could, perhaps, with CSS-Grid and `subgrid` but it would be better to just change your HTML.
type: QuestionComment
comment on: http://stackoverflow.com/q/78996269
score: 2
type: Comment

http://stackoverflow.com/comment/139287955
has text: @KIKOSoftware I included a picture of the issue at the beginning in case I was not able to adequately explain it.
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78997251

http://stackoverflow.com/q/78953731
tagged with: css
answer count: 0
linked to: http://stackoverflow.com/q/55398733
has title: Unable to create CSS menu with submenus and animated underline on top level links
type: UnansweredQuestion
upvote count: 1
score: 1
favorite count: 0
type: Question
has body: I am creating a Pure CSS menu. The requirement is to have an animated underline appear on hover under the top level links (animated from center out). I can find plenty of solutions for the animation online and all work when I am not using sub-menu items; Start CSS underline animation from center instead of left However, I cannot seem to find a workable solution to allow a nested menu with animated underlines on the top level. Is this possible using a list based menu with submenus? html { font-family: "Outfit", sans-serif; font-optical-sizing: auto; font-size: 100%; } body { background-color: #E9E3D3; font-size: 0.75em; margin : 0; padding : 0; } nav#mainmenu { padding: 0px; } nav#mainmenu a { color: #000000; display:block; font-weight: 600; font-size: 18px; padding: 10px 10px; text-decoration: none; } nav#mainmenu ul { list-style: none; margin: 0; padding: 0; } nav#mainmenu > ul > li { cursor: pointer; display: inline-block; margin-left: 10px; margin-right: 10px; } nav#mainmenu > ul > li:first-of-type{ margin-left: 0px; } ul > li:last-of-type{ margin-right: 0px; } /* Sub Menus */ nav#mainmenu li ul { background-color: #ffffff; display: none; margin-left: -10px; padding: 0px; position: absolute; } nav#mainmenu li:hover ul{ display: block; } nav#mainmenu li ul li { display: block; padding: 0px 10px; } nav#mainmenu li ul li a{ font-weight: 400; color:#000000; } nav#mainmenu li ul li:hover { background-color: #00beee; } nav#mainmenu .menuexpandicon { top: 0px; fill: none; stroke-width: 2; stroke: #000000; margin: 0 0 2px 3px } Main Option1 <path d="M10 1.5L5.5 6.5L1 1.5" /> sub option1 sub option2 sub option3 Main Option 2 Main Option 3 <path d="M10 1.5L5.5 6.5L1 1.5" /> sub option1 sub option2 About Contact
tagged with: http://stackoverflow.com/tag/html
downvote count: 0
duplicate of: http://stackoverflow.com/q/55398733

http://stackoverflow.com/comment/139277856
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78986353
has text: The original solution, using CSS background-image, felt hacky. This is a great solution: no js, no magic numbers besides 0, 1, and 100%, and simple and intuitive.

http://stackoverflow.com/comment/139213290
type: Comment
score: 0
has text: Not sure what more I can say? It's a very straightforward question, no?
type: QuestionComment
comment on: http://stackoverflow.com/q/78955926

http://stackoverflow.com/q/78986450
tagged with: css
has comment: http://stackoverflow.com/comment/139267905
has answer: http://stackoverflow.com/a/78986466
has body: I have two image tags displayed in a webpage, which may have different size. And since the images are dynamically generated, the size of both images may be different at each loading. I want to adjust the second image to have the same size as the first image. Here is what I have tried: What I found is that occasionally the width and height are read as 0, which may be caused by the script ran before the first image was loaded. I am thinking to put an onload() function to the first image, however, I think in case if image2 is not loaded when onload is fired, then it won't be adjusted. Also, if the browser is somehow running slow, such size change maybe sensible by the user. What's a more efficient and reliable way to make two images displayed with the same size at the first place? Note I don't want to put them both into a div with fixed size, I only want the 2nd image to have the same size as the 1st one.
has comment: http://stackoverflow.com/comment/139268071
type: Question
tagged with: http://stackoverflow.com/tag/html
answer count: 1
type: AnsweredQuestion
accepted answer: http://stackoverflow.com/a/78986466
score: 0
tagged with: javascript
has title: Efficient and reliable ways to adjust the size of the second image to be the same as the first image

http://stackoverflow.com/comment/139365691
score: 0
type: Comment
has text: Seems like Bunny.net support should be engaged if not already. Also, perhaps they can advise on the possibility of using other players with their platform.
comment on: http://stackoverflow.com/q/79021330
type: QuestionComment

http://stackoverflow.com/comment/139360893
type: QuestionComment
score: 1
has text: Seems like you may have included two instances of Tailwind. `lg:` should always appear after utilities without any variants.
type: Comment
comment on: http://stackoverflow.com/q/79036967

http://stackoverflow.com/q/79024254
tagged with: jquery
downvote count: 0
tagged with: css
upvote count: 1
has comment: http://stackoverflow.com/comment/139337293
type: UnansweredQuestion
score: 1
favorite count: 0
has body: I have 3 sections inside a wrapper. What I am trying to do is display the sections side by side and auto scroll to the right. I noticed that window.innerWidth never changes, but the autoScroll function does get called. What am I doing wrong? jQuery(document).ready(function($) { let currentIndex = 0; const totalSections = $('.services-section').length; const scrollInterval = 5000; // Set the time interval (in milliseconds) function autoScroll() { console.log('Current Index:', currentIndex); // Log current index console.log('Window Width:', window.innerWidth); // Log window width $('.services-wrapper').animate({ scrollLeft: currentIndex * window.innerWidth // Scroll to the next section }, 800); // Animation duration currentIndex++; if (currentIndex >= totalSections) { currentIndex = 0; // Reset to first section } } setInterval(autoScroll, scrollInterval); // Auto-scroll every few seconds }); body, html { margin: 0; padding: 0; overflow-x: hidden; } .services-wrapper { display: flex; width: 300vw; height: 100vh; } .services-section { width: 100vw; height: 100vh; overflow-x: hidden; } <div class="col-md-6" style="background: url(<?php echo wp_kses_post(get_field('used_equipment_inventory_image')); ?>); background-size:cover; background-position:center;"> <?php echo wp_kses_post(get_field('used_equipment_inventory_title')); ?> <?php echo wp_kses_post(get_field('used_equipment_inventory_content')); ?> <a href="<?php echo wp_kses_post(get_field('used_equipment_inventory_button_link')); ?>" class="button"> <?php echo wp_kses_post(get_field('used_equipment_inventory_button_text')); ?> <?php echo wp_kses_post(get_field('rentals_title')); ?> <?php echo wp_kses_post(get_field('rentals_content')); ?> <a href="<?php echo wp_kses_post(get_field('rentals_button_link')); ?>" class="button"> <?php echo wp_kses_post(get_field('rentals_button_text')); ?> <div class="col-md-6" style="background: url(<?php echo wp_kses_post(get_field('rentals_image')); ?>); background-size:cover; backgro…
type: Question
has comment: http://stackoverflow.com/comment/139345934
answer count: 1
has answer: http://stackoverflow.com/a/79029200
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139337231
tagged with: javascript
has title: CSS, HTML and jQuery auto scrolling section

http://stackoverflow.com/q/79021126
tagged with: http://stackoverflow.com/tag/html
type: Question
has answer: http://stackoverflow.com/a/79021211
has comment: http://stackoverflow.com/comment/139331602
has answer: http://stackoverflow.com/a/79163866
tagged with: css
answer count: 3
downvote count: 3
has answer: http://stackoverflow.com/a/79021263
has body: I have written some code for a vertical navbar locked to the left-side of my page, but when I try to insert my main title, it puts it in the navbar, rather than the Main content of the webpage, How do I prevent this? When I put an h1 tag in for my page header, I thought it would put it to the side in the white space, but it shoved it in my navbar as text. (https://i.sstatic.net/V0G51iFt.png)
type: UnansweredQuestion
upvote count: 1
favorite count: 0
score: -2
has title: How do I separate body content from my side vertical navbar?

inheritance
tags question: http://stackoverflow.com/q/78914275
type: Tag
tag name: inheritance

http://stackoverflow.com/a/79007805
type: AcceptedAnswer
accepted answer of: http://stackoverflow.com/q/79007505
downvote count: 0
type: Answer
upvote count: 1
has body: You can do it with plain CSS, here I use white-space: pre-line; and width: min-content; to break the lines with spaces, thus splitting the first and last name. Then we can use text-align: center to center this content. .k-scheduler-header th { text-align: center; } .k-scheduler-header th strong { white-space: pre-line; width: min-content; display: inline-block; text-align: center; } Dojo Demo
score: 1
answers question: http://stackoverflow.com/q/79007505

http://stackoverflow.com/a/78930741
answers question: http://stackoverflow.com/q/78930583
accepted answer of: http://stackoverflow.com/q/78930583
has comment: http://stackoverflow.com/comment/139176008
type: AcceptedAnswer
has body: There are many minor issues in your UI but addressing main one which is content on left and right does not align properly and cause of it is padding: 0 1.5rem 2rem 1.5rem;. To fix that move padding: 0 1.5rem 2rem 1.5rem; from box_1 img to box_1. Below is working example and if you struggling with any other issue do share. &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; body { margin: 0; padding: 0; background-color: white; } .mainDiv { color: white; width: 100%; height: 100vh; background-color: #1e1e1e; display: flex; align-items: center; justify-content: center; } .mid_content { display: flex; width: 100%; margin-top: 2rem; } .box_1 { display: flex; width: 60%; flex-flow: column wrap; padding: 0 1.5rem 2rem 1.5rem; } .box_1 img { width: 100%; height: auto; } .box_2 { display: flex; width: 40%; flex-flow: column; } .box_2 img { width: 30%; height: auto; padding: 1rem; } .box_2_1, .box_2_2,.box_2_3 { display: flex; align-items: center; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="mid_content"&gt; &lt;div class="box_1"&gt; &lt;img src="https://images.pexels.com/photos/7307621/pexels-photo-7307621.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=1260&amp;h=750&amp;dpr=1" alt="Man in a white sweater reading a book" /&gt; &lt;h2&gt;It doesn't hurt to keep practicing.&lt;/h2&gt; &lt;p&gt; "Curabitur vitae libero in ipsum portitor consequat. Aliquam et commodo lectus, nec consequat neque. Sed non accumsan urna. Phasellus sed consequat ex. Etiam eget magna laoreet, efficitur dolor consequat, tristique ligula. &lt;/p&gt; &lt;br /&gt; &lt;br /&gt; &lt;footer&gt;Emanuel, Sr Strategist at Hiring-com&lt;/footer&gt; &lt;/div&gt; &lt;div class="box_2"&gt; &lt;div class="box_2_1"&gt; &lt;img src="https://images.pexels.com/photos/26950214/pexels-photo-26950214/free-photo-of-sunny-beach-from-above.jpeg?auto=com…
type: Answer
has comment: http://stackoverflow.com/comment/139173356
score: 0

http://stackoverflow.com/a/78930911
has comment: http://stackoverflow.com/comment/139171884
type: Answer
answers question: http://stackoverflow.com/q/78930649
score: 0
has comment: http://stackoverflow.com/comment/139189071
has body: <react fill="#FFF" width="100%" height="100%"/>

http://stackoverflow.com/comment/139171020
type: AnswerComment
has text: Oh yeah - I guess I did! Thank you for letting me know and thanks for helping.
comment on: http://stackoverflow.com/a/78933480
type: Comment
score: 0

http://stackoverflow.com/q/79060259
upvote count: 0
has title: Mobile rendering different than desktop
type: Question
answer count: 1
type: AnsweredQuestion
has body: I have some CSS for my button that animates as expected on desktop, but for some reason does not translate to mobile web, and causes some strange bounding box / backdrop issues. Honestly, I'm not sure how to describe what exactly is going on, but, see for yourself: desktop animation video mobile animation video Below is the code, and a codepen to live edit! Chat .styled-button { position: relative; width: 120px; display: flex; align-items: center; justify-content: center; color: white; height: 50px; margin-top: 24px; border-radius: 125px; background: linear-gradient(0deg, #000, #272727); border: none; cursor: pointer; } body { margin: 0; padding: 0; background-color: #000; } .styled-button::before, .styled-button::after { content: ""; position: absolute; left: -2px; top: -2px; background: linear-gradient(45deg, #87def9, black, #87def9, black, #87def9, black, #87def9, black, #87def9, black); background-size: 400%; width: calc(100% + 4px); height: calc(100% + 4px); border-radius: 125px; z-index: -1; animation: steam 30s linear infinite; } .styled-button::after { filter: blur(20px); } .chat-icon { font-size: 24px; margin-right: 8px; color: white; } .chat-text { font-size: 16px; color: white; } @keyframes steam { 0% { background-position: 0 0; } 50% { background-position: 200% 0; } 100% { background-position: 0 0; } } https://codepen.io/dane456/pen/xxowYwX Thanks for checking this out!! EDIT: After further fiddling, it seems the filter: blur(10px is the source of the issue, as removing it gets rid of the translucent rectangle but obviously changes the effect. Will continue to explore and update here. What I've tried to no avail: Fiddling with a container and overflow Forcing GPU rendering Testing without hardware acceleration
tagged with: webkit
score: -1
has comment: http://stackoverflow.com/comment/139412489
tagged with: css
downvote count: 1
has answer: http://stackoverflow.com/a/79066554
tagged with: mobile
accepted answer: http://stackoverflow.com/a/79066554
favorite count: 0

http://stackoverflow.com/a/79043940
upvote count: 0
has body: Ensure that the flex item inside the red box always covers the full width of its container, even if the content is not enough to fill the available width, you can adjust the CSS. Instead of using max-width, you can try with width or min-width. You can find the updated code in the below snippet. Leslie Alexander leslie.alexander@example.com Co-Founder / CEO Last seen 3h ago
type: Answer
score: -1
answers question: http://stackoverflow.com/q/79043896
has comment: http://stackoverflow.com/comment/139374210
downvote count: 1

http://stackoverflow.com/comment/139380274
type: QuestionComment
comment on: http://stackoverflow.com/q/79044235
has text: @KIKOSoftware I want users to be able to navigate the mega dropdown menu. currently, the challenge is that when I hover over the dropdown it shows the dropdown menu but it disappears quickly when I try to select a menu.
type: Comment
score: 0

http://stackoverflow.com/comment/139282820
comment on: http://stackoverflow.com/q/78994423
has text: Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/) using the `<>` icon. See [**How to create a Minimal, Reproducible Example**](http://stackoverflow.com/help/reprex)
type: QuestionComment
score: 1
type: Comment

http://stackoverflow.com/q/79050955
has title: Why is only the top color of my gradient showing in Safari?
answer count: 0
linked to: http://stackoverflow.com/q/54215315
type: UnansweredQuestion
tagged with: safari
has comment: http://stackoverflow.com/comment/139386117
tagged with: gradient
type: Question
has body: background: radial-gradient(5% 10% at 40% 80%, rgb(255, 98, 0) 100%, #FFB81A00 100%), radial-gradient(30% 40% at 60% 40%, rgb(255,61,0) 74%, #FF3D0000 100%), radial-gradient(30% 70% at 40% 40%, rgb(254,0,255) 94%, #FFB81A00 100%), radial-gradient(20% 30% at 60% 40%, rgb(204,0,0) 94%, #FF3D0000 100%), radial-gradient(20% 50% at 20% 40%, rgb(37, 0, 89) 74%, #FFB81A00 100%); This is my CSS for multiple radial gradients showing in my hero section. In Chrome this shows perfectly, but in Safari it only shows the first color. I've Googled it in many different ways but can't find a solution. I tried to change the percentages of the gradient, I had 500% somewhere and figured it might cause problems. I Googled why Safari could only be showing the first color but couldn't find anything relevant to my problem.
has comment: http://stackoverflow.com/comment/139386372
score: 0
tagged with: css

http://stackoverflow.com/q/78936282
tagged with: css
tagged with: drupal-7
tagged with: drupal
favorite count: 0
type: Question
answer count: 1
has body: In Drupal 7 default behavior for a field which fails validation is to show a red border. For example if the field is required but no input was supplied. This does not work for checkboxes, however. EDIT: At request for clarification for desired behavior: The desired behavior is that checkboxes which fail validation should also show with a red border. This is because the "error" class gets added to the input field, but checkboxes and radios don't let you style borders. How can I make it work for these elements too?
downvote count: 1
upvote count: 0
type: AnsweredQuestion
score: -1
has answer: http://stackoverflow.com/a/78936283
accepted answer: http://stackoverflow.com/a/78936283
has title: Checkboxes and radios that fail validation do not get a red border
tagged with: forms

http://stackoverflow.com/q/79059194
answer count: 1
has body: My sub menu showing in same row with its parent i want to display it from top mean no gap from the top for each submenu ul. It is right now working good just the gap need to remove from the to like screen shoots. enter image description here It will need to be same like https://thephonelab.nl/ when you hove any li you can see there are not top padding or margin here. I need the same look My html is .header .nav ul li { position: relative; line-height: 80px; } /* Ensure only the immediate child submenu is shown */ .header .nav ul li:hover > ul.sub-menu { -ms-transform: translateY(-5px); transform: translateY(-5px); visibility: visible; opacity: 1; } /* Submenu hidden by default */ .header .nav ul li ul.sub-menu { position: absolute; background: #ffffff; left: 0; min-width: 230px; margin-top: 5px; -ms-transform: translateY(10px); transform: translateY(10px); transition: all .2s ease-in-out; z-index: 99999; visibility: hidden; opacity: 0; border-radius: 10px; box-shadow: 0px 0px 12px rgba(10, 10, 10, .1); } .header .nav ul li ul.sub-menu li.menu-item-has-children { position: relative; } .header .nav ul li ul.sub-menu li { display: block; position: static; width: 100%; text-align: left; line-height: 38px; padding: 0; } .header .nav ul li ul.sub-menu li:hover { background-color: #ffffff8c; } .header .nav ul li ul.sub-menu li a { margin: 0; border-radius: 0; position: relative; width: 100%; display: inline-block; padding: 7px 15px; border-bottom: solid 1px rgba(0, 0, 0, 0.1); } .header .nav ul li ul.sub-menu li:first-child a { border-radius: 10px 10px 0 0; } .header .nav ul li ul.sub-menu li:last-child a { border-radius: 0 0 10px 10px; } /* Submenu within submenu - hidden by default */ .header .nav ul li ul.sub-menu li ul.sub-menu { -ms-transform: translateX(calc(100% + 10px)); transform: translateX(calc(100% + 10px)); top: -5px; min-height: 100%; opacity: 0; visibility: hidden; z-index: 1; background: #f5f5f7; border-top-right-radius: 2px; border-bottom-right-radius: 2px…
score: 0
has answer: http://stackoverflow.com/a/79059377
has comment: http://stackoverflow.com/comment/139400733
tagged with: http://stackoverflow.com/tag/html
tagged with: nav
tagged with: wordpress
type: UnansweredQuestion
tagged with: css
has title: I have a problem in my multi-level nav menu css is there anyone can help me?
type: Question
tagged with: menu

http://stackoverflow.com/comment/140236248
comment on: http://stackoverflow.com/q/78912182
type: QuestionComment
has text: See this for marquee using background image: https://stackoverflow.com/questions/71224741
type: Comment
score: 0

width
type: Tag
tags question: http://stackoverflow.com/q/79000174
tags question: http://stackoverflow.com/q/79003457
tags question: http://stackoverflow.com/q/78955287
tags question: http://stackoverflow.com/q/79060548
tag name: width
tags question: http://stackoverflow.com/q/78910644
tags question: http://stackoverflow.com/q/79028815
tags question: http://stackoverflow.com/q/78966984
tags question: http://stackoverflow.com/q/78970096
tags question: http://stackoverflow.com/q/79244522
tags question: http://stackoverflow.com/q/79105574
tags question: http://stackoverflow.com/q/79287438
tags question: http://stackoverflow.com/q/79510723
tags question: http://stackoverflow.com/q/79465201

http://stackoverflow.com/a/78987017
upvote count: 1
has body: As we are concentrating on the results per row we can use grid to set how many are shown per row. First, 'flatten' the structure in the HTML. Just have each item listed, don't try to impose a row structure there. Then set the container to be a grid with the number of columns determined by what the user has chosen. This can be communicated from the JS to the CSS by setting a CSS variable, in this case --cols, and using that to set the number of columns. Digital Archive 3-5-10 Images Per Row Items Per Row: 3,5 or 10? How many Results would you like? 3 5 10 Upload Image Upload Image Upload Image Upload Image Upload Image Upload Image Upload Image Upload Image Upload Image Thank you for checking this code out! Note, this code just concentrated on number of elements in a row. Number of elements in a page is a different question, and I see you are probably expecting to solve that with JS.
score: 1
has comment: http://stackoverflow.com/comment/139268982
type: AcceptedAnswer
downvote count: 0
type: Answer
answers question: http://stackoverflow.com/q/78986891
accepted answer of: http://stackoverflow.com/q/78986891

http://stackoverflow.com/comment/139399844
type: QuestionComment
score: 1
has text: What is the `--flex-center` class? You didn't include that, please read [How to create a Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example)
type: Comment
comment on: http://stackoverflow.com/q/79058673

http://stackoverflow.com/comment/139386745
type: Comment
score: 0
has text: The image is floated right within the section element, but the header is outside that section - and then you move the image up by 12em. If you want everything to be to the left or wrapped round that image then put it all in the same element.
comment on: http://stackoverflow.com/q/79051162
type: QuestionComment

deployment
type: Tag
tags question: http://stackoverflow.com/q/78933545
tags question: http://stackoverflow.com/q/79050826
tag name: deployment
tags question: http://stackoverflow.com/q/79001776
tags question: http://stackoverflow.com/q/79126591
tags question: http://stackoverflow.com/q/79352463
tags question: http://stackoverflow.com/q/79292206

http://stackoverflow.com/a/78924322
accepted answer of: http://stackoverflow.com/q/78924175
type: AcceptedAnswer
has body: You can also set a ... https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col table, th, td { padding: 10px; border: 1px solid black; border-collapse: collapse; } .col_red { background-color: red; } q w e r t y q1 w1 e1 r1 t1 y1 q2 w2 e2 r2 t2 y2
downvote count: 0
type: Answer
score: 3
has comment: http://stackoverflow.com/comment/139157625
has comment: http://stackoverflow.com/comment/139157980
has comment: http://stackoverflow.com/comment/139157668
has comment: http://stackoverflow.com/comment/139160768
has comment: http://stackoverflow.com/comment/139157673
upvote count: 3
answers question: http://stackoverflow.com/q/78924175

http://stackoverflow.com/comment/139149968
has text: Thank you very much this is what I was looking for, It solved my issue. Cheers
type: AnswerComment
type: Comment
score: 0
comment on: http://stackoverflow.com/a/78920159

http://stackoverflow.com/comment/139398225
type: QuestionComment
comment on: http://stackoverflow.com/q/79057460
type: Comment
has text: Also, using your browser devtools inspect facility should enable you to see why the image wasn't loaded.
score: 0

http://stackoverflow.com/q/78986368
has comment: http://stackoverflow.com/comment/139267665
has body: I have a flexbox container that will contain 5 or 6 items. flex-direction of the container will be set to row. What I want is to distribute those items like this: The first item should be the first column, the second item should be the second column, and the rest 2 or 3 items should altogether be the third column, much like a grid configuration. Unfortunately I can't alter the HTML markup to add additional containers that will help me. It has to be done purely in CSS (if it can be achieved). I played around a bit in a Flex generator, and this is the closest I went (which isn't even close)... .flex-container { display: flex; justify-content: flex-end; /* flex-flow: row wrap; */ flex-direction: row; flex-wrap: wrap; background-color: #bbdefb; height: 100%; padding: 15px; gap: 5px; } .flex-container > div{ background: #ffecb3; border: 3px solid #ffcc80; border-radius: 5px; padding: 8px; } .item1 { /* flex:0 1 32%; */ flex-basis:32%; align-self:auto; } .item2 { /* flex:0 1 32%; */ flex-basis:32%; align-self:auto; } .item3 { /* flex:0 1 32%; */ flex-basis:32%; align-self:flex-start; } .item4 { /* flex:0 1 32%; */ flex-basis:32%; align-self:flex-start; } .item5 { /* flex:0 1 32%; */ flex-basis:32%; align-self:flex-start; } item 1 item 2 item 3 item 4 item 5 Can someone please help me figure this out?
tagged with: css
has answer: http://stackoverflow.com/a/78986609
tagged with: flexbox
has answer: http://stackoverflow.com/a/78987837
type: UnansweredQuestion
score: 1
has comment: http://stackoverflow.com/comment/139270362
has comment: http://stackoverflow.com/comment/139269409
has comment: http://stackoverflow.com/comment/139267755
has comment: http://stackoverflow.com/comment/139267738
has comment: http://stackoverflow.com/comment/139267853
has comment: http://stackoverflow.com/comment/139267683
favorite count: 0
tagged with: http://stackoverflow.com/tag/html
type: Question
has comment: http://stackoverflow.com/comment/139267653
downvote count: 0
has comment: http://stackoverflow.com/comment/139267663
has comment: http://stackoverflow.com/comment/139267654
upvote count: 1
has comment: http://stackoverflow.com/comment/139268386
answer count: 3
has title: Flexbox items in three columns
has answer: http://stackoverflow.com/a/78986440

http://stackoverflow.com/comment/139418338
type: Comment
score: 0
comment on: http://stackoverflow.com/q/79066460
has text: @MarkSwardstrom - Tried to set the border bottom width to 0px, didn't work. Actually I tried one more thing with border, please check the update part in question
type: QuestionComment

gmail
tag name: gmail
type: Tag
tags question: http://stackoverflow.com/q/78994346
tags question: http://stackoverflow.com/q/79178182
tags question: http://stackoverflow.com/q/79402337
tags question: http://stackoverflow.com/q/79373638
tags question: http://stackoverflow.com/q/79265392
tags question: http://stackoverflow.com/q/79515731

http://stackoverflow.com/comment/139336036
type: QuestionComment
score: 2
type: Comment
comment on: http://stackoverflow.com/q/79023414
has text: Please click [edit] then the button marked `[<>]` and provide a [mcve] with RENDERED HTML, not PHP since this is not related to PHP (so you can also remove the tags)

http://stackoverflow.com/a/79052815
has body: The simplest solution would be adding animation with keyframes. It will work with display: none too, below is working example. You can customize animation as per your like and if you want more delay in text then increase animation-delay. Here animation is setting opacity: 0 to opacity: 1 and keeping it at "1" with help of forwards in animation. If I have misunderstood or missed something do share. body { margin: 0; padding: 0; } .mainDiv { width: 100%; display: flex; flex-direction: column; align-items: center; } .yourText { opacity: 0; animation: 1s fadeIn forwards; animation-delay: 0.5s; } @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } } Other Text Clean Code Editor
answers question: http://stackoverflow.com/q/79039982
type: Answer
score: 0

http://stackoverflow.com/comment/139400027
score: 0
has text: The idea is elements to wrap but taking the maximum space of max-width, so i guess to allow the wrap i have to indicate a min-width so elements will wrap reaching that minimum width
type: QuestionComment
comment on: http://stackoverflow.com/q/79057813
type: Comment

http://stackoverflow.com/a/78958221
downvote count: 0
has comment: http://stackoverflow.com/comment/139216692
score: 1
upvote count: 1
answers question: http://stackoverflow.com/q/78957706
accepted answer of: http://stackoverflow.com/q/78957706
type: AcceptedAnswer
type: Answer
has body: This involves a potential bug in Chrome, Edge, and the latest Safari. See transform scale not working with background clip and gradients or the bug report on Chromium. Same gradient applied separately: If you want the same gradient to be applied to both h1, you can just set the background on h1 instead. (I've changed the drop-shadow to make it visible, but you can change it back to whatever you want.) However, if what you meant is to have a shared gradient background, then see the second half of the answer. Either way, you should move the opacity animation to the background div instead. .mesh-gradient-background { background: linear-gradient(to right, purple, orange); } .animate-fade-up { animation: fade-up 1s; } @keyframes fade-up { from { opacity: 0; } to { opacity: 1; } } Long Text 1 Long Text 2 Shared gradient background: After some testing with isolation:isolate, it appears to me that background-clip:text doesn't reflect texts of the child elements that forms a new stacking-context. Hence, any properties on the h1 that causing a new stacking-context to form including opacity, z-index, and drop-shadow will make the text being ignored. For opacity it is easy to solve in your case. It can be applied to the background itself. And since z-index is not needed, just remove it. This however requires to remove the drop-shadow. .mesh-gradient-background { background: linear-gradient(to right, purple, orange); } .animate-fade-up { animation: fade-up 1s; } @keyframes fade-up { from { opacity: 0; } to { opacity: 1; } } Long Text 1 Long Text 2 To include the drop-shadow with background-clip using a shared linear background, one potential solution is to use background-attachment:fixed. However, the background position and size will be relative to the viewport which might not be ideal. .mesh-gradient-background { background: linear-gradient(to right, purple, orange); background-attachment: fixed; background-size: 100% 100%; } .animate-fade-up { animation: fade-up 1s; } @keyfra…

http://stackoverflow.com/q/78985736
has comment: http://stackoverflow.com/comment/139266589
has title: How to perform left-right alignment for navbar in css
tagged with: http://stackoverflow.com/tag/html
type: Question
tagged with: reactjs
score: 0
has body: I am trying to make left-right alignment for navbar in reactjs but I do not know how to make it for right icons. The icons remains in vertical and I would like to learn how to split them into left and right part. This is the code I have so far. Thanks for your help very appreciated. const Home = () => { return ( <> <Fas.FaSearch/> <Fas.FaShoppingCart/>Carrito <Delivery.CiDeliveryTruck/>Pedidos Acceder </> ) } export default Home #css .navbar-container{ background-color: #2c143e; width: 100%; height: 100%; } .navbar-left{ width: 100%; display: flex; } img{ width: 10%; height: 100px; } This is the image I have: Evidence
answer count: 0
tagged with: css
tagged with: navbar
type: UnansweredQuestion

http://stackoverflow.com/comment/139334790
score: 0
type: QuestionComment
has text: What happens if you leave out the Poppins and ask for sans serif only?
comment on: http://stackoverflow.com/q/79022864
type: Comment

http://stackoverflow.com/comment/139383695
score: 4
type: QuestionComment
has text: getComputedStyle returns all the CSS properties. The property width has value 500px, that hasn't been changed by your code. getBoundingClientRect returns the smallest rectangle which includes the element. When you apply scale(2) that will have width 1000px. See MDN for descriptions.
type: Comment
comment on: http://stackoverflow.com/q/79049518

http://stackoverflow.com/comment/139286639
type: Comment
score: 0
has text: Add fixed width to file name so that it leave room for edit icon and image icon both. Currently edit icons is getting overflowed which led it to not showing.
comment on: http://stackoverflow.com/q/78996100
type: QuestionComment

http://stackoverflow.com/q/78944551
has title: Style Code with highlightJS inside a web component
type: Question
downvote count: 0
answer count: 1
upvote count: 1
has body: I have a web component with a &lt;pre&gt;&lt;code&gt;... section which I would like styled by an external stylesheet (highlightJS). NOTE: My Web Component has a slot and the pre and code blocks are inserted programmatically. If I include the style once globally it does not target the shadow dom of my component This is by design as components are encapsulated I don't really want to mess with the source CSS though I am willing to extend it If I include the style inside my template (see below) I supposed it will load the stylesheet once for each instance. According to the network tab however it is only loaded once. Is this good practice? Is there a way to allow my web component's &lt;code&gt; blocks to be styled by external stylesheets?
tagged with: css
tagged with: web-component
has answer: http://stackoverflow.com/a/78944871
type: UnansweredQuestion
score: 1
favorite count: 0
tagged with: highlight.js

http://stackoverflow.com/q/79035261
answer count: 1
downvote count: 1
tagged with: http://stackoverflow.com/tag/html
upvote count: 0
has title: Suggestion not showing up for input
has body: I am trying to learn react by practising a simple problem. I followed the below youtube tutorial https://www.youtube.com/watch?v=AsvybgZTryo&list=PLKhlp2qtUcSZiWKJTi5-5r6IRdHhxP9ZU&index=17 but when I search for an item the suggestions are not coming, I debugged by putting console, still console not printing can you let me know what is the issue, providing the code snippet and stackblitz below https://stackblitz.com/edit/vitejs-vite-zt8wiu?file=src%2FApp.jsx,src%2FApp.css,src%2Fcomponents%2Fpill.jsx&terminal=dev {suggestions?.users?.map((user, index) => { console.log('slectedUserSet --->', slectedUserSet); return slectedUserSet.has(user.email) ? ( // current user which we selected handleSelectUser(user)}> ${user.firstName} ${user.lastName} ) : ( <></> ); })}
tagged with: reactjs
score: -1
tagged with: css
tagged with: angular
type: UnansweredQuestion
favorite count: 0
has answer: http://stackoverflow.com/a/79035320
type: Question

http://stackoverflow.com/a/79047864
upvote count: 1
score: 1
answers question: http://stackoverflow.com/q/79047847
type: Answer
has body: The element has a default margin. You can explicitly set it to 0: header { position: relative; top: 0; left: 0; display: flex; padding: 20px 50px; justify-content: space-between; align-items: center; border: 1px solid black; } h1 { margin-top: 0; margin-bottom: 0; margin-left: 0; margin-right: 0; font-weight: normal; padding: 16px; font-size: 24px; border: 1px solid black; } .nav { list-style: none; } .list { float: left; } li a { border: 1px solid black; text-decoration: none; color: black; padding: 16px; font-size: 24px; } ul { margin: 0; /* <-- here */ } Connor Schotz Home About Contact If you're not familiar, a good way to debug issues like this is with the built-in development/debugging tools in modern web browsers. (e.g. Press F12 in Chrome to open developer tools.) In the DOM explorer of those tools you can highlight elements on the page and observe the styling being applied to them.
has comment: http://stackoverflow.com/comment/139380796
downvote count: 0

http://stackoverflow.com/q/79003152
type: UnansweredQuestion
type: Question
tagged with: http://stackoverflow.com/tag/html
score: 0
has body: I have this lightning record edit form here, so now the label and the placeholder are coming directly from the record. But I want to change them according to my requirements. So how shall I change the label and placeholder here? <lightning-record-edit-form object-api-name="Account" onsuccess={handleSuccess} </lightning-record-edit-form>
has title: How to change Label and Placeholder from Lightning-input-field which is a standard lightning component?
tagged with: css
answer count: 0
tagged with: lwc
tagged with: salesforce-lightning

http://stackoverflow.com/comment/139342381
type: QuestionComment
has text: You will probably have to prevent the default of the link click action, and then invoke your `horizontal_anchor` function from there. If you still need the URL hash to change, then use the History API to do so.
type: Comment
score: 0
comment on: http://stackoverflow.com/q/79027028

http://stackoverflow.com/q/78913738
has comment: http://stackoverflow.com/comment/139134074
tagged with: selector
tagged with: css
has comment: http://stackoverflow.com/comment/139134981
has comment: http://stackoverflow.com/comment/139136840
has comment: http://stackoverflow.com/comment/139136546
has comment: http://stackoverflow.com/comment/139134474
has comment: http://stackoverflow.com/comment/139136398
type: UnansweredQuestion
score: -2
has body: DOM snippet ul.this&gt;li&gt;ul -&gt;match ul.this&gt;li&gt;div&gt;ul -&gt;match ul.this&gt;li&gt;div&gt;div&gt;ul -&gt;match ul.this&gt;li&gt;div&gt;menu&gt;div&gt;nav&gt;div&gt;div&gt;div&gt;div&gt;ul -&gt;match ul.this&gt;li&gt;ul&gt;li&gt;div&gt;ul -&gt;dont match ul.this&gt;li&gt;div&gt;ul&gt;li&gt;div&gt;ul -&gt;dont match Is there a better way in CSS than stating: ul.this&gt;li&gt;ul, ul.this&gt;li&gt;:not(ul)&gt;ul, ul.this&gt;li&gt;:not(ul)&gt;:not(ul)&gt;ul, ul.this&gt;li&gt;:not(ul)&gt;:not(ul)&gt;:not(ul)&gt;ul, ul.this&gt;li&gt;:not(ul)&gt;:not(ul)&gt;:not(ul)&gt;:not(ul)&gt;ul, ul.this&gt;li&gt;:not(ul)&gt;:not(ul)&gt;:not(ul)&gt;:not(ul)&gt;:not(ul)&gt;ul …as that will still fail the n+1 case, but you have to end somewhere. Something like /(ul)+/ in regex? Read: Any ul inside and descending ul.this that has in its path from ul.this to the resulting ul no other ul in between.
has answer: http://stackoverflow.com/a/78915736
upvote count: 0
has comment: http://stackoverflow.com/comment/139136608
has comment: http://stackoverflow.com/comment/139134836
favorite count: 0
has comment: http://stackoverflow.com/comment/139133995
downvote count: 2
type: Question
answer count: 1
has comment: http://stackoverflow.com/comment/139136956
has comment: http://stackoverflow.com/comment/139133972
has comment: http://stackoverflow.com/comment/139136944
has title: Can CSS have an arbitrary number of elements inside a pseudo-selector?
has comment: http://stackoverflow.com/comment/139136948
has comment: http://stackoverflow.com/comment/139134201
has comment: http://stackoverflow.com/comment/139134441
has comment: http://stackoverflow.com/comment/139133917
has comment: http://stackoverflow.com/comment/139134118

http://stackoverflow.com/a/79045418
has body: The issue here is that Angular destroyes your rendered by *ngFor pieces of DOM each time you're updating rollingCharacters. But css animation requires the DOM to stay the same. That's common issue with *ngFor, so try to use trackBy html *ngFor="let char of rollingCharacters; trackBy: trackByIndex; let i = index"> ts trackByIndex(i: number) { return i; } Stackblitz Example
score: 1
type: AcceptedAnswer
answers question: http://stackoverflow.com/q/79044932
type: Answer
downvote count: 0
upvote count: 1
accepted answer of: http://stackoverflow.com/q/79044932

responsive-design
tags question: http://stackoverflow.com/q/78911849
tags question: http://stackoverflow.com/q/78921098
tags question: http://stackoverflow.com/q/79039846
tags question: http://stackoverflow.com/q/78933097
tags question: http://stackoverflow.com/q/78946720
tags question: http://stackoverflow.com/q/78989661
tags question: http://stackoverflow.com/q/79002065
tags question: http://stackoverflow.com/q/78914640
tags question: http://stackoverflow.com/q/78904335
tags question: http://stackoverflow.com/q/78948434
type: Tag
tags question: http://stackoverflow.com/q/79042490
tags question: http://stackoverflow.com/q/78973631
tags question: http://stackoverflow.com/q/78970518
tags question: http://stackoverflow.com/q/79048027
tags question: http://stackoverflow.com/q/78907430
tags question: http://stackoverflow.com/q/78955287
tags question: http://stackoverflow.com/q/79051162
tag name: responsive-design
tags question: http://stackoverflow.com/q/79157684
tags question: http://stackoverflow.com/q/79153624
tags question: http://stackoverflow.com/q/79241885
tags question: http://stackoverflow.com/q/79229486
tags question: http://stackoverflow.com/q/79218866
tags question: http://stackoverflow.com/q/79196948
tags question: http://stackoverflow.com/q/79153165
tags question: http://stackoverflow.com/q/79193324
tags question: http://stackoverflow.com/q/79121220
tags question: http://stackoverflow.com/q/79279759
tags question: http://stackoverflow.com/q/79392816
tags question: http://stackoverflow.com/q/79359343
tags question: http://stackoverflow.com/q/79334579
tags question: http://stackoverflow.com/q/79295919
tags question: http://stackoverflow.com/q/79322795
tags question: http://stackoverflow.com/q/79389179
tags question: http://stackoverflow.com/q/79338164
tags question: http://stackoverflow.com/q/79267855
tags question: http://stackoverflow.com/q/79336783
tags question: http://stackoverflow.com/q/79367372
tags question: http://stackoverflow.com/q/79282303
tags question: http://stackoverflow.com/q/79324634
tags question: http://stackoverflow.com/q/79312403
tags question: http://stackoverflow.com/q/79332314
tags question: http://stackoverflow.com/q/79353199
tags question: http://stackoverflow.com/q/79260373
tags question: http://stackoverflow.com/q/79256557
tags question: http://stackoverflow.com/q/79265607
tags question: http://stackoverflow.com/q/79287638
tags question: http://stackoverflow.com/q/79379921
tags question: http://stackoverflow.com/q/79527339
tags question: http://stackoverflow.com/q/79425728
tags question: http://stackoverflow.com/q/79486931
tags question: http://stackoverflow.com/q/79439062
tags question: http://stackoverflow.com/q/79436935
tags question: http://stackoverflow.com/q/79533994
tags question: http://stackoverflow.com/q/79500014
tags question: http://stackoverflow.com/q/79475136
tags question: http://stackoverflow.com/q/79526952
tags question: http://stackoverflow.com/q/79545077
tags question: http://stackoverflow.com/q/79435703
tags question: http://stackoverflow.com/q/79470278
tags question: http://stackoverflow.com/q/79481168
tags question: http://stackoverflow.com/q/79532942
tags question: http://stackoverflow.com/q/79435317
tags question: http://stackoverflow.com/q/79443487

clip-path
tags question: http://stackoverflow.com/q/79008374
tag name: clip-path
tags question: http://stackoverflow.com/q/78941501
type: Tag
tags question: http://stackoverflow.com/q/78973631
tags question: http://stackoverflow.com/q/79039420
tags question: http://stackoverflow.com/q/79018787
tags question: http://stackoverflow.com/q/78981776
tags question: http://stackoverflow.com/q/78988200
tags question: http://stackoverflow.com/q/79212931
tags question: http://stackoverflow.com/q/79073417
tags question: http://stackoverflow.com/q/79104214
tags question: http://stackoverflow.com/q/79304721
tags question: http://stackoverflow.com/q/79369594
tags question: http://stackoverflow.com/q/79407440
tags question: http://stackoverflow.com/q/79310343
tags question: http://stackoverflow.com/q/79386861
tags question: http://stackoverflow.com/q/79506495
tags question: http://stackoverflow.com/q/79485826
tags question: http://stackoverflow.com/q/79490604
tags question: http://stackoverflow.com/q/79482152
tags question: http://stackoverflow.com/q/79541851
tags question: http://stackoverflow.com/q/79461882

http://stackoverflow.com/comment/139416350
comment on: http://stackoverflow.com/a/79066670
type: AnswerComment
score: 0
type: Comment
has text: Thanks @Jaiyash (+1) -- please see my edits regarding the overlapping Icon and search text. I added `padding-right: 60px;` and that doesn't seem to change anything. Thanks again!

http://stackoverflow.com/comment/139380175
has text: Thanks @Paulie_D for your hint regarding Stack Snippets and reproducing the code in the question itself. I'll align the question.
score: 0
type: Comment
comment on: http://stackoverflow.com/q/79047361
type: QuestionComment

http://stackoverflow.com/a/79041752
answers question: http://stackoverflow.com/q/79025318
has comment: http://stackoverflow.com/comment/139476624
type: Answer
score: 0
has body: That's work fine. Could the elements in the dropdown list fall below the other HTML elements?

http://stackoverflow.com/q/79006880
tagged with: javascript
has answer: http://stackoverflow.com/a/79007375
has comment: http://stackoverflow.com/comment/139305337
has comment: http://stackoverflow.com/comment/139305625
downvote count: 0
tagged with: css
has title: Show/hide some text in larger text
answer count: 3
type: UnansweredQuestion
has answer: http://stackoverflow.com/a/79007174
favorite count: 0
type: Question
has body: I'm trying to show/hide some text (a highlight) in the middle of a paragraph. These criteria are essential: I need the method to be flexible to work on a single line or multi-line. And I need it to not mess with the rest of the paragraph's text line-height. Below are what I have so far but neither is quite right. Version 1 has the transition I would prefer i.e. width of the tag reducing to zero and using an overflow: hidden to mask the text as it is reducing is size. The problem with this is it can't be multi-line. Version 2 is a compromise that reduces font-size: 0px; but can be multi-line. Is there any solution to getting this to work (looking like version 1 but functioning like version 2)? Or is there another solution to this? (I have also tried transform: scaleX(0); and this does not work). body { font-size: 15px; line-height: 21px; font-family: 'Open Sans'; } .section { position: relative; margin: 0px 0px 50px 0px; width: 500px; height: 210px; background: #eeeeee; border: 1px solid #666666; } .paragraph { position: relative; width: 100%; height: 100%; display: inline; vertical-align: middle; } .paragraph1 { background: #00ffff; } .paragraph2 { background: #00ffff; } /* version 1 */ .mark1 { position: relative; top: 2px; width: 150px; height: 21px; transition: all 1.0s; vertical-align: bottom; display: inline-block; overflow: hidden; white-space: pre; } .mark1 span { position: relative; top: -2px; height: 23px; display: inline-block; background: #cccccc; } .mark1.hidden { width: 0px; transition: all 1.0s; } /* version 2 */ .mark2 { position: relative; transition: all 1.0s; vertical-align: bottom; background: #00ff00; } .mark2 span { position: relative; padding: 0px 0px 0px 0px; background: #cccccc; } .mark2.hidden { font-size: 0px; transition: all 1.0s; } example <button onclick=" const collection = document.getElementsByClassName('mark1'); for (let i = 0; i < collection.length; i++) { collection[i].classList.toggle('hidden'); } ">toggle version 1 Lorem Ipsum is…
tagged with: http://stackoverflow.com/tag/html
has answer: http://stackoverflow.com/a/79008359
upvote count: 3
score: 3

http://stackoverflow.com/comment/139343908
type: Comment
score: 0
comment on: http://stackoverflow.com/q/79027340
type: QuestionComment
has text: @Sean - thanks for the reply (and you too Paulie_D) but I have tried setting the width and height to something other than pixels (such as inches) and it still prints the same as it did in pixels.

http://stackoverflow.com/a/79029338
answers question: http://stackoverflow.com/q/79028695
downvote count: 0
score: 2
upvote count: 2
type: Answer
has body: You can use border-radius to achieve this, just make the radius two times smaller than your height or vise-versa, depending on how you want the half-circle to layout. * { padding: 0; margin: 0; box-sizing: border-box; } .flex { display: flex; justify-content: space-around; align-items: center; margin-top: 0.5em; } .semi-circle { --height: 100px; --width: 50px; width: var(--width); height: var(--height); background-color: #48abe0; border-radius: 0 var(--width) var(--width) 0; background: linear-gradient(73.4deg, rgba(16, 134, 144, 0.4) 3.31%, rgba(82, 190, 199, 0.4) 57.52%, rgba(252, 207, 18, 0.4) 91.12%); } .semi-circle2 { --height: 100px; --width: 50px; width: var(--width); height: var(--height); background-color: #48abe0; border-radius: var(--width) 0 0 var(--width); background: linear-gradient(73.4deg, rgba(16, 134, 144, 0.4) 3.31%, rgba(82, 190, 199, 0.4) 57.52%, rgba(252, 207, 18, 0.4) 91.12%); } .semi-circle3 { --height: 50px; --width: 100px; width: var(--width); height: var(--height); background-color: #48abe0; border-radius: var(--width) var(--width) 0 0; background: linear-gradient(73.4deg, rgba(16, 134, 144, 0.4) 3.31%, rgba(82, 190, 199, 0.4) 57.52%, rgba(252, 207, 18, 0.4) 91.12%); } .semi-circle4 { --height: 50px; --width: 100px; width: var(--width); height: var(--height); background-color: #48abe0; border-radius: 0 0 var(--width) var(--width); background: linear-gradient(73.4deg, rgba(16, 134, 144, 0.4) 3.31%, rgba(82, 190, 199, 0.4) 57.52%, rgba(252, 207, 18, 0.4) 91.12%); } .semi-circle-rotated { --height: 100px; --width: 50px; width: var(--width); height: var(--height); background-color: #48abe0; border-radius: 0 var(--width) var(--width) 0; background: linear-gradient(73.4deg, rgba(16, 134, 144, 0.4) 3.31%, rgba(82, 190, 199, 0.4) 57.52%, rgba(252, 207, 18, 0.4) 91.12%); transform: rotate(45deg); }

http://stackoverflow.com/comment/139134710
score: 1
comment on: http://stackoverflow.com/q/78913129
type: QuestionComment
has text: The image links do not appear in the html returned from your `GET` request. The page you see in your browser is built dynamically using JavaScript. You _could_ reproduce all the steps required to get these links using only http requests, but it would be lengthy and complicated. It is likely to be easier to use RSelenium or similar.
type: Comment

next.js
tags question: http://stackoverflow.com/q/78992530
tags question: http://stackoverflow.com/q/78934113
type: Tag
tags question: http://stackoverflow.com/q/79007799
tags question: http://stackoverflow.com/q/78961939
tags question: http://stackoverflow.com/q/78918363
tags question: http://stackoverflow.com/q/78960176
tags question: http://stackoverflow.com/q/78937138
tags question: http://stackoverflow.com/q/79030864
tags question: http://stackoverflow.com/q/79048153
tags question: http://stackoverflow.com/q/78967491
tags question: http://stackoverflow.com/q/78997366
tags question: http://stackoverflow.com/q/78952405
tags question: http://stackoverflow.com/q/78957706
tags question: http://stackoverflow.com/q/78958156
tags question: http://stackoverflow.com/q/78903909
tags question: http://stackoverflow.com/q/78947221
tags question: http://stackoverflow.com/q/78992567
tags question: http://stackoverflow.com/q/79044837
tags question: http://stackoverflow.com/q/78976328
tags question: http://stackoverflow.com/q/78963317
tags question: http://stackoverflow.com/q/78984919
tags question: http://stackoverflow.com/q/78993853
tags question: http://stackoverflow.com/q/78988424
tags question: http://stackoverflow.com/q/79039123
tags question: http://stackoverflow.com/q/79033331
tags question: http://stackoverflow.com/q/78971122
tags question: http://stackoverflow.com/q/78996966
tags question: http://stackoverflow.com/q/79064314
tag name: next.js
tags question: http://stackoverflow.com/q/79035771
tags question: http://stackoverflow.com/q/78912357
tags question: http://stackoverflow.com/q/79124209
tags question: http://stackoverflow.com/q/79175743
tags question: http://stackoverflow.com/q/79095799
tags question: http://stackoverflow.com/q/79190976
tags question: http://stackoverflow.com/q/79163031
tags question: http://stackoverflow.com/q/79149720
tags question: http://stackoverflow.com/q/79168311
tags question: http://stackoverflow.com/q/79157250
tags question: http://stackoverflow.com/q/79107947
tags question: http://stackoverflow.com/q/79209165
tags question: http://stackoverflow.com/q/79123335
tags question: http://stackoverflow.com/q/79130963
tags question: http://stackoverflow.com/q/79231876
tags question: http://stackoverflow.com/q/79204274
tags question: http://stackoverflow.com/q/79197899
tags question: http://stackoverflow.com/q/79164762
tags question: http://stackoverflow.com/q/79107907
tags question: http://stackoverflow.com/q/79115133
tags question: http://stackoverflow.com/q/79143334
tags question: http://stackoverflow.com/q/79088179
tags question: http://stackoverflow.com/q/79218538
tags question: http://stackoverflow.com/q/79132051
tags question: http://stackoverflow.com/q/79068995
tags question: http://stackoverflow.com/q/79231273
tags question: http://stackoverflow.com/q/79394890
tags question: http://stackoverflow.com/q/79261830
tags question: http://stackoverflow.com/q/79287438
tags question: http://stackoverflow.com/q/79292206
tags question: http://stackoverflow.com/q/79255631
tags question: http://stackoverflow.com/q/79360714
tags question: http://stackoverflow.com/q/79292268
tags question: http://stackoverflow.com/q/79387501
tags question: http://stackoverflow.com/q/79375436
tags question: http://stackoverflow.com/q/79309037
tags question: http://stackoverflow.com/q/79312631
tags question: http://stackoverflow.com/q/79292506
tags question: http://stackoverflow.com/q/79324844
tags question: http://stackoverflow.com/q/79368347
tags question: http://stackoverflow.com/q/79546415
tags question: http://stackoverflow.com/q/79505891
tags question: http://stackoverflow.com/q/79544983
tags question: http://stackoverflow.com/q/79476675
tags question: http://stackoverflow.com/q/79543390
tags question: http://stackoverflow.com/q/79536974
tags question: http://stackoverflow.com/q/79495565
tags question: http://stackoverflow.com/q/79441467
tags question: http://stackoverflow.com/q/79481168
tags question: http://stackoverflow.com/q/79533557

http://stackoverflow.com/comment/139287846
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78997251
type: Comment
has text: The input container doesn't quite overflow anything given the code in your question.

http://stackoverflow.com/a/78928124
upvote count: 1
has comment: http://stackoverflow.com/comment/139161012
has body: I did the minimum amount of changes to your code here: Listening to the click event handler, specifically over the .icing element instead of the whole .cake; Changing the top css property of the newly added candle, just after it was pushed into the dom, substracting its computed height so that its bottom side will match where you clicked; Added a styling border: solid 3px red; for the .icing to highlight its perimeter; This way it gets very close to the intended result. I actually also tried to transform the left coord so that the bottom-left corner of the candle matched the clicked point. But it make things worst. To make it even more accurate you should prevent the event to occur in case the clicked coords is too close to the margin of the target element (in terms of half the width of the candle or considering a bottom margin also). const cake = document.querySelector(".cake"); let candles = []; function addCandle(left, top) { const icing = document.querySelector(".icing"); const icingRect = icing.getBoundingClientRect(); const icingCenterX = icingRect.left + icingRect.width / 2; const icingCenterY = icingRect.top + icingRect.height / 2; const icingRadius = icingRect.width / 2; const cakeRect = cake.getBoundingClientRect(); const clickX = event.clientX - cakeRect.left; const clickY = event.clientY - cakeRect.top; const distance = Math.sqrt( Math.pow(clickX - (icingCenterX - cakeRect.left), 2) + Math.pow(clickY - (icingCenterY - cakeRect.top), 2) ); if (distance <= icingRadius && clickY >= icingRect.top - cakeRect.top && clickY <= icingRect.bottom - cakeRect.top) { const candle = document.createElement("div"); candle.className = "candle"; candle.style.left = left + "px"; candle.style.top = top + "px"; const flame = document.createElement("div"); flame.className = "flame"; candle.appendChild(flame); cake.appendChild(candle); //changing the candle's top coord substracting its computed height after it was pushed into the dom candle.style.top = (parseInt(candle.style.t…
score: 1
answers question: http://stackoverflow.com/q/78927953
type: AcceptedAnswer
accepted answer of: http://stackoverflow.com/q/78927953
type: Answer
downvote count: 0

http://stackoverflow.com/q/79055607
type: Question
has comment: http://stackoverflow.com/comment/139396346
tagged with: http://stackoverflow.com/tag/html
has title: How do I organize two grids to be the same size as the smaller one using UIKit?
has body: I'm trying to create an admin interface for a website, and I'm using UIKIT to make the job easier, however, I can't get this alignment: enter image description here I'm trying to make it so that when the table is bigger than the 3 cards on the side, it has a hidden overflow, so I don't have to scroll down, can anyone help me with this error? code: div > uk-width-1-1"> Clientes Clientes Todo periodo Ultima semana Ultimo mês Ultimo ano Clientes Todo periodo Ultima semana Ultimo mês Ultimo ano Nome Cidade Bairro Rua Numero Contato Maria Itu Santa Rita salvador 12 00-0000-0000 Maria Itu Santa Rita salvador 12 00-0000-0000 Maria Itu Santa Rita salvador 12 00-0000-0000 Maria Itu Santa Rita salvador 12 00-0000-0000 Maria Itu Santa Rita salvador 12 00-0000-0000 Maria Itu Santa Rita salvador 12 00-0000-0000 Maria Itu Santa Rita salvador 12 00-0000-0000 Total de clientes 12 Registrados esse mês 12 Cidade com mais clientes 12 I've tried using uk-height-match and uk-height-1-1 but nothing works
score: 0
tagged with: alignment
tagged with: getuikit
tagged with: css
tagged with: uikit
answer count: 0
type: UnansweredQuestion

nextjs14
type: Tag
tag name: nextjs14
tags question: http://stackoverflow.com/q/78949680
tags question: http://stackoverflow.com/q/79064314
tags question: http://stackoverflow.com/q/79036967
tags question: http://stackoverflow.com/q/78959933
tags question: http://stackoverflow.com/q/79115133
tags question: http://stackoverflow.com/q/79268528
tags question: http://stackoverflow.com/q/79303825
tags question: http://stackoverflow.com/q/79483230

http://stackoverflow.com/q/79013734
tagged with: css
answer count: 0
type: UnansweredQuestion
type: Question
has comment: http://stackoverflow.com/comment/139319340
has title: How to define flex-1 as max-width?
tagged with: tailwind-css
has body: I use tailwindcss and vue. Now I create header and I have a problem. // logo // some routes <TemalarSlider :dynamic-width="dynamicWidth" /> <Search @searchToggled="handleSearchToggle" /> // also some routes Here I want flex-1 must be max-width. here Search this animated search bar. My TemalarSlider this: <AnOutlinedArrowLeft /> // more items <AnOutlinedArrowRight /> When I dont add items work well. after i add item width TemalarSlider increased. How to do this? I try do this overflow-x-scroll. But dont be.
score: 0

http://stackoverflow.com/comment/139219361
has text: I am pleased to say that I did make a mistake. I entered your CSS style into the existing page style statement which as you know did not work. Today I placed it into a new and it worked. Thank you. Now for the centering . . .
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78956442

http://stackoverflow.com/comment/139252622
type: Comment
score: 0
has text: It would be better to post the svg here. if it is within the coepen that nobody is legally allowed to write an answer here using it.
comment on: http://stackoverflow.com/q/78978054
type: QuestionComment

http://stackoverflow.com/q/78950932
tagged with: css
has answer: http://stackoverflow.com/a/78953740
has title: Vue Draggable children ignore parent CSS outline
tagged with: vuejs3
favorite count: 0
type: Question
tagged with: vue.draggable
tagged with: vuedraggable
accepted answer: http://stackoverflow.com/a/78953740
downvote count: 0
answer count: 1
type: AnsweredQuestion
has body: I've got an array of contacts, which contain either a single person with a name or a group with a name and members. I want the groups to be outlined but still wrap. I can get it to work in a display state but the outline breaks when incorporate vue-draggable. Here is a minimal example: https://codepen.io/FiveSecDelay/pen/BagGVgb Is there a way to keep the groups outlined like the wanted result? Code in pen: Draggable: 0" class="contactGroup handle"> {{ element.name }}[{{ element.members.length }}]= {{ groupMember.name }}, {{ element.name }}, Wanted Result: 0" class="contactGroup"> {{ contact.name }}[{{ contact.members.length }}]= {{ groupMember.name }}, {{ contact.name }},
upvote count: 1
score: 1

http://stackoverflow.com/q/78957424
tagged with: javascript
has title: CSS: How to toggle the borders of a specific table column without twitching
answer count: 4
has comment: http://stackoverflow.com/comment/139214177
possible better answer: http://stackoverflow.com/a/78957449
tagged with: css
has comment: http://stackoverflow.com/comment/139214172
has answer: http://stackoverflow.com/a/78957464
type: Question
downvote count: 1
has answer: http://stackoverflow.com/a/78957708
type: AnsweredQuestion
upvote count: 0
favorite count: 0
score: -1
has answer: http://stackoverflow.com/a/78957494
has answer: http://stackoverflow.com/a/78957449
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139214203
accepted answer: http://stackoverflow.com/a/78957464
has comment: http://stackoverflow.com/comment/139214209
has body: function toggleBorders() { table.tHead.firstElementChild.children[1].classList.toggle('thick-border'); Array.from(table.tBodies[0].children).forEach(row => row.children[1].classList.toggle('thick-border')); } table { border-collapse: collapse; } th.thick-border, td.thick-border { border: 3px solid coral; border-top: none; border-bottom: none; } h1 h2 h3 h4 11 12 13 14 21 22 23 24 Click Me! Is there any way to toggle the column's borders without twitching? And without thickening initial border width of other columns? Maybe with shadows or gradients or somehow else
has comment: http://stackoverflow.com/comment/139214223

http://stackoverflow.com/q/78967649
tagged with: css
has body: A html table can be sized by providing width and height, but it can also be sized by setting heights to its rows ( ) and widths of its columns (via colgroup). In the latter case of setting row heights and column widths, what's the recommended attribute for table height and width? I would expect no value should be set, because the table can work out its dimension in a "bottom up" manner (as its size is the sum of rows and columns), but that doesn't seem to working as expected. I've tried width/height: auto and 100%, but those settings seem to be dependent on the parents (somewhat). I'm using a parent container to "mask" a part of the table to provide a window to see the table, so ideally parent mask and table should be independent. If necessary, I'll try to create a minimal example, but I was hoping someone had encountered this problem before and there's only an attribute missing (or another simple fix).
answer count: 0
has title: Correct way to set table dimensions when only providing height and colgroup
has comment: http://stackoverflow.com/comment/139233433
type: UnansweredQuestion
type: Question
tagged with: http://stackoverflow.com/tag/html
tagged with: html-table
score: 0
has comment: http://stackoverflow.com/comment/139233733

http://stackoverflow.com/comment/139285306
has text: @AHaworth The image completely fills the circle, it's a perfect square image. It's a portrait, but in the original image, the face is off center, so making it a circle cuts off the top right of the persons head. I guess I'm asking how to change the center of the image so the circle shows the full face of the person in the picture, instead of half of it.
score: 0
type: Comment
type: QuestionComment
comment on: http://stackoverflow.com/q/78995721

http://stackoverflow.com/q/79039863
favorite count: 0
linked to: http://stackoverflow.com/q/55329996
tagged with: http://stackoverflow.com/tag/html
has title: How do i use set variable colors to create a gradient in css?
tagged with: gradient
has comment: http://stackoverflow.com/comment/139365871
type: Question
downvote count: 1
score: 0
has body: Is there a way to use variable colors I defined in my CSS file to create a gradient effect, instead of using the regular means of redefining the colors. var colors: :root{ --primary-color: #c02410; --primary-color-dark: #831708; } regular method I am aware of background-image: linear-gradient(#c02410, #831708);
has comment: http://stackoverflow.com/comment/139365839
linked to: http://stackoverflow.com/q/29591465
answer count: 0
tagged with: css
tagged with: linear-gradients
duplicate of: http://stackoverflow.com/q/55329996
type: UnansweredQuestion
upvote count: 1

http://stackoverflow.com/q/79056369
has answer: http://stackoverflow.com/a/79056373
has body: I created a flexbox for a website I am working on that contains three boxes that represent purchase options. At a small screen size, I want the first option to sit on a line by itself above the other two, which wrap onto the line below. This has proved very difficult. This is what my current project looks like: This is what I want it to look like: Here is the code I am currently using: 1 Birth Chart Report A detailed written analysis of your psychological traits, relationship patterns, and career indicators. Learn More 2 Relationship Report A thorough written analysis of your relationship with a friend, lover, or family member as it evolves over time. Learn More 3 Predictive Report A detailed written report that forecasts themes of the coming year and how you can prepare for the challenges to come. Learn More .flexbox-container { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 40px; background-image: url(../Images/Carousel.jpg); background-size: cover; padding: 40px 0 30px 0; } .reading { background-color: #fff; border-radius: 15px; width: 310px; height: 300px; padding: 10px 30px 30px 30px; position: relative; box-sizing: border-box; } .flex-number { background-color: #e8e8e8; width: 70px; height: 70px; border-radius: 50px; margin: auto; text-align: center; padding: 18px 20px 20px 20px; position: absolute; top: -25px; left: 50%; transform: translateX(-50%); font-size: 1.5rem; font-weight: bold; } .flex-type-of-report { font-size: 1.6rem; margin-top: 45px; } .flex-text { margin-bottom: 30px; } I tried using the flex-basis property to make the first box take up more space in the flexbox and therefore sit on its own row, but this is not what I want visually (I want the boxes to be equal sizes), so I gave up on this approach. I tried adding an empty div on the small screen size so I could bump the second box onto the next line, but this led to some awkward spacing that I couldn't get to work in my favor. Not sure what else to try.
has comment: http://stackoverflow.com/comment/139395695
type: UnansweredQuestion
type: Question
tagged with: css
tagged with: flexbox
has answer: http://stackoverflow.com/a/79056394
has comment: http://stackoverflow.com/comment/139396487
has title: How do I get the first item out of three to sit on a line of its own in a flexbox while the other two wrap beneath it?
score: 0
answer count: 2

http://stackoverflow.com/a/78935317
score: 1
type: Answer
downvote count: 0
answers question: http://stackoverflow.com/q/78935245
upvote count: 1
has body: You could consider using position: fixed via the fixed class instead of sticky. const Image = () => const SomeDiv = () => SomeDiv const Menu = () => Menu const Link = ({ ...props, children }) => <a {...props}>children function Button() { return ( <Image /> ); } function Layout({ children }) { return ( <Menu /> <SomeDiv /> {children} ); } ReactDOM.createRoot(document.getElementById('app')).render( ); fixed acts like a combination of sticky and absolute, as per the MDN documentation: The element is removed from the normal document flow, and no space is created for the element in the page layout. The element is positioned relative to its initial containing block, which is the viewport in the case of visual media. Its final position is determined by the values of top, right, bottom, and left.

http://stackoverflow.com/q/78913676
has body: I am trying to get the 'second' and 'third' columns to be sat next to each other whilst also reversing the order of them for the MD breakpoint Third Second First I applied flex-md-column-reverse but it makes them stack ontop of each other
has comment: http://stackoverflow.com/comment/139133905
tagged with: http://stackoverflow.com/tag/html
accepted answer: http://stackoverflow.com/a/78914075
has title: Bootstrap: Reversing columns makes them stacked
tagged with: css
type: Question
tagged with: twitter-bootstrap
tagged with: flexbox
answer count: 1
has answer: http://stackoverflow.com/a/78914075
type: AnsweredQuestion
has comment: http://stackoverflow.com/comment/139133953
has comment: http://stackoverflow.com/comment/139133808
score: 0

http://stackoverflow.com/q/78953680
type: UnansweredQuestion
tagged with: streamlit
tagged with: http://stackoverflow.com/tag/html
type: Question
has title: Problems making a card clickable and showing/hiding text
has body: Could anyone help me out? I want to click a card on this streamlit page and let that hide/unhide some text. Right now I can click the card, but nothing happens. Just below the card a I can click a hidden button and then the text appears. I would like to have the card be the button if that makes sense. I just cant figure out how to. Cheers! import streamlit as st import json from collections import defaultdict # Load the JSON data with open('trading_mistakes.json', 'r') as file: data = json.load(file) # Group mistakes by category mistakes_by_category = defaultdict(list) for key, value in data.items(): mistakes_by_category[value['category']].append({ 'id': key, 'title': value['title'], 'description': value['description'] }) # Set page config st.set_page_config(layout="wide", page_title="Trading Mistakes") # Define color gradients for each category category_colors = { "Choose your Battles": ("#FF6B6B", "#FF8E8E"), "Entries": ("#4ECDC4", "#45B7AA"), "Stops": ("#FFA07A", "#FF8C61"), "Exits": ("#82C0CC", "#6AAEBB"), "Targets": ("#F9C74F", "#F4B63C"), "Tijdens de trade & executie": ("#9B5DE5", "#8A4FD3"), "Moneymanagement": ("#00B4D8", "#0096B7"), "Aandeel en markt zaken die je op het verkeerde been kunnen zetten": ("#FF9F1C", "#FF8C00"), "Denkfouten & mentale staat": ("#8AC926", "#7AB321"), "Rules & Ethics": ("#FF99C8", "#FF80B3") } # Custom CSS st.markdown(""" """, unsafe_allow_html=True) # App title st.title("Trading Mistakes") # Initialize session state for card visibility if 'active_card' not in st.session_state: st.session_state.active_card = None # Display mistakes by category for category, mistakes in mistakes_by_category.items(): st.markdown(f" {category} ", unsafe_allow_html=True) # Calculate the number of columns based on the screen width num_columns = 5 # You can adjust this number to fit more or fewer cards per row # Create rows of cards for i in range(0, len(mistakes), num_columns): cols = st.columns(num_columns) for j in range(num_columns): if i + j < len(mi…
score: 0
tagged with: python
answer count: 0
tagged with: css

http://stackoverflow.com/comment/139200992
score: 1
comment on: http://stackoverflow.com/a/78946996
has text: @chrwahl: You can fix this iOS safari issue by adding a `-webkit-appearance:none` property to the button. The described padding is related to safaris default button styles
type: Comment
type: AnswerComment

http://stackoverflow.com/q/78962714
tagged with: flexbox
has body: I have a row flexbox with these requirements: The flexbox has two child flex items The flex items ALWAYS have the same width As soon as the container becomes small enough that ANY of the flex items cannot fit their content, cause the flexbox to wrap. LOOOOOOOOOOONG SHORT * { margin: 0; padding: 0; box-sizing: border-box; } .container { background: lightcyan; width: 90%; margin: 20px auto; display: flex; flex-flow: row wrap; gap: 20px; padding: 20px; } .item { background: salmon; padding: 10px; flex: 1 0 0; overflow: hidden; } As you can see screenshot, the flexbox never wraps.
upvote count: 0
type: UnansweredQuestion
favorite count: 0
has comment: http://stackoverflow.com/comment/139225364
has answer: http://stackoverflow.com/a/78963862
type: Question
answer count: 1
has comment: http://stackoverflow.com/comment/139224181
has title: Wrap when equal-width containers get too small to contain their content
has comment: http://stackoverflow.com/comment/139224241
score: -1
tagged with: overflow
has comment: http://stackoverflow.com/comment/139224224
tagged with: css
downvote count: 1

http://stackoverflow.com/comment/139314742
has text: I’ve learnt something, not come across this before, thanks.
comment on: http://stackoverflow.com/a/79010927
type: Comment
score: 0
type: AnswerComment

3d
tags question: http://stackoverflow.com/q/79052069
tag name: 3d
tags question: http://stackoverflow.com/q/78911856
type: Tag
tags question: http://stackoverflow.com/q/79193318
tags question: http://stackoverflow.com/q/79211594
tags question: http://stackoverflow.com/q/79222973
tags question: http://stackoverflow.com/q/79512007
tags question: http://stackoverflow.com/q/79487184

http://stackoverflow.com/comment/139161022
comment on: http://stackoverflow.com/q/78926909
type: QuestionComment
type: Comment
has text: I wasn’t implying my comment described a complete solution, only that it is part of your problem.
score: 0

http://stackoverflow.com/q/78929400
tagged with: http://stackoverflow.com/tag/html
type: Question
answer count: 1
type: AnsweredQuestion
score: 0
tagged with: javascript
has answer: http://stackoverflow.com/a/78932998
tagged with: css
has comment: http://stackoverflow.com/comment/139163520
has body: I have an etch-a-sketch program which works fine apart from one small issue. When I click the "change grid size" button and enter certain numbers (such as 51, 44, 45), the right and bottom edges of my grid are white instead of black. Some numbers like 10, 16, 25, don't give this issue. This issue happens in chrome browser. When I use firefox browser, my grid becomes even worse and goes all wonky with a column outside of the grid. I tried resizing the grid itself I tried rounding (up or down) gridSize / gridDimensions to various different values I tried removing the borders of each square I changed border on .squares to outline, just causes the issue on different numbers instead (such as 88) Here is my code: let container = document.querySelector(".container"); createGrid(16); function createGrid(gridDimensions) { let gridSize = 800; let gridPixelSize = gridSize / gridDimensions; for(row = 1; row < (gridDimensions + 1); row++) { let column = 1; let square = document.createElement("div"); square.id = "square-" + row + "-" + column; square.className = "squares"; square.style.height = `${gridPixelSize}px`; square.style.width = `${gridPixelSize}px`; container.appendChild(square); for(column = 2; column < (gridDimensions + 1); column++) { let square = document.createElement("div"); square.id = "square-" + row + "-" + column; square.className = "squares"; square.style.height = `${gridPixelSize}px`; square.style.width = `${gridPixelSize}px`; container.appendChild(square); } } drawOnGrid(gridPixelSize); } function drawOnGrid(gridPixelSize) { let squares = document.querySelectorAll(".squares"); squares.forEach((square) => { let squareDark = document.createElement("div"); squareDark.style.height = `${gridPixelSize}px`; squareDark.style.width = `${gridPixelSize}px`; squareDark.style.backgroundColor = "black"; let squareDarkOpacity = 0; squareDark.style.opacity = `${squareDarkOpacity}`; square.appendChild(squareDark); square.addEventListener("mouseover", (e) => { if(!hasColorBee…
has comment: http://stackoverflow.com/comment/139163920
has title: How to prevent the right and bottom edges of my grid from being white on certain grid sizes?
accepted answer: http://stackoverflow.com/a/78932998

http://stackoverflow.com/q/78971889
favorite count: 0
has answer: http://stackoverflow.com/a/78972046
tagged with: modal-dialog
type: Question
accepted answer: http://stackoverflow.com/a/78972046
answer count: 1
has title: Unable to open model even after setting display to none
tagged with: http://stackoverflow.com/tag/html
has body: I am trying to make a simple hello world page. I added a few css animations for it and also implemented modal to pop up when the user clicked the button. The button has a blinking animation and will only appear after the user has typed some text. I tried to first just getting it triggered when they enter their name but then i changed it to a button in the hopes that then it would work. When i print the pop up.style.display after changing it to block then it is prinitng block. but otherwise the modal does not appear. I tried to print out the modal display and also the modal directly without setting the display to none. but it was of no avail. I also tried changing the overflow hidden property but no use. i tried doing all the changes that AI recommended but no use. this is my code. CSS @font-face { font-family: Caveat; src: url(&quot;D:/Year 4/Term 1/Websites/Hello World/Caveat/static/Caveat-Regular.ttf&quot;); } * { background-color: #A24545; font-family: Caveat; font-size: 36px; margin: 0; padding: 0; box-sizing: border-box; } .container { display: flex; position: relative; width: 1535px; height: 729px; overflow: hidden; margin: auto; } .tv-frame { width: 1100px; height: 630px; margin: auto; margin-top: 60px; padding: 20px; margin-left: 210px; } .small{ width: 270px; height: 150px; } .mid{ width: 305px; height: 180px; } .leftTV{ top: 50px; left: -300px; position: absolute; animation: movearound 2s infinite; animation-timing-function: linear; visibility: hidden; animation-play-state: paused; } .rightTV{ bottom: 70px; right: -120px; position: absolute; mix-blend-mode: darken; animation: blink2 2s infinite; visibility: hidden; animation-play-state: paused; } .topTV{ top: -80px; right: 0px; position: absolute; mix-blend-mode: darken; animation: movearound2 2s infinite; animation-timing-function: linear; visibility: hidden; animation-play-state: paused; } .bottomTV{ bottom: -140px; left: -10px; position: absolute; animation: movearound3 2s infinite; visibility: hidden; …
upvote count: 0
type: AnsweredQuestion
score: -1
tagged with: javascript
tagged with: popup
tagged with: css
downvote count: 1

material-ui
tags question: http://stackoverflow.com/q/79031039
tags question: http://stackoverflow.com/q/78980184
tags question: http://stackoverflow.com/q/78947964
tags question: http://stackoverflow.com/q/79026163
tags question: http://stackoverflow.com/q/78931833
type: Tag
tags question: http://stackoverflow.com/q/79007402
tags question: http://stackoverflow.com/q/79005516
tags question: http://stackoverflow.com/q/78920429
tags question: http://stackoverflow.com/q/78952405
tags question: http://stackoverflow.com/q/78979198
tags question: http://stackoverflow.com/q/79002937
tags question: http://stackoverflow.com/q/79046546
tag name: material-ui
tags question: http://stackoverflow.com/q/78977902
tags question: http://stackoverflow.com/q/79054759
tags question: http://stackoverflow.com/q/78938339
tags question: http://stackoverflow.com/q/78937517
tags question: http://stackoverflow.com/q/78906496
tags question: http://stackoverflow.com/q/79059550
tags question: http://stackoverflow.com/q/79016921
tags question: http://stackoverflow.com/q/78946409
tags question: http://stackoverflow.com/q/79066460
tags question: http://stackoverflow.com/q/79209165
tags question: http://stackoverflow.com/q/79154156
tags question: http://stackoverflow.com/q/79228713
tags question: http://stackoverflow.com/q/79124564
tags question: http://stackoverflow.com/q/79180286
tags question: http://stackoverflow.com/q/79126199
tags question: http://stackoverflow.com/q/79187996
tags question: http://stackoverflow.com/q/79131548
tags question: http://stackoverflow.com/q/79162950
tags question: http://stackoverflow.com/q/79291048
tags question: http://stackoverflow.com/q/79287710
tags question: http://stackoverflow.com/q/79307974
tags question: http://stackoverflow.com/q/79262049
tags question: http://stackoverflow.com/q/79334034
tags question: http://stackoverflow.com/q/79400465
tags question: http://stackoverflow.com/q/79253897
tags question: http://stackoverflow.com/q/79273129
tags question: http://stackoverflow.com/q/79298582
tags question: http://stackoverflow.com/q/79375405
tags question: http://stackoverflow.com/q/79546019
tags question: http://stackoverflow.com/q/79469370
tags question: http://stackoverflow.com/q/79476675
tags question: http://stackoverflow.com/q/79506730
tags question: http://stackoverflow.com/q/79533952
tags question: http://stackoverflow.com/q/79437200
tags question: http://stackoverflow.com/q/79478644
tags question: http://stackoverflow.com/q/79533642
tags question: http://stackoverflow.com/q/79431963
tags question: http://stackoverflow.com/q/79426732
tags question: http://stackoverflow.com/q/79441890
tags question: http://stackoverflow.com/q/79461995

http://stackoverflow.com/q/79057724
type: Question
has title: how to make an interactive grid work better?
tagged with: http://stackoverflow.com/tag/html
has answer: http://stackoverflow.com/a/79057808
type: AnsweredQuestion
downvote count: 0
has body: I have this grid with 3 columns, and when i click one of the divs it'll go down a row and span the whole row, it also closes back up when i click on it again. Also, when I open a different div, it'll close all the other ones if theyre open. so that there's only one open at a time document.querySelectorAll('#gridALBUM > div').forEach((D,_,A)=> { D.addEventListener('click', e=> { if (D.classList.toggle('span')) A.forEach(d =>{ if(d!=D) d.classList.remove('span') }); }) }) #gridALBUM { background : lightblue; margin : 50px auto; max-width : 908px; display : grid; grid-gap : 0 4px; grid-template-columns: repeat(3, 300px); } #gridALBUM > div { border : 1px solid black; display : flex; } #gridALBUM > div:not(.span) > div { display : none; } #gridALBUM > div.span { grid-column : 1 / 4; background-color : #47479c; } 1 one 2 two 3 three 4 four 5 five 6 six 7 seven 8 eight 9 nine 10 ten is there a way so that when I click on one of them, itll bring the next one up to fill the gap? I don't know if that makes sense... Let's say I click #two, there'll be two empty spaces besides #one.. is there a way to bring #three and #four to fill up that space?
tagged with: javascript
upvote count: 1
answer count: 2
score: 1
accepted answer: http://stackoverflow.com/a/79057796
possible better answer: http://stackoverflow.com/a/79057808
tagged with: css
tagged with: css-grid
favorite count: 0
has answer: http://stackoverflow.com/a/79057796

css-gradients
tags question: http://stackoverflow.com/q/79013129
type: Tag
tag name: css-gradients
tags question: http://stackoverflow.com/q/79411825
tags question: http://stackoverflow.com/q/79285035
tags question: http://stackoverflow.com/q/79443212

http://stackoverflow.com/comment/139300084
type: Comment
comment on: http://stackoverflow.com/q/79003946
type: QuestionComment
score: 2
has text: See [ask] and take the [tour]. Your code needs to be here. Because your question is simply HTML and CSS you can create a working demo using the editor.

http://stackoverflow.com/a/79007689
downvote count: 0
type: Answer
accepted answer of: http://stackoverflow.com/q/78997818
upvote count: 1
has comment: http://stackoverflow.com/comment/139320264
has comment: http://stackoverflow.com/comment/139320325
score: 1
has body: Alternative Solution: Use Google App Script to Get the Signature I created a script that automatically sends all of the details including the signature to Google Sheet. Kindly follow the step by step procedure below. Steps: Create a folder on your Google Drive and make the folder Anyone with the link and select Viewer. Create a Spreadsheet where you will store the data and input the headers of each value. Open AppScript via Extensions at the menu bar of the Spreadsheet. Paste this code on Code.gs: function doGet() { // Creates and returns an HTML output from the 'form' file, setting the title of the window. return HtmlService.createHtmlOutputFromFile('form') .setTitle('Form with Signature'); } function doPost(e) { // Extracts form data from the event object (e). const formData = e.parameter; // Open the Google Sheet const sheet = SpreadsheetApp.getActiveSpreadsheet(); // Gets the active spreadsheet. const sheetName = sheet.getSheetByName("Sheet1"); // Gets the specific sheet named "Sheet1". // Retrieve the signature from the form data const signature = formData.signature; let fileUrl = ''; // Variable to store the URL of the uploaded signature file. let blob = null; // Variable to hold the blob of the image. let id = null; // Variable to hold the ID of the uploaded file. if (signature) { // If there is a signature, process it // Remove the prefix "data:image/png;base64," to get the base64 string. const base64Image = signature.split(',')[1]; // Convert the base64 string to a Blob object (binary large object). blob = Utilities.newBlob(Utilities.base64Decode(base64Image), 'image/png', 'signature.png'); // Save the Blob to Google Drive in a specific folder (use your folder ID). const folder = DriveApp.getFolderById('REPLACE-WITH-YOUR-ACTUAL-FOLDER-ID'); // Replace with your folder ID. const file = folder.createFile(blob); // Creates the file in the folder. fileUrl = file.getUrl(); // Gets the URL of the newly created file. // Extract the file ID from the URL id = fileUr…
answers question: http://stackoverflow.com/q/78997818
type: AcceptedAnswer
has comment: http://stackoverflow.com/comment/139319975

http://stackoverflow.com/comment/139198002
type: QuestionComment
comment on: http://stackoverflow.com/q/78948544
type: Comment
has text: @C3roe and without the `filter: blur(8px)` the edges look fine
score: 0

http://stackoverflow.com/comment/139197998
comment on: http://stackoverflow.com/q/78948123
type: Comment
score: 0
has text: Ok so issue may be not in your django webapp, the server from where you are loading image from may not have header `Access-Control-Allow-Origin: *`. to check if has, you can go to the image url and open inspect and go to network and refresh the page to capture the request, find the packet requesting image, and look it's response, it may not have: Access-Control-Allow-Origin: *
type: QuestionComment

http://stackoverflow.com/a/78941800
has comment: http://stackoverflow.com/comment/139185791
type: Answer
score: 0
answers question: http://stackoverflow.com/q/78941752
has comment: http://stackoverflow.com/comment/139229571
has body: To answer your newer question, you changed the height to the element that holds the hamburger button (Never phrased it like that. That's smart). Changing the height pushed the menu element down.

http://stackoverflow.com/q/78905493
has body: I have button, which looks like 3 dots to open modal with 2 other buttons. Should I make this 3 dots button just a div? What is the best decision so code will be semantically corrent? jsx file: setModal(s=>!s)} style={{background:'none', border:'none'}}> <circle cx="3" cy="3" r="3" fill="#EDEFEE"/> <circle cx="15" cy="3" r="3" fill="#EDEFEE"/> <circle cx="27" cy="3" r="3" fill="#EDEFEE"/> {modal || Edit Delete } CSS file: .reservations-item-button{ position: relative; } .reservations-item-modal { /*border: 1px solid rgb(255, 199, 0);*/ background-color: #51724B; padding: 10px 20px; display: flex; flex-direction: column; align-items: end; justify-content: end; position:absolute; top:18px; right:0px; } .reservations-item-modal button{ color:#EDEFEE; }
has comment: http://stackoverflow.com/comment/139119018
tagged with: css
has title: Relative button contains modal with button and it causes validateDOMNesting(...): cannot appear as a descendant of
type: UnansweredQuestion
tagged with: semantic-ui-react
type: Question
tagged with: simplemodal
tagged with: semantic-markup
tagged with: http://stackoverflow.com/tag/html
answer count: 1
has comment: http://stackoverflow.com/comment/139118991
has answer: http://stackoverflow.com/a/78913126
score: 0

http://stackoverflow.com/comment/139222093
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78959474
has text: The issue was caused by `{'\u00A0'}` replacing it with `{' '}` fixed the issue

http://stackoverflow.com/q/78976713
tagged with: css
tagged with: mern
tagged with: react-fullstack
type: Question
answer count: 1
has title: CSS files are getting applied to all the components in my react app, even after using CSS modules
has body: I am making a react web-page about a Finance Planner and i have 4 components: Dashboard, Homepage, Login-page, and SignUp-page. What happened is i first coded the pages in basic HTML and CSS and then had to migrate to react. Now the problem I'm facing is that the CSS files which are meant for specific pages are getting applied to all the pages. I am new to react and don't know how to solve this. I am attaching a picture of my directory and all the components: This is what my inspect says about the styles that are getting applied to my Homepage: I have tried using CSS modules. Before using CSS modules the css files for Homepage were overriding the css for all the other pages. I asked ChatGPT for help and it suggested using CSS modules. So after using CSS modules I was expecting for the problem to be solved but now the CSS for the SignUp page are overriding all the other css. DashGeneral.module.css: .body { background-color: lightgray !important; margin: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } .mainContent { margin-left: 150px; /* Adjusted to match the sidebar width */ padding: 20px; } Header.module.css: /* styles.module.css */ .header { height: 125px; display: flex; flex-direction: row; justify-content: space-between; position: fixed; top: 0; left: 0; right: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-weight: lighter; background-color: white; border-bottom: 1px solid transparent; z-index: 100; } .leftSection { display: flex; align-items: center; } .logo { height: 80px !important; width: auto !important; margin-left: 50px; } .logo:hover { cursor: pointer; } .nameText { font-size: 30px; margin-left: 20px; font-weight: bold; color: black; } .nameText:hover { cursor: pointer; } .rightSection { display: flex; align-items: center; flex-direction: row…
type: AnsweredQuestion
tagged with: reactjs
score: 0
has comment: http://stackoverflow.com/comment/139250435
has answer: http://stackoverflow.com/a/78976909
accepted answer: http://stackoverflow.com/a/78976909

http://stackoverflow.com/comment/139238784
score: 0
type: QuestionComment
has text: However, I believe the problems are with small screen devices, which require scrolling down to view the content of the last row table. @Barmar
comment on: http://stackoverflow.com/q/78970518
type: Comment

http://stackoverflow.com/a/78912541
upvote count: 1
has body: I would use absolute positioning or fixed positioning to solve this. When you assign a percentage value to the position (eg left or top) of an absolute/fixed positioned element, those values are relative to the nearest positioned ancestor (if there is one), or to the initial containing block (which is the same size as the viewport). If you combine this with transform: translate(-50%, -50%) then the left and top positions will effectively refer to the centre of each element, rather than to its top left corner. Left effectively becomes cx – the horizontal centre, and top effectively becomes cy – the vertical centre. img, p { position: fixed; transform: translate(-50%, -50%); } img { width: 50px; } p { margin: 0; padding: 0.5em; color: white; text-align: center; } .i1 { left: 10%; top: 10%; border: 3px solid red; } .i2 { left: 90%; top: 10%; border: 3px solid green; } .i3 { left: 50%; top: 50%; border: 3px solid orange; transform: translate(-50%, -50%) rotate(45deg) scale(1.5); } .i4 { left: 10%; top: 90%; border: 3px solid blue; } .i5 { left: 90%; top: 90%; border: 3px solid gold; } .i6 { left: 0%; top: 0%; border: 3px solid lime; } .i7 { left: 100%; top: 0%; border: 3px solid magenta; } .i8 { left: 100%; top: 100%; border: 3px solid pink; } .i9 { left: 0%; top: 100%; border: 3px solid cyan; } .p1 { left: 20%; top: 20%; background: red; } .p2 { left: 80%; top: 20%; background: green; } .p3 { left: 20%; top: 80%; background: blue; } .p4 { left: 80%; top: 80%; background: gold; } one two two three three three four four four four After running this snippet, use the full page link to test the responsive behaviour.
score: 1
type: Answer
downvote count: 0
answers question: http://stackoverflow.com/q/78912512

http://stackoverflow.com/q/79039846
has answer: http://stackoverflow.com/a/79085404
score: 1
favorite count: 0
type: Question
has answer: http://stackoverflow.com/a/79039854
upvote count: 2
downvote count: 1
tagged with: media-queries
has title: Problem with conditional CSS media query for mobile phones
tagged with: responsive-design
answer count: 3
tagged with: css
has body: I am trying to have two columns in landscape mode or one column in portrait or landscape mode on phones. For some reason I am getting one column on my iPad Pro when in portrait mode. Can anyone help me understand why? Tested on the largest iPad Pro and an iPhone 12 mini, both machines in both orientations. The iPhone is correct, one column in portrait, two in landscape. The iPad is two columns in landscape (correct), but one column in portrait (incorrect). This is my CSS: article { max-width: 99%; columns: 2; } @media only screen and (min-width: 375px) and (orientation: portrait) { article { columns: 1; } }
has answer: http://stackoverflow.com/a/79082156
tagged with: css-selectors
type: UnansweredQuestion

http://stackoverflow.com/q/78970968
has answer: http://stackoverflow.com/a/79281413
type: UnansweredQuestion
has title: HTML Div container with rounded border & overflow:hidden, creates white pixel inside when another div displays background
upvote count: 1
score: 1
favorite count: 0
type: Question
has answer: http://stackoverflow.com/a/78971237
tagged with: http://stackoverflow.com/tag/html
downvote count: 0
has body: Here is the code: .container { height: 300px; width: 300px; border: 2px solid red; border-radius: 15px; overflow: hidden; } .background { background: green; height: 100%; width: 100%; } &lt;div class="container"&gt; &lt;div class="background"&gt;&lt;/div&gt; &lt;/div&gt; It produces the the view like this: How can I get rid of the white ghost pixels between the background and the border?
answer count: 2
tagged with: css

http://stackoverflow.com/q/78917311
tagged with: elementor
downvote count: 1
accepted answer: http://stackoverflow.com/a/78917605
favorite count: 0
tagged with: password-protection
type: Question
has title: How do I style a Wordpress page protect form
has comment: http://stackoverflow.com/comment/139140569
answer count: 1
type: AnsweredQuestion
tagged with: wordpress
score: 0
has body: I have been trying to change the style of this Wordpress page protect form. The Wordpress page protect function is enabled and the password is set using Wordpress, however I previously had the PPWP plugin installed and with the plugin I was able to make changes to the look and feel of the form. I also have Elementor Pro installed and it appears that PPWP used Elementor to create the form and bypass Wordpress to control the page password protection function. Now that I removed the PPWP plugin I can enable the password protection using Wordpress but can no longer modify the look and feel. I am hoping to be able to use the Hello theme Customizer Additional CSS to make changes to the look of the form by zeroing in on a unique id but cannot figure out how to do that. If I just try to modify the class it also affects other pages and containers on the site. I only want to manipulate the look and feel of this one form. The source code for the form is as follows (https://www.bohoblossomstudio.com/freebies-vault/): This content is password protected. To view it please enter your password below: Password: Screenshot of Form: I am able to add padding using Additional CSS and not affect other containers on the site but not able to center it on the page. I just have this Additional CSS at the moment: div.elementor-4471 { padding:2rem; } This is the CSS shown for this class according to inspector: .elementor-4471 .elementor-element.elementor-element-26d69811{ --display:flex; --flex-direction:row; --container-widget-width:initial; --container-widget-height:100%; --container-widget-flex-grow:1; --container-widget-align-self:stretch; --flex-wrap-mobile:wrap; --background-transition:0.3s; } My HTML, PHP, CSS, and JS skills are rudimentary. Any help figuring out how to use CSS, PHP, or JS to manipulate this would be appreciated. I am hoping to learn from this and then be able to apply it to other such situations. Thank you in advance for any tips, suggestions, and solutions.
has answer: http://stackoverflow.com/a/78917605
upvote count: 1
has comment: http://stackoverflow.com/comment/139140471
tagged with: css

http://stackoverflow.com/comment/139161849
score: 0
comment on: http://stackoverflow.com/q/78928087
has text: You want 8 shapes, but you don't have 8 elements. How do you expect to get from your current situation to the target situation given your current code?
type: QuestionComment
type: Comment

http://stackoverflow.com/q/79000488
has answer: http://stackoverflow.com/a/79001058
tagged with: reactjs
has title: React Youtube card. Playbutton not rendering properly in CSS
score: 0
has comment: http://stackoverflow.com/comment/139301112
tagged with: fluent-ui
answer count: 2
accepted answer: http://stackoverflow.com/a/79005337
tagged with: css
tagged with: fluentui-react
possible better answer: http://stackoverflow.com/a/79001058
has comment: http://stackoverflow.com/comment/139294705
type: Question
has answer: http://stackoverflow.com/a/79005337
type: AnsweredQuestion
has body: I have below example where I am trying to render a YouTube card. The issue I am facing is that the play button white background is not adjusting into the play icon that I am setting through my CSS styles. I am trying to undertand why that is not working. Also, when I hover the card, I should see a background that says Video Test, but that never gets rendered. https://stackblitz.com/edit/ndu1t6?file=src%2Fexample.tsx,src%2FYoutubeCard.tsx Why is this part giving the trouble? '&amp;:hover': { transform: 'scale(1.05)', boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)', }, '&amp;:hover $overlay': { backgroundColor: 'rgba(0, 0, 0, 0.6)', }, '&amp;:hover $textOverlay': { opacity: 1, }, '&amp;:hover $playButton': { opacity: 0, },

http://stackoverflow.com/q/78971420
score: 0
has comment: http://stackoverflow.com/comment/139240626
accepted answer: http://stackoverflow.com/a/78971467
tagged with: css
tagged with: angular
has title: class background image not displayed in div
has comment: http://stackoverflow.com/comment/139240597
has answer: http://stackoverflow.com/a/78971467
type: Question
tagged with: http://stackoverflow.com/tag/html
answer count: 1
type: AnsweredQuestion
has body: I am quite new to web designing and I am having issue with setting an image as background for a div. I then want add some text inside this div which then appear on top the image. I am building an angular project with of course html and css. these are my css and html code snippet .gbimage { height: 100%; width: 100%; color: #314eb8af; } .gbimage div { background-image: url("/assets/img/book1.jpg"); background-repeat: no-repeat; } text number 1 text number 2 text number 3 text number 4 text number 5 This is how add the css file to home.component.ts file. @Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css'] }) export class HomeComponent { } this is my project structure inside the home folder are all the home file mentioned above. inside the assets folder are the images. The home folder is inside the app folder. the assets folder and the app folder are on the same level, inside the src folder, one level above the home folder.

http://stackoverflow.com/q/79013958
type: UnansweredQuestion
score: 1
favorite count: 0
type: Question
has comment: http://stackoverflow.com/comment/139318376
tagged with: http://stackoverflow.com/tag/html
has title: Changing html font height element without changing its width using css
duplicate of: http://stackoverflow.com/q/32932288
has comment: http://stackoverflow.com/comment/139318317
linked to: http://stackoverflow.com/q/32932288
tagged with: css
answer count: 0
downvote count: 0
upvote count: 1
has body: I am making a website where the user can set a font height and width in pixels, and I have started by trying to change the height of a font without modifying its width. Ideally I want to be able to do something like font-height: 20px; and be able to set the height in pixel to be more precise in the dimension of the fonts. I have seen it is possible to change the height of a font using transform: scaleY(1.5); in css, however I couldn't be precise using this method, especially since the font-width in my website would be dynamic as well. Is this possible ?

http://stackoverflow.com/comment/139353732
score: 0
has text: @NINE Thank you for your replay. As you can see I have added a screenshot of the screen sizes. I have 4 png images, one for each of the screens.
type: QuestionComment
type: Comment
comment on: http://stackoverflow.com/q/79033331

http://stackoverflow.com/comment/139323525
comment on: http://stackoverflow.com/a/79015211
has text: It works in concept, but what I was trying for was what I have in my code right now, but when it scales down it continues to shrink. Either that or maybe have the header become centered when it crops itself.
type: Comment
score: 0
type: AnswerComment

http://stackoverflow.com/q/79060918
has answer: http://stackoverflow.com/a/79061341
has comment: http://stackoverflow.com/comment/139405010
score: 1
favorite count: 0
has comment: http://stackoverflow.com/comment/139405296
possible better answer: http://stackoverflow.com/a/79061289
type: Question
has comment: http://stackoverflow.com/comment/139405212
tagged with: http://stackoverflow.com/tag/html
downvote count: 0
has comment: http://stackoverflow.com/comment/139409016
has body: I have a group of form inputs that are displayed on a single line on larger viewports and collapses to a multi-line display on smaller viewports. On the single line display I want a cancel button at the end of the line, but on the multi-line display I want it at the end of the first line, and I want the ends of both lines to be flush with each other. I can do this by having two cancel buttons and conditionally displaying each based on a media query, as my snippet below shows, but it would be better to only have one button and shift its position based on the media query. Is there a way to do that in an example like mine by leveraging flexbox instead of using multiple cancel buttons? It seems like something that should be possible, but I can't imagine exactly how to do it. * { box-sizing: border-box; } input[name="qty"] { width: 36px; } input[name="unit"] { width: 192px; } button { width: 72px; } input[name="item"] { width: 300px; } .group-2 button { display: none; } @media screen and (min-width: 700px) { fieldset { display: flex; } .group-1 button { display: none; } .group-2 button { display: inline; } } CANCEL CANCEL
type: AnsweredQuestion
has comment: http://stackoverflow.com/comment/139404972
accepted answer: http://stackoverflow.com/a/79061341
has comment: http://stackoverflow.com/comment/139409035
upvote count: 1
has answer: http://stackoverflow.com/a/79061289
answer count: 2
tagged with: css
has title: How can flexbox be used to re-arrange elements when responsively switching between single line and multi-line format?
tagged with: flexbox

shiny
type: Tag
tag name: shiny
tags question: http://stackoverflow.com/q/79047983
tags question: http://stackoverflow.com/q/79174512
tags question: http://stackoverflow.com/q/79178146
tags question: http://stackoverflow.com/q/79172175
tags question: http://stackoverflow.com/q/79409347
tags question: http://stackoverflow.com/q/79478884
tags question: http://stackoverflow.com/q/79426554
tags question: http://stackoverflow.com/q/79477853
tags question: http://stackoverflow.com/q/79507818

http://stackoverflow.com/comment/139416211
type: QuestionComment
comment on: http://stackoverflow.com/q/79067407
score: 2
has text: It's being affected by the default `flex-shrink:1` of flex-items.
type: Comment

http://stackoverflow.com/q/79061543
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139406569
has answer: http://stackoverflow.com/a/79064078
has comment: http://stackoverflow.com/comment/139405874
has comment: http://stackoverflow.com/comment/139405404
has comment: http://stackoverflow.com/comment/139406014
has comment: http://stackoverflow.com/comment/139406196
has comment: http://stackoverflow.com/comment/139406103
has comment: http://stackoverflow.com/comment/139406215
has comment: http://stackoverflow.com/comment/139406667
has comment: http://stackoverflow.com/comment/139406600
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139406856
upvote count: 1
has comment: http://stackoverflow.com/comment/139405437
has comment: http://stackoverflow.com/comment/139406017
has body: I am working on a CSS Grid layout where all child elements (buttons) must have the same width and height. I want the number of columns should automatically adjust based on the content of the child elements. Each chile element has a max-height and a minimum-width set on them: In the following snippet, the content of the third button is overflowing its element. My goal is for the content to fit within the element without exceeding the max-height, while ensuring all sibling elements maintain the same width. The number of columns should adjust accordingly to prevent overflow. Fiddle .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); grid-auto-rows: 1fr; gap: 10px; max-width: 500px; } button { max-height: 80px; } Button 1 Description 1 Button 2 Description 2 Button 3 Description 3 Description 3 Description 3 Description 3 Description 3 Button 4 Description 4 Button 5 Description 5 Button 6 Description 6 These are the rules: All buttons should always remain identical in size (width and height). The items height should never exceed 80px. Minimum item width is 130px Is it something that can be achieved using CSS grid? if not what can be an alternative solution?
tagged with: css
has comment: http://stackoverflow.com/comment/139406276
type: Question
has comment: http://stackoverflow.com/comment/139406386
has comment: http://stackoverflow.com/comment/139405532
downvote count: 1
tagged with: css-grid
has title: Dynamically update column count based on child content with max-height on grid items?
score: 0
has comment: http://stackoverflow.com/comment/139405393
favorite count: 0
answer count: 2
has comment: http://stackoverflow.com/comment/139405444
has answer: http://stackoverflow.com/a/79061626

http://stackoverflow.com/comment/139233943
type: Comment
score: 0
type: AnswerComment
has text: Please bear in mind that clearfix is an add-on class created to clear the floating property of an element. While clear: both is property itself used in clearfix to clear the floating property of an element. Clearfix is used to avoid collision or meeting of elements when there is not requirement. You can refer https://www.w3schools.com/css/css_float_clear.asp for better understanding.
comment on: http://stackoverflow.com/a/78967934

http://stackoverflow.com/comment/139322683
type: AnswerComment
has text: @garettlynchirl Re: _"it's specific to one highlight in the paragraph"_ It's a proof of concept. Your homework is to create an object of arrays in which each key of the object matches an individual `class` (or `id`) attached to the relevant ``. Then you'll see you can have any number of `` elements and the text of each will always be recorded. You'll need to take things further yourself from here onwards, but please ask below if you have any further questions. Using the example above, you _can_ do this.
type: Comment
comment on: http://stackoverflow.com/a/79008359
score: 0

http://stackoverflow.com/q/79004964
tagged with: http://stackoverflow.com/tag/html
answer count: 1
type: AnsweredQuestion
has comment: http://stackoverflow.com/comment/139307921
score: -1
downvote count: 2
has body: I am designing a view ads page. I am not super savvy about bootstrap. I want to have a scrollbar in the filters to browse all the contents. The filter should stay fixed while the user browse ads in the main section. View Gallery List Sort Newest Oldest Has Images Reset Apply Toggle Filters As the picture shows: I tried adding "position=fixed" to the sidebar, but the main ads overlapped with the sidebar.
tagged with: css
has title: How to show scrollbar in sidebar
has answer: http://stackoverflow.com/a/79006618
accepted answer: http://stackoverflow.com/a/79006618
upvote count: 1
tagged with: bootstrap-5
favorite count: 0
type: Question
has comment: http://stackoverflow.com/comment/139302044

http://stackoverflow.com/a/78917895
type: Answer
score: 0
answers question: http://stackoverflow.com/q/78917706
accepted answer of: http://stackoverflow.com/q/78917706
type: AcceptedAnswer
has body: By default the SVG is trying to fit and align the lines into the center of the viewBox (or viewport) it is given. You can control this behavior with the preserveAspectRatio attribute on the element. In the example below I've used the value xMidYmin meet which translates to: Align the x axis middle point of the path to the middle point of the view box. Align the y axis middle point of the path to most upper point of the view box. Preserve the aspect ratio and make sure everything is visible within the view box. (similar to how background-size: contain works. body { margin: 0vh 0vw; } .header { position: relative; width: 100%; height: 12vh; background-color: #004d40; display: flex; align-items: center; justify-content: center; overflow: hidden; top: 0; } .line { position: absolute; left: 0; top: calc(50%); width: 100%; height: 0.25vh; background-color: white; z-index: 1; } svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, 0%); z-index: 2; } SVG Header with Half Circle <path d="M0,0 A50,50 0 0,0 100,0" fill="#004d40" stroke="white" stroke-width="3"/>

http://stackoverflow.com/comment/139152379
has text: overflow:hidden on the parent?
type: QuestionComment
comment on: http://stackoverflow.com/q/78923418
score: 1
type: Comment

http://stackoverflow.com/q/78974455
type: UnansweredQuestion
tagged with: http://stackoverflow.com/tag/html
type: Question
linked to: http://stackoverflow.com/q/20598628
has body: it's in the file README.md in GitHub. the tag is displayed as text on the page in GitHub. Please tell me where is the error? I'm a beginner developer. Thanks for your help)) Еhe code works online on the checkout page HTML Learn GIT & Terminal Beginner's Guide to Version Control & Command Line
score: 0
has comment: http://stackoverflow.com/comment/139246044
has title: the style tag is displayed as text on the page
answer count: 0
tagged with: css
duplicate of: http://stackoverflow.com/q/20598628

http://stackoverflow.com/comment/139368319
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/79040884
has text: Please make your code into a runnable snippet which shows the problem. We'll need to see the SVGs and also the code you have shown so far has a problem ( position: relative; margin in .headoutline settings in the CSS) which you need to correct.

http://stackoverflow.com/comment/139148810
type: QuestionComment
comment on: http://stackoverflow.com/q/78916876
has text: OK...It looks end up to use backgroundImge...more than any other. Please tell me if we can use any other good way. I'll return lately.
type: Comment
score: 0

http://stackoverflow.com/q/78933627
has comment: http://stackoverflow.com/comment/139171248
type: Question
answer count: 1
tagged with: http://stackoverflow.com/tag/html
type: AnsweredQuestion
score: 0
has answer: http://stackoverflow.com/a/78933663
accepted answer: http://stackoverflow.com/a/78933663
has comment: http://stackoverflow.com/comment/139171321
tagged with: css
duplicate of: http://stackoverflow.com/q/22092724
has title: Problem understanding alignment issue when using display inline-flex
downvote count: 1
upvote count: 1
favorite count: 0
has body: In my snippet below I have two buttons next to each other where I would expect them to be aligned with my current CSS. They are both inline-flex items which means they should appear inline (which they kind of do) while also working as a flexbox. However, for some unexplainable reason, they are not properly aligned. They have equal height, changing the padding dont help, and there are no other properties as far as I can tell which should change the positioning of the elements, yet for some reason one of them is being pushed up and the other pushed down. I know I can fix this by adding display flex to their container, however, I would like to figure out why this is happening and try to find a solution without their container being a flexbox because this makes no sense to me. button { display: inline-flex; align-items: center; justify-content: center; height: 2.5rem; } svg { height: 1rem; } Some Text <path d="M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z"/>
linked to: http://stackoverflow.com/q/22092724

http://stackoverflow.com/comment/139384894
has text: yeah, you're right :)
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/79048188
type: Comment

http://stackoverflow.com/q/79052206
has title: React not applying css from dependency in production build only
tagged with: css
has comment: http://stackoverflow.com/comment/139389129
tagged with: nginx
has answer: http://stackoverflow.com/a/79063054
accepted answer: http://stackoverflow.com/a/79063054
has comment: http://stackoverflow.com/comment/139408201
has comment: http://stackoverflow.com/comment/139389059
type: Question
has comment: http://stackoverflow.com/comment/139388863
answer count: 1
type: AnsweredQuestion
score: 0
has comment: http://stackoverflow.com/comment/139408094
has body: I'm using 'intl-tel-input' in my react app. I've created a component that encapsulates it and imports the necessary css file: import 'intl-tel-input/build/css/intlTelInput.css When I run the program with npm start it loads fine and the telephone input looks as it should. However, when I build it with npm run build, the css doesn't seem to be applied when looking in dev tools and I get just a list of all of the country codes as text. The build app has the css from the dependency included in the combined main css file, and that file is linked in the index.html. The generated html has the correct css classes and I can pull down the css file correctly from the url in the index.html. It's a fairly basic react app, the npm build config is basic and the same as what a fresh generated react app with typescript would have. I'm confused as to why the built react app doesn't seem to be applying the css to the component correctly. Can anyone help me figure out why the css isn't being applied?
tagged with: reactjs
has comment: http://stackoverflow.com/comment/139389652

http://stackoverflow.com/q/79010172
tagged with: python
tagged with: django
score: 0
has comment: http://stackoverflow.com/comment/139311930
answer count: 0
tagged with: css
has comment: http://stackoverflow.com/comment/139311928
has comment: http://stackoverflow.com/comment/139315022
type: UnansweredQuestion
has title: Loading Css in django template
has comment: http://stackoverflow.com/comment/139311517
type: Question
has body: Using Django template, i made some HTML files and one base.html, while I'm in local, there are zero issues, everything loads perfectly, while I'm production however, the base.html css won't load, everything else loads, images , js, and even the css of other stuff ( i ran collectstatic ) but this particular one doe not load, i load it up using tags <link rel="stylesheet" href={% static "css/style.css" %} exactly like this in other templates, all the css files are inside a folder called ***/public_html/static/css and in my settings.py, i have this line STATIC_ROOT = '/somepath/public_html/static' after running collectstatic, Django put all of my img, css,js and vids and put them inside this folder so : /somepath/public_html/static/ |img/ |vid/ |css/ |js/ what am i doing wrong? why every things load properly including all the img and css but the css of Django templatebase.html doesn't ? base.html is the template file that most template extend from it using Django template extend feature. So far i haven't tried anything special, if i load the css manually, it works, it just that when i extend the html using Django template it doesn't, I'm using Django version 3.x.x however and not the latest one on a domain with cPanel. Edit: some stuff i forgot to include. the folder structure: ├── my_app │ ├── __init__.py │ ├── __pycache__ │ ├── asgi.py │ ├── setting │ ├── settings.py │ ├── urls.py │ └── wsgi.py ├── db.sqlite3 ├── home │ ├── __init__.py │ ├── __pycache__ │ ├── admin.py │ ├── apps.py │ ├── forms.py │ ├── migrations │ ├── models.py │ ├── package │ ├── templatetags │ ├── tests.py │ ├── urls.py │ └── views.py ├── manage.py ├── media │ └── blog_tumb ├── requirements.txt ├── static │ ├── css │ ├── img │ ├── js │ └── vid ├── templates │ ├── accounts │ └── home Aside from Django and pillow I'm not using any other modules.

http://stackoverflow.com/comment/139128909
comment on: http://stackoverflow.com/q/78909194
type: Comment
score: 0
has text: `transform: translate(-50%, -50%); /* the transformation required for the circular ring to be exactly in the middle. */` <-- This is incorrect and wrong (and using `transform:` will compromise visual-equaslity because of how the browser's compositor has to work). Instead, all you need to do is use a parent with `display; flex-column;`.
type: QuestionComment

http://stackoverflow.com/comment/139264894
score: 2
type: Comment
has text: If you see a typo, post a comment and vote to close for a typo. Don't post an answer.
type: AnswerComment
comment on: http://stackoverflow.com/a/78975360

user-interface
tags question: http://stackoverflow.com/q/79031966
type: Tag
tag name: user-interface
tags question: http://stackoverflow.com/q/78937649
tags question: http://stackoverflow.com/q/78978467
tags question: http://stackoverflow.com/q/79025588
tags question: http://stackoverflow.com/q/78941051
tags question: http://stackoverflow.com/q/78929676
tags question: http://stackoverflow.com/q/79151958
tags question: http://stackoverflow.com/q/79075952
tags question: http://stackoverflow.com/q/79080304
tags question: http://stackoverflow.com/q/79184839
tags question: http://stackoverflow.com/q/79104161
tags question: http://stackoverflow.com/q/79399592
tags question: http://stackoverflow.com/q/79348121
tags question: http://stackoverflow.com/q/79303715
tags question: http://stackoverflow.com/q/79301712
tags question: http://stackoverflow.com/q/79347841
tags question: http://stackoverflow.com/q/79504394
tags question: http://stackoverflow.com/q/79532988
tags question: http://stackoverflow.com/q/79460735

http://stackoverflow.com/comment/139155223
score: 0
has text: @htor: That does not work neither!
type: QuestionComment
comment on: http://stackoverflow.com/q/78912045
type: Comment

http://stackoverflow.com/a/79038098
score: 1
has body: You should create an element as overlay in HTMl with position: fixed; inset: 0; and hide it by default. You then can use in JS classList.remove() to remove the class that hides the overlay so it will be visible. You need to stop the interval if the time reaches 0 with clearInterval. I also refactored your code: window.addEventListener('DOMContentLoaded', function() { startTimer(); }) function startTimer() { let time = 10; // reduced the timer for demo reasons const timerInterval = setInterval(function () { let minutes = twoDigitNumber(parseInt(time / 60)); let seconds = twoDigitNumber(time % 60); timer.value = `${minutes}:${seconds}`; if (time === 0) { clearInterval(timerInterval); overlay.classList.remove('d-none'); } time--; }, 1000); } function twoDigitNumber(number) { return number.toString().padStart(2,0); } #overlay { position: fixed; inset: 0; display: flex; justify-content: center; align-items: center; &.d-none { display: none; } } Refactor Informations You should not use on events such as onload. Those events can only exist once and they will overwrite each other. It might not seem important in your "little" project but it will teach you wrong habits. You should always use addEventListener to append events. That way you will not overwrite other events that might have been added. A common reason for an unintentional overwriting of an event is another script often written by other programmers. You should and do not need to hand over parameters all the time. The only place where this might happen is with the usage of a config file. In that case you should not use ladder logic but object-oriented programming using Class. With the ladder logic you used, you should have the time variable (actually a let not a var) inside your discrete function. Same for the element which should be a const! However, referencing that element is not needed as you can call elements on their id directly in ES6. Do not write repetitive code such as: minutes = minutes < 10 ? "0" + minut…
has comment: http://stackoverflow.com/comment/139364388
type: AcceptedAnswer
downvote count: 0
type: Answer
has comment: http://stackoverflow.com/comment/139364597
upvote count: 1
has comment: http://stackoverflow.com/comment/139364453
answers question: http://stackoverflow.com/q/79038018
has comment: http://stackoverflow.com/comment/139364342
accepted answer of: http://stackoverflow.com/q/79038018

http://stackoverflow.com/comment/139412489
score: 0
comment on: http://stackoverflow.com/q/79060259
type: QuestionComment
has text: which mobile browser shows the issue?
type: Comment

http://stackoverflow.com/comment/139136961
comment on: http://stackoverflow.com/a/78915276
has text: @MarkSchultheiss Done – I didn't want to change any original code (just add that one CSS rule), but of course duplicate IDs ("#hamburger_menu") are invalid HTML, so I changed those to a class with the same name.
score: 1
type: Comment
type: AnswerComment

http://stackoverflow.com/a/78910710
has body: You have set right property to -300px instead of -200px. I believe that is the problem. Here is a snippet for you to test corrected version: document.querySelector("#nav-button").addEventListener("click", ()=> { document.querySelector("#navigation").classList.toggle("open") }) #container{ width:100%; height:100%; } #navigation{ position: absolute; top: 80px; /* i think this blank space is for heading */ right: -200px; width: 200px; display: flex; padding-top: 40px; background-color: #071e244b ; flex-direction: column; align-items: left; transition: right 0.3s ease-in-out; height: 100vh; } #navigation.open { right: 0; } Document Open Navigation
answers question: http://stackoverflow.com/q/78910404
type: Answer
score: -1
downvote count: 1
upvote count: 0

http://stackoverflow.com/a/78930608
accepted answer of: http://stackoverflow.com/q/78930122
score: 2
upvote count: 2
type: AcceptedAnswer
downvote count: 0
type: Answer
has comment: http://stackoverflow.com/comment/139165817
has body: You can try with your colors in the background, it is built using simple CSS with filter and backdrop-filter, please edit this code in your own file because the width of the result on this page is small. .grad-sec{ display:inline-block; width:100vw; height:100vh; position:relative; z-index:0; } .blue,.yellow,.red{ position:absolute; width:300px; height:300px; background:blue; top:20px; left:20px; border-radius:100%; filter:blur(200px); opacity: 0.2; } .yellow { background: yellow; top: 290px; left: 230px; } .red { background: red; bottom: 70%; right: 20px; left: auto; top: auto; } .grad-sec::before { position: absolute; content: ''; left: 0; right: 0; top: 0; bottom: 0; backdrop-filter: blur(200px); -webkit-backdrop-filter: blur(100px); background-color: rgba(255, 255, 255, 0.75); } &lt;div class="grad-sec"&gt; &lt;div class="blue"&gt;&lt;/div&gt; &lt;div class="yellow"&gt;&lt;/div&gt; &lt;div class="red"&gt;&lt;/div&gt; &lt;/div&gt;
answers question: http://stackoverflow.com/q/78930122

http://stackoverflow.com/comment/139238986
type: Comment
has text: There seems to be some context missing from your code. With just the html+css provided, all of your divs would have a height and width of 0px; Some additional context and perhaps a screenshot would be helpful.
type: QuestionComment
comment on: http://stackoverflow.com/q/78970645
score: 1

http://stackoverflow.com/q/78996939
answer count: 0
tagged with: css
type: UnansweredQuestion
tagged with: layout
has title: Phantom lines on table when zoom in
type: Question
has comment: http://stackoverflow.com/comment/139287330
tagged with: http://stackoverflow.com/tag/html
score: 0
has body: Pre-requires: all table borders should be set to 0 or none. When zoom in via touchpad you can see a background color trought small gaps between table cells. Example table from Angular Material Documentation with darkcyan background-color on table header cells You can test on this JSFiddle or Table | Angular Material Docs or any other documentation with tables. In case when all columns have a fixed width that gaps appear also when zooming via browser zoom (ctrl + mouse scroll || ctrl + "plus"(+) Tested in Google Chrome, Opera, Microsoft Edge Anyone knows how to fix it? Set cellpadding=0 and cellspacing=0 doesn't helps.

http://stackoverflow.com/a/79007763
answers question: http://stackoverflow.com/q/79007402
type: Answer
score: 0
has body: You have to leverage overflow: hidden on the container mat-mdc-dialog-content so that there is no scroll bar. After that we set the same container to flex so that the children take the height of the parent element. Finally we use overflow-y: auto, so that we get the scrollbar on the container below the tabs. @import '@angular/material/prebuilt-themes/azure-blue.css'; .mat-mdc-dialog-container .mat-mdc-dialog-title + .mat-mdc-dialog-content { overflow: hidden; display: flex; flex-direction: column; } .mat-mdc-dialog-content &gt; :first-child { display: flex; overflow: hidden; } .mat-mdc-tab-group-dynamic-height .mat-mdc-tab-body-content { overflow-y: auto; } Stackblitz Demo

http://stackoverflow.com/comment/139390717
has text: "*I can do that in the microsoft word because it has the strike through and double strike through features*" that's not how you should do it even in Word, though. You need to use the actual symbol, not mash up some random formatting that sort of approximates it.
score: 1
type: Comment
type: QuestionComment
comment on: http://stackoverflow.com/q/79053527

http://stackoverflow.com/comment/139386666
has text: Take a look in your browser devtools inspect facility to see where (if anywhere) your after pseudo element (not pseudo class) is and what dimensions it has. There are a few problems e.g. the pseudo element has no height, it's not positioned relative to its host element (did you want it to be?).
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/79049909

http://stackoverflow.com/q/79024470
tagged with: javascript
has title: Full screen videos/images with "scrollbar-gutter: stable both-edges"
answer count: 2
has answer: http://stackoverflow.com/a/79024620
tagged with: css
type: UnansweredQuestion
upvote count: 0
favorite count: 0
score: -2
has comment: http://stackoverflow.com/comment/139337793
has comment: http://stackoverflow.com/comment/139337653
type: Question
downvote count: 2
has comment: http://stackoverflow.com/comment/139337889
tagged with: http://stackoverflow.com/tag/html
has body: I set "scrollbar-gutter: stable both-edges" for my website for a symmetric look but I need to display a video that covers the whole screen width including the space on the left created by "both-edges" - the scrollbar itself on the right is fine (this will be a sort of landing page but with content below it). This is demonstrated in the code snippet at the bottom. It shows the picture with the extra space on the left. What I wanted to do was remove that extra space from the picture/video but keep it for the rest of the content below ("Blah blah" etc). This would have meant that the content would have been centred relative to the whole screen and not the screen-width with scrollbar-width subtracted. :root{ scrollbar-gutter: stable both-edges; } body{ margin: 0; width: 100%; height: 10000px; } img{ width:100%; } div{ width: 100%; margin: auto; text-align: center; padding-top: 40px; } Test Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah
has answer: http://stackoverflow.com/a/79025090

http://stackoverflow.com/comment/139221805
score: 0
comment on: http://stackoverflow.com/q/78957189
type: QuestionComment
has text: » It has the major benefit of allowing complete control over any styling aspect, but it comes with two major drawbacks: 1. you obviously need to do the whole style implementation by code, losing the convenience of style sheets syntax; 2. it's almost completely incompatible with QSS, as any widget affected by even just one QSS rule would have a private QStyleSheetStyle that completely overrides the proxy style. If you're not experienced with QStyle, dynamically creating those images is the only acceptable solution.
type: Comment

http://stackoverflow.com/q/79029341
has answer: http://stackoverflow.com/a/79029428
downvote count: 1
upvote count: 0
has body: I have this as a gradient currently: background: linear-gradient( to right, rgba(var(--white-rgb), 1) 0%, rgba(var(--white-rgb), 0) 100% ); With this, on the left side it fades to pure white, and on the right it fades to transparent. If you have images paginating left, then what this looks like is this: The image here is dark gray (it could be any image, this is just a placeholder), and the content background is different colors depending on where the paginating image scroller is used (in this case it's light gray, but could be green, red, blue, or other unknown colors). We originally had the background always be white, so fading to pure white made sense. But now it doesn't look right. How can I say "fade the underlying content to transparent" on the left? Basically, start from transparent gradient on the right, then fade the background content to transparent on the left. Is something like that possible? Otherwise, I might need to tell the gradient in every random case what the background color is to fade into, which will take some heavy refactoring probably, so wondering if I can avoid going down that road. ChatGPT said to try this: mask-image: linear-gradient( to right, rgba(0, 0, 0, 0) 0%, /* Fully transparent on the left */ rgba(0, 0, 0, 1) 100% /* Fully opaque on the right */ ); But that doesn't work, my DOM structure is something like this: I would add that mask on paginate-left, but it doesn't apply to the way beneath it seems.
favorite count: 0
has comment: http://stackoverflow.com/comment/139381431
has title: How to do a linear gradient which fades to transparent, not white, in CSS?
possible better answer: http://stackoverflow.com/a/79029453
tagged with: gradient
type: Question
type: AnsweredQuestion
has comment: http://stackoverflow.com/comment/139346514
accepted answer: http://stackoverflow.com/a/79029428
linked to: http://stackoverflow.com/q/9525215
answer count: 2
score: -1
has answer: http://stackoverflow.com/a/79029453
duplicate of: http://stackoverflow.com/q/9525215
has comment: http://stackoverflow.com/comment/139381438
has comment: http://stackoverflow.com/comment/139346502
tagged with: css

http://stackoverflow.com/comment/139310323
score: 1
has text: Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/) using the `<>` icon. See [**How to create a Minimal, Reproducible Example**](http://stackoverflow.com/help/reprex)
type: Comment
type: QuestionComment
comment on: http://stackoverflow.com/q/79009569

http://stackoverflow.com/q/79053510
has body: Similar Dynamically created SVG elements are not rendered by the browser but my code already corresponded to their solutions. I am trying to use SVG markup in my HTML in order to render some texts. The problem was very tricky because I just realized that the issue is when generating the SVG programmatically. The markup What I want to end up in my page is this fragment of code: html { background-color: #151515; color: white; background-image: url(https://picsum.photos/id/210/500/500); background-size: 500px 500px; } body { margin: 0; padding: 0; } #navbar { font-family: 'Katahdin Round', 'Arial Narrow Bold', sans-serif; list-style: none; } #navbar .letter-path { fill: white; stroke: transparent; stroke-width: 2.5; stroke-dasharray: 400; stroke-dashoffset: 400; transition: fill 0.1s ease-in 0.1s, stroke 0.25s ease-out, stroke-dashoffset 0s linear 0.25s; } #navbar svg:hover .letter-path { fill: rgba(255, 255, 255, 0.3); stroke: white; stroke-dashoffset: 0; transition: fill 0.25s ease-out, stroke 0s, stroke-dashoffset 0.5s ease-in 0.1s; } #blurred-clip-background { clip-path: url(#blur-letter-paths); filter: blur(3px); } <path id="letter-path-2" class="letter-path-X" d="M38.05 23.104l11.987-17.72c1.356-1.981 3.336-3.024 5.733-3.024h13.342c3.857 0 5.212 2.502 3.023 5.733L49.933 40.615l22.515 33.148c2.19 3.231.833 5.733-3.023 5.733H56.083c-2.397 0-4.378-1.042-5.734-3.023l-12.3-18.241-12.404 18.241c-1.356 1.98-3.335 3.023-5.733 3.023H6.57c-3.857 0-5.212-2.502-3.023-5.733l22.515-33.148L3.86 8.093C1.67 4.862 3.027 2.36 6.883 2.36h13.342c2.396 0 4.378 1.043 5.733 3.023z" transform="translate(131.286, 0)"> If you take this and paste it inside a page, all is fine and the text is rendered! Creating the SVG dynamically But I want to create this content using JavaScript, so I have this: // Dictionary of paths for each letter const letterPaths = { E: "M56.6 74.805c0 3.127-1.564 4.69-4.692 4.69H7.191c-3.127 0-4.691-1.563-4.691-4.69V7.051c0-3.127 1.563-4.69 4.69-4.69h44.718c3.128 0 4…
tagged with: css
has title: Dynamically created SVG <imgae> element not rendered by the browser
tagged with: dynamic
type: UnansweredQuestion
score: 1
favorite count: 0
linked to: http://stackoverflow.com/q/41161094
has comment: http://stackoverflow.com/comment/139391746
type: Question
has answer: http://stackoverflow.com/a/79053907
answer count: 1
has comment: http://stackoverflow.com/comment/139395322
has comment: http://stackoverflow.com/comment/139390823
tagged with: http://stackoverflow.com/tag/html
downvote count: 0
tagged with: http://stackoverflow.com/tag/svg
tagged with: javascript
upvote count: 1

http://stackoverflow.com/a/79119678
type: Answer
score: 0
has body: I have figured out an acceptable solution that does require a bit of javascript, I use a grid layout and each tube spans a number of rows according to the capacity. This lays out tubes in a more dense arrangement when there are many different sizes but more importantly I can trivially count the effective number of rows in javascript. The CSS looks something like this, where --n-rows is the variable that will set in javascript on resize: .GameBoard { display: grid; /* this should get immidiately overridden by the javascript resize listener, if it fails to get the proper number this is the effective default */ --n-rows: 10; --n-columns: auto-fill; /* the main sizing constraints are here */ /* the column size maximum is the main width of the tubes including margin, the target is the minimum size for smaller screens and and the min is based on the width of the label + margins and border and padding etc to overrule the minimum screen portion if it would cutoff the labels */ grid-template-columns: repeat(var(--n-columns), clamp(2ch, 18vw, calc(var(--ball-size) + 2 * (var(--tube-border-size) + var(--tube-padding-size))))); /* the rows roughly specify the height of the balls with some offset due to margins and borders of the tubes, the minimum is just a bit more than the height of the label to try to account for marigns the default is some fraction of the screen divided by the calculated number of rows to keep the whole grid on the screen, and the maximum is the size that should be taken up if there is plenty of room on the screen and the game doesn't need the full height (typical on desktop) */ grid-auto-rows: clamp(1.5em, calc(90vh / var(--n-rows)), var(--ball-size)); grid-auto-flow: dense; } .Tube { /* tube spans over rows based on capacity */ grid-row-end: span var(--capacity); } In the javascript there is a callback that just gets the number of rows by reading the grid-template-rows and writes that as a css variable class GameUI { constructor(...){ this.element = docum…
answers question: http://stackoverflow.com/q/79058041

http://stackoverflow.com/comment/139245805
type: Comment
has text: @mrconcerned It is not. If you shrink the browser windows it leaves some space to the right side of the text. I uploaded a second photo. I hope that makes it clear
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78971876

http://stackoverflow.com/q/79028325
linked to: http://stackoverflow.com/q/21275565
favorite count: 0
downvote count: 0
tagged with: google-chrome-devtools
has body: In this answer Can I use the auto value with the calc() property? the author says that auto is not valid value for the calc() expression. Ok, fine. But the problem I have is that I have a CSS custom property that I want to give a default value that will cancel the calc(). What I have is this CSS: .terminal { --terminal-line: calc(var(--size, 1) * (16px / var(--pixel-density, 1)) + 1px / var(--pixel-density, 1)); height: auto; /* force size when user add --rows */ height: calc((var(--terminal-line) * var(--rows)) + (var(--padding, 10) * 2px)); } @property --rows { syntax: '&lt;number&gt;'; inherits: true; } and the custom property lack initial-value and according to Google Dev Tools it is not actually registered. So I added this: @property --rows { syntax: '&lt;number&gt; | auto'; inherits: true; initial-value: auto; } This seems to work as I want (tested in Firefox and Chrome). But the problem is Chrome Dev Tools. This is how the property looks like: It looks like the height is applied. Similar effect is in Firefox: So the question is: what is the actual value of the height property when calc() is invalid? Is it auto from the strike through rule, or some other default when value is invalid? What that be? I want to make sure that my code is correct.
tagged with: css-variables
accepted answer: http://stackoverflow.com/a/79028457
has title: What is a result of the calc() when one of its elements is invalid value?
tagged with: css
type: Question
upvote count: 2
answer count: 1
score: 2
type: AnsweredQuestion
has answer: http://stackoverflow.com/a/79028457

asp.net-core
tags question: http://stackoverflow.com/q/78919730
tags question: http://stackoverflow.com/q/79066620
tags question: http://stackoverflow.com/q/79052029
tags question: http://stackoverflow.com/q/78987974
tag name: asp.net-core
type: Tag
tags question: http://stackoverflow.com/q/78932108
tags question: http://stackoverflow.com/q/79205940
tags question: http://stackoverflow.com/q/79094021
tags question: http://stackoverflow.com/q/79121410
tags question: http://stackoverflow.com/q/79135033
tags question: http://stackoverflow.com/q/79116921
tags question: http://stackoverflow.com/q/79186768
tags question: http://stackoverflow.com/q/79344069
tags question: http://stackoverflow.com/q/79390317
tags question: http://stackoverflow.com/q/79321500
tags question: http://stackoverflow.com/q/79357257
tags question: http://stackoverflow.com/q/79443700
tags question: http://stackoverflow.com/q/79501873
tags question: http://stackoverflow.com/q/79495828
tags question: http://stackoverflow.com/q/79543693
tags question: http://stackoverflow.com/q/79482611

http://stackoverflow.com/q/78928853
answer count: 0
has comment: http://stackoverflow.com/comment/139163959
type: UnansweredQuestion
type: Question
tagged with: http://stackoverflow.com/tag/html
score: 0
tagged with: javascript
has title: Smooth slide on details disclosure not working (using jQuery slideUp)?
has body: I'm sure Im just missing something silly here, but I'm pulling my hair out trying to understand what's going wrong here. I have a details disclosure section that I'm trying to use slideUp and slideDown to enable a smooth transition when a user clicks on the tab, whether they are opening or closing it. And half of it is done, it slides open fine, but it just snaps itself back shut. I added console logs to make sure nothing weird was going on, but no errors and console logs all showing fine makes this tricky to figure out. Code and Codepen below. Thanks in advance for any advice! Detail Header Vestibulum vitae suscipit magna, in vehicula neque. Morbi ut dolor lorem. Quisque mattis metus rhoncus massa mollis imperdiet. Sed eleifend risus metus, id suscipit nisi dictum id. Vestibulum rhoncus dui vitae nunc pellentesque, vitae pellentesque neque condimentum. And the accompanying SCSS: .resource, .outreach { .outreach-tab { summary { padding: 20px; background: #ccdbe5; border-bottom: 1px solid #333333; cursor: pointer; font-size: 120%; font-weight: bold; text-transform: uppercase; position: relative; } .outreach-details { background: #ffffff; padding: 20px; margin-top: 10px; display: none; /* Hidden by default */ } } } And then finally the JS: jQuery(document).ready(function ($) { $("details").on("toggle", function () { const detailsElement = $(this).find(".outreach-details"); if (this.open) { detailsElement.slideDown(); } else { detailsElement.slideUp(); } }); }); If you want to see it broken in the wild, here's a codepen replicating the problem :) https://codepen.io/jcforrester/pen/mdZjodd
tagged with: jquery
has comment: http://stackoverflow.com/comment/139163954
tagged with: css

http://stackoverflow.com/comment/139140315
type: Comment
score: 0
has text: It is really hard to understand, what you are trying to ask here. Please provide an example of what exact background-image effect you want to replicate. Use placeholder images from a service like https://placehold.co
type: QuestionComment
comment on: http://stackoverflow.com/q/78916876

http://stackoverflow.com/comment/139217074
has text: use `:root .dark` instead of `.dark :root`
comment on: http://stackoverflow.com/q/78958837
score: 1
type: Comment
type: QuestionComment

http://stackoverflow.com/a/78944871
upvote count: 1
has body: If I include the style inside my template (see below) I supposed it will load the stylesheet once for each instance. According to the network tab however it is only loaded once. Is this good practice? A URI is a URI is a URI, and if you have not disabled caching, a URI will only be loaded once. For a Stylesheet to work inside shadowDOM you do need to link it inside shadowDOM. There is also adoptedStyleSheets you can use, depending on your use-case. Is there a way to allow my web component's blocks to be styled by external stylesheets? HighlightJS comes with loads of Themes: https://github.com/highlightjs/highlight.js/tree/main/src/styles Overriding HighlightJS CSS can be done, its just one CSS file to edit You might not need HighlightJS, it can be done with one very cool font-file only https://blog.glyphdrawing.club/font-with-built-in-syntax-highlighting/
has comment: http://stackoverflow.com/comment/139199084
has comment: http://stackoverflow.com/comment/139199584
score: 1
type: Answer
has comment: http://stackoverflow.com/comment/139201165
downvote count: 0
has comment: http://stackoverflow.com/comment/139204739
answers question: http://stackoverflow.com/q/78944551

http://stackoverflow.com/q/78914275
has answer: http://stackoverflow.com/a/78915519
tagged with: inheritance
tagged with: css
has comment: http://stackoverflow.com/comment/139135890
has comment: http://stackoverflow.com/comment/139135541
has comment: http://stackoverflow.com/comment/139135112
has answer: http://stackoverflow.com/a/78947264
has comment: http://stackoverflow.com/comment/139134808
has comment: http://stackoverflow.com/comment/139135420
upvote count: 3
favorite count: 0
tagged with: hover
accepted answer: http://stackoverflow.com/a/78915519
type: Question
downvote count: 0
has title: Can CSS detect the difference between an actual hover and an inherited hover?
type: AnsweredQuestion
possible better answer: http://stackoverflow.com/a/78947264
score: 3
answer count: 2
has body: If the mouse hovers over an element in an HTML page, the browser creates a :hover pseudo-class for that element and for all its parents, even if the mouse is not hovering over any part of the parent element itself. You can see this in the snippet below. In the "Two Nested Divs" example, hovering over the blue square will also create a :hover pseudo-class for its parent red square. Is there a CSS selector that can be used to react to the mouse only if the mouse is over the red square itself? I have shown a workaround in the Three Overlapping Divs example. Here, the red and blue squares are siblings, and there is an invisible square div at the intersection of the visible squares. This invisible square intercepts the pointer-event that triggers the creation of a :hover pseudo-class. This allows me to write CSS which reacts as if there were a :hover pseudo-class for both visible squares. It also prevents a :hover class from being attached to the red square when the mouse is over the blue square, because there is no inheritance. However, in the Three Overlapping Divs example, the blue square is no longer a child of the red square. In my real-life case, this inheritance is something that I want. :root { --line: 1px; --side: 1vmin; --size: max(min(100vh, 50vw), min(50vh, 100vw)); --font: calc(var(--size) / 20); --rect: calc(var(--size) * 0.666 - var(--line)); --drop: calc(var(--rect) * 0.5); --edge: calc(var(--drop) - var(--side)); --red: #9009; --blue: #0099; --bg: #040; } body { margin: 0; height: 100vh; color: #ddd; background-color: #222; font-size: 0; display: flex; justify-content: center; align-items: center; } @media (aspect-ratio < 1/1) { main { width: var(--size); } } div { position: relative; box-sizing: border-box; } div[id] { font-size: var(--font); display: inline-block; width: var(--size); height: var(--size); border: var(--line) solid #ddd; p { position: absolute; pointer-events: none; z-index: 1; span { display: block; width: var(--rect); margin-top: 0.5em…
has comment: http://stackoverflow.com/comment/139134762

http://stackoverflow.com/comment/139202162
score: 0
type: AnswerComment
has text: @barmar correct... that's what makes it confusing.
comment on: http://stackoverflow.com/a/78950845
type: Comment

http://stackoverflow.com/comment/139248980
type: AnswerComment
comment on: http://stackoverflow.com/a/78975023
has text: @LeviB414 I uploaded the solution to GitHub. You can download the files and test it easily here: https://github.com/The-Best-Codes/stackoverflow-solutions/tree/main/no-text-except-heading-on-counter-website-error
type: Comment
score: 0

http://stackoverflow.com/q/78955784
tagged with: css
duplicate of: http://stackoverflow.com/q/19026884
downvote count: 1
has answer: http://stackoverflow.com/a/78955822
accepted answer: http://stackoverflow.com/a/78955822
linked to: http://stackoverflow.com/q/19026884
favorite count: 0
has body: I'm trying to vertically align this navbar: .site-title { font-size: 26pt; font-weight: bold; text-decoration: none; } .site-title:hover { text-decoration: underline; } nav { display: flex; justify-content: space-between; } nav ul { list-style-type: none; } nav ul li { display: inline-flex; } /* added by Editor for demonstration reasons */ nav { border: 2px dashed red; } Title About Posts However, I'm having trouble getting it centered with the larger title. The list on the right is pushed to the top and I can't figure out a way to center it without setting the padding. Is there a way to do it without setting the padding? I can do it, but I'd like a cleaner way if possible.
tagged with: http://stackoverflow.com/tag/html
type: Question
answer count: 1
has title: Vertically center inline flex unordered list beside list with larger text
upvote count: 0
type: AnsweredQuestion
score: -1

http://stackoverflow.com/comment/139308003
comment on: http://stackoverflow.com/q/79008222
score: 2
type: Comment
has text: You need to sense hover on the a (anchor) element, not on the svg and the text separately.
type: QuestionComment

http://stackoverflow.com/q/79051072
type: UnansweredQuestion
has body: Hello fellow developers, I’m currently building a website using WordPress without any plugins or themes—entirely through hardcoding. I’ve implemented a responsive navigation bar, and everything appears to function well in the developer view. However, I’m encountering an issue: when I click on any of the navigation links to access other pages, the design changes unexpectedly. Additionally, I am unable to click on any of the navigation links afterward. Could anyone advise on possible causes or solutions for this behavior? I appreciate any guidance. Thank you! this is my nav bar .navbar { background-color: #ECEDE8; } .navbar-brand, .nav-link { color: black !important; margin-top: 20px; font-family: "Poppins", sans-serif; font-weight: 400; font-style: normal; } .nav-link.active { color: #8AA899 !important; } .nav-link:after { content: ""; display: block; width: 0; height: 2px; background-color: #8AA899; transition: width 0.3s ease-in-out; } .nav-link:hover:after, .nav-link.active:after { width: 100%; } /* Adjust brand image and nav links for small screens */ @media (max-width: 767.98px) { .navbar-brand img { width: 150px; } .nav-link { margin-top: 10px; font-size: 14px; } } @media (max-width: 575.98px) { .navbar-brand img { width: 120px; } .nav-link { font-size: 12px; } .navbar { padding: 10px 15px; } } Home About us Contact us so what do I need to do to fix and what should I look for to enhance this. thankyou for the reply and have a great day.
type: Question
tagged with: http://stackoverflow.com/tag/html
tagged with: wordpress
score: 0
has title: Changing design of nav bar in responsive design
has comment: http://stackoverflow.com/comment/139387318
has comment: http://stackoverflow.com/comment/139386768
has comment: http://stackoverflow.com/comment/139392209
answer count: 0
tagged with: css
has comment: http://stackoverflow.com/comment/139391970

http://stackoverflow.com/comment/139134118
comment on: http://stackoverflow.com/q/78913738
type: Comment
score: 0
has text: `li :not(ul) ul`?
type: QuestionComment

http://stackoverflow.com/q/78936068
tagged with: css
has body: I am building a web application with a title which may be any length. The title ends with a pencil span which can be used to edit it to a new title. If the title is less than the available width, everything is fine. The title appears on one line and the pencil icon is immediately following it, so it can be edited. However, if the title exceeds the available width, I am stuck with various undesirable possibilities: The default behaviour appears to be that the title occupies multiple lines and the element expands it's height. If I limit the height to 1.3rem only, the title continues to push other elements aside and visibly overflows on multiple lines over other elements. If I limit the height to 1.3rem and then add an overflow:hidden attribute, then the title occupies a single line but it cuts off abruptly and the pencil icon is hidden as well, so it can't be edited. If I limit the height to 1.3rem and then add an overflow:hidden attribute, and move the pencil icon into a separate element outside of the title, I still have an abrupt end, and the pencil icon isn't near the end of the title, but over on the right, potentially quite far away for a shorter title. If I limit the character length of the displayed title using JavaScript or server-side, then I end up with inconsistent behaviour depending on the text and the length specified. For example, a title of iiiiiiiiiiiiii... would be very narrow and not fill up the width, while a title of wwwwwwwwwwwwwwwww... would be very wide and potentially overflow the available space. I can use text-overflow:ellipsis to get an ellipsis at the end of the title, and if I combine that with white-space:nowrap, a width, and overflow:hidden, then this displays a proper ellipsis, but on the longer titles, the pencil icon completely disappears and is hidden, and thus the title can't be edited. If I do the above with text-overflow:ellipsis to get an ellipsis at the end of the title, and extract the pencil icon to it's own element, then I …
has title: HTML/CSS Enforcing Maximum Width Of Single Text Line
type: UnansweredQuestion
score: 0
type: Question
tagged with: text
has comment: http://stackoverflow.com/comment/139175268
answer count: 1
tagged with: display
tagged with: formatting
tagged with: overflow
has answer: http://stackoverflow.com/a/78936790

http://stackoverflow.com/q/79027165
score: 1
tagged with: css
possible better answer: http://stackoverflow.com/a/79027184
type: Question
tagged with: angular
type: AnsweredQuestion
accepted answer: http://stackoverflow.com/a/79049354
has title: Page contents not printing completely in portrait view
favorite count: 0
has answer: http://stackoverflow.com/a/79027184
answer count: 2
tagged with: http://stackoverflow.com/tag/html
downvote count: 0
has answer: http://stackoverflow.com/a/79049354
has body: I am working on print functionality enabling in angular for a particular page. So, when I am giving print for that page, earlier it was showing blank content. In below div, I am calling the component (app-event-container) that is loading that page. So, I did some css changes like below in host level of <app-event-container component and after changes my print was working fine in landscape view :host { overflow: visible; position: absolute; } So the issue is even though its printing whole contents in landscape view, its cutting right most portions in portrait view. As I know portrait view is little narrower, but is there any way so that I can see the whole contents irrespective of landscape or portrait?
upvote count: 1

http://stackoverflow.com/a/79163866
score: 0
answers question: http://stackoverflow.com/q/79021126
has body: I always use something like: border: 2px solid gold; around the elements to see what is happening. padding-left: 250px; gets you to the right of the menu, as others mention. You could also move the entire element with margin: margin-left: 250px; Hope this helps!
type: Answer

http://stackoverflow.com/a/78966140
score: 1
downvote count: 0
type: Answer
answers question: http://stackoverflow.com/q/78948123
upvote count: 1
has comment: http://stackoverflow.com/comment/139246999
has body: Opaque response blocking is a new feature waiting to be incorporated into the fetch standard, see https://github.com/whatwg/fetch/pull/1755. Its aim is stated as follows: Essentially, CSS, JavaScript, images, and media (audio and video) can be requested across origins without the CORS protocol. And unfortunately except for CSS there is no MIME type enforcement. This algorithm aims to block as many responses as possible that are not one of these types (or are newer variants of those types) to avoid leaking their contents through side channels. Browsers implementing this feature would block images and stylesheets that are served with an XML mime type (for example, Content-Type: application/xml), but Content-Type: image/svg+xml is allowed.

http://stackoverflow.com/comment/139379635
has text: The linked question is about __animating variables' value__, this one is about __using variables' value in animation__
type: QuestionComment
comment on: http://stackoverflow.com/q/79046636
score: 1
type: Comment

http://stackoverflow.com/comment/139387923
has text: This answer could be improved by adding some explanation.
score: 1
type: Comment
type: AnswerComment
comment on: http://stackoverflow.com/a/79051880

browser
tags question: http://stackoverflow.com/q/78948236
tags question: http://stackoverflow.com/q/78911681
tags question: http://stackoverflow.com/q/78980291
tag name: browser
tags question: http://stackoverflow.com/q/79059286
tags question: http://stackoverflow.com/q/78984306
tags question: http://stackoverflow.com/q/79002065
tags question: http://stackoverflow.com/q/78960221
type: Tag
tags question: http://stackoverflow.com/q/79239410
tags question: http://stackoverflow.com/q/79092044
tags question: http://stackoverflow.com/q/79395975
tags question: http://stackoverflow.com/q/79317521
tags question: http://stackoverflow.com/q/79301196
tags question: http://stackoverflow.com/q/79480893
tags question: http://stackoverflow.com/q/79522108

http://stackoverflow.com/a/79031231
answers question: http://stackoverflow.com/q/79027496
type: Answer
score: 0
has body: Try this : input[name="Size"] { width: 20px; height: 20px; } input[name="Size"]:hover { width: 20px; height: 20px; } &lt;input type="radio" form="AddToCartForm-template--17856642154724__main-8518139478244" checked="checked" value="Large 59&amp;quot; x 47&amp;quot;" data-index="option1" name="Size" data-variant-input="" class="" id="ProductSelect-template--17856642154724__main-8518139478244-option-size-Large+59%22+x+47%22"&gt;

http://stackoverflow.com/comment/139240534
type: QuestionComment
comment on: http://stackoverflow.com/q/78971329
has text: Sure, but what's the point in that? Those tracks will all be `auto`.
type: Comment
score: 0

http://stackoverflow.com/a/78950845
has comment: http://stackoverflow.com/comment/139202129
has comment: http://stackoverflow.com/comment/139202103
score: 0
has comment: http://stackoverflow.com/comment/139202024
has comment: http://stackoverflow.com/comment/139204780
answers question: http://stackoverflow.com/q/78950799
has comment: http://stackoverflow.com/comment/139202109
has comment: http://stackoverflow.com/comment/139202167
has body: If I understand correctly, you want to limit date selection to two. You can do so by verifying a condition inside your event handler : $(document).ready(function(){ $(".calendar-day").on("click", function(){ //To remove a selection if it is clicked once more if($(this).hasClass("selected"){ $(this).removeClass("selected") } //To select a date and limit the number of selections else if($(".selected").length<2){ $(this).addClass("selected"); } }) }) Note that I used you idea of adding a selected class to the date. This code does not really do any verification on whether start date is inferior to the end one, but instead lets the user select an end date first and a start date then, or the opposite Hope this helped !
has comment: http://stackoverflow.com/comment/139202162
type: Answer
has comment: http://stackoverflow.com/comment/139202117

http://stackoverflow.com/comment/139280629
comment on: http://stackoverflow.com/q/78992932
score: 1
type: Comment
has text: @rozsazoltan https://codesandbox.io/p/live/64aeba5f-2c20-4b6a-ba12-6e8103584961
type: QuestionComment

http://stackoverflow.com/q/78961311
answer count: 1
has comment: http://stackoverflow.com/comment/139221473
has comment: http://stackoverflow.com/comment/139221486
has title: Issue with css margin property margin: 0px auto;
score: -1
has answer: http://stackoverflow.com/a/78961329
tagged with: css
downvote count: 1
type: UnansweredQuestion
upvote count: 0
has body: I'm trying to build responsive navbar in reactjs navbar.jsx const CustomNavbar = () => { return ( Blog App ); } my css file is:- navbar-design.css *{ box-sizing: border-box; margin: 0px; padding: 0px; } body{ background-color: white; } .main { background-color: #0080ff; height: 3.7em; } nav { border: 1px solid black; margin: 0px auto; } .menu { height: 3.7em; } @media only screen and (max-width: 600px) { nav { margin: 0 auto; } } and this is my custom grid layout css file rwd-layout.css * { margin: 0px; padding: 0px; box-sizing: border-box; } .row::after { content: ""; clear: both; display: table; } [class*="col-"] { float: left; /* padding: 15px; */ } html { font-family: "Lucida Sans", sans-serif; } /* for mobiles */ @media only screen and (max-width: 600px) { /* for mobile */ [class*="xs-col-1"] { width: 8.33%; } [class*="xs-col-2"] { width: 16.66% } [class*="xs-col-3"] { width: 25%; } [class*="xs-col-4"] { width: 33.33%; } [class*="xs-col-5"] { width: 41.66%; } [class*="xs-col-6"] { width: 50%; } [class*="xs-col-7"] { width: 58.33% ;} [class*="xs-col-8"] { width: 66.66%; } [class*="xs-col-9"] { width: 75%; } [class*="xs-col-10"] { width: 83.33%; } [class*="xs-col-11"] { width: 91.66%; } [class*="xs-col-12"] { width: 100%; } } .center { margin: 0px auto; } /* for tablets */ @media only screen and (min-width: 600px) { /* for tablet layout */ .col-s-1 { width: 8.33%; } .col-s-2 { width: 16.66%; } .col-s-3 { width: 25%; } .col-s-4 { width: 33.33%; } .col-s-5 { width: 41.66%; } .col-s-6 { width: 50%; } .col-s-7 { width: 58.33%; } .col-s-8 { width: 66.66%; } .col-s-9 { width: 75%; } .col-s-10 { width: 83.33%; } .col-s-11 { width: 91.66%; } .col-s-12 { width: 100%; } } /* for desktop */ @media only screen and (min-width: 768px) { /* for desktop */ .col-1 { width: 8.33%; } .col-2 { width: 16.66%; } .col-3 { width: 25%; } .col-4 { width: 33.33%; } .col-5 { width: 41.66%; } .col-6 { width: 50%; } .col-7 { width: 58.33%; } .col-8 { width: 66.66%; } .col-9 { width: 75%; } .c…
favorite count: 0
type: Question
has comment: http://stackoverflow.com/comment/139221769

http://stackoverflow.com/comment/139294563
has text: I've updated the answer to explain why :hover will be applied if removing layers, hope this makes it clear.
type: Comment
score: 0
comment on: http://stackoverflow.com/a/79000845
type: AnswerComment

http://stackoverflow.com/comment/139390953
type: QuestionComment
score: 2
type: Comment
comment on: http://stackoverflow.com/q/79053699
has text: Stack Overflow is an [English-only site], it could be useful to translate the comments in your code so your question is more comprehensible

http://stackoverflow.com/comment/139365839
score: 1
comment on: http://stackoverflow.com/q/79039863
type: Comment
type: QuestionComment
has text: hi @Ayomikun2820 welcome to stackoverflow community please search before asking and also read [How do I ask a good question?](https://stackoverflow.com/help/how-to-ask) and did you check [MDN-doc->variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) and [MDN-doc->gradient](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient) also this [use-css-variables-with-rgba-for-gradient-transparency](https://stackoverflow.com/questions/29591465/use-css-variables-with-rgba-for-gradient-transparency)?

http://stackoverflow.com/q/78943212
has body: So for my Angular application I created a menu-builder using the Kendo-TreeView component. I would like to have my action buttons for the nodes to be nicely aligned on the right side as you can see in the picture. Preview of the problem and where I would like to have the buttons aligned Right now this is my code inside the TreeView using the KendoTreeViewNodeTemplate @if (dataItem.icon != null && dataItem.icon != '') { - } {{ dataItem.title }} | @if (dataItem.type == 'GROUP') { } @if (dataItem.type != 'GROUP') { } @if (dataItem.type == 'GROUP' && dataItem?.children?.length == null) { } This is the CSS .menu-tree-line { display: flex; align-items: center; justify-content: space-between !important; width: 100%; } .menu-tree-dataItem { display: flex; align-items: center; gap: 5px; /* Space between the text and icon */ } .menu-btn-tree-container { display: flex; gap: 5px; margin-left: 10px; align-items: flex-end !important; } I am trying to get it to work with flexbox but it's not working. Any help is very much appreciated. Thanks!
upvote count: 1
has title: Styling dataItems in kendoTreeViewNodeTemplate (Angular)
tagged with: css
tagged with: angular
tagged with: flexbox
has answer: http://stackoverflow.com/a/78943282
accepted answer: http://stackoverflow.com/a/78943282
score: 1
favorite count: 0
type: Question
tagged with: kendo-treeview
answer count: 1
type: AnsweredQuestion
downvote count: 0
tagged with: kendo-ui

http://stackoverflow.com/comment/139349866
comment on: http://stackoverflow.com/q/79030517
type: QuestionComment
score: 2
has text: Are you _really_ still using Bootstrap version 2? In more current versions, that are flexbox based, this would probably be easier.
type: Comment

http://stackoverflow.com/comment/139281758
type: Comment
comment on: http://stackoverflow.com/q/78993924
score: 0
type: QuestionComment
has text: Your CSS code does not seem to activate in the Snippet. Please [edit] to fix.

http://stackoverflow.com/a/78986761
downvote count: 0
type: AcceptedAnswer
upvote count: 2
type: Answer
score: 2
answers question: http://stackoverflow.com/q/78982161
accepted answer of: http://stackoverflow.com/q/78982161
has body: This can be done with pure CSS for those browsers (which is all the main ones now) which support container query units (cqh etc). To achieve an object-fit: contain effect, of the red rectangle either the width or the height of the red rectangle has to be the same as the container (padding excepted). Which it is to be depends on the relative aspect ratios of the container and element. This snippet uses CSS clamp to get a variable which has either a value of 0cqh or 1cqh depending on which is the larger of the two ratios. It then calculates the resultant width of the red rectangle. and with container dimensions reversed

http://stackoverflow.com/comment/139140653
comment on: http://stackoverflow.com/q/78917255
type: QuestionComment
has text: I'm not sure I completely understand the requirement. Your image seems to show a simple grid with 6 rows, the items in the first column having 2 rows each and the second column having 3 rows each. However, your verbal description indicates that the height of the items in the second row is not connected to (you use the word 'times') the height of the items in the first row. Which is the requirement?
type: Comment
score: 0

http://stackoverflow.com/comment/139405322
has text: Sound much like an XY issue to me. Instead of asking how to make you solution work, ask how to handle the issue you have. In your case where the pixels come from and how to get rid of those
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/79061496
type: Comment

http://stackoverflow.com/comment/139239696
type: Comment
type: AnswerComment
score: 1
has text: @SathishKumar, change your eventListener to **input** from ***change*** and it will be instantaneous.
comment on: http://stackoverflow.com/a/78967078

http://stackoverflow.com/q/79032875
accepted answer: http://stackoverflow.com/a/79034736
has answer: http://stackoverflow.com/a/79034214
tagged with: tailwind-css
score: 0
has body: On a static website (possible but not desirable to use JS), I've a blog with a column width (on a large screen) of maybe 50% for easy reading. But then I have a large picture (actually it's an interactive object) with lots of detail that would be great occupying (nearly) the full width of the screen. width: 100vw; (or w-screen in Tailwind) is great, but the left edge of the picture is in line with the parent. Specifying relative positioning, I can force the picture to the left using Left = -X px, but the distance X varies, so won't work without JavaScript. Using Tailwind, or vanilla CSS, I've also tried transform: translateY(-25%);, but I still need to calculate the distance. Absolute positioning is great, but the remainder of the blog doesn't flow around the picture. Fixed positioning doesn't work either as the picture should scroll with the rest of the text. So, I think I'm left with Javascript: document.getElementById("myElementId").style.Left = -document.getElementById("myElementId").getBoundingClientRect().left; Any other ideas? (I would have thought my issue wasn't that unusual, but haven't seen any clean solutions.)
has comment: http://stackoverflow.com/comment/139353015
has answer: http://stackoverflow.com/a/79034650
tagged with: css
has answer: http://stackoverflow.com/a/79034931
has title: CCS to position an HTML element to the left edge of window without 'absolute' or JS?
has comment: http://stackoverflow.com/comment/139352995
answer count: 4
type: Question
has comment: http://stackoverflow.com/comment/139355954
type: AnsweredQuestion
has comment: http://stackoverflow.com/comment/139352974
possible better answer: http://stackoverflow.com/a/79034931
has answer: http://stackoverflow.com/a/79034736

http://stackoverflow.com/q/78916038
tagged with: css-shapes
tagged with: http://stackoverflow.com/tag/svg
has answer: http://stackoverflow.com/a/78917155
answer count: 2
has title: How to create a smooth inner curve for a block's top-right corner?
has answer: http://stackoverflow.com/a/78916304
tagged with: css-mask
tagged with: css
upvote count: 2
has body: I'm trying to create a block with a smooth, curved cut-out in the top-right corner, similar to the image below: Currently, my implementation looks like this: As you can see, the current curve is not as smooth as I'd like it to be - It's essentially not a curve, but a square with straight angles. Here's my current code: body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f0f0; font-family: Arial, sans-serif; } .curved-block { width: 300px; background-color: white; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); position: relative; overflow: hidden; padding: 5px; } .curved-block::after { content: ''; position: absolute; top: 0; right: 0; width: 40px; height: 40px; background-color: #f0f0f0; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M0 0 h25 c5 0, 10 0, 13 3 s2 7, 2 12 v25 h-40 z' fill='%23000000'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M0 0 h25 c5 0, 10 0, 13 3 s2 7, 2 12 v25 h-40 z' fill='%23000000'/%3E%3C/svg%3E"); mask-size: cover; -webkit-mask-size: cover; } .icon { position: absolute; top: 8px; right: 8px; width: 23px; height: 23px; display: flex; justify-content: center; align-items: center; font-size: 16px; font-weight: bold; background-color: #0056b3; border-radius: 50%; color: white; z-index: 2; } Lorem ipsum dolor sit amet, consectetur adipiscing elit. + I'm struggling to achieve a smoother, more natural-looking curve in the SVG mask. How can I modify the SVG path to create a curve that looks more like the one in the desired result image? Thank you in advance for your suggestions.
favorite count: 0
possible better answer: http://stackoverflow.com/a/78917155
type: Question
tagged with: http://stackoverflow.com/tag/html
accepted answer: http://stackoverflow.com/a/78916304
type: AnsweredQuestion
score: 2
downvote count: 0

http://stackoverflow.com/comment/139208503
score: 0
comment on: http://stackoverflow.com/q/78954173
type: Comment
type: QuestionComment
has text: This is not an easy one. Maybe you can install "Sencha Themer" and give it a try with it. The solution depends as well on which theme you are using, each one has it's own styling rules for checkboxes.

http://stackoverflow.com/comment/139201073
comment on: http://stackoverflow.com/q/78950094
type: QuestionComment
score: 1
type: Comment
has text: stop using obsolete methods to draw triangles: https://css-generators.com/triangle-shapes/

http://stackoverflow.com/comment/139297241
type: Comment
has text: The megamenu code itself is toggling the display value, so your attempts to do it with JS, probably simply got negated again. But trying to override the inline styling on those elements with `display: flex`, stops the menu from working ... so this will likely need some more modifications.
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/79002045

http://stackoverflow.com/comment/139359028
score: 0
has text: @mrconcerned it is because in code snippet `height: 750px;` is set for `#wrapper`
type: Comment
comment on: http://stackoverflow.com/q/79036207
type: QuestionComment

http://stackoverflow.com/q/79049142
tagged with: primeng
tagged with: angular
has title: How to change background-color of `p-card` component in PrimeNG 18?
has answer: http://stackoverflow.com/a/79049372
has answer: http://stackoverflow.com/a/79049350
type: UnansweredQuestion
score: 1
favorite count: 0
type: Question
downvote count: 0
has body: I am trying to change the background color of the container of p-card component. For context, I am brute forcing to change some styling in primeng components just to see if I will be able to have that flexibility just before diving into a project. The problem is, sometimes I can style the components the way I want to, but sometimes I don't know how and why the specificity in CSS doesn't work. This works: p-button { margin: 1rem; } But not this: p-card div.p-card-body { background-color: purple; } Even specifying !important doesn't work. Versions: Angular 18 &amp;&amp; PrimeNG 18.0.0-beta.2 Can anyone help? I have not seen any good guide on the internet.
has comment: http://stackoverflow.com/comment/139383083
answer count: 2
upvote count: 1
tagged with: css

http://stackoverflow.com/comment/139428636
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/79049572
type: Comment
has text: You could also have a look at this question: [Font Awesome doesn't change bullet points in revealjs Quarto](https://stackoverflow.com/questions/78646332/font-awesome-doesnt-change-bullet-points-in-revealjs-quarto)

http://stackoverflow.com/q/78951014
accepted answer: http://stackoverflow.com/a/78951025
has comment: http://stackoverflow.com/comment/139202368
score: -1
has comment: http://stackoverflow.com/comment/139202377
tagged with: css
tagged with: google-chrome
has title: Can CSS grid Lines be hidden when debugging using chrome dev tools?
downvote count: 1
has body: Hello I am trying to fix spacing on a modal I am working on and the background is a grid of images. I don't want to disable css grid because that will make me feel more crazy when I am trying to debug css issues. I would just like to find a way to disable the overlay I see when I open the chrome dev tools. Does anyone know a way I can do this? here is an example:
upvote count: 0
tagged with: css-grid
favorite count: 0
has answer: http://stackoverflow.com/a/78951025
type: Question
has comment: http://stackoverflow.com/comment/139202378
answer count: 1
type: AnsweredQuestion
tagged with: google-chrome-devtools

http://stackoverflow.com/a/78939019
downvote count: 0
type: Answer
has comment: http://stackoverflow.com/comment/139181349
has body: You don’t really need to do anything. It works already, as far as I can see. I have cleaned it up a bit, but it was working before I did that. Just make sure that you type either ‘a’, ‘b’ or ‘c’ into the search box. document.addEventListener("DOMContentLoaded", () => { const searchBar = document.getElementById("search-bar"); const suggestions = document.getElementById("suggestions"); const pages = [ { name: "A", url: "A.html" }, { name: "AA", url: "AA.html" }, { name: "AAA", url: "AAA.html" }, { name: "B", url: "B.html" }, { name: "BB", url: "BB.html" }, { name: "BBB", url: "BBB.html" }, { name: "C", url: "C.html" }, { name: "CC", url: "CC.html" }, { name: "CCC", url: "CCC.html" }, ]; searchBar.addEventListener("input", (e) => { const query = e.target.value.toLowerCase(); suggestions.innerHTML = ""; if (query) { const filteredPages = pages.filter(page => page.name.toLowerCase().includes(query)); console.log("Filtered Pages:", filteredPages); filteredPages.forEach(page => { const suggestionItem = document.createElement("li"); suggestionItem.textContent = page.name; suggestionItem.addEventListener("click", () => { window.location.href = page.url; }); suggestions.appendChild(suggestionItem); }); } }); // Handle enter key press searchBar.addEventListener("keydown", (e) => { if (e.key === "Enter") { const query = searchBar.value.toLowerCase(); const matchedPage = pages.find(page => page.name.toLowerCase() === query); if (matchedPage) { window.location.href = matchedPage.url; } } }); document.addEventListener("click", (e) => { if (!searchBar.contains(e.target) && !suggestions.contains(e.target)) { suggestions.innerHTML = ""; } }); }); header, nav { display: flex; gap: 1em; align-items: center; } header { justify-content: space-between; background: aliceblue; padding-right: 1em; } .logo img { display: block; height: 50px; } .search-widget { position: relative; } #search-bar { padding: 5px; border: 1px solid #ccc; border-radius: 4px; } #suggestions { border: 1px solid #ccc;…
upvote count: 1
accepted answer of: http://stackoverflow.com/q/78938680
has comment: http://stackoverflow.com/comment/139181314
has comment: http://stackoverflow.com/comment/139181317
has comment: http://stackoverflow.com/comment/139187188
has comment: http://stackoverflow.com/comment/139185942
score: 1
answers question: http://stackoverflow.com/q/78938680
has comment: http://stackoverflow.com/comment/139181736
type: AcceptedAnswer

custom-element
tag name: custom-element
type: Tag
tags question: http://stackoverflow.com/q/79058104
tags question: http://stackoverflow.com/q/79071370
tags question: http://stackoverflow.com/q/79213073
tags question: http://stackoverflow.com/q/79365340
tags question: http://stackoverflow.com/q/79411331

http://stackoverflow.com/a/79026882
score: 2
downvote count: 0
has body: You can achieve this with CSS variables and @property: @property --page-height { syntax: &quot;&lt;length&gt;&quot;; inherits: true; initial-value: 2in; } @page { size: 3in var(--page-height); } This will create a new CSS variable and default it to 2in. Then you can provide a new value for the variable via JavaScript like the following: document.documentElement.style.setProperty('--page-height', '3in');
has comment: http://stackoverflow.com/comment/139364709
type: AcceptedAnswer
upvote count: 2
type: Answer
answers question: http://stackoverflow.com/q/79026835
accepted answer of: http://stackoverflow.com/q/79026835

http://stackoverflow.com/q/78926371
has title: Text Animation Smooth in Chrome but Stuck and Not Smooth in Safari and iOS Devices
tagged with: reactjs
score: 0
tagged with: javascript
has answer: http://stackoverflow.com/a/78962097
tagged with: css
has body: I'm working on a website with a text animation that looks smooth and performs well in Chrome. However, the same animation appears stuck and not smooth in Safari and on iOS devices. Here's a brief overview of the setup: The animation is applied to a h1 element using CSS keyframes. I'm using -webkit-animation for Safari and iOS support. The animation involves transforming and opacity changes. CSS Code: .hero-scroll { position: absolute; top: 35%; left: 50%; transform: translate(-50%, -50%); font-size: 6rem; font-weight: bold; transition: transform 0.7s ease, font-size 0.7s ease, top 0.7s ease, color 0.7s ease; z-index: 2; color: rgba(255, 255, 255, 0.3); letter-spacing: 0.5px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; -webkit-text-stroke: 0.5px transparent; text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.1); } @-webkit-keyframes keyarm { 0% { -webkit-transform: rotate(0deg); } 5% { -webkit-transform: rotate(-14deg); } 10% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(0deg); } } @keyframes keyarm { 0% { transform: rotate(0deg); } 5% { transform: rotate(-14deg); } 10% { transform: rotate(0deg); } 100% { transform: rotate(0deg); } } .sticky { position: fixed; top: 5%; left: 50%; transform: translate(-50%, -50%); font-size: 2rem; color: #000; z-index: 1001; transition: top 0.7s ease, font-size 0.7s ease, color 0.7s ease; user-select: none; -webkit-animation: keyarm 1.5s ease-in-out infinite; animation: keyarm 1.5s ease-in-out infinite; } React Component Code: import React, { forwardRef } from 'react'; const HeroSection = forwardRef((props, ref) => { return ( ATNATIC ); }); export default HeroSection; App.js const handleScroll = () => { const header = headerRef.current; const heroText = heroTextRef.current; const threshold = header ? header.offsetHeight : 0; if (header) { if (window.scrollY > threshold) { header.classList.add('visible'); header.classList.remove('pre-scroll'); } else { heade…
type: UnansweredQuestion
type: Question
answer count: 1
tagged with: http://stackoverflow.com/tag/html

http://stackoverflow.com/q/78939815
has title: css has function not working with not has element selector
has body: I have the following element structure: I'm trying to not display the general div when the general-wrapper is not having any child elements. So first tried this: .general-wrapper:not(:has(*)) { background-color:red; } Which works. Then this: .general-container:has( .general-wrapper ) { background-color:green; } Which also works. But when I combine them it doesn't. .general-container:has( .general-wrapper:not(:has(*) ) ) { display:none; // it does display, while it should not :( } codepen link: https://codepen.io/Redox-FGL/pen/LYKgZzq What I'm doing wrong or not getting? Note: not looking for a solution with empty, there are more variables here and empty is not working. Need to check on child elements.
score: 1
upvote count: 1
tagged with: css
accepted answer: http://stackoverflow.com/a/78939863
type: Question
type: AnsweredQuestion
has answer: http://stackoverflow.com/a/78939886
has comment: http://stackoverflow.com/comment/139182384
favorite count: 0
answer count: 2
has answer: http://stackoverflow.com/a/78939863
tagged with: http://stackoverflow.com/tag/html
downvote count: 0
possible better answer: http://stackoverflow.com/a/78939886
has comment: http://stackoverflow.com/comment/139182559

http://stackoverflow.com/q/79055334
type: Question
has comment: http://stackoverflow.com/comment/139395127
tagged with: bootstrap-4
answer count: 0
tagged with: css
has title: Bootstrap 4 scrolling table with fixed header
tagged with: scrollable-table
type: UnansweredQuestion
score: 0
has body: I have 2 tables on a page. The first one should not scroll and the other should scroll with a fixed header. My issue is when I use the CSS styling on that page, it makes the widths and heights out of sync and messes up the styling within Bootstrap 4 for the first table. How can I avoid this issue? Is there a Bootstrap 4 automatic style to consider when doing this? (" * ") Indicates Required Field Ris Order Station Weapon Pos. Store Weapon Code Code Display Ris Mode Program Interval 1 Units Fuzing Drag ---- January February March April May June ---- January February March April May June ---- January February March April May June ---- January February March April May June ---- January February March April May June ---- January February March April May June ---- January February March April May June ---- January February March April May June ---- January February March April May June ---- January February March April May June Pass Record No. Date Description Qnty VAT Total Actions ##310934 14-02-1214 Drive synergies rich viral... 4 2.24% 50.00$ View Edit ##265049 13-02-1214 Incentivize user-contributed... 21 6.59% 130.00$ View Edit ##443567 11-02-1214 Enable innovate tagclouds... 9 2.50% 220.00$ View Edit ##480998 18-02-1214 Tagclouds dynamic, intuitive... 7 3.124% 530.00$ View Edit ##550347 13-02-1214 Front-end web services... 27 4.57% 350.00$ View Edit

http://stackoverflow.com/comment/139223354
type: AnswerComment
has text: https://stackoverflow.com/questions/34266597/jquery-append-numeric-value-to-existing-id-with
comment on: http://stackoverflow.com/a/78962197
type: Comment
score: 0

http://stackoverflow.com/a/78974737
score: 0
has body: You have 2 intervals that run your functions: var myInterval = setInterval(carousel, 4500); var yourInterval = setInterval(slideshow, 3000); But you never call the function on load meaning the js is waiting however many seconds before running your code Add these two lines before your intervals: carousel() slideshow() So your js code should look like this: var myIndex = 0; var yrIndex = 0; var i; var u = document.getElementsByClassName("firstSlides"); var v = document.getElementsByClassName("secondSlides"); var w = document.getElementsByClassName("firstInfo"); var z = document.getElementsByClassName("secondInfo"); var allThumbs = [u, w]; var rightThumbs = [v, z]; carousel() slideshow() var myInterval = setInterval(carousel, 4500); var yourInterval = setInterval(slideshow, 3000); function carousel() { myIndex++; for (i = 0; i < allThumbs.length; i++) { allThumbs[i][(myIndex - 1) % allThumbs[i].length].style.display = "none"; allThumbs[i][myIndex % allThumbs[i].length].style.display = "inline-block"; } } function slideshow() { yrIndex++; for (i = 0; i < rightThumbs.length; i++) { rightThumbs[i][(yrIndex - 1) % rightThumbs[i].length].style.display = "none"; rightThumbs[i][yrIndex % rightThumbs[i].length].style.display = "inline-block"; } }
answers question: http://stackoverflow.com/q/78974044
accepted answer of: http://stackoverflow.com/q/78974044
type: AcceptedAnswer
has comment: http://stackoverflow.com/comment/139248514
type: Answer

http://stackoverflow.com/a/78908965
has body: Please add this to setting.py file and try again. import mimetypes mimetypes.add_type("text/javascript", ".js", True) mimetypes.add_type("text/css", ".css", True)
type: Answer
score: 0
has comment: http://stackoverflow.com/comment/139128749
answers question: http://stackoverflow.com/q/78908954

http://stackoverflow.com/comment/139399996
type: AnswerComment
comment on: http://stackoverflow.com/a/79058734
score: 2
type: Comment
has text: It iis not true that you must use JS for this. THink about the :has CSS selection option.

http://stackoverflow.com/q/79048712
has comment: http://stackoverflow.com/comment/139387305
has title: How can I get this drop-down menu to display correctly when activated?
score: 0
has body: here's the site in question: Irreverent Naturalist As you can see, when you click on the nav hamburger icon, the bottom menu item is obscured by other page content. Ideally, one of the divs that contains the menu would appear as a 100% opacity white box stretching from the top of the page to a bit below the bottom menu item. I've tried experimenting with positioning, opacity and z-index, but couldn't get any visible changes at all; have to conclude that I don't understand the way this element is constructed. I also tried adding this to the CSS .site-header{ position:relative; z-index:100;} ...which seems to be positioning the menu items in front of the book cover and header text. However, it's still unreadable. I'd be very ok with an entirely white screen when the nav is open, but that doesn't seem to be happening here.
tagged with: css
answer count: 0
tagged with: menu
has comment: http://stackoverflow.com/comment/139405394
type: UnansweredQuestion
type: Question

http://stackoverflow.com/comment/139395671
score: 0
has text: @Minkie Best: the dev tools/network tab (filtered by fonts) give you the essential info whether a font was successfully loaded or not (if so you'll see an entry in the list). From your response – seeing the Times as rendered font there is most certainly something wrong with your paths/urls. In short: the most common font-loading mistake is a wrong path/url when referencing a font file. Your current example requires the woff2 files to reside in the same directory as the main CSS file (the same relative paths logics you would need for images)
type: Comment
comment on: http://stackoverflow.com/q/79048295
type: QuestionComment

http://stackoverflow.com/comment/139166135
type: Comment
score: 0
type: AnswerComment
has text: Ah ok, anyways, good luck with your project :)
comment on: http://stackoverflow.com/a/78930971

http://stackoverflow.com/q/78917786
has body: After i updated my Spring project from 2.2 to 2.7, my css are no longer loaded for some strange reason. No particular changes have been made to the project and i'm reading that nothing should change in the CSS aspect but i don't understand why the CSS are no longer loaded. Maybe they changed the folder structure? But i didn't find anything about that. My folders are structured in this way:
type: UnansweredQuestion
tagged with: directory
tagged with: css
tagged with: spring
type: Question
answer count: 1
downvote count: 1
has answer: http://stackoverflow.com/a/78917812
upvote count: 0
has title: My Spring application doesen't load CSS after upgrading from Spring 2.2 to 2.7
favorite count: 0
has comment: http://stackoverflow.com/comment/139155435
score: -1

vertical-alignment
type: Tag
tag name: vertical-alignment
tags question: http://stackoverflow.com/q/78998686
tags question: http://stackoverflow.com/q/79010977
tags question: http://stackoverflow.com/q/78925434
tags question: http://stackoverflow.com/q/79092108
tags question: http://stackoverflow.com/q/79082533

http://stackoverflow.com/q/79021002
answer count: 1
has answer: http://stackoverflow.com/a/79021390
downvote count: 3
linked to: http://stackoverflow.com/q/42294
tagged with: tailwind-css
has title: How to get a footer to stay at the bottom of the page (not screen) without using flex in CSS
upvote count: 1
duplicate of: http://stackoverflow.com/q/42294
has comment: http://stackoverflow.com/comment/139331337
tagged with: css
type: UnansweredQuestion
score: -2
has comment: http://stackoverflow.com/comment/139331557
favorite count: 0
has body: I can't get the footer to stay at the bottom of the page without using flex, and flex causes problems with my content of the page so I need a different solution You can see my CSS here: https://github.com/Lncvrt/website/blob/main/app/styles.css I tried solving it using flex (this causes weird bugs on my page) and a few other things but they either are fixed height on the page (like set to the bottom but not actually adjustable for when there is more content on the page, if that makes sense)
has comment: http://stackoverflow.com/comment/139331642
type: Question

material3
tags question: http://stackoverflow.com/q/78976057
type: Tag
tag name: material3
tags question: http://stackoverflow.com/q/79315126
tags question: http://stackoverflow.com/q/79382569
tags question: http://stackoverflow.com/q/79353388
tags question: http://stackoverflow.com/q/79522000

http://stackoverflow.com/comment/140101584
score: 0
has text: @Peter . The op did not say anything about a working solution nor validated any answers. Is your trouble similar and which browser is it about?
type: AnswerComment
comment on: http://stackoverflow.com/a/78995645
type: Comment

http://stackoverflow.com/comment/139317168
comment on: http://stackoverflow.com/q/79012481
type: Comment
score: 0
type: QuestionComment
has text: Unfortunately, I am unable to reproduce the issue with the provided code, as all the other `styles` are not included in your example. Especially, the `hamburger` menu is not showing for me.

http://stackoverflow.com/comment/139383083
type: Comment
score: 0
has text: Where do you place the mentioned CSS? In component, global stylesheet? Would be great to reproduce in StackBlitz. Thanks.
type: QuestionComment
comment on: http://stackoverflow.com/q/79049142

http://stackoverflow.com/a/78951227
answers question: http://stackoverflow.com/q/78951173
accepted answer of: http://stackoverflow.com/q/78951173
type: AcceptedAnswer
score: 2
has body: You can use arbitrary variants and use & to reference the current element. In this way, you can select child elements as if you were writing normal CSS selectors: div]:bg-amber-200 odd:[&>div]:bg-red-200"> child 1 child 2 child 3 Note that if the selector contains spaces, you need to use _ instead: [&_div].
downvote count: 0
type: Answer
upvote count: 2

http://stackoverflow.com/q/78903909
has title: Next.js setup to minify all css class names - both modules and global styles?
type: UnansweredQuestion
score: 0
tagged with: webpack
type: Question
tagged with: sass
tagged with: reactjs
has body: I have a next.js version 14 setup and I want to minify all class names - both modules and global styles - for production. So far, I have found such tools: @nimpl/classnames-minifier - tried, works well except it's just for scss modules. mangle-css-class-webpack-plugin - tried, requires specific class names pattern to minify. Works by replacing strings from js bundle, so it can replace even raw JS code. It doesn't find your class names from (s)css files. next-optimized-classnames - works only with modules. I also haven't managed to figure out how to define custom rules in next.js webpack config. This is my configuration: import classnamesMinifierImport from '@nimpl/classnames-minifier'; const withClassnamesMinifier = classnamesMinifierImport.default; /** @type {import('next').NextConfig} */ const nextConfig = { output: "export", compiler: { styledComponents: { ssr: true, displayName: false, minify: true, }, }, webpack(config) { config.module.rules.push({ test: /\.svg$/i, issuer: { and: [/\.(js|ts|md)x?$/] }, use: ['@svgr/webpack'], }); // This rule results in error: // "You may need an additional loader to handle the result of these loaders" // Without it, it is alright, but again, @nimpl/classnames-minifier minifies // only modules config.module.rules.push({ test: /\.scss$/, use: [ 'style-loader', { loader: 'css-loader', options: { modules: { localIdentName: '[name]__[local]--[hash:base64:5]', exportLocalsConvention: 'camelCase', }, }, }, 'sass-loader', ], }); return config; } }; export default withClassnamesMinifier({ disable: process.env.NODE_ENV !== 'production', })(nextConfig); I also use custom postcss config, do I need to connect it in webpack config if I override css default configuration? How do I override default css config to add some functions but not to lose any default needed functionality? Most importantly, how do I minify both css module and global styles class names, so that they are not intersected (these tools should be in sync)? Also, I use scss. …
tagged with: next.js
answer count: 0
tagged with: css

http://stackoverflow.com/comment/139188867
score: 1
type: Comment
type: QuestionComment
comment on: http://stackoverflow.com/q/78940243
has text: You can only achieve CSS colors of different states, but you can not achieve ripple effect happening on click of chip, because chip a complex DOM structure to handle ripple effect.

http://stackoverflow.com/comment/139393493
type: QuestionComment
has text: This is fundamentally bad UX, though. Half a star horizontally by width fills _half the area_, due to its symmetry, but that's not true for your other examples - the width and area wouldn't match and _both_ would be hard to determine. You could get closer using the five-fold _rotational_ symmetry (0.21 -> 0.2 and 0.88 -> 0.9) but even this would be very hard to discriminate unless the stars were very large. If you need more precision, _show a number_ rather than stars.
comment on: http://stackoverflow.com/q/79054912
type: Comment
score: 0

http://stackoverflow.com/comment/139394376
score: 1
comment on: http://stackoverflow.com/q/79055654
type: Comment
has text: *"but it doesn't seem to work perfectly [...] did not seem to have a perfect result"* - Can you be more specific about the problem you are observing and the question you are asking?
type: QuestionComment

http://stackoverflow.com/comment/139372734
comment on: http://stackoverflow.com/q/79043462
type: QuestionComment
has text: For example `rgb()` is just partialy supported in outlook, which may causes the problem. How did you set your background-color for those blocks? I know th question is about `!important`, but this may be a helpfull tipp.
type: Comment
score: 0

http://stackoverflow.com/a/79059083
downvote count: 0
answers question: http://stackoverflow.com/q/79058934
has body: I used css zoom in zoom out feature for your animation and added animation: zoom-in-zoom-out 3s ease; you can see keyframe values in the code below. Additionallay i added this feature for #logo id if you want cancel the zoom feature delay you can delete animation-delay:2s; under the logo id in the css codes. @import url('https://fonts.googleapis.com/css2?family=Prompt:wght@300&display=swap'); * { user-select: none; } body { font-family: 'Prompt', sans-serif; font-weight: 300; overflow: hidden; padding: 0; margin: 0; } #logo { position: absolute; color: white; align-content: center; width: 100%; height: 100%; } #logo-container { font-family: 'Prompt'; text-transform: uppercase; font-size: 128px; align-content: center; text-align: center; } #sunset { overflow:hidden; animation: revealup 1.5s; font-size: 100px; margin-top: -40px; } #rp { overflow: hidden; animation:reveal 1s; margin-right: 290px; } #logo { animation: zoom-in-zoom-out 3s ease; animation-delay:2s; } @keyframes zoom-in-zoom-out { 0% { transform: scale(1, 1); } 50% { transform: scale(1.5, 1.5); } 100% { transform: scale(1, 1); } } @keyframes revealup { 0% { transform: translateX(-500px); } 100% { transform: translateX(0px); } } @keyframes reveal { 0% { transform: translateY(50px); } 100% { transform: translateY(0px); } } #rp { font-family: 'Prompt'; text-transform: uppercase; font-size: 50px; align-content: center; text-align: center; } #app { position: absolute; inset: 0; } img { position: absolute; z-index: -1; object-fit: cover; width: 100%; height: 100%; } .box { color: #ffffff; padding: .3rem 1rem; background: rgba(0,0,0,.6); border-radius: .3rem; } .container { position: absolute; bottom: 0; left: 0; display: flex; justify-content: center; align-items: center; padding: .3rem 1rem; margin: 1vh 1vw; background: rgba(0,0,0,.5); border-radius: .5rem; z-index: 1; } .volume-container { display: flex; align-items: center; flex-grow: 1; } .volume-container svg { color: rgba(255,255,255,.8); width: 1.5rem; he…
upvote count: 1
score: 1
type: Answer

http://stackoverflow.com/q/79012295
answer count: 0
tagged with: css
tagged with: menu
type: UnansweredQuestion
has title: Collapsing and displaying a menu using html php and javascript
has comment: http://stackoverflow.com/comment/139334128
has comment: http://stackoverflow.com/comment/139330347
has comment: http://stackoverflow.com/comment/139326813
score: 1
favorite count: 0
has comment: http://stackoverflow.com/comment/139338650
has comment: http://stackoverflow.com/comment/139322183
has comment: http://stackoverflow.com/comment/139327894
has comment: http://stackoverflow.com/comment/139323260
has comment: http://stackoverflow.com/comment/139337056
type: Question
has comment: http://stackoverflow.com/comment/139330333
has comment: http://stackoverflow.com/comment/139337209
has comment: http://stackoverflow.com/comment/139329936
tagged with: responsive
has comment: http://stackoverflow.com/comment/139318771
has comment: http://stackoverflow.com/comment/139322165
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139322228
has comment: http://stackoverflow.com/comment/139335022
downvote count: 0
has comment: http://stackoverflow.com/comment/139342854
upvote count: 1
has comment: http://stackoverflow.com/comment/139324759
tagged with: javascript
has comment: http://stackoverflow.com/comment/139316211
has comment: http://stackoverflow.com/comment/139344965
has body: I've started using a grid display. As someone with no sight, I find this makes a lot more sense to me, and on first impression, is much more approachable. Currently, this is my css code: body { min-height: 100vh; display: grid; grid-template-rows: 60px 1fr auto; grid-template-columns: 300px auto; grid-template-areas: 'menubtn header ' 'sidebar content' 'footer footer'; } #menubtn { grid-area: menubtn; } #header { grid-area: header; background-color: white; } #sidebar { grid-area: sidebar; background-color: white; } #content { grid-area: content; } #footer { grid-area: footer; background-color: white; } As you can see, I've a button in the top left-hand side of the header, and the idea is to click this button to either collapse or display the menu. Is there a way using JavaScript to resize the content div and close the menu, and to take it back to its original size when the menu is reopened? Here's some code that didn't quite work: echo '&lt;menubtn&gt;'; echo '&lt;a href=&quot;javascript:void(0)&quot; onclick=&quot;closeNav()&quot;&gt;&amp;times;&lt;/a&gt;'; echo '&lt;/menubtn'; JavaScript: &lt;script&gt; /* Set the width of the sidebar to 250px and the left margin of the page content to 250px */ function openNav() { document.getElementById(&quot;mySidebar&quot;).style.width = &quot;250px&quot;; document.getElementById(&quot;main&quot;).style.marginLeft = &quot;250px&quot;; } /* Set the width of the sidebar to 0 and the left margin of the page content to 0 */ function closeNav() { document.getElementById(&quot;mySidebar&quot;).style.width = &quot;0&quot;; document.getElementById(&quot;main&quot;).style.marginLeft = &quot;0&quot;; } &lt;/script&gt; Code overload I know, but I'm trying to provide as much information as I reasonably can. Update: Thanks to a patient member of this forum, I've changed my approach, it still doesn't work, but I think it's the right way. In my php script, I've this: echo '&lt;div id=&quot;menubtn&quot;&gt;'; echo '&lt;button onclick = &quot…

http://stackoverflow.com/comment/139194526
type: Comment
score: 0
has text: [How do I ask a good question?](https://stackoverflow.com/help/how-to-ask), [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example)
type: QuestionComment
comment on: http://stackoverflow.com/q/78946283

http://stackoverflow.com/q/78978679
type: UnansweredQuestion
tagged with: node.js
type: Question
answer count: 1
score: 0
tagged with: javascript
tagged with: mocha.js
has answer: http://stackoverflow.com/a/78978730
tagged with: css
has title: How to make node.js ignore css files
has body: I can't run the tests with Mocha in my vanilla javascript project when I have a CSS file import because I can't get Node to ignore that specific extension. I get this error: TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".css" at new NodeError (node:internal/errors:405:5) at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:79:11) at defaultGetFormat (node:internal/modules/esm/get_format:124:36) at defaultLoad (node:internal/modules/esm/load:84:20) at nextLoad (node:internal/modules/esm/loader:163:28) at ESMLoader.load (node:internal/modules/esm/loader:603:26) at ESMLoader.moduleProvider (node:internal/modules/esm/loader:457:22) at new ModuleJob (node:internal/modules/esm/module_job:64:26) at #createModuleJob (node:internal/modules/esm/loader:480:17) at ESMLoader.getModuleJob (node:internal/modules/esm/loader:434:34) at async ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:79:21) Here is a sample repository to replicate the issue, hoping it will be helpful: https://github.com/Marco0491/mocha-issue-simulation Everything I've found so far is outdated and doesn't work in my case.

http://stackoverflow.com/a/79192806
answers question: http://stackoverflow.com/q/79007479
type: Answer
score: 0
has comment: http://stackoverflow.com/comment/139646757
has body: Voucher Details Home Menu1 Menu2

http://stackoverflow.com/q/78954650
tagged with: http://stackoverflow.com/tag/html
answer count: 1
type: AnsweredQuestion
has body: I'm trying to fit this image without use hard code on height block (css class height), because when the resolution changes, the image does not stay at the base of the css block. I have already tested many things, like inherit, auto e others css parameters. #banner { display: flex; align-items: start; justify-content: end; width: 70%; z-index: 2; } #banner img { max-width: 100%; height: auto; max-height: 90%; } .shape { background-color: var(--color-primary-2); width: 50%; height: 87.4%; position: absolute; border-radius: 40% 30% 20% 20%; top: 0; right: 0; z-index: 1; display: flex; justify-content: center; align-items: center; } Image with my monitor resolution Image with others monitor resolution
has title: Image fits on css block
has comment: http://stackoverflow.com/comment/139209577
score: 0
has answer: http://stackoverflow.com/a/78954866
tagged with: css
accepted answer: http://stackoverflow.com/a/78954866
type: Question

http://stackoverflow.com/q/78950411
tagged with: scroll
linked to: http://stackoverflow.com/q/53751393
score: 3
upvote count: 3
tagged with: javascript
has title: Why does el.scrollIntoView() cause the whole container to move?
has comment: http://stackoverflow.com/comment/139201356
tagged with: css
tagged with: js-scrollintoview
tagged with: dom
type: UnansweredQuestion
favorite count: 0
has body: I have nested overflow-y: auto elements, with a full page which is scrollable, and the sidebar which is independently scrollable. When I hover on something in the main content area, I want the sidebar nav link to scroll into view (to the top or center, if possible), but when I call sideBarNavLink.scrollIntoView(), it scrolls the entire content/page so the whole content goes up and is cut off on the bottom. My page is relatively complicated to reproduce. Is there some trick to making scrollIntoView reliable and work as you'd expect? Do I need position: relative and stuff like that to get it to work or something? Or do I need to roll my own scroll into view function? $(document).ready(() => { $('.link').click((e) => { e.currentTarget.scrollIntoView({ behavior: 'smooth', block: 'start' }) }) }) .page { padding: 16px; background: yellow; display: flex; width: 100%; height: 300px; overflow-y: auto; } .content { padding: 16px; background: blue; flex: 1; } .sidebar { padding: 16px; background: pink; overflow-y: auto; height: 100%; width: 200px; } a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world Notice when you click on an "a" (a .link class), it scrolls the whole StackOverflow post into view! Why...
has comment: http://stackoverflow.com/comment/139201319
type: Question
downvote count: 0
answer count: 1
has answer: http://stackoverflow.com/a/78950733

http://stackoverflow.com/comment/139305280
type: QuestionComment
has text: My bad above, `getDay` does not get you `20`, because that method returns the number of the day of the week. You actually want `getDate` instead.
type: Comment
score: 2
comment on: http://stackoverflow.com/q/79006902

http://stackoverflow.com/q/78979394
tagged with: css
has answer: http://stackoverflow.com/a/78979546
favorite count: 0
upvote count: 1
has body: I am working on a social media project at the moment, where I want to implement "stories". I want there to be an easy way to see how many stories you've already seen and how many there are. Then, seeing the WhatsApp status ( ), I thought that this could be a good way. I was looking forward to implementing this in CSS, but looking it up, there were only very few results that didn't provide me with the information I would need. I stumbled across the "conic-gradient" CSS property, however, I can only make one whole border, not many small ones that I could round. Are there any ideas or information (e.g. MDN docs, own code) you have for me? Thanks.
duplicate of: http://stackoverflow.com/q/66478236
accepted answer: http://stackoverflow.com/a/78979546
tagged with: whatsapp
duplicate of: http://stackoverflow.com/q/60583902
type: Question
answer count: 1
downvote count: 1
tagged with: http://stackoverflow.com/tag/html
linked to: http://stackoverflow.com/q/60583902
type: AnsweredQuestion
tagged with: border
score: 0
has title: Is there a possibility to create a WhatsApp-status-like border with CSS?

http://stackoverflow.com/comment/139232652
type: QuestionComment
comment on: http://stackoverflow.com/q/78967214
has text: Chrome on iPad isn't real. All browsers on iOS are just reskins of Safari.
score: 1
type: Comment

http://stackoverflow.com/comment/139375391
has text: I'm using 14.2.13 version of NextJs and yes i installed tailwind and i have tailwind.config.js file in my project and there are no errors in my terminal. tailwind base; tailwind components; tailwind utilities; layer base { body { apply bg-[#06202A] text-gray-300 } } this is my global.css file (i have the @ symbols in the code as well)
type: QuestionComment
type: Comment
score: 0
comment on: http://stackoverflow.com/q/79044837

http://stackoverflow.com/q/78917255
has answer: http://stackoverflow.com/a/78917419
has comment: http://stackoverflow.com/comment/139140153
favorite count: 0
type: Question
has body: Can I use grid-box to achieve the layout of this table? I know that if the rows for each column is a times to each other, it will be possible. I am not sure if I can use grid-box to make a table which has different number of rows in each column and the number are not times of each other.
answer count: 1
type: AnsweredQuestion
score: 0
accepted answer: http://stackoverflow.com/a/78917419
upvote count: 1
has comment: http://stackoverflow.com/comment/139140167
has title: Is it possible to make a table which has different rows for each column via gird box?
tagged with: css
downvote count: 1
has comment: http://stackoverflow.com/comment/139140653
tagged with: css-grid

http://stackoverflow.com/comment/139342956
type: QuestionComment
type: Comment
has text: _"or is there another way to assign the class?"_ - the better question would be, are there other ways to target the relevant element(s), than a class? But to be able to answer that, we need to see more of the context this element is in, and not just the element on its own.
comment on: http://stackoverflow.com/q/79027496
score: 0

http://stackoverflow.com/comment/139348696
has text: Too little information. But it might have to do with linebreaks or text encoding.
type: QuestionComment
comment on: http://stackoverflow.com/q/79030647
type: Comment
score: 0

http://stackoverflow.com/q/78997824
has answer: http://stackoverflow.com/a/78997843
type: Question
tagged with: button
has answer: http://stackoverflow.com/a/79000508
upvote count: 0
has answer: http://stackoverflow.com/a/78998631
downvote count: 2
answer count: 3
tagged with: css
has title: How can I create a button with custom shapes using only CSS (without clip-path)?
has body: enter image description here this is my button design and i want to create using only css. "I tried using clip-path, and it works, but I want to create it using only CSS. Any suggestions would be appreciated..." clip-path that i use:clip-path: polygon(0% 32.4%, 88% 1%, 88% 98%, 1% 78.43%);
type: UnansweredQuestion
favorite count: 0
score: -2
has comment: http://stackoverflow.com/comment/139288783

http://stackoverflow.com/a/79004114
answers question: http://stackoverflow.com/q/79004101
has comment: http://stackoverflow.com/comment/139322465
type: Answer
score: 0
has body: One option to fix your issue would be to add an id= to the table which allows to target the CSS modifications to the desired table ony: --- format: html --- ```{r} library(gt) ``` :::: {.columns} ::: {.column width="40%"} ```{r} #| echo: false gt(gtcars, id = "scroll") |> tab_options( table.additional_css = " #scroll tbody { display: block; overflow-y: scroll; max-height: 400px; } #scroll thead, tbody tr { display: table; width: 700px; table-layout: fixed; } " ) ``` ::: ::: {.column width="20%"} ::: ::: {.column width="40%"} ```{r} #| echo: false gtcars |> head(10) |> gt() ``` ::: ::::

http://stackoverflow.com/a/78983968
upvote count: 2
answers question: http://stackoverflow.com/q/78983946
accepted answer of: http://stackoverflow.com/q/78983946
type: AcceptedAnswer
score: 2
downvote count: 0
type: Answer
has body: Add grid-column: 1 / -1; to the ol and it will fix the nested ones: ol { counter-reset: Nr; list-style: none; display: grid; grid-template-columns: min-content 1fr; border: 2px solid rgba(255, 0, 0, .2); padding: 1rem; grid-column: 1 / -1; li { counter-increment: Nr; background-color: rgba(0, 0, 0, .1); grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; margin-bottom: 2pt; &::before { margin-right: 0.1rem; content: counters(Nr, ".") "\00a0"; text-align: end; } } } This is the first list item. This is the second list item. This is the third list item. This is the first list item. This is the second list item. This is a nested list item. This is a nother nested list item. This is the third list item.

http://stackoverflow.com/comment/139233733
comment on: http://stackoverflow.com/q/78967649
type: Comment
score: 0
type: QuestionComment
has text: The columns weren't set to the specified column width.

http://stackoverflow.com/q/79025356
tagged with: http://stackoverflow.com/tag/html
has title: Adding different animations to a single button based on event in CSS
type: Question
answer count: 0
downvote count: 0
tagged with: css
has comment: http://stackoverflow.com/comment/139340921
type: UnansweredQuestion
score: 1
upvote count: 1
has body: I added this animation below to a button which triggers whenever the page loads. .shadow-pop-br { animation: shadow-pop-br 300ms cubic-bezier(0.175, 0.885, 0.320, 1.275) both; } @keyframes shadow-pop-br { 0% { box-shadow: 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e; transform: translateX(0) translateY(0) rotateZ(5deg) rotateX(10deg) rotateY(-15deg); } 100% { box-shadow: 1px 1px #3e3e3e, 2px 2px #3e3e3e, 3px 3px #3e3e3e, 4px 4px #3e3e3e, 5px 5px #3e3e3e, 6px 6px #3e3e3e, 7px 7px #3e3e3e, 8px 8px #3e3e3e; transform: translateX(-8px) translateY(-8px) rotateZ(5deg) rotateX(10deg) rotateY(-15deg); } } The buttons looks like the attached image button My button class looks like this: .button2 { display: flex; flex-direction: column; align-items: center; justify-content: center; border: 3px solid #000000; border-radius: 0px; padding: 0; text-decoration: none; color: #000000; position: relative; overflow: hidden; transform: rotateZ(5deg) rotateX(10deg) rotateY(-15deg); /* 3D tilt effect */ transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Smooth transitions */ height: 130px; /* Height of the button */ width: 130px; /* Width of the button */ cursor: pointer; animation: shadow-pop-br 300ms cubic-bezier(0.175, 0.885, 0.320, 1.275) both; /* Animation on load */ } I was trying to add an animation of the button popping up even more on hover and another one where it gets pressed down on mouse click, im trying to translate the button using .button2:active { transform: translate(2px, 2px) rotateZ(5deg) rotateX(10deg) rotateY(-15deg); } but nothing seems to work. How do I implement an animation of the button popping outwards when I hover over it and also the button gets pressed downwards when i click or hold click on it?
favorite count: 0

http://stackoverflow.com/comment/140104058
type: Comment
comment on: http://stackoverflow.com/a/78995645
score: 0
type: AnswerComment
has text: @Peter oki, so you got this solution based on `pointer-events` to finally work for you.

http://stackoverflow.com/q/78966857
has comment: http://stackoverflow.com/comment/139232055
has comment: http://stackoverflow.com/comment/139232030
type: UnansweredQuestion
tagged with: joomla
type: Question
score: 0
has body: This CSS works - in most browsers - to create an offset when linking to anchors on a website that has a fixed header: ` a.macanchor::before { content: ''; display: block; height: 215px; margin-top: -215px; visibility: hidden; }` Unfortunately, this code does not work correctly - or consistently - in non-ESR versions of Mozilla Firefox. Sometimes the link goes to the right place, but usually the target is too far down and you need to keep scrolling to reach the intended target. Does anyone know how to get this to work correctly in non-ESR Firefox? Related question: How can I write a media query that targets non-ESR Firefox? I tried adding a tag within the page to create an offset so that the link target is not obscured by the fixed header. It works on most browsers - but not the non-ESR version of Mozilla Firefox. Thanks, Eddie
has title: How can I fix anchor link offsets for fixed header to work in Mozilla Firefox (non-ESR version)?
answer count: 0
tagged with: css

markdown
tag name: markdown
type: Tag
tags question: http://stackoverflow.com/q/79013297
tags question: http://stackoverflow.com/q/79059000
tags question: http://stackoverflow.com/q/79158731
tags question: http://stackoverflow.com/q/79534731

http://stackoverflow.com/a/78997315
accepted answer of: http://stackoverflow.com/q/78997251
score: 0
has body: if an element is not defined as box-sizing: border-box the width is not calculated with the padding. meaning it calculates 100% width and added 10px from the padding-right: 10px * { margin: 0; padding: 0; /* the change */ box-sizing: border-box; } body { min-height: 100vh; justify-content: center; display: flex; align-items: center; } .container { width: 250px; height: 400px; background-color: antiquewhite; padding: 20px; border-radius: 1.5rem; outline: 5px solid gray; } .container input { width: 100%; border-style: none; height: 50px; border-radius: 1rem; outline: 2px solid; font-size: 20px; text-align: right; padding-right: 10px; } &lt;div class="container"&gt; &lt;!--Input--&gt; &lt;div class="input"&gt; &lt;input type="text" placeholder="Write equation here" value="" /&gt; &lt;/div&gt;
type: AcceptedAnswer
answers question: http://stackoverflow.com/q/78997251
type: Answer

http://stackoverflow.com/a/79039950
score: 0
answers question: http://stackoverflow.com/q/79033583
has body: The framework uses shadow DOM, which will automatically generate two layers of div container nodes. I found the two node IDs in the web inspector, and then manually added height: 100% in style.css. As follows: #plasmo-shadow-container { height: 100%; } #plasmo-inline { height: 100%; }
type: Answer

http://stackoverflow.com/a/78939727
answers question: http://stackoverflow.com/q/78939673
type: Answer
has body: .content { background-color: lightpink; flex: 1; overflow: auto; } have a try
score: 0

http://stackoverflow.com/q/78968270
tagged with: fonts
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139234558
has comment: http://stackoverflow.com/comment/139234606
has comment: http://stackoverflow.com/comment/139234594
has title: Why is my text stroke and font rendering differently in Webflow compared to Figma?
type: Question
tagged with: http://stackoverflow.com/tag/html
has answer: http://stackoverflow.com/a/78974408
score: 0
has body: I am designing a text heading in Figma and attempting to replicate the exact design in Webflow, but I’m encountering an issue with how the font and text stroke are rendering. Here’s the issue: In Figma, the font and text stroke appear correctly with a white stroke around the text and a pink shadow. However, in Webflow, despite using the same CSS properties, the font renders incorrectly, and the stroke effect doesn’t display as expected. The font style looks completely different on the website, even though I’ve tried to apply the same styles. Here’s a comparison of both: Figma rendering: (https://www.figma.com/design/z5b8iL2GnF99LtPgG2X7w9/Figma?node-id=0-1&amp;t=cBjo6mlNwFYVj7VK-1) Webflow rendering: (Read-Only | https://preview.webflow.com/preview/font-test-4d984f?utm_medium=preview_link&amp;utm_source=designer&amp;utm_content=font-test-4d984f&amp;preview=b2a9bb1d2f5043c4d0c4abef1d7fa187&amp;workflow=preview) CSS from Figma that I’m using in Webflow: color: #FF4776; text-align: center; font-feature-settings: 'ss01' on, 'liga' off; text-shadow: 0px 3px 0px #FF4776; -webkit-text-stroke-width: 4px; -webkit-text-stroke-color: #F8FFFD; font-family: Pally; font-size: 40px; font-style: normal; font-weight: 700; line-height: 48px; /* 120% */ What I’ve tried so far: Uploaded the Pally font in Webflow and ensured that it’s set as the font-family. Applied the CSS code in the Webflow Designer, ensuring that there are no overrides from other classes. Used custom code to apply the -webkit-text-stroke properties and font-feature settings directly in Webflow, but the stroke is still not appearing as it does in Figma. Adjusted the text-shadow values, thinking there may be an issue with how the shadow and stroke overlap, but still no success. My questions: Why is the font stroke and text rendering different between Webflow and Figma? Could this be due to Webflow’s handling of font-feature settings or stroke properties? Is there a better way to implement -webkit-text-stroke in Webflo…
answer count: 2
has comment: http://stackoverflow.com/comment/139234498
linked to: http://stackoverflow.com/q/7241393
tagged with: css
has answer: http://stackoverflow.com/a/78971881

http://stackoverflow.com/a/79051880
has comment: http://stackoverflow.com/comment/139387923
downvote count: 0
type: AcceptedAnswer
answers question: http://stackoverflow.com/q/79051834
upvote count: 2
has body: Responsive Layout: Desktop Row, Mobile A on top 1 2 3 Something 1 2 3 Hope this help
accepted answer of: http://stackoverflow.com/q/79051834
type: Answer
score: 2
has comment: http://stackoverflow.com/comment/139387867

http://stackoverflow.com/q/79049581
type: UnansweredQuestion
has body: I'm using stylish in chrome to format the web view, and I found something interesting, which cursor position doesn't change with the font-size. example website: https://jqplay.org/s/61S_UA_ZEVM3Ykh font-size: 14px font-size: 20px full actions: gif video can anyone help me to adjust the cursor position same as font-size ? thanks.
has title: the cursor position doesn't change with the font size
tagged with: css
type: Question
answer count: 0
score: 0
tagged with: stylish
has comment: http://stackoverflow.com/comment/139391109
has comment: http://stackoverflow.com/comment/139384081

http://stackoverflow.com/q/78940065
has answer: http://stackoverflow.com/a/78940099
tagged with: javascript
has answer: http://stackoverflow.com/a/78940830
has title: differences in rendering of a flex-grid
downvote count: 2
answer count: 3
has answer: http://stackoverflow.com/a/78940190
tagged with: css
tagged with: flexbox
type: UnansweredQuestion
favorite count: 0
score: -2
type: Question
tagged with: http://stackoverflow.com/tag/html
upvote count: 0
has body: can anyone please explain, why is the first example faster when scrolling down than the second one? Seems like the 2nd example is re-rendering the rows as I scroll down. It's only noticeable when you grab the scroll handle and scroll the table way down to the bottom. In example #2 you should see white stripes / or empty space in the lower part of the table. The only difference between these two, is the "height" property in container. Example 1 <meta charset="UTF-8" Flex Grid with Floating Header Example 2 <meta charset="UTF-8" Flex Grid with Floating Header

http://stackoverflow.com/a/79028154
has comment: http://stackoverflow.com/comment/139346818
downvote count: 0
has comment: http://stackoverflow.com/comment/139346763
type: Answer
upvote count: 1
has comment: http://stackoverflow.com/comment/139345010
has body: adsy's answer already show you the steps to use clip-path, so here's my attempt to recreate the path. (Click the "Full page" button and resize your windows to test responsiveness) :root { --bg: #3B3486; } * { margin: 0; padding: 0; box-sizing: border-box; } .svg { position: absolute; top: 0; left: 0; width: 0; height: 0; } body::before, body::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 33.33%; background-color: var(--bg); clip-path: url(#wavy-clip-path); z-index: -1; } body::after { top: unset; bottom: 0; scale: -1; } Alternatively, if you want pure CSS without SVG, you can try border-radius (the curve won't be exactly like your example though) :root { --bg: #3B3486; } * { margin: 0; padding: 0; box-sizing: border-box; } body { width: 100vw; height: 100vh; display: grid; grid-template-rows: 33.33% 33.33% 33.33%; } header, footer, main { position: relative; } header::before, footer::before, main::before, header::after, footer::after, main::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 50%; background-color: var(--bg); z-index: -1; } header::before { border-bottom-right-radius: 50% 100%; } header::after { top: unset; bottom: 0; } footer::before { border-top-left-radius: 50% 100%; top: unset; bottom: 0; } footer::after { z-index: -2; } main::before { border-top-left-radius: 50% 100%; top: unset; bottom: 100%; background-color: #fff; } main::after { border-bottom-right-radius: 50% 100%; top: 100%; background-color: #fff; }
answers question: http://stackoverflow.com/q/79027712
accepted answer of: http://stackoverflow.com/q/79027712
score: 1
type: AcceptedAnswer

http://stackoverflow.com/comment/139219692
score: 1
comment on: http://stackoverflow.com/a/78960225
type: Comment
has text: The code is just a shorter version of the answer above and doesn't solve the problem either.
type: AnswerComment

http://stackoverflow.com/a/79017532
has body: I figured it out. The problem was that the page isn't fully loaded when I try to update the font size. Updating the font size in this event solved the issue entirely: window.onload = function () { Array.from(playerInfoContainerChildren).forEach((child) =&gt; { adjustFontSize(child); }); };
score: 1
type: AcceptedAnswer
downvote count: 0
type: Answer
answers question: http://stackoverflow.com/q/79009556
upvote count: 1
accepted answer of: http://stackoverflow.com/q/79009556

http://stackoverflow.com/q/79018787
answer count: 1
type: AnsweredQuestion
tagged with: clip-path
accepted answer: http://stackoverflow.com/a/79028670
has title: Clip Path applied to image doesn't show image
tagged with: http://stackoverflow.com/tag/svg
score: 0
tagged with: css
has answer: http://stackoverflow.com/a/79028670
tagged with: blur
has body: I have a website which needs a few titles with a decent hover effect (Stripped down in this example, but that's why I am doing everything with svgs) I want the text when hovered to be reduced to its outline and a "frosted glass fill" (filled with translucent white and blurring the image behind) That why my svg has two paths: A regular one for the border and the white (/ translucent white) fill. And the same paths in a clipPath element, such that I have something to clip the copy of the background with. Why is it that the second image (image one is set as the background of html) is clipped away completely? (it exits, is in the right place, correctly blurred, but the clip-path clips away the entirety of the image, not just the stuff outside of the path) html { background-image: url(https://picsum.photos/id/210/480/270); } #navbar { list-style: none; } #navbar .letter-path { fill: white; stroke: transparent; stroke-width: 0.057; } #navbar svg:hover .letter-path { fill: rgba(255, 255, 255, 0.15); stroke: white; } #blurred-clip-background { position: absolute; top: 0; left: 0; clip-path: url(#blur-letter-paths); filter: blur(10px); z-index: -1; } <path class="blur-letter-path letter-path-A" d="m 1.4033687,5e-7 c 0.0882,0 0.1516899,0.042333 0.1834399,0.1269997 l 0.80433,2.3001061 c 0.0388,0.1128887 -0.007,0.1834441 -0.13052,0.1834441 h -0.37748 c -0.0917,0 -0.15169,-0.042333 -0.17991,-0.1305275 L 1.5938686,2.1589958 H 0.81775865 l -0.10936,0.3210271 c -0.0318,0.088194 -0.0917,0.1305275 -0.18345,0.1305275 h -0.381 c -0.12347,0 -0.16933,-0.070555 -0.13052,-0.1834441 l 0.80786,-2.3001061 C 0.85298865,0.0423342 0.91298865,5e-7 1.0011987,5e-7 Z m 0.0423,1.580441 -0.24342,-0.7231929 -0.22225005,0.7231929 z" transform="translate(0, 0)"></path> <path class="letter-path letter-path-A" d="m 1.4033687,5e-7 c 0.0882,0 0.1516899,0.042333 0.1834399,0.1269997 l 0.80433,2.3001061 c 0.0388,0.1128887 -0.007,0.1834441 -0.13052,0.1834441 h -0.37748 c -0.0917,0 -0.15169,-0.042333 -0.17991,-0.…
type: Question
tagged with: http://stackoverflow.com/tag/html

http://stackoverflow.com/a/78933059
score: 0
answers question: http://stackoverflow.com/q/78932990
has body: Based on experience, this problem is often caused by incorrect paths. I suggest taking a look at the CSS file path first, especially the href attribute of the link tag. just like If it cannot be solved, you can post your file structure and code for further analysis.
accepted answer of: http://stackoverflow.com/q/78932990
type: AcceptedAnswer
type: Answer
has comment: http://stackoverflow.com/comment/139170226

http://stackoverflow.com/q/79021658
type: Question
duplicate of: http://stackoverflow.com/q/53671968
tagged with: http://stackoverflow.com/tag/html
answer count: 1
type: AnsweredQuestion
tagged with: javascript
has body: I'm trying to translate a rotated element but when I do so, the element translates considering the rotated axis. I'm trying to translate the element considering the axis pre rotation. How do I do that? I've created a jsfiddle to illustrate the issue : https://jsfiddle.net/c03wpyuz/6/ $(document).ready(() =&gt; { var tx = 0; var ty = 0; var ag = 0; var el = $('#test'); setTimeout(() =&gt; { ag = 45; el.css('transform', 'rotate(' + ag + 'deg)'); }, 1000); setTimeout(() =&gt; { tx = 100; ty = 0; el.css('transform', 'rotate(' + ag + 'deg) translate3d(' + tx + 'px, ' + ty + 'px, 0)'); }, 2000); }); #test { width: 200px; height: 100px; background-color: red; transform-origin: center; } &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"&gt;&lt;/script&gt; &lt;div id="test"&gt; &lt;/div&gt; The element will rotate after 1 second then after 2 seconds it will translate. The issue is that I'm only translating it over the X axis but the axis is then rotated.
has answer: http://stackoverflow.com/a/79021675
has title: Translate rotated element relative to document
has comment: http://stackoverflow.com/comment/139332512
tagged with: css
upvote count: 2
linked to: http://stackoverflow.com/q/53671968
accepted answer: http://stackoverflow.com/a/79021675
downvote count: 1
score: 1
favorite count: 0
duplicate of: http://stackoverflow.com/q/65159464

http://stackoverflow.com/a/79051643
upvote count: 3
type: AcceptedAnswer
has body: Add additional parameter appendTo="body" to your dropdown component. Here is an example: https://stackblitz.com/edit/bhiqq6-a2kjxv?file=src%2Fapp%2Fdropdown-editable-demo.html Some additional resource to read about it: https://www.geeksforgeeks.org/angular-primeng-dialog-overlays-inside/
type: Answer
answers question: http://stackoverflow.com/q/79046794
downvote count: 0
score: 3
accepted answer of: http://stackoverflow.com/q/79046794

http://stackoverflow.com/a/78940099
downvote count: 0
answers question: http://stackoverflow.com/q/78940065
has body: It is because of the rendering and layout calculation behavior of the browser. In the first example you set the height of the container to a fixed value which is 90 percent of the view port. Hence, browser is able to optimize the rendering process because it has a fixed height. In the second example, you set the height of container 100% of the parent component which may change as you scroll. Hence, browser needs to re-calculate the height of component more frequently and it forces rows to be re-rendered. That's why as you scroll faster you see it is re-rendering the rows.
score: 1
has comment: http://stackoverflow.com/comment/139182862
upvote count: 1
type: Answer

http://stackoverflow.com/q/78953076
type: Question
has comment: http://stackoverflow.com/comment/139208927
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139206059
has body: What is the best approach to create this in HTML/CSS? Ideally, if this could be done with pure CSS and not any SVG images, it would be ideal. The two biggest challenges are how the half-circle blends into the bar with a subtle curve and the top shadow.
has comment: http://stackoverflow.com/comment/139206256
has comment: http://stackoverflow.com/comment/139206155
has title: Half circle blended into bar with top shadow
answer count: 0
tagged with: css
has comment: http://stackoverflow.com/comment/139206133
type: UnansweredQuestion
score: 0

http://stackoverflow.com/q/79042088
favorite count: 0
tagged with: http://stackoverflow.com/tag/html
type: Question
downvote count: 0
answer count: 1
score: 2
type: AnsweredQuestion
tagged with: javascript
has answer: http://stackoverflow.com/a/79042374
accepted answer: http://stackoverflow.com/a/79042374
tagged with: css
has title: Animate text while using background-clip with text
upvote count: 2
has body: I'm trying to animate text and change the color in the middle of the screen, like this HTML MASKED TEXT CSS body { background-color: #000; } .text-mask { font-size: 100px; font-weight: bold; background: linear-gradient(to right, orange 50%, white 50%); background-clip: text; color: transparent; position: relative; height: 120px; } .scrolling-text { /* transform: translateX(10px); */ /* position: relative */ } DEMO As soon as I apply the styling of .scrolling-text the text is gone. The idea I had was to change the value of the transform in order to get the walking/animated text. Is there a way I can achieve this?

http://stackoverflow.com/a/78987837
upvote count: 1
has body: You could have a 3 column, 3 row grid. The first two items take up all 3 rows. The items in the 3rd column take up one row each, and the rows are sized with the first 2 auto (ie whatever space is needed) and the last one 1fr (ie the remaining space). A1 A1 A1 A1 A1 A1 A1 A1 Q2 Q2 Q2 Q2 Q2 Q2 Q2 R8 TTS item 2 Hybrid Gasoline Audi Gasoline Audi Audi Audi Diesel Audi Audi
score: 1
type: Answer
downvote count: 0
answers question: http://stackoverflow.com/q/78986368

http://stackoverflow.com/q/78920045
has answer: http://stackoverflow.com/a/78920159
tagged with: reactjs
score: 0
tagged with: javascript
answer count: 2
possible better answer: http://stackoverflow.com/a/78920180
tagged with: css
accepted answer: http://stackoverflow.com/a/78920159
has body: So I have an App.jsx file and I am unable to link my Team.jsx page in the header of App.jsx over an Header.jsx component. Here are the Code Files I need a to understand where I am making the mistake /src/App.jsx import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; import Footer from "./components/Footer"; import Header from "./components/Header"; import team from "./pages/Team"; function App() { return ( <> <Route path='/team' element={<Team />} /> </> ); } export default App; /src/components/Header.jsx Team /src/pages/Team.jsx function Team() { return Our Team ; } export default Team; I tried to Link the Team.jsx page to my App.jsx by my Header.jsx component and when I try to execute the program I can't see anything except a blank screen I don't know where I am making the mistake.
has title: How to Link Pages in React js
has comment: http://stackoverflow.com/comment/139145403
has comment: http://stackoverflow.com/comment/139145640
has answer: http://stackoverflow.com/a/78920180
type: Question
tagged with: http://stackoverflow.com/tag/html
type: AnsweredQuestion

http://stackoverflow.com/comment/139361043
comment on: http://stackoverflow.com/a/79037244
has text: This works, as a good fallback. I amended OP to specify ability to use `border`-family stylings.
type: Comment
score: 0
type: AnswerComment

http://stackoverflow.com/comment/139234866
comment on: http://stackoverflow.com/a/78955355
type: Comment
score: 0
type: AnswerComment
has text: Glad you found a solution. Please include some code including your proposed solution, so the answer can be helpful for others visiting this question in the future. :)

http://stackoverflow.com/a/78951599
has comment: http://stackoverflow.com/comment/139203548
has comment: http://stackoverflow.com/comment/139203421
has comment: http://stackoverflow.com/comment/139203579
has body: You need one more wrapper for typography elements. body { margin: 0; font-family: "Bai Jamjuree", sans-serif; /* Adjust with the exact font if found */ } /* Style for Blog Container */ .blog-container { width: 1240px; overflow: auto; margin-left: auto; position: relative; left: -3px; margin-right: auto; max-width: 94%; /* Responsive for smaller screens */ padding: 5px 20px; background-color: white; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); margin-bottom: 100px; box-sizing: border-box; } .blog-thumbnail img { width: 150px; height: 150px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); margin-right: 20px; object-fit: cover; } .blog-post { background-color: white; border-radius: 8px; padding: 20px; max-width: 1200px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; text-align: left; display: flex; margin-bottom: 20px; margin-top: 20px; padding-bottom: 20px; border-bottom: 1px solid #ddd; } .blog-post h2 { font-size: 1.2em; margin-bottom: 20px; color: #333; } .blog-post p { font-size: 1em; color: #666; } .blog-post a { color: #1e7cd6; text-decoration: none; font-weight: bold; } .blog-post a:hover { color: #104e8b; } a { text-decoration: none; } /* Responsive Styles */ @media (max-width: 768px) { .blog-post { flex-direction: column; gap: 10px; } } How Drone Photography Can Elevate Your Real Estate Listings August 30, 2024 Unlock the Power of Aerial Views & Attract More Buyers to Your Listings Unlock the Power of Aerial Views & Attract More Buyers to Your Listings Read more Also, you have a lot of smelly CSS in your code, magic numbers like 94%. Try to make your layout fluid, instead of hardcoding fixed values. This article might help you: https://csswizardry.com/2012/11/code-smells-in-css/
score: -2
has comment: http://stackoverflow.com/comment/139203535
downvote count: 3
answers question: http://stackoverflow.com/q/78951532
type: Answer
has comment: http://stackoverflow.com/comment/139203466
upvote count: 1

http://stackoverflow.com/comment/139228854
comment on: http://stackoverflow.com/q/78964809
has text: @josepht ‘you can’t inspect any of the internal elements ‘ that sounds very weird, why not?
type: Comment
score: 0
type: QuestionComment

http://stackoverflow.com/q/78942230
type: Question
has title: Convert CSS animation-timeline to JavaScript cross-browser
answer count: 1
tagged with: css-animations
upvote count: 4
downvote count: 0
type: AnsweredQuestion
has body: I have written a CSS animation/parallax effect that works with animation-timeline and I like the result. This is the code [data-section-id="66d153c7fa59f85ae17bdd36"] video { position : absolute; top : 0; height: 66vh!important; translate: 0 0vh; animation: parallax 1s linear both; animation-timeline: scroll(root); animation-range: cover 30% cover 66%; } @keyframes parallax { from { translate : 0 0vh; } to { translate: 0 -33vh; } } The video element is in a container with 33vh and when you scroll from top to bottom it should animate the position with translate to reach the end of the screen. Because it does not work at the moment in Safari and Mozilla I want to use this pollyfill https://github.com/flackr/scroll-timeline to make it cross browser. The info of the plugin suggests that I can make the CSS animation work cross-browser but from my tests it works only with the JavaScript way. Therefore I want to convert my above CSS scroll animation in JavaScript. This is where I am now var videoElement = document.querySelector('[data-section-id="66d339fcaa91932c1202ad7e"] video'); var scrollTimeline2 = new ScrollTimeline({ source: document.documentElement, axis: "block", orientation: 'block' }); videoElement.animate( { transform: ["translateY(0)", "translateY(-33vh)"]}, { duration: 1000, fill: 'both', timeline: scrollTimeline2 } ); This creates a small parallax effect but not like the CSS code does. I think that I need to specify rangeStart and rangeEnd to the second argument(object) of .animate but I can not figure the format. I tried this but it prevents the entire parallax effect from working. videoElement.animate( { transform: ["translateY(0)", "translateY(-33vh)"]}, { duration: 1000, fill: 'both', timeline: scrollTimeline2, rangeStart: "cover 30%", rangeEnd: "cover 66%", } ); From the docs of animate https://developer.mozilla.org/en-US/docs/Web/API/Element/animate#rangeend the format should be valid. Can someone help please?
tagged with: javascript
accepted answer: http://stackoverflow.com/a/78942682
has comment: http://stackoverflow.com/comment/139188260
has comment: http://stackoverflow.com/comment/139187465
tagged with: css
score: 4
has answer: http://stackoverflow.com/a/78942682
favorite count: 0

http://stackoverflow.com/comment/139290877
has text: Using `absolute` doesn't seem to work for me, but `relative` does. Thank you
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78990966

http://stackoverflow.com/comment/139204739
type: Comment
score: 0
comment on: http://stackoverflow.com/a/78944871
type: AnswerComment
has text: Feel free to edit it, tnx

http://stackoverflow.com/comment/139182563
has text: Thnx! This work
type: Comment
comment on: http://stackoverflow.com/a/78939863
score: 0
type: AnswerComment

http://stackoverflow.com/q/79004101
downvote count: 0
type: UnansweredQuestion
score: 1
upvote count: 1
tagged with: css
type: Question
has answer: http://stackoverflow.com/a/79004114
tagged with: scrollbar
has body: I have a Quarto document with multiple tables throughout it. I have been using R for the entire document but I wanted one table (gt package) to be scrollable so after some research, I added in the below code using CSS to achieve that: gt() %>% tab_options( table.width = "1000px", # Set table width table.additional_css = " tbody { display: block; overflow-y: scroll; max-height: 400px; } thead, tbody tr { display: table; width: 700px; table-layout: fixed; } " ) This worked great except that every table in the document was affected and became scrollable, which I do not want. I added the above code only to the code chunk of the one table I wanted to change, and despite playing around with the width size, it still seems to be a global command. My current header for the document is: format: html: embed-resources: true toc: true code-fold: true code-tools: true Do I need to add a global command to the header? I haven't used CSS before this but I can't find a fix online. Thanks in advance!
tagged with: quarto
answer count: 1
has title: CSS scrolling table affects all tables in Quarto document
favorite count: 0
tagged with: http://stackoverflow.com/tag/r
tagged with: gt

http://stackoverflow.com/comment/139364404
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/79039123
has text: I think the question is pretty well described, with code snippet of the component where there's not much boilerplate

http://stackoverflow.com/comment/139307310
has text: Can you make this into a runnable snippet so we can more easily test it on IOS devices? Thanks.
type: QuestionComment
type: Comment
comment on: http://stackoverflow.com/q/79007922
score: 0

http://stackoverflow.com/comment/139267905
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78986450
has text: ` ` have `load` events
type: QuestionComment

http://stackoverflow.com/q/78999138
tagged with: http://stackoverflow.com/tag/html
downvote count: 0
has title: On hover the div inside button reduces height to give animation and little dark bottom. But text also moving up how to fix not move text
has body: I want to create a button as shown in the code. Where on hover the div inside button reduces height to give animation and dark bottom. But the text also moves up how to fix not move text. Please suggest what I am doing correctly to achieve this button animation. .effect-btn { text-align: center; display: inline-block; position: relative; text-decoration: none; color: black; text-transform: capitalize; background-color: #d9d94c; padding: 20px 0px; width: 150px; border-radius: 5px; overflow: hidden; transition: all 0.2s linear 0s; border: none; cursor: pointer; } .effect { position: absolute; display: flex; align-items: center; justify-content: center; position: absolute; // top: 100%; top: 0; // left: 0px; width: 100%; height: 100%; text-align: center; font-size: 14px; background-color: #f2f255; transition: all 0.2s linear 0s; border-radius: 5px; } .effect:hover { height: 90%; } Text
upvote count: 1
answer count: 0
tagged with: css
type: UnansweredQuestion
score: 1
favorite count: 0
type: Question

http://stackoverflow.com/q/79007601
has title: Going directly into my how can i remove the element from the normal document flow when hovered over it without moving it away from its position?
accepted answer: http://stackoverflow.com/a/79007893
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139306693
downvote count: 0
score: 1
upvote count: 1
has body: I want to make the text in the li element to move out of the document flow and increase its z-index so that increasing the size of the text does not affect the position and structure of the other elements. nav { display: flex; justify-content: space-between; margin: 2rem 10px; align-items: center; padding: 0 5vw; } nav div ul { list-style: none; display: inline-block; position: relative; } nav div ul li { display: inline-block; margin: 0.2rem; font-size: 0.95rem; cursor: pointer; } nav div ul li:hover { position: absolute; } @media(max-width:500px) { nav { margin: 10px 0; } } Writings Categories Articles About I have tried position:relative in the ul and position:fixed/absolute in the li on hover but it does not give the required result. The text moves to the side when i want it to stay at its original position and come on top of all the other elements if required.
tagged with: css
has answer: http://stackoverflow.com/a/79007893
type: Question
answer count: 1
type: AnsweredQuestion
favorite count: 0

http://stackoverflow.com/q/79061988
score: 0
answer count: 2
has answer: http://stackoverflow.com/a/79062015
has body: I had to adapt a code written by someone else. Using Tailwind and Angular. I had to add an optional text line, so there would be 1 or 2 lines. Both lines should align just right of some title. And a button should remain at the far right end of the container. My first version was this. This renders fine, but this is very ugly code, I don't like the use of inline visibility:hidden used to keep text aligned and also the fact that the button has defined twice, but one or the other is removed based on conditions. {{label_title}} {{some_text}} {{some_text}} {{label_title}} {{some_text}} {{ button_text}} Current version: I tried with 3 columns. First 2 columns work fine, but, after trying various things, there's no way to send this button to the right. How am I supposed to do this? {{label_title}} {{some_text}} {{some_text}} {{ button_text}} I tried content-end, item-end, text-right, object-right... on the the div or the button, or both, it depends. Haven't found the right way. I'm not a Tailwind I expert. I could probably solve this easily in vanilla CSS but looking for a Tailwind solution in the context of this application.
has answer: http://stackoverflow.com/a/79062143
tagged with: css
accepted answer: http://stackoverflow.com/a/79062015
type: Question
tagged with: http://stackoverflow.com/tag/html
possible better answer: http://stackoverflow.com/a/79062143
tagged with: tailwind-css
has title: Button won't align right in Tailwind CSS
type: AnsweredQuestion

http://stackoverflow.com/q/79057755
has comment: http://stackoverflow.com/comment/139399535
score: 0
has comment: http://stackoverflow.com/comment/139398193
has title: Why dot (&bull;) is not vertically aligned to middle?
favorite count: 0
tagged with: http://stackoverflow.com/tag/html
tagged with: wordpress
type: UnansweredQuestion
upvote count: 1
tagged with: elementor
tagged with: css
type: Question
downvote count: 1
has answer: http://stackoverflow.com/a/79057864
answer count: 1
has body: I tried to it in many ways, but this the closest to what I'm trying to do. I've added &quot;vertical-align&quot; to both elements but still it has some pixels more at the top I guess... What am I doing wrong? Is there some way to do it? I've tried with margins and paddings, but it doesn't work. &lt;span style=&quot;font-size: 35px; color: #cb141b; line-height: 1px; vertical-align: middle; margin-bottom: 7px;&quot;&gt;&amp;bull;&lt;/span&gt;&lt;span style=&quot;vertical-align: middle; &quot;&gt;We... KMC ...&lt;/span&gt;

http://stackoverflow.com/comment/139315114
type: AnswerComment
score: 1
type: Comment
comment on: http://stackoverflow.com/a/79006962
has text: Thanks @Colo Ghidini. it was helpful!

http://stackoverflow.com/comment/139279848
comment on: http://stackoverflow.com/q/78989459
type: Comment
score: 0
has text: I don’t believe there is a solution to get sites that support dark mode to look good on older versions of the Samsung browser. I added dark mode support to several sites I control in early 2022, which is when I saw the problem on the Samsung browser. I ended up ignoring the problem in the hope that Samsung would eventual realize the error of their approach, which they did at some point this year with the latest releases.
type: QuestionComment

http://stackoverflow.com/q/78937247
tagged with: angular
type: UnansweredQuestion
type: Question
answer count: 1
has title: How can I get my search box not to displace adjacent components in the header?
score: 0
has comment: http://stackoverflow.com/comment/139178167
has body: This is the Bootstrap header of my page which contains a logo on the left, a search box in the middle and menu items on the right: Toggle navigation Sign In {{user.lastName}} Cart ({{numberOfItems}}) The search box is an embedded child component: . This is the html of the child component: {{product.description}} The problem is whenever search results are produced in the child component, the length of the entire header is increased so as to display the results. The logo on the right of the search box and the menu items on the right end up in the middle of the page. I thought making the css position of the search results static would then display it without affecting the adjacent items but that's not working. I have done something similar before but cannot find the code I used.
tagged with: css
has answer: http://stackoverflow.com/a/78938505

http://stackoverflow.com/q/79041981
downvote count: 0
tagged with: css
upvote count: 1
has comment: http://stackoverflow.com/comment/139370356
has comment: http://stackoverflow.com/comment/139373289
favorite count: 0
score: 1
has title: Having an issue aligning text inside a element to the left when there is another element below it
has answer: http://stackoverflow.com/a/79042010
type: Question
answer count: 1
accepted answer: http://stackoverflow.com/a/79042010
has body: I am seeing an odd issue where the text inside the contentDescription doesn't align to the left on the last sentence. Here is an image of the issue I notice. Example. As you can see the text "some planet" is not aligned to the left as I expect it to be. Is this because of the saidBy element that is below it? Also, this behavior is very inconsistent as sometimes it aligns to the left properly, depending on the length of the text. I tried applying the text-align: left; but that didn't work. Here is my code: .mainBody{ width: 570px; } .saidBy{ margin-top: 22px; float: left; } A planet is a large object that orbits a star and has enough gravity to be spherical and clear its orbit of smaller objects. Here are some facts about some planet —From National Aeronautics and Space Administration
type: AnsweredQuestion

http://stackoverflow.com/comment/139234160
has text: You should not refer to w3school as a sole reference. As a matter of fact, w3school is quite outdated and where largely incorrect 6 years ago. Any reputable documentation would be the official documentation such as MDN WebDocs and w3.org.
score: 1
comment on: http://stackoverflow.com/a/78967934
type: Comment
type: AnswerComment

http://stackoverflow.com/comment/139132410
type: Comment
score: 0
type: AnswerComment
has text: @ParasChouhan Try manually setting the `width` and `height`; I also noticed that your `svg` is in total `white`, you might have to set the `div` color to others too.
comment on: http://stackoverflow.com/a/78912790

http://stackoverflow.com/comment/139187939
comment on: http://stackoverflow.com/q/78942849
type: QuestionComment
type: Comment
score: 0
has text: What does the background color of the window will change mean? A different color depending on the flag that’s entered it?

http://stackoverflow.com/comment/139386733
score: 0
type: AnswerComment
has text: I've edited the answer to use innerwidth, and your new proposed zoom calculation (for posterity) but again, consider using **viewport units** it's the 'idiomatic' way and it should be simpler than procedurally calculating the viewport width as you're already using media querys.
comment on: http://stackoverflow.com/a/79044672
type: Comment

http://stackoverflow.com/comment/139357174
has text: it's not ready, you can test with only `style(background-color)` and it won't work as well
comment on: http://stackoverflow.com/q/79035246
type: QuestionComment
score: 2
type: Comment

http://stackoverflow.com/comment/139215315
has text: Afaik: SF Mono is not available as a regular/global system font but only in some apps like the console. This post may help https://medium.com/@shashikant.jagtap/getting-apples-sf-mono-font-in-macos-1de5183add84
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78955926
type: QuestionComment

http://stackoverflow.com/comment/139131882
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78912380
has text: SO much easier with Grid. Why insist on Flexbox?
type: Comment

http://stackoverflow.com/q/79016277
answer count: 1
has comment: http://stackoverflow.com/comment/139322986
has body: What I want to do here may not be possible, but I wanted put it out there first to see if anyone else may have a clever idea that escapes me. I want to mimic the layout of a government form. Essentially, what I want to have is a "continued" block, where text that overflows the main text area on the first page will spill over into the proper location on the second page. I have the following example code, which does what I want. The only issue with it is that it relies on JavaScript, which I cannot do. This is a print layout, and JavaScript doesn't work in the engine we use to render the HTML. document.getElementById("content2").scrollTop = 150; #content1, #content2{ overflow: hidden; width: 250px; height: 150px; border: 1px solid black; padding: 5px; } #content2::after{ /* * This is a spacer to ensure we can scroll to a value that has no content if the * overflowed content does not fill box 2 */ content: " "; display: block; height: 150px; } Split up content Here's the first box This is some really long content. My goal is for it to start in the first content block until the overflow is reached, and then the overflowed content will automatically be displayed in the second box. This is intended for use in a print layout, so I cannot rely on JavaScript. And here's the second This is some really long content. My goal is for it to start in the first content block until the overflow is reached, and then the overflowed content will automatically be displayed in the second box. This is intended for use in a print layout, so I cannot rely on JavaScript. Is there a way to accomplish this same thing without JavaScript? The only other thought I have would be to try and split the content before inserting it into our HTML temple, but this seems unlikely to work well, as we can't really tell where the breakpoint would be without, well...actually laying out the text.
has comment: http://stackoverflow.com/comment/139322859
favorite count: 0
has comment: http://stackoverflow.com/comment/139322997
tagged with: http://stackoverflow.com/tag/html
downvote count: 0
tagged with: css-print
has answer: http://stackoverflow.com/a/79019401
has comment: http://stackoverflow.com/comment/139322900
has comment: http://stackoverflow.com/comment/139323023
type: UnansweredQuestion
score: 1
has title: Overflow content into a different block, without JavaScript
upvote count: 1
has comment: http://stackoverflow.com/comment/139323183
tagged with: css
type: Question
has comment: http://stackoverflow.com/comment/139323269

http://stackoverflow.com/comment/139169661
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78924192
type: QuestionComment
has text: @TemaniAfif Do you think it is possible to just fix the rgba and `mask-composite` while using `alpha` mode and acheive the goal? Since the top left are meant to be all masked out and bottom right are meant to be all not masked out, I can only acheive the result by using an additional layer but can't figure out how to do so with just these 2 mask layers.

http://stackoverflow.com/comment/139157673
score: 0
has text: @Zourab I don't think you will get it to work using `col` in that situation then. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col#usage_notes: _"As the column background color is painted on top of the table and column groups ( ), but behind background colors applied to the row groups ( , , and ), the rows ( ), and the individual cells ( and ), backgrounds applied to table columns are only visible if every layer painted on top of them has a transparent background."_
type: AnswerComment
comment on: http://stackoverflow.com/a/78924322
type: Comment

http://stackoverflow.com/q/78950013
tagged with: css
type: UnansweredQuestion
score: 1
has answer: http://stackoverflow.com/a/78951019
tagged with: http://stackoverflow.com/tag/pdf
favorite count: 0
tagged with: swift
tagged with: http://stackoverflow.com/tag/html
type: Question
has body: I'm using WKWebView in an iOS app to render and manipulate some HTML content. At a certain point, I'm generating a PDF from the rendered HTML in the WKWebView. The issue I'm facing involves images that are dynamically loaded into the DOM. In a regular browser, everything works fine, and when printing, the images avoid breaking across pages if a page break is necessary. However, when generating the PDF in iOS from WKWebView, the images are getting cut off at random heights based on the page size and the image position. How can I avoid having images break across pages when generating PDFs in iOS from WKWebView? The template HTML code can be found here. Any guidance or solutions would be greatly appreciated! func createPdf(completion: @escaping (PDFDocument?) -> Void) { let formatter: UIViewPrintFormatter = self.viewPrintFormatter() let render = UIPrintPageRenderer() render.addPrintFormatter(formatter, startingAtPageAt: 0) let page = CGRect(x: 0, y: 0, width: 595.2, height: 841.8) let printableWidth = page.width - 2 * 32 let printableHeight = page.height - 2 * 64 let printable = CGRect(x: 32, y: 32, width: printableWidth, height: printableHeight) render.setValue(NSValue(cgRect: page), forKey: "paperRect") render.setValue(NSValue(cgRect: printable), forKey: "printableRect") let pdfData = NSMutableData() UIGraphicsBeginPDFContextToData(pdfData, CGRect.zero, nil) for i in 0..<render.numberOfPages { UIGraphicsBeginPDFPage(); let bounds = UIGraphicsGetPDFContextBounds() render.drawPage(at: i, in: bounds) if i > 0 { let pageNumber = i let footerText = "Page \(pageNumber)" let attributes: [NSAttributedString.Key: Any] = [ .font: UIFont.systemFont(ofSize: 12), .foregroundColor: UIColor.black ] let textSize = footerText.size(withAttributes: attributes) let textRect = CGRect( x: bounds.width - textSize.width - 32, y: bounds.height - textSize.height - 20, width: textSize.width, height: textSize.height ) footerText.draw(in: textRect, withAttributes: attributes) } } UIGraphicsEndPD…
downvote count: 0
has title: How to Avoid Image Breaks When Generating PDFs from WKWebView in iOS?
answer count: 1
upvote count: 1
tagged with: wkwebview

http://stackoverflow.com/q/79038018
has answer: http://stackoverflow.com/a/79038234
possible better answer: http://stackoverflow.com/a/79038064
has title: How would I be able to use JavaScript in order to overlay an explosion gif as a callable function?
type: AnsweredQuestion
tagged with: javascript
upvote count: 0
answer count: 6
has answer: http://stackoverflow.com/a/79038090
downvote count: 3
has answer: http://stackoverflow.com/a/79039033
tagged with: css
has answer: http://stackoverflow.com/a/79038077
favorite count: 0
has body: I have a countdown timer on my website, and I want it to overlay a generic explosion GIF when the timer runs out. I have a function call when it runs out, now I just need to know what will go in that function. I'm really new to JavaScript and web dev as a whole, so I don't have any idea how to go about this. I've tried looking online but all of the docs I've found don't provide any help or don't make any sense. This is the code that I have so far: window.onload = function () { var time = 299, // your time in seconds here display = document.querySelector('#timer'); startTimer(time, display); }; function startTimer(duration, display) { var timer = duration, minutes, seconds; setInterval(function () { minutes = parseInt(timer / 60, 10) seconds = parseInt(timer % 60, 10); minutes = minutes < 10 ? "0" + minutes : minutes; seconds = seconds < 10 ? "0" + seconds : seconds; display.textContent = minutes + ":" + seconds; if (--timer < 0) { // This is the part that will call the explosion function. } }, 1000); }
has answer: http://stackoverflow.com/a/79038098
has answer: http://stackoverflow.com/a/79038064
accepted answer: http://stackoverflow.com/a/79038098
type: Question
score: -3

http://stackoverflow.com/q/78953791
accepted answer: http://stackoverflow.com/a/78953900
tagged with: http://stackoverflow.com/tag/html
type: Question
type: AnsweredQuestion
has answer: http://stackoverflow.com/a/78955135
score: 0
has answer: http://stackoverflow.com/a/78953900
tagged with: css
has body: I have a button to which I applied a costant, rotating animation. @keyframes rotateinf { from { transform: rotate( 0deg); } to { transform: rotate(360deg); } } The problem is: the child text gets the animation applied too. I managed to make a cheap workaround for this problem, I created a element and set the position to absolute, placing it directly on top of the button with top and right attributes. The imptxt class just establishes the font. All about me The buttonrot class is the following: padding: 200px ; border-radius: 50px; z-index: 9; animation:fadeintop 1s ease-in-out, rotateinf 10s linear infinite 1s; position: relative; display: inline-block; cursor: pointer; overflow: hidden; transform-origin: center; This is the result (.gif): Is there an actual and better way to make the text stay still and apply the rotating animation on the button? Code snippet: .buttonrot { padding: 200px; border-radius: 50px; z-index: 9; animation: fadeintop 1s ease-in-out, rotateinf 10s linear infinite 1s; position: relative; display: inline-block; cursor: pointer; overflow: hidden; transform-origin: center; } @keyframes rotateinf { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } All about me
answer count: 3
has answer: http://stackoverflow.com/a/78954017
has title: How can I animate a button without moving the text within?
possible better answer: http://stackoverflow.com/a/78955135

http://stackoverflow.com/comment/139272217
type: QuestionComment
comment on: http://stackoverflow.com/q/78988683
has text: you can solve the problem using flexbox
type: Comment
score: 1

http://stackoverflow.com/comment/139291653
comment on: http://stackoverflow.com/q/78999352
type: QuestionComment
score: 2
type: Comment
has text: axe JQuery and re-create your landing page as an angular component.

http://stackoverflow.com/a/79015809
score: 0
has body: This is almost what you want: .progress-bar { position: relative; height: 40px; width: 400px; .segment { position: absolute; height: 40px; box-sizing: border-box; &amp;:first-of-type { border-radius: 24px 0 0 24px; width: 70%; background: blue; } &amp;:last-of-type { left: 70%; width: 30%; background: linear-gradient(to left, transparent 10px, blue 10px 11px, lightblue 11px), radial-gradient(circle at right, lightgray, white); border: 1px solid blue; border-radius: 0 24px 24px 0; } } } Setting border-right: none doesn't quite get the last part. Hope this helps!
answers question: http://stackoverflow.com/q/79015795
type: Answer
has comment: http://stackoverflow.com/comment/139325076

http://stackoverflow.com/q/79056227
tagged with: http://stackoverflow.com/tag/html
type: Question
tagged with: alignment
answer count: 2
has title: making elements appear exactly like my design in proper alignment
has body: How do i make my elements fit within its given containers so that it fits the screen? i want my website page for the page, " green investment" look like my canva design in the first picture below. I however got the second image beneath that as my result As you can see the texts are appearing within their containers but they are too large. However the images and its containers are too large and too squished to the right of the page whiole the container at the very top that contains the main title, "green investment" does not seem to keep[ the title in place . The entire layout is squished improperly and a bit too enlarged unevenly. Below is the specific HTML for the elements i am working on Green Investment Green Investment Profit from the green revolution Reduce your carbon foot print and make a positive impact on the environment and the community by investing in clean and green energy. Bali offers untaped green investment potential as the booming tourism industry draws an international crowd of environmentally conscious people to the island who not only want to livre a healthy lifestyle being close to nature but also perserve it Despite the vast potential of being an ecohub the island’s consciousness towards the environment is poorly managed due to a mentality of unhygienic lifestyle especially relating to waste disposal. Passed down from generations, the people of Bali are taught that everything used in their daily life are easily disposed of by dumping them out in nature and in public places. This sort of mentality exists because their ancestors haver grown accustomed to using everyday items made from natural materialks like wood and plant fiber. However times have changed as people use everyday items that are synthetically made that damage nature. Unfortunately the Balinese have not caught up to this change as they are still stuck with the outdated mindset of their ancestors. This is where you, the investor come in. You can invest in building green businesses li…
has answer: http://stackoverflow.com/a/79056330
tagged with: css
tagged with: flexbox
type: UnansweredQuestion
score: 0
has answer: http://stackoverflow.com/a/79056370

http://stackoverflow.com/comment/139177834
has text: Thank you! I should have figured that out.... ;-(
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78936656
type: Comment

http://stackoverflow.com/comment/139229764
type: Comment
type: QuestionComment
score: 1
has text: Not sure if this is a fully appropriate reproduction of the problem, https://jsfiddle.net/qc0toaex/1/ - but the effect appears to have to do with the fact that you just positioned the image absolute, but without using the container as the reference point. The viewport is getting scrollbars, due to how you are scaling the `.services-home` - and that in turn then changes the position of the image. Un-comment the `/*position: relative;*/` I put on that element there, and you'll see the difference.
comment on: http://stackoverflow.com/q/78965578

http://stackoverflow.com/comment/139163520
score: 0
comment on: http://stackoverflow.com/q/78929400
type: QuestionComment
has text: Can you make your code into a runnable snippet so we can see the problem? Use the <> icon in the editor.
type: Comment

http://stackoverflow.com/comment/139136806
comment on: http://stackoverflow.com/q/78915126
type: QuestionComment
has text: well,I thought it's a better practise to store fonts locally
score: 0
type: Comment

http://stackoverflow.com/a/79045550
has body: SVG is much like HTML in the way of styling with CSS (there are some differences syntactically and some legacy code). The following is the relevant CSS that will enable the behavior you requested. .primary { fill-opacity: 0.4; transition: 0.75s ease-in-out; } .primary:not(:hover) { fill-opacity: 1.0 } .section:hover { fill-opacity: 1.0; transition: 0.75s ease-in-out; } .section:hover~.center { fill-opacity: 1.0 } I also cleaned up the extra garbage that was copied and pasted and fixed 2 of the broken groups. To fix the rest of them you need to assign proper x and y coordinates. Also there should be only 2 <circle>s the rest have been removed. Moreover ids are unique (only one #parent!) so be careful when you copy HTML. * { margin: 0; padding: 0; border: none; } :root { font: 16px/1 "Segoe UI" } body { color: #FFC355; background-color: #002233; overflow-y: scroll; } .primary { fill-opacity: 0.4; transition: 0.75s ease-in-out; } .primary:not(:hover) { fill-opacity: 1.0 } .section:hover { fill-opacity: 1.0; transition: 0.75s ease-in-out; } .section:hover~.center { fill-opacity: 1.0 } text { font-weight: 700; text-anchor: middle; stroke-width: 0; } .khs { baseline-shift: -30; } .prc { baseline-shift: -55; } <circle cx="250" cy="250" r="240" stroke="black" fill="black" stroke-width="0" fill-opacity="1" /> <g class="primary" stroke-width="2.5" stroke-linecap="butt" stroke-linejoin="miter" stroke="black"> <g class="section"> <path id="p1" d="M 250 250 L 250 25 A 225 225, 0, 0, 1, 458.7056796681 334.06508950971 Z" fill="#d35400" /> 8.21 KH/s 31.1% </g> <g class="section"> <path id="p2" d="M 250 250 L 458.7056796681 334.06508950971 A 225 225, 0, 0, 1, 171.59428106039 460.89699674856 Z" fill="#aa2200" /> 6.49 KH/s 24.6% </g> <g class="section"> <path id="p3" d="M 250 250 L 171.59428106039 460.89699674856 A 225 225, 0, 0, 1, 56.284491015906 364.45218031577 Z" fill="#eb2f06" /> 2.86 KH/s 10.8% </g> <g class="section"> <path id="p4" d="M 250 250 L 56.284491015906 364.45218031577…
score: 0
has comment: http://stackoverflow.com/comment/139385351
answers question: http://stackoverflow.com/q/79044610
has comment: http://stackoverflow.com/comment/139387638
type: Answer

http://stackoverflow.com/comment/139396034
type: AnswerComment
comment on: http://stackoverflow.com/a/79051207
type: Comment
has text: Ah, so you can’t use center and gap the same way. Please put this constraint in your question as it makes a difference. I will delete this answer when you’ve done that, thanks.
score: 0

http://stackoverflow.com/q/79028815
has answer: http://stackoverflow.com/a/79028934
upvote count: 1
answer count: 2
tagged with: css
has answer: http://stackoverflow.com/a/79028822
has body: I'm developing a website that will have a "learn more" button that's split in two, one part says "learn more" and the other says "+". When the mouse hovers over it the "learn more" part disappears and the "+" grows to take up the entire space of the button, and I'm doing that by animating the width of both halves of the button with css. The problem is that the text is moving/wrapping as the width of the element reduces. Here's a gif of how the button is working right now: learn more button I want to find a way for the text to stay in place and just disappear behind the "+" element without wrapping as the mouse hovers over the button. I've searched online and I've tried playing around with the word-wrap and position properties and I've also tried putting the button texts in inside a paragraph but I haven't been able to make it work. I have a feeling it's something simple but I just haven't been able to work it out. Or if there's a simpler way to create a button with this functionality I would also love to know. Here's my code: .button-container { height: 4vw; width: 19vw; display: flex; align-items: center; padding: 0; border: none; cursor: pointer; } .button { height: 4vw; align-content: center; font-family: "Comfortaa", cursive; transition-duration: 0.6s; transition-property: width; transition-timing-function: ease-in-out; } .button-label { width: 15vw; background: #07BEB8; color: #FFF; font-size: 1.3vw; overflow: hidden; } .button-symbol { width: 4vw; background: #3DCCC7; color: #FFF; border-left: solid #FFF; font-size: 1.6vw; font-weight: bold; } .button-container:hover .button-label { width: 0; } .button-container:hover .button-symbol { width: 19vw; } ``` Learn More +
has title: How to prevent text moving when transitioning sibling element's width
accepted answer: http://stackoverflow.com/a/79028934
tagged with: width
score: 1
tagged with: css-transitions
favorite count: 0
tagged with: http://stackoverflow.com/tag/html
type: Question
downvote count: 0
tagged with: button
type: AnsweredQuestion
possible better answer: http://stackoverflow.com/a/79028822

http://stackoverflow.com/comment/139181390
has text: You may need to be aware that background-attachment fixed has problems on IOS
score: 1
type: Comment
comment on: http://stackoverflow.com/q/78938279
type: QuestionComment

http://stackoverflow.com/comment/139412225
score: 0
type: QuestionComment
has text: check the quotes in the HTML, from the error it doesn't seem to pick up quotes, and it thinks class is an attribute.. (trailing curly quote in `'btn-primary”'`..)
type: Comment
comment on: http://stackoverflow.com/q/79065331

http://stackoverflow.com/comment/139201173
has text: I don’t think either of those references tackles the overflow settings in the parent, which is what this question is about. This reference describes the phenomenon: https://www.w3.org/TR/CSS21/visudet.html#block-root-margin
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78950019

http://stackoverflow.com/comment/139228049
type: AnswerComment
has text: As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer).
score: 1
comment on: http://stackoverflow.com/a/78949060
type: Comment

http://stackoverflow.com/comment/139276820
type: QuestionComment
comment on: http://stackoverflow.com/q/78991187
type: Comment
score: 0
has text: Ask MudBlazor on their GitHub Site -> issues?

http://stackoverflow.com/comment/139155666
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78925311
has text: If it is consistent, and thus reproducible, then it would be very helpful if you provided an example of the HTML that causes this problem. It will be very difficult to debug something we cannot reproduce.

http://stackoverflow.com/comment/139364272
score: 0
has text: you want me to add my full code @mplungjan
type: QuestionComment
type: Comment
comment on: http://stackoverflow.com/q/79038954

http://stackoverflow.com/q/78991837
type: AnsweredQuestion
linked to: http://stackoverflow.com/q/13975198
score: 0
tagged with: css
has comment: http://stackoverflow.com/comment/139280124
has title: Box shadow disappears when saving webpage as PDF using "Ctrl + P"
upvote count: 1
has answer: http://stackoverflow.com/a/78992319
has body: I am working on a webpage where I have applied a box shadow to an element with the following CSS .pill-shap { width: 100%; height: 147px; border-radius: 100px; box-shadow: 0px 5px 5px 1px rgba(49, 49, 49, 0.3); display: flex; padding: 0; } The box shadow is displayed correctly on the screen in the browser. However, when I press Ctrl + Pand try to save the webpage as a PDF, the box shadow disappears in the print preview and the final PDF. I've tried adjusting the box-shadow properties, but nothing seems to work. How can I ensure that the box shadow is visible in the printed PDF version? picture of boxes in chrome picture of boxes In print view Any help would be greatly appreciated! Edit : I have Checked in chrome and Firfox not working in both
accepted answer: http://stackoverflow.com/a/78992319
favorite count: 0
tagged with: http://stackoverflow.com/tag/html
type: Question
answer count: 1
has comment: http://stackoverflow.com/comment/139278097
downvote count: 1

http://stackoverflow.com/a/78980655
answers question: http://stackoverflow.com/q/78980450
type: Answer
score: 0
has body: Iterate over the potentially disabled elements and push truthy comparisons into an empty array. Then compare the length of the array and input elements nodeList length and add/remove a helper class to the target element accordingly. function disableGroup(el) { const group = document.querySelector(el); // get the group parent element const inputs = group.querySelectorAll('input'); // get inputs const result = []; // empty array inputs.forEach(input => { // loop over the inputs input.disabled ? result.push(true) : null; // if input.disabled push true into array }); result.length === inputs.length ? // compare the two lengths group.classList.add('none') : // if they are equal add helper class group.classList.remove('none') // if not remove helper class } disableGroup('.filter-form__group'); disableGroup('.filter-form__group2'); .none { display: none; } Do not display filter-form__group if all input childNodes are disabled Form group 1: Form group 1: Form group 2: Form group 2:

http://stackoverflow.com/comment/139501427
type: QuestionComment
has text: @MarkSchultheiss How can I provide a visual if I am trying to figure out the CSS to create the visual?
type: Comment
comment on: http://stackoverflow.com/q/79035820
score: 0

http://stackoverflow.com/a/79049243
downvote count: 0
has body: A trick can do. you can preserve the scroll position before moving it to another row. document.getElementById("btn").addEventListener("click", function () { const container = document.getElementById("container"); /* Stored the scroll position */ const scrollPosition = container.scrollLeft; const currentRow = container.parentElement; const nextRow = currentRow.nextElementSibling; if (nextRow && nextRow.classList.contains("row")) { nextRow.appendChild(container); /* Set the scroll position after moving it to another row */ container.scrollLeft = scrollPosition; } });
type: Answer
upvote count: 1
answers question: http://stackoverflow.com/q/79049053
score: 1

http://stackoverflow.com/q/78922736
has title: Problems with width="100%" of iFrame
type: UnansweredQuestion
type: Question
has comment: http://stackoverflow.com/comment/139150616
has body: I have the following iFrame: The problem is now that I get a website with a horizontal scrollbar. How can I configure the iframe, that it fits exactly the with of my screen? I tried to remove the width="100%" I also tried to remove the width:100%; in style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute; Many thanks for your answers.
tagged with: http://stackoverflow.com/tag/html
has answer: http://stackoverflow.com/a/78922935
answer count: 1
has comment: http://stackoverflow.com/comment/139150642
score: 0
has comment: http://stackoverflow.com/comment/139150643
tagged with: css
has comment: http://stackoverflow.com/comment/139150593

http://stackoverflow.com/comment/139133055
has text: @AntonijaŠimić Okie Mam https://codesandbox.io/p/sandbox/intelligent-goldwasser-glm4hm I also collabed u in the codesandbox mam kindly help me, mam
score: 0
comment on: http://stackoverflow.com/q/78913099
type: Comment
type: QuestionComment

http://stackoverflow.com/q/79061496
tagged with: ellipsis
tagged with: overflow
tagged with: css
has body: The text is truncated by CSS rules text-overflow: ellipsis; and -webkit-line-clamp:3; but when the text is longer and goes to next row, sometimes the next row is showing few pixels. element.innerHTML doesn't show the three dots from ellipsis, so I can't detect it with regex and remove it. How can I remove the remaining text from html element after ellipsis is added? In the example the height of the div should stay the same let ele = document.getElementById('header-inner'); ele.innerHTML = 'There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which '; #header-inner { height: 80px; display: -webkit-box; font-size: 15px; font-weight: normal; font-style: normal; text-decoration: none; border-width: 1px; max-height: 62px; text-overflow: ellipsis; overflow: hidden; -moz-box-orient: vertical; white-space: unset; -webkit-line-clamp: 3; padding-top: 0px; } &lt;div id='header-inner'&gt;&lt;/div&gt;
type: UnansweredQuestion
has title: Remove the rest of the innerHTML text after ellipsis
has answer: http://stackoverflow.com/a/79061537
type: Question
answer count: 1
score: 0
tagged with: javascript
has comment: http://stackoverflow.com/comment/139405322

http://stackoverflow.com/q/78949908
tagged with: react-native
answer count: 0
tagged with: stylesheet
tagged with: css
tagged with: linear-gradients
has title: How to elevate a view in react native?
type: UnansweredQuestion
has body: I am trying to add elevation so that I can add a effect share below but right now my code isn't adding that effect. I have even tried linear-gradient to add such effect in view but still not able to achieve it. code: <TextInput placeholder={placeholder} style={[currentStyles.input, currentStyles.txt, style]} onBlur={onBlur} onChangeText={onChange} value={value} /> </View> stlying: inputView: { backgroundColor: "#00000040", // Transparent to show gradient height: pixelSizeHorizontal(60), paddingHorizontal: pixelSizeHorizontal(10), shadowColor: "#747474", shadowOffset: { width: 5, height: 0 }, shadowOpacity: 0.8, shadowRadius: 0.1, elevation: 24, borderRadius: 10, }, input: { marginTop: pixelSizeVertical(10), height: pixelSizeHorizontal(45), }, How can add below shared effect in view that wraps TextInput?
score: 1
favorite count: 0
type: Question
downvote count: 0
tagged with: javascript
upvote count: 1

http://stackoverflow.com/comment/139389368
has text: I tried that but still had the same problem
score: 0
comment on: http://stackoverflow.com/q/79051162
type: Comment
type: QuestionComment

http://stackoverflow.com/comment/139293788
score: 0
type: QuestionComment
has text: "middle" alignment differs from your expectation by half the x-height of the parent, exactly as the third duplicate explains. "top" and "bottom" alignment differs from your expectation because of the difference between the line-height of the span (that which is aligned) and the height of the span's border box (which is the blue background painted area). Try adjusting the line-height of the span to see the discrepancy change.
comment on: http://stackoverflow.com/q/78998686
type: Comment

http://stackoverflow.com/comment/139120409
comment on: http://stackoverflow.com/a/78906107
type: AnswerComment
type: Comment
has text: The image is currently rendered behind the overlay, but you can swap the order of the elements to change that.
score: 0

http://stackoverflow.com/q/78938648
answer count: 1
type: AnsweredQuestion
upvote count: 0
has comment: http://stackoverflow.com/comment/139180273
has body: I found many examples that show similar functionality, but when I try tailoring those examples to a specific format - things do not work as I need them to. What I am trying to achieve: Having a block with three text lines of text One of the lines contains two special characters - hovering over A would show a pop-up window with text, hovering over B would display an image text1 text2 A B text3 The example I found used applied the CSS style to a hyper link object, so to make it look like a regular text I added the following style: .popup a { color: #000000; text-decoration: none; } To make the pop-up text or the image invisible but show up on mouse hover, I use the following two CSS styles: .popup a span { display: none; } .popup a:hover span { display: block; position: relative; << "absolute" is not working well bottom: 50px; left: 50px; width: auto; margin: 0px; color: #335500; font-weight: normal; background: #e5e5e5; text-align: left; border: 1px solid #666; } The HTML contains the following: text1 text2 ALineX LineY LineZ B text3 The Problems: when I hover over A or B, the description or the image show up, respectively. However, instead of floating above the page layer, the description or the image show up in-line, distorting/moving the current page layout and shifting everything based on its size. The description or the image box traverse the entire page despite their smaller sizes and the fact that they belong to Changing position attribute from relative to absolute seems to help, but when I have similar objects down the page - they do not show up (probably because they are too down the page) The Goals: Get pop-up windows of description and image when hoovering over A or B, respectively, similar to how the tooltip works. Have the description or image show up at the top right corner relative to the A or B, respectively Please point me to my mistakes - I am not sure if this is the correct implementation path, so if there is a better approach to achieve this (pref…
downvote count: 2
has answer: http://stackoverflow.com/a/78939053
tagged with: css
accepted answer: http://stackoverflow.com/a/78939053
has title: Text/image pop-ups on hover not showing up as expected
favorite count: 0
score: -2
has comment: http://stackoverflow.com/comment/139180180
type: Question
tagged with: http://stackoverflow.com/tag/html

http://stackoverflow.com/a/78922655
score: 0
type: Answer
has body: Firefox flex: 0 seems to have a bad relationship with firefox. If you remove flex: 0, the original proportion of the image will be expressed. You can adjust the size as you want. * add: If you use flex:0 and width: n%, the width of the image is 0. Other units such as px, em, and rem are possible. Chrome Even if flex: 0 is set, the image comes out well. * add: If you use flex:0 and width: n%, the width of the image not changed. Other units such as px, em, and rem are possible.
answers question: http://stackoverflow.com/q/78921976

http://stackoverflow.com/q/79058686
tagged with: css
has answer: http://stackoverflow.com/a/79058690
duplicate of: http://stackoverflow.com/q/36247140
has title: flex items not shrinking (tailwind css)
tagged with: flexbox
type: UnansweredQuestion
type: Question
answer count: 1
has body: To be viewed on mobile screen size. Each image is in a div that's display flex Each image is set to a big size. The flex shrink is set on all images, but theyare not shrinking. The images are overflowing the flex container. Expected behavior: All images should shrink so they are all showing on screen without wrapping like in this picture.. https://play.tailwindcss.com/rP79Yfa2IR
tagged with: tailwind-css
score: 0
linked to: http://stackoverflow.com/q/36247140
has comment: http://stackoverflow.com/comment/139399936

http://stackoverflow.com/comment/139415792
type: Comment
has text: There are a couple of syntax errors in your HTML. What happens if you mend those?
comment on: http://stackoverflow.com/q/79067108
type: QuestionComment
score: 1

http://stackoverflow.com/comment/139354436
has text: And if you wanted to trigger the modal only when a button is clicked on? (I mean with ```autoOpen: false```)
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/79033554

http://stackoverflow.com/q/78993240
type: AnsweredQuestion
has body: I want to hide/visible a form based on checkbox in google webapp. If the checkbox is in checked condition then the form will be in visible else it should in hidden. I want to try with below mentioned code block. But not happen. if (document.getElementById("df1").checked) { document.getElementById("co").style.visibility = "hidden"; } else { document.getElementById("co").style.visibility = "visible"; } Name Roll No.
tagged with: javascript
score: -2
has answer: http://stackoverflow.com/a/78993283
tagged with: css
has answer: http://stackoverflow.com/a/78993277
has answer: http://stackoverflow.com/a/78993261
has title: HTML form visible or hidden based on checkbox condition
answer count: 4
upvote count: 0
has comment: http://stackoverflow.com/comment/139280438
favorite count: 0
has answer: http://stackoverflow.com/a/78994206
downvote count: 2
accepted answer: http://stackoverflow.com/a/78993283
has comment: http://stackoverflow.com/comment/139283711
possible better answer: http://stackoverflow.com/a/78993277
type: Question
tagged with: http://stackoverflow.com/tag/html
tagged with: google-apps-script
linked to: http://stackoverflow.com/q/49603161
tagged with: web-applications

http://stackoverflow.com/q/78986984
has title: Centering a div where a dropdown menu comes from
has body: I'm currently trying to make a drop down menu for my mobile design for my website. The menu should appear under my logo, but the div where the drop down menu comes from is not aligned with the logo and when I try to move this div, it causes issues with the positioning of the logo. I want the drop down menu to come down from the center of the header, no matter the screen size. Here is the CSS that is relevent to the question: General CSS: #header { height:7em; background:black; display: flex; align-items: center } Mobile Styling: h1 { font-size: 3em; text-align:center; padding: 0; margin: 0; } #shadowBox { width:100%; touch-action: manipulation; text-align:center; display: flex; justify-content:center; } #header { flex-wrap:wrap; } .dropdown { overflow: hidden; } .dropdown .dropbtn { font-size: 1em; border: none; outline: none; background-color: black; font-family: inherit; margin: 0; padding: 0; } .dropbtn { border: none; outline: none; background-color: black; } .dropdown-content { position: absolute; background-color: black; min-width: 10em; box-shadow: 0em 0.5em 1em 0em rgba(0,0,0,0.2); z-index: 1; opacity: .85; top:7em; } .dropdown-content a { float: none; color: white; padding: 0.75em 1em; text-decoration: none; display: grid; text-align: center; width: 8em; margin:0; } .dropdown-content a:hover { background-color: #3c0025; transition: 0.5s; } .dropdown-content a:hover { color: #21f6c2; } .dropdown-content a:active { color: #d4f621; } .dropdown:hover .dropdown-content { display: grid; } .hidden { display: none; } } /* Mobile Fixing */ @media (max-width: 931px) { .dropdown { display: inline-block; } #links { display: none; } .dropdown-content { display: none; } .dropdown:hover .dropdown-content { display: inline-block; } } And here is the relevent HTML: home about commissions portfolio cv credit LOGO home about commissions portfolio cv credit I'm not sure if all of the CSS is necessary or needs to be included in my question, I want to make sure I'm including eve…
has answer: http://stackoverflow.com/a/78988928
tagged with: css
tagged with: mobile
score: 0
type: Question
accepted answer: http://stackoverflow.com/a/78988928
tagged with: http://stackoverflow.com/tag/html
answer count: 1
type: AnsweredQuestion
has comment: http://stackoverflow.com/comment/139269076

http://stackoverflow.com/comment/139264034
comment on: http://stackoverflow.com/q/78979287
type: Comment
score: 0
has text: I’ve tried changing the styling of the overflow, max height, z index, height of parent div, I’ve tried changing how the pop up drops down so it drops up instead but that didn’t work either. I’ve tried rearranging elements on the page , but nothing has been able to solve my problem. I need it so that the content of the parent div expands when the pop up drops down, instead of the parent having extra flex space that it doesn’t expand to at the bottom.
type: QuestionComment

next.js14
tags question: http://stackoverflow.com/q/78947964
type: Tag
tags question: http://stackoverflow.com/q/79005516
tag name: next.js14
tags question: http://stackoverflow.com/q/79218538

http://stackoverflow.com/comment/139259519
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78981776
has text: What devices are you using to test the Retina display behaviour?
type: Comment

http://stackoverflow.com/comment/139286630
score: 0
has text: did you happen to get the answer you were looking for?
comment on: http://stackoverflow.com/q/78985952
type: QuestionComment
type: Comment

http://stackoverflow.com/comment/139266589
has text: use `display:flex` and `justify-content: space-between`. Refer **[Link](https://www.w3schools.com/cssref/playdemo.php?filename=playcss_justify-content&preval=space-between)**
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78985736
type: QuestionComment

http://stackoverflow.com/comment/139382354
has text: The issue is that the number of rows in the matrix don't match the number of columns in the vector to be equal (assuming DOM elements are 2D). Looking at the spec. linked by @TemaniAfif I see it defines a 4x4 matrix which again is the wrong shape. As for a non-linear transformation or special-cased transf., brought up by A Haworth I wonder why are they representing it as a 3x3 matrix? I actually don't see the quote you copied in the reference. I have a basic understanding of linear algebra, but not advanced. Trying to walk through the math and any clarification helps
type: QuestionComment
comment on: http://stackoverflow.com/q/79048247
type: Comment
score: 0

http://stackoverflow.com/comment/139396894
score: 0
has text: sry, newbie as the kind of question shows :)
type: QuestionComment
comment on: http://stackoverflow.com/q/79056932
type: Comment

http://stackoverflow.com/comment/139337126
type: QuestionComment
type: Comment
comment on: http://stackoverflow.com/q/79023748
has text: Did you try placing the CSS rule in another file through the ` ` tag at the document root head? You can also try using the `!important` modifier...
score: 0

http://stackoverflow.com/comment/139502406
type: Comment
comment on: http://stackoverflow.com/q/79035820
has text: A handrawn sketch of what the before and after should look like would be helpful.
score: 1
type: QuestionComment

http://stackoverflow.com/comment/139286976
score: 0
type: QuestionComment
has text: hmmm, you'd better not to share the complete project.... A minimal sample shall be better. Since we had a 400 error in console window, there might be something wrong within your project, and I'm afraid even if you share the whole project, it will be hard to narrow down the issue. If you are completely sure that you didn't make any changes in your project and the issue occurred all of a sudden, it might also relate to the environment. If it possible, can you please create a new project to see whether CSS isolation worked? And if possible, do you have another computer to test your project?
comment on: http://stackoverflow.com/q/78987974
type: Comment

cube
tags question: http://stackoverflow.com/q/78911856
tag name: cube
type: Tag

http://stackoverflow.com/q/78935728
type: UnansweredQuestion
type: Question
answer count: 1
tagged with: http://stackoverflow.com/tag/html
score: 0
tagged with: javascript
has body: I make a page with support like in chatbots, that is, messages are added at the top, and Form Field is added at the bottom, when there are a lot of messages and they do not fit into the screen, they stand behind the form, they go down where the background image ends, I would like only messages to move when scrolling and do not go behind the form, that is, the background-attachment was fixed, but if I set background-attachment: fixed; It turns out not what he wanted i tried using background-attachment: fixed; but it dont help. Fixed element it is form your text html code: {% for mess in messages %} {{ mess }} {% endfor %} css code: #img { background-image: url("coffeeShop.jpg"); height: 100vh; background-repeat: no-repeat; background-size: cover; } .blur-us { height: 93vh; width: 900px; padding:50px; padding-bottom:0px; } .my-form { position: fixed; bottom: 0; z-index:4; padding-top: 10px; } #dynamic-textarea { height: auto; width: 800px; padding: 15px; padding-right: 70px; box-sizing: border-box; border-radius: 50px; border: 1px solid #ccc; resize: none; color: #fff; background-color: #333; overflow-y: hidden; }
has title: How to scrolling a page just so that it doesn't affect the background image and fixed element?
has comment: http://stackoverflow.com/comment/139176294
has answer: http://stackoverflow.com/a/78935821
tagged with: css

http://stackoverflow.com/q/79012948
upvote count: 0
favorite count: 0
type: Question
answer count: 1
type: AnsweredQuestion
accepted answer: http://stackoverflow.com/a/79013090
has body: I'm trying to set a custom background gradient in Obsidian using the following CSS snippet: .workspace, .markdown-preview-view, .markdown-source-view, .side-dock, .mod-root { background-color: transparent !important; } body { background-size: 500px 500px; background-image: radial-gradient(circle, #000000 1px, rgba(0, 0, 0, 0) 1px); } However, the background gradient is not appearing as expected. I've ensured that the CSS is applied correctly, but it seems to be overridden or ignored. What I've checked: The theme allows custom CSS. The CSS is saved in the correct file (e.g., obsidian.css). No other styles are overriding my CSS.
has title: Background Gradient Not Appearing in Obsidian with Custom CSS
score: -1
tagged with: obsidian
tagged with: css
has answer: http://stackoverflow.com/a/79013090
downvote count: 1

http://stackoverflow.com/q/79035901
answer count: 0
type: UnansweredQuestion
upvote count: 1
has title: Sticky HTML5 video's z-index is ignored until it finishes
has comment: http://stackoverflow.com/comment/139358504
tagged with: css
type: Question
downvote count: 1
tagged with: z-index
has body: I have a page with a HTML5 video surrounded by dummy content at the top and at the bottom. The goal is to show how the video is looking in the context of a content-rich page. The video is displayed using a "interscroller effect". This is a common solution in the advertisement industry where the display time of an ad is being maximised. It works by setting position: sticky together with e.g. bottom: 0 on the video element and combining it with a lower z-index than the actual content. That way the video is always at the bottom of the page but hidden behind the content. Then, when scrolling down, at some point the video is revealed by the overlaying text. This works fine, however when scrolling past the HTML5 video element and going back to the top of the page, it's being displayed on top of the content, although that shouldn't be possible due to the lower z-index. This happens on three major browsers I tested it with (mobile and desktop): Safari, Chrome and Firefox. It's like after scrolling past the video and revealing it, the z-index of the element is messed up. Now the funny part is, after the video (which is playing in a loop of ~ 10 seconds) finishes, the z-index seems to be reset and the video disappears behind the content again (as it should when you're at the top of the page again after scrolling around). I tried to create a minimal example of the issue without too much styling and it still occurs, so I assume there's some deeper CSS-Browser-Engine-related issue with the video element combined with position: sticky and the z-index. A minimal example looks like this: https://codepen.io/xteroz/pen/PoMPNWW Now, the irony is, when running this in codepen, everything looks as it should. To reproduce the behaviour, take the HTML and the CSS and put it into a single file: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolore…
tagged with: html5-video
score: 0
has comment: http://stackoverflow.com/comment/139359603
tagged with: sticky
favorite count: 0
has comment: http://stackoverflow.com/comment/139359383
tagged with: http://stackoverflow.com/tag/html

http://stackoverflow.com/comment/139407502
type: QuestionComment
has text: in that list of unsupported properties, "object-fit" is a link to an entire [discussion](https://github.com/niklasvh/html2canvas/issues/1064) on the html2canvas github with many users posting their workarounds
type: Comment
score: 0
comment on: http://stackoverflow.com/q/79060035

http://stackoverflow.com/a/78931772
accepted answer of: http://stackoverflow.com/q/78929748
has body: Using actual subgrid seems to solve your issue as covered in Align Child Elements Different Blocks * { margin: 0 } .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(133px, 1fr)); gap: 5px; border: 1px solid grey; margin-bottom: 30px; } .card { display: grid; grid-template-rows: subgrid; grid-row: span 3; border: 1px solid red; } .middle { background-color: lightblue; } .optional { font-size: .6rem; } .pseudo-screen-large { width: 600px; } .pseudo-screen-medium { width: 300px; } .pseudo-screen-small { width: 150px; } Small: A1 - Short Text A2 *Explanatory Text B1 - Longer Text that is going to wrap to 3 lines because it is really long B2 C1 - Medium Text that is going to wrap to 2 lines C2 *Explanatory Text Medium: A1 - Short Text A2 *Explanatory Text B1 - Longer Text that is going to wrap to 3 lines because it is really long B2 C1 - Medium Text that is going to wrap to 2 lines C2 *Explanatory Text Large: A1 - Short Text A2 *Explanatory Text B1 - Longer Text that is going to wrap to 3 lines because it is really long B2 C1 - Medium Text that is going to wrap to 2 lines C2 *Explanatory Text
score: 1
has comment: http://stackoverflow.com/comment/139168862
type: AcceptedAnswer
downvote count: 0
type: Answer
answers question: http://stackoverflow.com/q/78929748
upvote count: 1

http://stackoverflow.com/a/78986353
accepted answer of: http://stackoverflow.com/q/78986317
has comment: http://stackoverflow.com/comment/139267805
has comment: http://stackoverflow.com/comment/139294443
downvote count: 1
has comment: http://stackoverflow.com/comment/139268264
has comment: http://stackoverflow.com/comment/139277856
type: AcceptedAnswer
has comment: http://stackoverflow.com/comment/139272204
has comment: http://stackoverflow.com/comment/139278101
has comment: http://stackoverflow.com/comment/139271266
has body: After some trials and discussions, I'm changing the content of this answer to the bestter solution I found about this...There's a long time that I don't delve in CSS.. .inner-remaining-div must have overflow: hidden to clip the extra content and hide the scrollbars. .picture-div-img must have object-fit: scale-down. The snipped below is pretty much working as you intend... It's unfortunate that the scale-down keyword is not a valid value for background-size, so I went back to solve it with the img tag. /* The outlines are all "inside-outlines": their negative offset makes their *outer* edges trace the container. This is done because otherwise the outline of the outermost container, HTML, would not be visible on the north and west sides of the window */ html { height: 100%; width: 100%; /* Outline shows that "html" always exactly fits the window */ outline: 4px double black; outline-offset: -4px; } body { margin: 0; /* prevent body from displacing to the southeast */ height: 100%; /* body should perfectly superimpose the html */ width: 100%; outline: 4px dashed; outline-color: rgba( 255 0 0 / 1); outline-offset: -4px; } .outer-div { display: flex; flex-flow: column; height: 100%; /* Now create left/right margins */ margin: 0 0.5em; } .inner-fixed-div { outline: 4px dotted blue; outline-offset: -2px; } .inner-remaining-div { outline: 4px dotted yellow; outline-offset: -4px; /* text-align: center; */ flex-grow: 1; /* hints the contents to not overflow */ overflow: hidden; } .picture-div { outline: 4px dashed lime; outline-offset: -4px; /* force the div to fill the available space */ width: 100%; height: 100%; } .picture-div-img { outline: 4px dotted purple; outline-offset: -4px; /* force the image to stay true to its proportions */ width: 100%; height: 100%; /* and force it to behave like needed */ object-fit: scale-down; object-position: top; } Static portion Lorem ipsum odor amet, consectetuer adipiscing elit. Per dignissim arcu imperdiet accumsan suscipit. Nisl done…
type: Answer
has comment: http://stackoverflow.com/comment/139270597
score: 0
has comment: http://stackoverflow.com/comment/139267842
has comment: http://stackoverflow.com/comment/139271819
has comment: http://stackoverflow.com/comment/139267970
upvote count: 1
answers question: http://stackoverflow.com/q/78986317

http://stackoverflow.com/comment/139137191
score: 0
type: AnswerComment
has text: I finally got it, thanks so much for your help!
comment on: http://stackoverflow.com/a/78915574
type: Comment

http://stackoverflow.com/comment/139397742
has text: this worked perfectly!! thank you so much.
type: AnswerComment
comment on: http://stackoverflow.com/a/79057513
type: Comment
score: 0

http://stackoverflow.com/comment/139158148
score: 3
type: QuestionComment
has text: There will always be a way for the user to scroll/zoom at a level that's outside of your control (eg. at OS level). Your time will be far better spent making your canvas tolerant of this instead of trying to lock it down.
comment on: http://stackoverflow.com/q/78926760
type: Comment

http://stackoverflow.com/comment/139199043
type: QuestionComment
type: Comment
has text: Of course, you have to limit the height according to that standard so that you can get the result you want. It's already in the answer
comment on: http://stackoverflow.com/q/78948750
score: 0

http://stackoverflow.com/a/79065783
answers question: http://stackoverflow.com/q/79065672
accepted answer of: http://stackoverflow.com/q/79065672
downvote count: 0
score: 1
upvote count: 1
has body: Add position: relative to svg-inner-container class and position: absolute to svg class. Also you can remove additional height and width from inner container. The reason why svg overflows when you uncomment inner div is because inner container adds an additional layer of sizing. Then inner container will try to take the size of outer container which is set to 100% width and height that's why it looks like svg overflowed but actually it just takes its parents width and height. .root{ width: 100vw; height: 100vh; } .svg-outer-container{ display: grid; grid-template-rows: auto; grid-template-columns: auto; width: 100%; height: 100%; border: 2px solid red; } .svg-inner-container { position: relative; } .svg{ width: 100%; height: 100%; background: lightgreen; position: absolute } polygon { fill: skyblue; stroke: purple; stroke-width: 1; } body { margin: 0; } * { box-sizing: border-box; } &lt;div class="root"&gt; &lt;div class="svg-outer-container"&gt; &lt;div class="svg-inner-container"&gt; &lt;svg class="svg" viewBox="0 0 100 100" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"&gt; &lt;polygon points="50,0 100,50 50,100 0,50"/&gt; &lt;/svg&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;
has comment: http://stackoverflow.com/comment/139416097
type: AcceptedAnswer
type: Answer

http://stackoverflow.com/q/79061980
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139406180
type: Question
has title: CSS Flex-Box: .map results exceed div container
answer count: 1
has answer: http://stackoverflow.com/a/79063381
tagged with: reactjs
score: 0
has body: I cannot "adjust" the results from an API query which are mapped with .map function to fit inside a div container. I am using react. Here is my CSS: .book-results-container { max-height: 250px; overflow-y: scroll; margin-top: 10px; border: 1px solid #ddd; padding: 10px; border-radius: 3px; } .book-results { margin-bottom: 5px; flex: 1 1 auto; } And this is the code from the corresponding component: {books.map((book) => { const isbn13 = book.volumeInfo.industryIdentifiers?.find(identifier => identifier.type === 'ISBN_13')?.identifier || 'No ISBN_13 available'; return ( {book.volumeInfo.title} {book.volumeInfo.authors?.join(', ')} {book.volumeInfo.publishedDate} ISBN 13: {isbn13} copyToClipboard(isbn13)}> ); })} Here is a screenshot how it is rendered onto the viewport:
has comment: http://stackoverflow.com/comment/139484127
tagged with: css
has comment: http://stackoverflow.com/comment/139406309
tagged with: flexbox

popup
tags question: http://stackoverflow.com/q/78971889
type: Tag
tags question: http://stackoverflow.com/q/79041692
tag name: popup
tags question: http://stackoverflow.com/q/79091892

http://stackoverflow.com/a/79064125
has comment: http://stackoverflow.com/comment/139417960
has body: The difference appears to be that Firefox is not respecting min-height: fit-content correctly. In Chrome, the ul's height is set to that of its content, so there's no overflow and no need for scrollbars. In Firefox, the ul's height is shrunk by the default flex-shrink:1, so the ul's are shorter than their content, the content overflows and Firefox accordingly shows the scrollbars. Also with #scrollable-sidebar &gt; * { padding: 0 1rem; overflow-x: hidden; overflow-y: visible; } overflow-x: hidden; and overflow-y: visible; don't mix. Consequently the overflow-y: visible;is automatically converted to overflow-y: auto; A couple of ways forward. One is to add #scrollable-sidebar ul { flex-shrink: 0; } so that the ul's aren't shrunk and their content doesn't overflow. Another is to change the overflow rules to #scrollable-sidebar &gt; * { padding: 0 1rem; overflow-x: clip; /* i.e. use clip, not hidden */ overflow-y: visible; } so the ul's are not scroll containers.
type: AcceptedAnswer
answers question: http://stackoverflow.com/q/79064004
type: Answer
accepted answer of: http://stackoverflow.com/q/79064004
has comment: http://stackoverflow.com/comment/139411195
score: 0
has comment: http://stackoverflow.com/comment/139417955

http://stackoverflow.com/q/78943090
has answer: http://stackoverflow.com/a/78943162
type: UnansweredQuestion
type: Question
has comment: http://stackoverflow.com/comment/139188215
has answer: http://stackoverflow.com/a/78943502
tagged with: http://stackoverflow.com/tag/html
has answer: http://stackoverflow.com/a/78943380
score: 0
has title: How to fix divs to edge of larger div
has body: I am trying to code a simple average monthly weather table, with 12 divs inside a larger div, and each 'monthly div' showing an emoji, and HI/LO temperatures. Mockup image below: My issue is handling responsiveness when on mobile/tablet. I would like it to split onto 2 (or even 3) rows if needed based on screen width, looking something like this: However, I'm not too sure how to do it. Currently the gap between the edge of the small div and the larger outer div will increase until it can fit another small div in. Instead, I don't want the distance to change - I'd rather it move onto another row. Here's what I've got so far: body { font-family: Arial, sans-serif; text-align: center; margin-top: 50px; } .weather-container { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin: 0 auto; padding: 10px; border-radius: 15px; border: 2px solid #000; /* Curved black border */ max-width: 100%; background-color: #fff; /* Ensure white background inside the border */ } .weather-box { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px 20px; width: 80px; background-color: #fff; position: relative; } .weather-icon { font-size: 36px; } .temperature { display: flex; justify-content: space-between; width: 100%; margin-top: 5px; font-size: 18px; } .temperature span { width: 45%; text-align: center; } .month-label { font-size: 14px; font-weight: bold; margin-bottom: 5px; } .separator { position: absolute; top: 0; right: 0; width: 2px; height: 100%; background-color: #000; } /* Remove separator from the last box */ .weather-box:last-child .separator { display: none; } New York City Monthly Weather Forecast January ☁️ HI 39° LO 26° February ☀️ HI 42° LO 29° March ☀️ HI 50° LO 35° April ️ HI 61° LO 45° May ☀️ HI 71° LO 54° June ☀️ HI 79° LO 64° July ☀️ HI 84° LO 69° August ☀️ HI 83° LO 68° September ️ HI 76° LO 61° October ☁️ HI 65° LO 50° November ☁️ HI 55° LO 41° December ❄️ HI 45° LO 32°
tagged with: css
answer count: 3

http://stackoverflow.com/q/78967340
type: UnansweredQuestion
favorite count: 0
type: Question
tagged with: http://stackoverflow.com/tag/html
has title: How can I make all images inside a div flex container match the size of the smallest image in the container?
score: 0
tagged with: containers
upvote count: 1
has answer: http://stackoverflow.com/a/78967440
answer count: 2
tagged with: css
has comment: http://stackoverflow.com/comment/139232862
has answer: http://stackoverflow.com/a/78967399
tagged with: flexbox
has body: I have a flex container with 4 images, 3 of which are the same size (200x134). However, there is one image that is larger (401x267). I want the larger image to contain itself and adjust its size to match the others. What CSS can be used to accomplish this? Do I need to use a different value for display rather than 'display: flex;' to accomplish this? I would like a solution where any images inside the container will always fix itself to match the size of the smallest image in the container. See below code for the scenario described where largerImage.jpg is the image that is bigger than the rest. I've attempted to style the images at times using the object-fit property to cover, contain, etc. but I haven't been able to achieve the desired result. If you are wondering why I want this outcome; it is because these images being displayed in the container will be used in a slide show. Having the images fix to one size will allow me to plug in images into this solution as needed. And having them be the same size looks much more professional, as opposed to one image being double the size of the others. See below for example. Desired outcome: Currrent outcome:
downvote count: 1
tagged with: image

http://stackoverflow.com/q/78970924
tagged with: http://stackoverflow.com/tag/html
answer count: 1
type: AnsweredQuestion
accepted answer: http://stackoverflow.com/a/78970974
has body: And keep as much text lines as div's height fits into. Lorem ipsum dolor sit amet, consectetur adipiscing elit And as result I'd like to have: | | Lorem ipsum dolor | | SVG | sit amet, | | | consectetur ad... | I'm playing with all this properties, but can't achieve desirable. overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-height: inherit; position: absolute; Is there a possible solution? If yes, could it be solved only with Bootstrap classes? Thanks.
score: 0
has comment: http://stackoverflow.com/comment/139240763
tagged with: css
has title: How to prevent too long text expand its parent div
has answer: http://stackoverflow.com/a/78970974
tagged with: bootstrap-5
has comment: http://stackoverflow.com/comment/139239458
type: Question

http://stackoverflow.com/q/79060236
has answer: http://stackoverflow.com/a/79060313
accepted answer: http://stackoverflow.com/a/79060313
tagged with: css
has title: Grayscale filter transition dont work in tailwind
answer count: 1
type: Question
tagged with: tailwind-css
has body: I have my card images and I'm trying to make it so that when I hover over the image it goes from black and white to color. I've tried many ways but I can't seem to get it to work, I don't know what it could be, if anyone has any ideas it would be a great help, thank you very much! const WatchFilm = ({ movie }) => { const [isGrayscale, setIsGrayscale] = useState(true); const genreName = movie.genres.length > 0 ? movie.genres[0].name : "Sin Género"; const animationVariants = { hidden: { opacity: 0, scale: 0.8 }, visible: { opacity: 1, scale: 1 }, }; useEffect(() => { setIsGrayscale(true); // Inicialmente, la imagen se muestra en grayscale }, [ movie.cover, // Dependencia para el efecto de grayscale ]); return ( <motion.div className="relative cursor-pointer bg-blue-700 rounded-lg overflow-hidden transition-all duration-500 hover:bg-gradient-to-r hover:from-blue-500 hover:to-purple-600 w-64 mx-2 my-12 transform hover:scale-110" initial="hidden" animate="visible" variants={animationVariants} transition={{ duration: 0.5 }} > setIsGrayscale(false)} // Quitar grayscale al pasar el ratón onMouseLeave={() => setIsGrayscale(true)} // Volver a poner grayscale al salir el ratón /> {genreName} </motion.div> ); };`
type: AnsweredQuestion
tagged with: reactjs
score: 0

http://stackoverflow.com/q/79013129
score: 0
possible better answer: http://stackoverflow.com/a/79013172
accepted answer: http://stackoverflow.com/a/79013165
tagged with: gradient
tagged with: css-gradients
type: Question
has title: How to recreate this circular gradient in CSS from a Figma design?
type: AnsweredQuestion
has answer: http://stackoverflow.com/a/79013172
answer count: 2
has answer: http://stackoverflow.com/a/79013165
tagged with: css
tagged with: radial-gradients
tagged with: figma
has body: I'm trying to recreate a circular gradient in CSS that matches the one I designed in Figma. Here's the image for reference: Circle Gradient The gradient I have in Figma is defined as: background: linear-gradient(206.12deg, rgba(231, 51, 255, 0.5) -74.73%, rgba(207, 67, 255, 0.483696) 6.69%, rgba(0, 204, 255, 0.5) 108.36%); I understand that the linear gradient won't work for a circular shape, so I'm trying to convert this to a radial gradient in CSS, but I'm struggling to get the same look. Does anyone know how I can reproduce this gradient effect as a circle in CSS? Any guidance or suggestions would be appreciated! Thanks! I tried converting this linear gradient into a radial-gradient to mimic the circular look, but I'm not getting the same effect. Here’s the CSS I attempted: background: radial-gradient( circle, rgba(231, 51, 255, 0.5) 10%, rgba(207, 67, 255, 0.48) 40%, rgba(0, 204, 255, 0.5) 100% ); Here my fiddle

http://stackoverflow.com/comment/139166376
has text: When div elements are set to inline-block, they behave like text characters, meaning they respect white space around them, including spaces, newlines, and tabs in the HTML code. This can create gaps between inline-block elements. when you change an img element's display to block, the gaps may persist due to the default alignment of images. By default, images are aligned to the baseline of the text, leaving some space beneath them reserved for descenders. This space remains even when the image is displayed as a block element.
comment on: http://stackoverflow.com/q/78930153
score: 1
type: Comment
type: QuestionComment

http://stackoverflow.com/comment/139240233
has text: I think you want `grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));` and then set a max-width on the children - https://codepen.io/Paulie-D/pen/yLdwgzB
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78971081
type: Comment

http://stackoverflow.com/a/78946960
has comment: http://stackoverflow.com/comment/139195570
has body: I would recommend you to read more about html and css while practicing. But lets talk about issue's. As a beginner avoid using position: absolute unless you know what you are doing. You can achieve any structure using display: flex so try to use that. You have added many unnecessary css which I have removed and added required css to make logo and header align center which is display: flex, align-items: center and margin: 0 to h1. Below is working example. If you have any doubt please share in comments. Edited The dropdown alignments is messed because using position: abolute without adding position: relative to parent div. Add position: relative to .dropdown class and it will work normally. I have also updated below code. body { margin: 0; padding: 0; } .mainDiv { color: white; width: 100%; height: 100vh; background-color: #1e1e1e; display: flex; align-items: center; justify-content: center; } #headbar { width: 100%; position: fixed; top: 0; left: 0; right: 0; height: 50px; z-index: 2; border: 2px black solid; background-color: #ff0000; /* Newly added */ display: flex; } #logo { display: inline; height: 50px; width: 50px; border: none; } #button-1 { background-color: red; color: white; padding: 15px 10px 15px 10px; font-size: 15px; text-align: center; font-weight: bold; display: inline; border: none; border: 2px solid black; height: 50px; width: 150px; position: relative; } #button-2 { background-color: red; color: white; padding: 15px; font-size: 15px; text-align: center; font-weight: bold; display: inline; border: none; border: 2px solid black; height: 50px; width: 150px; position: relative; } .dropdown { position: absolute; display: inline-block; } .dropdown-content { display: none; position: relative; background-color: #f68484; min-width: auto; box-shadow: 10px 8px 16px 0px black; z-index: 1; } /* Newly added */ .logo-container { display: flex; align-items: center; } .logo-container h1 { margin: 0 } dropdown-content a:hover { background-color: #ff0000; } .dropdow…
answers question: http://stackoverflow.com/q/78946868
score: 0
type: Answer
has comment: http://stackoverflow.com/comment/139195816
has comment: http://stackoverflow.com/comment/139195361

http://stackoverflow.com/q/79020577
has title: How to wrap a css grid in both column and a certain amount of rows, while following logical alphabetical order?
upvote count: 1
tagged with: css
accepted answer: http://stackoverflow.com/a/79020616
tagged with: css-grid
score: 1
tagged with: multiple-columns
has body: So i have a grid setup like this a b c d e f ... z How can i make it appear in two columns, grouped in rows of say 4 high. Creating an arrangement like this: a | e b | f c | g d | h ----- i | m j | n ... s | w t | x ----- y | z | Without the obvious answer of grouping 4 or 8 divs to a separate gridbox. Implementations that differ from using divs are welcome too I currently got it semi working except for the alphabetical sorting by using .grid-container { display: grid; grid-template-columns: repeat(2, 150px); grid-template-rows: repeat(4, auto); } .grid-container DIV:nth-child(8n) { padding-bottom: 10px; } But that does not honor the alphabetical order, giving this: a | b c | d e | f g | h ----- i | j Adding grid-auto-flow: column; to the container makes it add more columns on overflow, disregarding the defined 2 columns.
favorite count: 0
type: Question
downvote count: 0
answer count: 1
type: AnsweredQuestion
has answer: http://stackoverflow.com/a/79020616

http://stackoverflow.com/comment/139136818
type: Comment
has text: `addEventListener()` requires at least two arguments; you are supplying one, `"click"`.
type: QuestionComment
comment on: http://stackoverflow.com/q/78915487
score: 1

http://stackoverflow.com/a/78918623
score: 0
type: Answer
has comment: http://stackoverflow.com/comment/139149864
has body: I am not sure what exactly you mean by weird spacing, but here goes my attempt. Checkbox area My pronouns are: she/her he/him they/them Yes No Maybe and CSS body { background-color: #000000; color: #ffffff; width: 100%; height: 100vh; margin: 0; font-family: Futura; } fieldset { margin-top: 20px; background-color: pink; width: 70%; border: 3px solid #ffffff; border-radius: 5px; } legend { background-color: grey; color: #ffffff; border: solid; border-radius: 10px; padding: 2px 5px; } input { background-color: #ffffff; color: grey; margin: 5px; font-family: Futura; } input[type="submit"], input[type="reset"] { background-color: skyblue; color: #000000; width: 25%; margin-top: 15px; } .textarea { font-family: Futura; color: grey; font-size: 14px; } Demo Also, why don't you use flexbox or grid? What kind of layout are you trying to achieve?
answers question: http://stackoverflow.com/q/78918565
has comment: http://stackoverflow.com/comment/139149850

http://stackoverflow.com/comment/139348657
type: QuestionComment
has text: @MrJoky added code snippet. Btw, i think this is a bug from the React Aria component lib since the workaround using the React Aria hook instead of the component works. Will raise a bug in their GitHub.
type: Comment
comment on: http://stackoverflow.com/q/79030341
score: 0

http://stackoverflow.com/a/78984323
accepted answer of: http://stackoverflow.com/q/78984279
has body: Interestingly I was able to replicate the issue on Chrome v128 on Mac Monterey (and it has no issues on Safari) Also, in my case having the div's empty is causing the animation to skip the first half, so here's my approach that works: Test Animation 2 3 4 I will research more to what causes it exactly, but seems no content on page makes some bug occur to the animations (because when I add text anywhere in the document it is again working). It's a vendor issue and has been reported to Chromium: https://issues.chromium.org/issues/376516545
type: AcceptedAnswer
type: Answer
score: 0
answers question: http://stackoverflow.com/q/78984279

http://stackoverflow.com/comment/139250889
type: QuestionComment
has text: Apologies, my comment was after trying on Safari IOS where there was just what looked like a single line not across far enough. Now tried on Chrome/Edge and see what you mean, there is a large area not moved across.
type: Comment
score: 1
comment on: http://stackoverflow.com/q/78974610

http://stackoverflow.com/comment/139158709
comment on: http://stackoverflow.com/q/78926774
type: Comment
score: 0
type: QuestionComment
has text: `// Remove sticky class after the animation ends` - your image suggests you want them all to become sticky, and then unstuck again, at the same time. But your animations will end at different times, due to the different initial delays - so you should not remove the class from each individual element when its own animation has ended; but remove it from all of them, when the animation on the _last_ element has finished.

http://stackoverflow.com/comment/139258531
has text: You mean `.mb-3 { margin-bottom: 1rem !important; }`?
comment on: http://stackoverflow.com/q/78981277
type: QuestionComment
type: Comment
score: 0

http://stackoverflow.com/q/78910404
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139128340
favorite count: 0
type: Question
has body: .navigation { position: absolute; top: 80px; right: -300px; width: 200px; display: flex; padding-top: 40px; background-color: #071e244b ; flex-direction: column; align-items: left; transition: right 0.3s ease-in-out; height: 100vh; overflow-x: hidden; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); } .navigation.open { right: 0; }`` I use the hamburger button on the right side of the header when the screen size is less than 768 px. On clicking hamburger, the navigation bar translates from -200 px to 0 px. In a desktop window, even if the screen width is much smaller than 768px, no x axis scrolls while the navigation bar is at -200px. but on the mobile screen the scroll to the x axis and can see the navigation bar at -200px. How to prevent the x scroll on mobile screens I tried css property like overflox-x:hidden on the body element. Then I use add eventListner resize to hide overflow x on the body body{ overflow-x: hidden !important; overflow-y: auto !important; }
answer count: 1
score: 2
downvote count: 0
has answer: http://stackoverflow.com/a/78910710
tagged with: overflow
has title: x axis scroll on the mobile screen
tagged with: css
upvote count: 2

http://stackoverflow.com/comment/139386117
comment on: http://stackoverflow.com/q/79050955
score: 0
has text: related: https://stackoverflow.com/a/54299171/8620333
type: QuestionComment
type: Comment

http://stackoverflow.com/a/79028934
downvote count: 0
has body: Since grid-template-columns is animatable, one option is to use grid instead and animate the grid column sizes. By this, you can set overflow:hidden on the label and prevent changing its width so that the text won't move. .button-container { height: 4vw; width: 19vw; align-items: center; padding: 0; border: none; cursor: pointer; display: grid; grid-template-columns: 15vw 4vw; transition-duration: 0.6s; transition-property: grid-template-columns; transition-timing-function: ease-in-out; } .button { height: 4vw; align-content: center; font-family: "Comfortaa", cursive; } .button-label { overflow: hidden; width: 15vw; background: #07BEB8; color: #FFF; font-size: 1.3vw; overflow: hidden; } .button-symbol { width: 100%; background: #3DCCC7; color: #FFF; border-left: solid #FFF; font-size: 1.6vw; font-weight: bold; } .button-container:hover { grid-template-columns: 0vw 19vw; } Learn More + Also, though off topic, you might notice there was originally a flicker when the window width is changed. This is because the animated property is based on window width. This can be solve by using a wrapper and define the 19vw width on it instead, so that the animated width can be based on percentage value that the proportion won't change when resizing the window. .wrapper { width: 19vw; } .button-container { height: 4vw; align-items: center; padding: 0; border: none; cursor: pointer; display: grid; width: 100%; grid-template-columns: calc(15/19 * 100%) calc(4/19 * 100%); transition: grid-template-columns 0.6s ease-in-out } .button { height: 4vw; align-content: center; font-family: "Comfortaa", cursive; } .button-label { overflow: hidden; width: 15vw; background: #07BEB8; color: #FFF; font-size: 1.3vw; overflow: hidden; } .button-symbol { width: 100%; background: #3DCCC7; color: #FFF; border-left: solid #FFF; font-size: 1.6vw; font-weight: bold; } .button-container:hover { grid-template-columns: 0vw 19vw; } Learn More +
has comment: http://stackoverflow.com/comment/139346452
type: AcceptedAnswer
score: 2
upvote count: 2
type: Answer
has comment: http://stackoverflow.com/comment/139345894
answers question: http://stackoverflow.com/q/79028815
accepted answer of: http://stackoverflow.com/q/79028815
has comment: http://stackoverflow.com/comment/139345887

http://stackoverflow.com/comment/139314729
comment on: http://stackoverflow.com/a/79011841
has text: Thanks for the updated solution! BUT... I want the image to fill the entire browser window and remain uncut with scrollbars. See this drawing for clarification. https://jenstarning.se/full-plus.jpg Sorry if I was unclear.
type: Comment
score: 0
type: AnswerComment

http://stackoverflow.com/q/78938279
has answer: http://stackoverflow.com/a/78939027
has body: I tried making a webpage where backgrounds scroll a bit slower than the text content, giving an illusion of a 3d scene, but my method only works on firefox. On chrome and safari any transform property cancels the effect of background-attachment:fixed. Why doesn't it work on other browsers? What changes could be made to make it more compatible? This is what I tried: https://codepen.io/brch_/pen/JjQmPOr Expected result: perspective parallax result while scrolling. Actual result: effect works on firefox, does not work on chrome and safari.
tagged with: http://stackoverflow.com/tag/html
type: Question
answer count: 1
has title: Pure-CSS perspective parallax effect only works on Firefox and not on Chrome or Safari
score: 0
tagged with: pure-css-parallax
tagged with: css
tagged with: cross-browser
has comment: http://stackoverflow.com/comment/139181390
has comment: http://stackoverflow.com/comment/139180839
tagged with: parallax
type: UnansweredQuestion

http://stackoverflow.com/q/79033988
has comment: http://stackoverflow.com/comment/139355032
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139354858
tagged with: css-transitions
has comment: http://stackoverflow.com/comment/139354870
score: 1
has comment: http://stackoverflow.com/comment/139354844
favorite count: 0
type: Question
has body: I have this code and I would like to animate height when I add more text. Is it possible? document.getElementById("append").addEventListener('click', () => { document.getElementById("text").innerHTML += ' test test test test test test' }) #text { height: auto; interpolate-size: allow-keywords; width: 200px; border: 1px solid green; transition: height 1s ease; } append test
has comment: http://stackoverflow.com/comment/139354832
downvote count: 0
has title: Is it possible to automatically animate height: auto with css interpolate-size property?
upvote count: 1
tagged with: css
answer count: 0

http://stackoverflow.com/comment/139187603
has text: It looks fine on myside too without any line.
comment on: http://stackoverflow.com/q/78941501
type: Comment
score: 0
type: QuestionComment

http://stackoverflow.com/q/79023236
score: 0
has comment: http://stackoverflow.com/comment/139335879
has title: Downloaded font is not being rendered correctly on the browser
tagged with: webfonts
tagged with: css
has comment: http://stackoverflow.com/comment/139336245
tagged with: fonts
has answer: http://stackoverflow.com/a/79036443
tagged with: font-face
has body: I am having issues with fonts I downloaded that are not being rendered on the browser. I define the font face in the index.css file, which is the root css file. @font-face { font-family: "RecoletaAlt"; src: local("RecoletaAlt") url("./assets/fonts/RecoletaAlt.woff") format("woff") url("./assets/fonts/RecoletaAlt.woff2") format("woff2"); font-weight: bold; font-style: normal; } I have the font loaded into the index.html page too Then I try using the font here as shown. When I inspect it in the browser, it shows that the font-family is RecoletaAlt but when I check the computer tab, I see, "Family name: Times PostScript name: Times-Bold, Font origin: Local file(11 glyphs)" which shows that it is not using the font. Also when the page loads, and I check the network tab I see the font in the network request which shows that it is being loaded. Get started Below is my file structure
has comment: http://stackoverflow.com/comment/139335500
type: Question
has comment: http://stackoverflow.com/comment/139336208
answer count: 1
type: AnsweredQuestion
accepted answer: http://stackoverflow.com/a/79036443

http://stackoverflow.com/q/79010419
has answer: http://stackoverflow.com/a/79011841
type: Question
tagged with: css
upvote count: 2
answer count: 1
type: AnsweredQuestion
has comment: http://stackoverflow.com/comment/139314396
score: 2
favorite count: 0
has comment: http://stackoverflow.com/comment/139314347
accepted answer: http://stackoverflow.com/a/79011841
has comment: http://stackoverflow.com/comment/139314161
has comment: http://stackoverflow.com/comment/139314429
has body: I want to scale an image proportionally so that one dimension is 100% of the viewport and the other is larger than the viewport but leave it uncropped and instead add scroll bars in the larger direction. It needs to work for images with different aspect ratios and with different aspect ratios of the viewport. See this drawing (black is viewport, gray is image) I have tried setting min-width: 100vw and min-height: 100vh. This works when the viewport is larger than the image's pixel dimensions but not when it is smaller. (The image in the code is 600x400px. Run code snippet in full page and drag the browser window smaller than 600px wide and 400px high to see that the scaling of the image then does not match the viewport.) I have also tried background-image but then the image is cropped with no scroll bars. Since the code almost works, there should be an easy fix or do I need to solve it some other way? html { width: 100%; margin: 0; } .full-plus { width: 100vw; height: 100vh; } .full-plus img { min-width: 100vw; min-height: 100vh; } &lt;html&gt; &lt;head&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="full-plus"&gt; &lt;img src="https://www.w3schools.com/w3css/img_lights.jpg" alt=""&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;
has title: Scale an image to fully cover the viewports width and height but leave it uncut and add scrollbars
has comment: http://stackoverflow.com/comment/139314121
downvote count: 0
has comment: http://stackoverflow.com/comment/139314490
tagged with: javascript
has comment: http://stackoverflow.com/comment/139313243

http://stackoverflow.com/comment/139327803
type: QuestionComment
has text: @C3roe the link that im passing is encoded already
comment on: http://stackoverflow.com/q/79018578
type: Comment
score: 0

http://stackoverflow.com/a/79001058
score: 1
type: Answer
has body: I tried many ways to handle the nested code issue and checked the documentation, but I could not find any way to style the child on parent hover inside makeStyles. Finally, I use a similar package called react-jss to style elements. NOTE: Some property is not working because they are override by fluent ui so I have added !important in many properties without it properties will not be applied. You can use react-jss package to achieve your output: Install react-jss package: npm i react-jss // YoutubeCard.styles.tsx import { createUseStyles } from "react-jss" const useStyles = createUseStyles({ card: { width: "300px", border: "1px solid #ccc", borderRadius: "8px", overflow: "hidden", position: "relative", cursor: "pointer", transition: "transform 0.3s, box-shadow 0.3s", "&:hover": { transform: "scale(1.05)", boxShadow: "0 4px 8px rgba(0, 0, 0, 0.2)", "& $overlay": { backgroundColor: "rgba(0, 0, 0, 0.6)", }, "& $textOverlay": { opacity: 1, }, "& $playButton": { opacity: 0, }, }, }, overlay: { position: "absolute", top: 0, left: 0, width: "100%", height: "100%", backgroundColor: "rgba(0, 0, 0, 0)", transition: "background-color 0.3s", }, textOverlay: { position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)", color: "white", opacity: 0, transition: "opacity 0.3s", height: "100%", display: "flex !important", // Without !important property override flexDirection: "column", justifyContent: "center", alignItems: "center", textAlign: "center", }, playButton: { position: "absolute", top: "50%", left: "50%", width: "3rem !important", height: "3rem !important", display: "flex !important", justifyContent: "center", alignItems: "center", transform: "translate(-50%, -50%)", backgroundColor: "rgba(255, 255, 255, 0.8)", borderRadius: "50%", transition: "opacity 0.3s", }, playButtonTriangle: { width: "50%", height: "50%", backgroundColor: "red", marginLeft: ".5rem", clipPath: "polygon(78% 52%, 0 0, 0 100%)", }, }) export default useStyles // YoutubeCard.tsx im…
has comment: http://stackoverflow.com/comment/139299608
downvote count: 0
answers question: http://stackoverflow.com/q/79000488
upvote count: 1

http://stackoverflow.com/comment/139204933
has text: no you cannot. I also don't see how this would be useful. You should not change a variable but rather use a different variable or set the color correctly in the first place. Variables are not expected change for every element
type: QuestionComment
comment on: http://stackoverflow.com/q/78952466
score: 2
type: Comment

http://stackoverflow.com/comment/139335332
type: QuestionComment
score: 1
type: Comment
has text: the question as a whole might be very broad to address... but before saying anything else did you consider something like https://select2.org/dropdown instead of using `shuffleJS`? I ask because it seems to me you just need a dropdown with filtering option and you are using a more advanced tool intended for a different task that requires you to implement many behaviours on your own. For example what you called _a lame solution_ is actually known as debouncing and pretty legit. Anyway before spending efforts on your current approach I want to be sure you considered `select2` first
comment on: http://stackoverflow.com/q/79023183

http://stackoverflow.com/comment/139273678
type: Comment
score: 0
type: QuestionComment
has text: Is it a situation where shadows should not be applied to parents?
comment on: http://stackoverflow.com/q/78989508

http://stackoverflow.com/comment/139344942
has text: It will be possible in future to do it with pure CSS *and* not have to mess around with polygons with https://developer.mozilla.org/en-US/docs/Web/CSS/basic-shape/shape. However this is super new and not in mainline browsers yet.
type: AnswerComment
score: 1
comment on: http://stackoverflow.com/a/79028000
type: Comment

http://stackoverflow.com/comment/139205189
comment on: http://stackoverflow.com/q/78952466
type: Comment
score: 0
type: QuestionComment
has text: hi @tacoshy . The use case for this is the following. We maintain a design system, that comes with a core theme that defines default values for all variables. We want to enable users to customize their components' look and feel by simply overriding all or part of those variables in a scoped way, without affecting their outside value and without the cognitive load of knowing all their usages and the burden of replacing all of them, which in some cases, can be tedious and ultimately become error-prone (if we add/remove a property that consumes a variable, users should update their code as well)

http://stackoverflow.com/comment/139241931
type: Comment
score: 0
type: AnswerComment
has text: Hey thanks for the answer, This is something that I had thought of, but using this method it can have performance issues when there many objects. Plus, I won't be able to zoom to a particular point on the div.canvas.
comment on: http://stackoverflow.com/a/78972243

http://stackoverflow.com/comment/139129545
type: AnswerComment
comment on: http://stackoverflow.com/a/78909739
type: Comment
has text: Also ` ` is closed with ` ` instead of ` `, and also that's an incorrect use of HTMLLabelElement. You either wrap INPUT in LABEL, or use the `for=""` attribute.
score: 0

http://stackoverflow.com/q/78937309
has comment: http://stackoverflow.com/comment/139180857
has title: horizontal scrolling section on vertical page taking view port height issue
tagged with: css
has body: bewlow exapmple horizontal scrolling scetion take viewport height.i want horizontal section with a fixed height and can scroll horizontally 'https://codepen.io/johnhubler/pen/RwoPRBG' i want dynamic horizontal section with a fixed height and can scroll horizontally in verical page
answer count: 0
type: UnansweredQuestion
tagged with: horizontal-scrolling
type: Question
tagged with: http://stackoverflow.com/tag/html
tagged with: scroll
tagged with: javascript
score: 0

http://stackoverflow.com/comment/139401483
has text: I am putting the code in the custom css section of the theme
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/79056061

http://stackoverflow.com/q/78946283
has comment: http://stackoverflow.com/comment/139194526
tagged with: reactjs
score: 0
has body: I have started coding a small website that has a map on the right hand side which incorporates a slider for resizing of the map, I have tried using @media for resizing and this works when using chrome inspect to reduce the screensize, however when i resize the component with the map slider nothing happens ?? What would be the best way to achieve this
answer count: 0
tagged with: css
has title: Responsive Design from a slider element
type: UnansweredQuestion
type: Question

http://stackoverflow.com/q/79044341
possible better answer: http://stackoverflow.com/a/79046003
answer count: 2
linked to: http://stackoverflow.com/q/16841429
has answer: http://stackoverflow.com/a/79047525
tagged with: css
has comment: http://stackoverflow.com/comment/139377515
has comment: http://stackoverflow.com/comment/139378247
has title: Apply dynamic glint effect img to other partially transparent img using css
has answer: http://stackoverflow.com/a/79046003
accepted answer: http://stackoverflow.com/a/79047525
has comment: http://stackoverflow.com/comment/139375199
type: Question
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139374312
type: AnsweredQuestion
tagged with: mix-blend-mode
has body: I want to apply an animating glinting effect to certain images on my web page. The images are all randomly shaped and have transparent parts. I want the glint to only be applied to the opaque parts of these images. I have prepared the glint itself in an animated .webp file; it contains moving wavy half-transparent streaks of colors. It is complex enough that I do not want to create it with css (if that is even possible). My attempt at this was to stack two images on top of each other with position: absolute;. The lower image is the one to be glinted and the upper one the glint itself. And then apply mix-blend-mode: lighten; (or overlay, or whatever turns out best) to the glint image. This works, but the glint doesn't contain itself to only the opaque parts of the image. Now I wonder if this effect can be realized with plain css at all? The alternative is to prepare pre-glinted versions of all relevant images, but due to file size and maintenance concerns I'd rather not do that. The code I have so far is: .icon { position: relative; display: inline-block; background-color: #000080; } .icon .type { width: 24px; height: 24px; position: absolute; top: 0px; left: 0px; object-fit: none; object-position: 0px 0px; /* its a css image sprite */ z-order: 10; } .icon .glint { width: 24px; height: 24px; position: absolute; top: 0px; left: 0px; z-order: 11; mix-blend-mode: overlay; } &lt;div class="icon"&gt; &lt;img class="type" src="https://omeo.one/images/icons.png"&gt; &lt;img class="glint" src="https://omeo.one/images/glint.webp"&gt; &lt;/div&gt; The icons are just regular 24x24 images arranged in an image sprite (link; the lower half is what I use now as 'glinted' version, but I want to make it animated). I haven't yet finalized the glint image, but I've uploaded a proof of concept (link). I first tried to upload the glint webp image file but StackOverflow refused to take it? To see it in context, my site (OMEO) now uses a static pre-glinted image, next to the item drop down…
score: 0

http://stackoverflow.com/comment/139354068
score: 3
type: QuestionComment
comment on: http://stackoverflow.com/q/79033436
type: Comment
has text: It is not clear what you want. Do you want to remove the add item button and have the rows appear when the user starts typing? When would you know when they are done? What if they start typing, change their mind and delete what they type, how to know that the row is not complete? How do we know what row we are on when they want to change the row?

http://stackoverflow.com/comment/139149560
score: 0
comment on: http://stackoverflow.com/q/78922065
type: QuestionComment
has text: your site is dead, can you attach the real image path?
type: Comment

http://stackoverflow.com/a/79000899
has body: I was only able to build the following for you as there are not enough details in the question. Modify this according to your desire: ul { list-style: none; } .curve { width: 300px; padding: 30px; margin: 30px; border-bottom: 2px dashed #ccc; position: relative; } .curve::before { content: ""; position: absolute; bottom: -2px; left: -15px; width: 30px; height: 30px; background-color: white; border-bottom: 2px dashed #ccc; border-left: 2px dashed #ccc; transform: rotate(360deg); border-bottom-left-radius: 50%; } .curve::after { content: ""; position: absolute; bottom: -32px; right: -15px; width: 30px; height: 30px; background-color: white; border-bottom: 2px dashed #ccc; border-right: 2px dashed #ccc; transform: rotate(270deg); border-bottom-right-radius: 50%; } Curve Border
answers question: http://stackoverflow.com/q/79000802
score: 1
upvote count: 2
type: Answer
downvote count: 1

http://stackoverflow.com/comment/139194942
comment on: http://stackoverflow.com/a/78946594
has text: Interesting article, in particular the luma-corrected calculations. I'll need to go through it more thoroughly to see whether it can be used. The problem I see is that I don't want the set colour to be changed, unless it needs to be changed (defaulting to white/black to change is ok). Also, the colour is already set (style -> `color: ...`) - how would I get this into variables for this transformation?
type: Comment
score: 0
type: AnswerComment

http://stackoverflow.com/q/78975653
has title: Css grid not working, can't figure out why
score: 0
duplicate of: http://stackoverflow.com/q/448981
tagged with: css
has body: I'm trying to build a simple grid layout aa/bc/dd and can't figure out what's wrong, kinda running out of ideas... .container { display: grid; grid-template-areas: 'head head' 'nav main' 'foot foot'; gap: 10px; } .content { background-color: red; } .1 { grid-area: head; } .2 { grid-area: nav; } .3 { grid-area: main; } .4 { grid-area: foot; } header nav aside footer All it does is place my elements in an head nav/main foot 2:2 grid, for some reason head never extends to fill out the first row. In the end I just got code from a different source and adapted it, but I want to learn from what I did wrong in my own code.
tagged with: grid
upvote count: 1
linked to: http://stackoverflow.com/q/448981
favorite count: 0
has answer: http://stackoverflow.com/a/78975685
type: Question
accepted answer: http://stackoverflow.com/a/78975685
answer count: 1
type: AnsweredQuestion
downvote count: 1

http://stackoverflow.com/comment/139214203
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78957424
has text: @C3roe I updated the question, the idea is to thicken borders of a specific column
type: Comment

http://stackoverflow.com/a/79030708
score: -1
answers question: http://stackoverflow.com/q/79030672
downvote count: 1
has body: Set the img width to be 100% of the container, and set the container to be same length as the others, Since the img is a square and not in landscape like the others you will need to adjust its Height as well, Try something like: .thumbnail{ width:100%; height:50%; //adjust it to your needs please }
type: Answer
upvote count: 0

http://stackoverflow.com/comment/139374472
comment on: http://stackoverflow.com/q/79044394
type: Comment
score: 0
type: QuestionComment
has text: Have you tried to wrap your first two elements in a single div or section element and style it so it is block, then add a second element with your next grid elements below that?

http://stackoverflow.com/comment/139267166
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78969309
type: QuestionComment
has text: I guess, just adding overflow-auto or overflow-y-scroll would do? https://play.tailwindcss.com/Y8VnATXE51

http://stackoverflow.com/comment/139136795
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78915487
has text: My debug console and the documentation doesn't show any problems, unless there's another way to check?

http://stackoverflow.com/comment/139410706
type: QuestionComment
comment on: http://stackoverflow.com/q/79064015
type: Comment
score: 0
has text: @Patsytalk I'm not sure if I followed the instructions correctly. Please find the link to my sample output below. **(https://docs.google.com/spreadsheets/d/1TINWVDazpwXjCvzK9zW9YovI73ZEyNMwnFhlt4UU_bY/edit?gid=2100307022#gid=2100307022)**

http://stackoverflow.com/comment/139125383
has text: try adding to your scripts in templates
type: QuestionComment
comment on: http://stackoverflow.com/q/78908954
type: Comment
score: 0

http://stackoverflow.com/q/78948175
score: 1
favorite count: 0
type: Question
has comment: http://stackoverflow.com/comment/139197356
has comment: http://stackoverflow.com/comment/139198309
has comment: http://stackoverflow.com/comment/139198231
has comment: http://stackoverflow.com/comment/139197302
has title: CSS - Multiple :not selector one after the other
has comment: http://stackoverflow.com/comment/139198116
has body: I'm trying to select a bunch of elements with :not pseudo-class. The issue I'm facing is that I'm trying to apply two :not one after the other: .nav-menu >li:not(.button):not(:last-of-type){border-bottom:1px solid #000;} Basically, I want to apply the style to any li but the last one that does not have the .button class. Or put simply, apply the second :not after the first :not already filtered out elements Here the related HTML: I cannot use :nth-last-of-type because the elements can be dynamically changed. Is it possible without changing the DOM at all ? Thanks a lot!
duplicate of: http://stackoverflow.com/q/5545649
answer count: 0
tagged with: css
tagged with: css-selectors
downvote count: 0
type: UnansweredQuestion
upvote count: 1
linked to: http://stackoverflow.com/q/5545649

http://stackoverflow.com/comment/139406170
type: QuestionComment
type: Comment
comment on: http://stackoverflow.com/q/79054759
has text: What mui grid version are you using? Here is a working example for latest version (7) https://stackblitz.com/edit/react-rsgyfy-qcjc78?file=Demo.tsx
score: 0

http://stackoverflow.com/comment/139293534
type: AnswerComment
has text: Thanks! Your solution might actually solve me a problem I’m facing now that I need to overlay divs over texts that are rendered by ZPL lol.
score: 1
type: Comment
comment on: http://stackoverflow.com/a/79000252

http://stackoverflow.com/comment/139213398
has text: I think one of the answers there helped out! Thank you so much!
type: QuestionComment
comment on: http://stackoverflow.com/q/78956922
type: Comment
score: 0

http://stackoverflow.com/comment/139228189
has text: That gap is likely not between the elements, but caused by the space reserved for character underlengths.
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78964813
type: QuestionComment

http://stackoverflow.com/q/78912015
tagged with: css
has comment: http://stackoverflow.com/comment/139132848
tagged with: twitter-bootstrap
tagged with: flexbox
type: UnansweredQuestion
has title: How can I get my Bootstrap grid to fill the remaining height of the page and not extend past it?
type: Question
answer count: 1
has answer: http://stackoverflow.com/a/78912042
has body: So I have a Bootstrap header, one of the ones from their examples. Below that, I have a grid container with 3 columns in it. I want that grid to fill the height of the page that remains after the header, and not to extend past the height of the page. The contents of the columns should then adapt to the height of those columns in the grid. How can I do this? I have tried the flex-grow class but that doesn't do anything here. Here's my code. #container { display: flex; flex-direction: row; } header { margin-bottom: 0px !important; } My Project New Game Login Sign-up
score: 0

http://stackoverflow.com/a/79008032
downvote count: 0
has body: The problem is the the height property you specify is set to the content height and there's an additional 4px for the input (padding, border). You can fix that using one of the following solutions. Solution 1 Just specify box-sizing mode in your CSS to specify that the height should be set to the whole element. * { box-sizing: border-box; } Solution 2 (not preferred, though) By using calc() in CSS, you can specify the height to be: input { calc(8vh - 4px); }
answers question: http://stackoverflow.com/q/79007922
score: 1
upvote count: 1
type: AcceptedAnswer
accepted answer of: http://stackoverflow.com/q/79007922
type: Answer

http://stackoverflow.com/q/79057850
tagged with: http://stackoverflow.com/tag/html
type: Question
accepted answer: http://stackoverflow.com/a/79057873
downvote count: 0
possible better answer: http://stackoverflow.com/a/79057943
type: AnsweredQuestion
has body: I've been struggling with this for a while, and googling outrageously has brought me thus far. I've generated a page, and despite my script, I can't get the sidebar to disappear. See the following html { margin-left: 0; margin-top: 0; } table, th, td { border: 1px solid; } #body { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: 300px auto; grid-template-areas: 'menubtn header ' 'sidebar content' 'footer footer'; } #menubtn { grid-area: menubtn; position: sticky; top: 0; height: 3rem; } #header { grid-area: header; background-color: white; position: sticky; top: 0; height: 3rem; } #sidebar { grid-area: sidebar; background-color: white; position: sticky; height: calc(100vh -3rem); align-self: start; } #sidebar.hidden { display: hidden; } content { grid-area: content; } #footer { grid-area: footer; background-color: white; } h1 { color: #330099; } h2 { color: #330099; } h3 { color: #330099; } a:link, a:visited { color: #FFF; font-weight: bold; background-color: #09F; border: 1px solid #0066cc; padding: 3px; text-decoration: none } #content a:link { color: #FFF; font-weight: bold; background-color: #09F; border: 1px solid #0066cc; padding: 1px; text-decoration: none } #content a:visited { color: #FFF; font-weight: bold; background-color: #09F; border: 1px solid #0066cc; padding: 1px; text-decoration: none } a:hover { background-color: #06C } Test page for toggling menu Toggle menu Welcome to my test page this item tests the button welcome again! this page has been created to test my button to toggle menus. I've put another sentence here just to check whether or not the content area is expanded when the menu is hidden. I'm confused over a couple of things which may help point any help in the right direction. Not sure if my hidden class is correctly defined. Further to this, you'll notice I've not used semantic tags. what do I need to change to make this happen? Many thanks.
has comment: http://stackoverflow.com/comment/139398288
tagged with: javascript
has title: Toggling a sidebar with css classes and js
answer count: 2
tagged with: css
has comment: http://stackoverflow.com/comment/139398306
has comment: http://stackoverflow.com/comment/139398300
score: 2
upvote count: 2
has answer: http://stackoverflow.com/a/79057873
has comment: http://stackoverflow.com/comment/139398299
has answer: http://stackoverflow.com/a/79057943
favorite count: 0
has comment: http://stackoverflow.com/comment/139398293
tagged with: class

http://stackoverflow.com/a/79003163
answers question: http://stackoverflow.com/q/79003079
has body: Why SVG is Focusable? As for me, for Accessibility: for assistive technologies like screen readers. Also Elements with an inherent interactive behavior or elements that can display external resources, like , might be implicitly focusable. Chrome, especially, may add this behavior to improve accessibility for interactive SVG content. How to Prevent the Element from Being Focusable mix of these items I hope will help you try to set tabindex="-1" at image component try property: focusable="false" try css like this: svg image { pointer-events: none;}
score: 1
has comment: http://stackoverflow.com/comment/139299032
downvote count: 0
type: Answer
upvote count: 1
has comment: http://stackoverflow.com/comment/139298853

http://stackoverflow.com/comment/139417684
has text: It appears that you have considerable scripting skill. I suggest that you lookup the "Range" methods for [setBackground](https://developers.google.com/apps-script/reference/spreadsheet/range#setbackgroundcolor) and [setFontWeight](https://developers.google.com/apps-script/reference/spreadsheet/range#setfontweightfontweight).
type: QuestionComment
score: 1
type: Comment
comment on: http://stackoverflow.com/q/79064015

http://stackoverflow.com/comment/139377923
comment on: http://stackoverflow.com/q/79029152
score: 0
has text: Yes I have. To no avail lol
type: Comment
type: QuestionComment

http://stackoverflow.com/q/78921611
tagged with: pdf-to-html
tagged with: extends
tagged with: css
type: UnansweredQuestion
has answer: http://stackoverflow.com/a/78923491
type: Question
tagged with: text
has title: The text in the div tag of the p tag is extended out
has body: After converting the PDF to HTML using pdftohtml in my Ubuntu terminal, I translated this HTML file and the texts in this HTML extend completely into the p tag and its tags are inside the div tag. And when I tried to change the “white-space:nowrap” to “white-space:pre-rap;” of the div tag, it worked but the texts are sometimes above or below the other texts. I've spent hours on this HTML code trying to get it to work perfectly, but I can't and nothing works. Here is the HTML code of the untranslated version: GoodBadCorporation20 Stakeholder Capitalism Stakeholder capitalism refers to a conception of the corporation as a body that owes a duty not only to its shareholders (the predominant American view) but also to all of its stake- holders, defined as all those parties who have a stake in the performance and output of the corporation. Stakeholders include the company’s employees, unions, suppliers, customers, Here's an image of the result of my HTML translation: The result of my HTML translation And here's an image of the result when I tried changing it from white-space:nowrap to white-space:pre-rap; : white-space:nowrap to white-space:pre-rap; Here's the HTML code for the translated version of my HTML : GoodBadCorporation20 Capitalisme des parties prenantes Le capitalisme des parties prenantes fait référence à une conception de l'entreprise comme un organisme qui a un devoir non seulement envers son actionnaires (le point de vue américain prédominant) mais aussi à l'ensemble de ses participations- titulaires, définis comme toutes les parties qui ont un enjeu dans la performance et le résultat of la société. Here's the link to the project on GITHUB. You'll find the original HTML code and the translated version that produces this problem. And then try to change white-space:nowrap to white-space:pre-rap; you'll see the problem. Can you help me solve this problem? Any help would be greatly appreciated.
tagged with: http://stackoverflow.com/tag/html
answer count: 1
score: 0

http://stackoverflow.com/comment/139203667
has text: That is very close to what is needed, however would be nice if only 1 DIV existed where the text changes depending on hover. Also it for some reason seems to work on single HTML page but when I put it on my website it just outputs all of the DIVs and doesn't hide them. Hovering obviously does nothing also. Maybe "~" is conflicting somehow with other elements?
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78951317

http://stackoverflow.com/q/78985003
tagged with: css
tagged with: angular
type: UnansweredQuestion
has title: Angular material 14 to 15 foreground styling
has answer: http://stackoverflow.com/a/78985107
score: 1
favorite count: 0
linked to: http://stackoverflow.com/q/78617491
type: Question
tagged with: theming
downvote count: 0
tagged with: angular-material
answer count: 1
upvote count: 1
tagged with: sass
has body: Struggling to change the foreground color after switching from material 15 legacy theming to non legacy. $theme: ( primary: $theme-primary, accent: $theme-accent, warn: $theme-warn, is-dark: false, foreground: $mat-light-theme-foreground, background: $mat-light-theme-background, ); @include mat.all-legacy-component-themes($theme); Now if I update to use the non legacy version the foreground color does not work. $my-theme: mat.define-light-theme( ( color: ( primary: $my-primary, accent: $my-accent, foreground: $mat-light-theme-foreground, // does not work ), typography: mat.define-typography-config(), density: 0, foreground: $mat-light-theme-foreground, // does not work background: $mat-light-theme-background,// does not work ) ); @include mat.all-component-themes($my-theme);

http://stackoverflow.com/a/79038610
upvote count: 1
score: 1
type: Answer
has comment: http://stackoverflow.com/comment/139368409
has body: You could also just use the :empty pseudo-selector. :has() has great browser support now, so I wouldn't stress too much about browser compatibility nowdays, so that's for you to decide. Although be careful, as anything as small as a whitespace is enough to make :empty non valid: h3 span:empty { border: 1px solid red; } Title Title Title linklink
downvote count: 0
answers question: http://stackoverflow.com/q/79037411

http://stackoverflow.com/comment/139297843
type: Comment
score: 0
has text: It is still not valid HTML
type: QuestionComment
comment on: http://stackoverflow.com/q/79002259

http://stackoverflow.com/a/78970732
has body: CSS Grid would probably be a better option. .wrapper { display: grid; grid-template-columns: 1fr auto 1fr; } .draw-area { padding: 10px; background: lightblue; } .centered { grid-column: 2; } .result { padding: 10px; background: lightgreen; justify-self: start; } I'm centered Result
downvote count: 0
type: Answer
upvote count: 1
answers question: http://stackoverflow.com/q/78970645
has comment: http://stackoverflow.com/comment/139239100
score: 1

http://stackoverflow.com/comment/139311373
score: 0
type: Comment
has text: It actually kind of worked. Thanks
type: AnswerComment
comment on: http://stackoverflow.com/a/79010120

http://stackoverflow.com/a/78913523
score: 0
accepted answer of: http://stackoverflow.com/q/78913478
has body: Clear the transform of the half-circle and position it as absolute, the same as line. transform is based own element itsself when you use absolute and position, place the element on the parent basis. If you position them on the same basis, there will be no subtle differences. And for border, please check this. Border-radius in percentage (%) and pixels (px) or em Header with Half Circle
type: AcceptedAnswer
answers question: http://stackoverflow.com/q/78913478
type: Answer

http://stackoverflow.com/a/78997503
type: Answer
has body: I finally found a way to do what I want. Simply wrap my svg tag in a div one. see under : <path d="PATH" style="stroke-width:.264583;fill-opacity:1" transform="translate(-66.675 -125.148)"/> The CSS doesn't want to apply on SVG so I simply apply it on a a div wrapping it. I hope my answer will help someone !
downvote count: 0
answers question: http://stackoverflow.com/q/78993233
accepted answer of: http://stackoverflow.com/q/78993233
upvote count: 1
score: 1
type: AcceptedAnswer

http://stackoverflow.com/comment/139174041
has text: Exactly. Thank you!
comment on: http://stackoverflow.com/a/78935465
type: Comment
score: 0
type: AnswerComment

http://stackoverflow.com/comment/139147655
has text: the code you've posted has many omissions ... nothing with class `canvastext` for example. Other variables in `Element selections` are `null` also
type: QuestionComment
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78921073

shopify
tag name: shopify
type: Tag
tags question: http://stackoverflow.com/q/78907243
tags question: http://stackoverflow.com/q/79027496
tags question: http://stackoverflow.com/q/78941051
tags question: http://stackoverflow.com/q/79028399
tags question: http://stackoverflow.com/q/79150821
tags question: http://stackoverflow.com/q/79375592
tags question: http://stackoverflow.com/q/79278409
tags question: http://stackoverflow.com/q/79251657
tags question: http://stackoverflow.com/q/79507509
tags question: http://stackoverflow.com/q/79546458

http://stackoverflow.com/q/78911259
tagged with: css
has body: Hello, I wanted to get rid of the gap (the orange section) that shows up because i set max-height that is less than the space occuped by the top section, i thought main section would stretch but it doesn't. Any idea how i can do that? doing this does not work either: grid-template-rows: 1fr auto 1fr; complete code: .gridcontainer { background-color: orange; height: 100vh; width: 100vw; display: grid; grid-template-columns: 2fr 6fr 2fr; grid-template-rows: 1fr 8fr 1fr; } .gridchild-header { grid-area: 1 / 1 / 2 / 4; background-color: yellow; z-index: 500; min-height: 50px; max-height: 100px; } .gridchild-main { grid-area: 2 / 1 / 3 / 3; background-color: cyan; z-index: 500; } .gridchild-sidebar { grid-area: 2 / 3 / 3 / 4; background-color: red; z-index: 500; } .gridchild-footer { grid-area: 3 / 1 / 4 / 4; background-color: purple; z-index: 500; min-height: 100px; }
favorite count: 0
tagged with: vue.js
type: Question
has title: How to grow a CSS row to prevent gaps when using max-height
answer count: 1
downvote count: 1
tagged with: http://stackoverflow.com/tag/html
has answer: http://stackoverflow.com/a/78911311
upvote count: 0
type: AnsweredQuestion
accepted answer: http://stackoverflow.com/a/78911311
score: -1

http://stackoverflow.com/q/78954787
tagged with: menu
has comment: http://stackoverflow.com/comment/139209449
tagged with: react-bootstrap
tagged with: navbar
type: UnansweredQuestion
has answer: http://stackoverflow.com/a/79122873
has title: Cascading menus using Nav
type: Question
answer count: 1
has body: I have a menu defined roughly as follows: import { Component } from "react"; import { Nav, Navbar, NavDropdown } from "react-bootstrap"; export default class App extends Component { render(): ReactElement { return <NavDropdown.Item onClick={() => { // ... }}>Validate</NavDropdown.Item> <NavDropdown.Item onClick={() => { // ... }}>Create</NavDropdown.Item> <NavDropdown.Item onClick={() => { // ... }}>Create sequence</NavDropdown.Item> <NavDropdown.Item onClick={() => { // ... }}>Value of</NavDropdown.Item> // ... ; } } I would like the submenu to cascade to the right (or, rather, in the direction of the end). Instead, the submenu overlays the higher level menu like this: Dropdown menu How do I define the menu to shift the submenus?
tagged with: cascadingdropdown
score: 0
tagged with: css

http://stackoverflow.com/comment/139374452
score: 0
comment on: http://stackoverflow.com/q/79044235
type: QuestionComment
has text: This is a perfect example of including a working [snippet](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do) along with your question. https://stackoverflow.com/help/minimal-reproducible-example
type: Comment

http://stackoverflow.com/comment/139290721
type: Comment
type: QuestionComment
comment on: http://stackoverflow.com/q/78998686
score: 0
has text: @MarcoSacchi All CSS is inside the HTML I provided, it is a simple example

http://stackoverflow.com/comment/139351383
comment on: http://stackoverflow.com/q/79031961
score: 0
has text: Please see [ask], then revise your title to ask a clear, specific question.
type: QuestionComment
type: Comment

http://stackoverflow.com/q/78973195
answer count: 0
tagged with: css
has comment: http://stackoverflow.com/comment/139248238
has body: I have created a custom Google Forms UI with tons of questions by following this Video. I painstakingly managed to bind all the questions to radio buttons, check-boxes and text areas with their respective "entry.xxxxxxx" values. I managed to run all that on a custom HTML page. It all goes swimmingly, I manage to receive the correct answers after clicking my custom page's submit button. However, this only works for the first section of the form. The problem is that the last question of my first section in the original Google Forms determines whether clicking the submit button will lead to the second section of the survey, which has additional questions, or send the answers as they are. This is where I run into huge problems. No matter what I do, I only receive answers from the first section. Even if I get myself a pre-filled link with all the answers from the two sections at once, and replace "viewform?usp=pp_url" with "formResponse?", it still sends answers only from the first section. The only possible way to send answers from both sections is doing the form through Google Forms' website, which is not the behavior I am looking for. EDIT: Forgive me for the hastily written issue, but I am able to submit a minimal reproducible example just now. I cannot give you access to the original Google Form, but I made a new one, which I think encapsulates the problem perfectly. This is the Google Form. Its third question determines if you will be required to give answers to an additional question. If you pick the first answer, you must answer an additional question, which is in another section. This is the Docs spreadsheet with the sent answers. You can use it to track the sent answers. As you can see, I somehow managed to submit an answer to the survey bypassing the second section, despite the answer restrictions. This is a link to my custom website, implementing a custom frontend for the Form. You can test sending answers through it and see them arriving in the Docs document…
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139244908
has comment: http://stackoverflow.com/comment/139250104
tagged with: http://stackoverflow.com/tag/html
type: Question
tagged with: google-forms
has comment: http://stackoverflow.com/comment/139250840
score: 0
tagged with: javascript
has title: Google Forms Custom HTML Styling with two sections, is it possible?
tagged with: forms

http://stackoverflow.com/a/78931835
has body: This setup will create an infinite scroll effect where placeholder images are loaded dynamically as the user scrolls down the page. Adjust the limit variable if you want to load more or fewer images per scroll. I hope you are familiar with promises and timeouts. document.addEventListener("DOMContentLoaded", () => { const imageContainer = document.getElementById("image-container"); const loading = document.getElementById("loading"); let page = 1; const limit = 10; // Number of images to load per request const fetchImages = () => { // Simulate an API request to fetch images return new Promise((resolve) => { setTimeout(() => { const images = []; for (let i = 0; i < limit; i++) { images.push( `https://via.placeholder.com/600x200?text=Image+${ (page - 1) * limit + i + 1 }` ); } resolve(images); }, 1000); // Simulate network delay }); }; const loadImages = async() => { loading.style.display = "block"; const images = await fetchImages(); loading.style.display = "none"; images.forEach((src) => { const img = document.createElement("img"); img.src = src; img.alt = "Placeholder Image"; img.classList.add("image"); imageContainer.appendChild(img); }); page++; }; const handleScroll = () => { const scrollTop = window.scrollY; const windowHeight = window.innerHeight; const documentHeight = document.documentElement.scrollHeight; if (scrollTop + windowHeight >= documentHeight - 10) { loadImages(); } }; // Initial load loadImages(); // Attach scroll event listener window.addEventListener("scroll", handleScroll); }); body { font-family: Arial, sans-serif; } .container { display: flex; flex-direction: column; align-items: center; margin: 0 auto; padding: 20px; } .image { width: 100%; max-width: 600px; height: 200px; margin-bottom: 20px; background: lightgrey; } .loading { text-align: center; margin: 20px 0; } Loading...
has comment: http://stackoverflow.com/comment/139167392
type: Answer
score: 0
has comment: http://stackoverflow.com/comment/139167393
answers question: http://stackoverflow.com/q/78931755

http://stackoverflow.com/q/79057837
type: Question
score: 0
tagged with: css
answer count: 0
has body: I have an Angular 18 web application that uses PrimeNG 17.18 components. I'm making a save table state which saves multiple preferences to a database. My issue is that there is not a lot of documentation regarding to getting and setting column widhts in a table in PrimeNG (and binding to it). I've been able to get the column widths from a private variable in the PrimeNG table component (which is not the best solution, so if you know a better way to get them, please let me know) like son: let tableColWidths=(this.dt as any)._initialColWidths || []; Because the table has columnResizeMode as "expand", tableColWidths could be undefined until the user changes a dimension of a column with the drag and drop feature. In this scenario, the columns will have an auto width. With tableColWidths I'm able to retrieve the widht in pixels of each column. The issue comes when I have to load the information back. I've tried to do as follows in the .html file: [ngStyle]="{'width': col.width > 1 ? col.width + 'px' : 'auto'}" Since I'm mapping to the columns the "width" value on load. If no changed have been made, columns will have a width of 0. If a redimension of the column took place, the value will be greater than 0. Becasue the columnResizeMode is "expand", if the columns are more than the width of the screen, it doesn't load them back as expected. Is there a proper solution to achieve my goal of properly saving column widhts + table width and then loading them back?
tagged with: primeng
tagged with: angular
type: UnansweredQuestion
tagged with: primeng-table
has title: PrimeNG 17.18 table - Be able to save column widths and load them back (custom implementation)

http://stackoverflow.com/q/78914182
favorite count: 0
score: 0
tagged with: css-transitions
downvote count: 2
has body: I am unable to get the circle bar to animate. I attempted adding transition: all 600ms ease; but that didn't work. I am not sure if CSS animation supports conic-gradient. jQuery(function ($) { $('.bar').addClass('animate'); }); .icon { width: 146px; height: 146px; padding: 36px; position: relative; flex-shrink: 0; } .icon .bar { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; } .icon .bar::before { content: ""; position: absolute; border-radius: 50%; inset: 0; background: conic-gradient(#00a451 0%, #e1e1e1 0%); z-index: 1; transition: all 600ms ease; } .icon .bar::after { content: ""; background-color: #fff; border-radius: 50%; width: 110px; height: 110px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; } .icon .bar.animate::before { background: conic-gradient(#00a451 var(--stat-bar), #e1e1e1 0%); } &lt;div class="icon"&gt; &lt;div class="bar" style="--stat-bar:75%"&gt;&lt;/div&gt; &lt;/div&gt; &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"&gt;&lt;/script&gt;
type: Question
has title: CSS circle progress bar is not animating
has answer: http://stackoverflow.com/a/78914370
has answer: http://stackoverflow.com/a/78916496
tagged with: jquery
has comment: http://stackoverflow.com/comment/139134690
has comment: http://stackoverflow.com/comment/139134709
answer count: 3
has answer: http://stackoverflow.com/a/78914917
upvote count: 2
tagged with: css
has comment: http://stackoverflow.com/comment/139134874
has comment: http://stackoverflow.com/comment/139134746
type: UnansweredQuestion
linked to: http://stackoverflow.com/q/71860699

http://stackoverflow.com/comment/139272684
comment on: http://stackoverflow.com/q/78988683
type: Comment
type: QuestionComment
has text: There are several problems with the code which I suggest you might like to mend first. There is a mixture of fixed-dimension styling, float and grid, an incorrect closing of img elements and an attempt to build into the HTML structure the row setup. I suggest stripping that out and reading up about CSS grid (possibly also introducing media queries to cope with narrow devices), definitely drop using float and consider removing inline styling, putting what is needed into the stylesheet.
score: 1

http://stackoverflow.com/comment/139387638
comment on: http://stackoverflow.com/a/79045550
type: Comment
type: AnswerComment
has text: See haolt's [answer](https://stackoverflow.com/a/79051111/2813224) it looks spot on.
score: 0

http://stackoverflow.com/comment/139325453
type: Comment
score: 0
has text: It seems you want to have the same height, but have you considered the small screens renderings ? if the answer is you want the same height event if they are one on top of another, maybe some fixed height would suit you better, if you always want them side by side, a table would do the trick, and if you want responsive with heights reajusting when they are in column, then i don't see another way that javascript.
type: QuestionComment
comment on: http://stackoverflow.com/q/79017553

http://stackoverflow.com/a/78998631
upvote count: 0
score: -1
has comment: http://stackoverflow.com/comment/139304583
answers question: http://stackoverflow.com/q/78997824
type: Answer
has body: You can try perspective property and rotateY() Something like that. Miss Smith Ellen div { perspective: 40px; } button { width: 150px; height: 45px; background-color: #f9d83c; border: none; transform: rotatey(-5deg); }
downvote count: 1

http://stackoverflow.com/q/78937517
type: UnansweredQuestion
has title: Ellipsis text for mui text area
type: Question
has comment: http://stackoverflow.com/comment/139181745
tagged with: typescript
score: 0
tagged with: reactjs
has body: I am working with MUI TextareaAutosize. Here is what I am trying to do I have set min and max rows as 4, given fixed width and height. I want to let the user type more than 4 rows, however when the focus is out I want to last row i.e 4th to end with ellipsis i.e (...) and when user clicks the textArea i.e focused in then the content should be scrollable. Here is what I have tried const StyledTextArea = styled(TextareaAutosize)(({ theme }) =&gt; ({ fontFamily: 'inter', color: '#616161', minHeight: '120px', maxHeight: '120px', overflow: 'hidden', overflowY: 'auto', textOverflow: 'ellipsis', width: '327px', borderRadius: '4px', backgroundColor: '#FFFFFF', resize: 'none', ...theme.typography.body, border: '1px solid #9E9E9E40', lineHeight: '24px', padding: theme.spacing(8), '&amp;:focus-visible': { border: '1px solid #2196F3', outline: 'none' }, '&amp;:active': { border: '1px solid #2196F3' }, '&amp;:disabled': { border: '1px solid #9E9E9E40', backgroundColor: '#E0E0E0' }, '&amp;:hover:not(:focus-visible):not(:disabled)': { border: '1px solid #9E9E9E40' } })) &lt;StyledTextArea ref={ref} id={id} {...props} maxRows={4} minRows={4} /&gt; This is what I am trying to achieve, i.e the below image
tagged with: material-ui
answer count: 0
tagged with: css

http://stackoverflow.com/q/79026835
tagged with: angular
has title: Dynamically set the printed page size using '@page'
score: 1
favorite count: 0
has answer: http://stackoverflow.com/a/79026882
type: Question
downvote count: 0
answer count: 1
tagged with: typescript
type: AnsweredQuestion
tagged with: javascript
upvote count: 1
has body: I want to print labels of 2 sizes - 3X2inches and 3x3inches. Bydefault I have set the label print page size as 3x2inches in styles.scss (Global file). @page { size: 3in 2in; } I now want to select the 3x3in label. After selecting the dropdown option and clicking the 'Print' button, how can I dynamically change the printed page size in typescript or CSS using class? // Want to set new page size dynamically to following @page { size: 3in 3in; }
tagged with: css
accepted answer: http://stackoverflow.com/a/79026882

http://stackoverflow.com/a/79037267
has body: Another user talks about this on Github: https://github.com/twbs/bootstrap/issues/39530 According to what I've searched, I found this link: https://devcodef1.com/news/1402208/bootstrap-form-validation-issue (I SUGGEST NOT OPEN.... DUE TO MANY NOTIFICATIONS IT CONTAINS!) Here's the summary of what is written on the site above: This bug involves Bootstrap’s built-in validation styles that intefers with the browser’s ability to restore saved data in form fields. I mean, when the .was-validated class is applied to a &lt;form&gt; element, it prevents the browser to restoring data properly. What you can try in your code is to remove the .was-validated class from the &lt;form&gt; element using JavaScript and then reapply it after the autofill event.
has comment: http://stackoverflow.com/comment/139367270
has comment: http://stackoverflow.com/comment/139382901
answers question: http://stackoverflow.com/q/79035604
has comment: http://stackoverflow.com/comment/139362086
downvote count: 0
has comment: http://stackoverflow.com/comment/139367653
type: Answer
score: 1
upvote count: 1

http://stackoverflow.com/q/79066820
tagged with: flexbox
type: UnansweredQuestion
tagged with: margin
type: Question
answer count: 1
tagged with: http://stackoverflow.com/tag/html
has answer: http://stackoverflow.com/a/79067305
has title: Adjusting elements in a flexbox doesn't work properly
score: 0
tagged with: alignment
has body: I'm trying to adjust the filter dropdowns within the flexbox container. But for some reason the first two columns in the first row always are shifted. It's driving me crazy. I also tried using gap instead of margin, but for some reason Wordpress (or the Kadence Theme) doesn't work with Gap. Here's how it looks: Do you have any ideas, why it is shifted and how to fix it? This is what we tried so far: We tried several approaches to fix the issue with misaligned filter boxes in a Flexbox layout: Flexbox Width Adjustments: Initially, we adjusted the box widths using flex-basis and added gap to control spacing. However, gap wasn't supported in Wordpress environment. Targeted Adjustments for Specific Boxes: We then targeted the first two boxes using nth-child(1) and nth-child(2) to manually set margin-right. This worsened the layout, causing inconsistent spacing. Manual Spacing and Width Adjustments: We tried removing gap and using margin instead, along with setting width: calc(32% - 10px) for even distribution. This still didn't resolve the misalignment. /* Background color for the entire widget */ .wpc-filters-widget-wrapper { background-color: #6C7159; /* Light background color for the widget */ padding: 20px; /* Padding to make the widget more spacious */ border-radius: 8px; /* Slightly rounded corners */ margin-bottom: 20px; /* Space below the widget */ display: flex; /* Flex container for filters */ flex-wrap: wrap; /* Distribute elements across multiple rows */ justify-content: space-between; align-items: start; /* Align elements at the top */ } /* Styling for individual filter sections */ .wpc-filters-section { width: 30%; margin-bottom: 20px !important; /* Space below each filter section */ margin-right: 2%; /* Space between columns */ padding: 15px; /* Padding within each filter section */ border: 1px solid #ccc; /* Thin border around each filter */ border-radius: 5px; /* Slightly rounded corners */ box-sizing: border-box; /* Include padding and border in width …
tagged with: css

http://stackoverflow.com/q/78916876
has comment: http://stackoverflow.com/comment/139140315
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139140800
favorite count: 0
has answer: http://stackoverflow.com/a/78925816
type: Question
has comment: http://stackoverflow.com/comment/139141258
has comment: http://stackoverflow.com/comment/139140758
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139140905
has title: How to display img like backgroundimage using object-position with overflow: clip. I guess there is noway. maybe already asked but search power is low
downvote count: 1
has comment: http://stackoverflow.com/comment/139141169
has answer: http://stackoverflow.com/a/78922079
has comment: http://stackoverflow.com/comment/139148810
upvote count: 0
has comment: http://stackoverflow.com/comment/139140644
has comment: http://stackoverflow.com/comment/139141141
answer count: 2
score: -1
has body: How to display img like backgroundimage using object-position with overflow: clip. I guess there is noway. (maybe already asked but my search power is low.) Should I use backgroundimage or maybe...? .img-container:first-child img { width: 400%; height: 400%; object-fit: contain; object-position: top 100px; } .img-container a { width: 100%; height: 100%; overflow: clip; } privacy privacy privacy I guessed there need object-fit but it doesn't work. And I thought there must be content is smaller than parent. I'm sorry. I want to use tab key but I couldn't. P.S enter image description here
tagged with: css
has comment: http://stackoverflow.com/comment/139140140
has comment: http://stackoverflow.com/comment/139140068
has comment: http://stackoverflow.com/comment/139141228

http://stackoverflow.com/comment/139136546
type: QuestionComment
comment on: http://stackoverflow.com/q/78913738
type: Comment
has text: @deceze `li > ul, li :not(ul) ul` would match li>ul>li>div>ul, because it would take the first li, take the second li (it not a ul) and then match the final ul. It should not, there is an ul in between. But is should match li>div>div>menu>div>div>ul, as there is no ul in between.
score: 0

http://stackoverflow.com/a/79038064
type: Answer
has body: It can be achieve by many ways but simplest is by creating a html div with some class or id and inside that div add image/video/gif of your explosion and set it to display: none; and whenever we want to show the explosion, set the display to block/flex as per your need. Below is working example. Your counter also working in negative values, I haven't fixed it by thinking it might be intentional. window.onload = function() { var time = 10, // your time in seconds here display = document.querySelector('#timer'); startTimer(time, display); }; function startTimer(duration, display) { var timer = duration, minutes, seconds; if (timer &gt; 0) { setInterval(function() { minutes = parseInt(timer / 60, 10) seconds = parseInt(timer % 60, 10); minutes = minutes &lt; 10 ? "0" + minutes : minutes; seconds = seconds &lt; 10 ? "0" + seconds : seconds; display.textContent = minutes + ":" + seconds; if (--timer &lt; 0) { document.querySelector(".explosionDiv").style.display = "flex"; } }, 1000); } } body { background-color: white; color: black; margin: 0; padding: 0; } .mainDiv { color: white; width: 100%; height: 100vh; background-color: white; display: flex; align-items: center; justify-content: center; } .explosionDiv { display: none; background-color: black; color: white; position: fixed; inset: 0; align-items: center; justify-content: center; z-index: 10; } &lt;h2 id="timer"&gt; Clean Code Editor &lt;/h2&gt; &lt;div class="explosionDiv"&gt; Explosion Image/Video/gif here &lt;/div&gt;
has comment: http://stackoverflow.com/comment/139364602
score: 0
has comment: http://stackoverflow.com/comment/139364589
answers question: http://stackoverflow.com/q/79038018
has comment: http://stackoverflow.com/comment/139362504

http://stackoverflow.com/comment/139257852
type: QuestionComment
comment on: http://stackoverflow.com/q/78980674
type: Comment
score: 0
has text: Without an image I'm not sure what you're seeing, but if you don't expand .list-container to allow extra space you shouldn't see any change, even by changing the justify-content property.

css-animations
tags question: http://stackoverflow.com/q/79045395
tags question: http://stackoverflow.com/q/78957679
tag name: css-animations
tags question: http://stackoverflow.com/q/78906308
tags question: http://stackoverflow.com/q/79036972
tags question: http://stackoverflow.com/q/78981776
tags question: http://stackoverflow.com/q/79062969
tags question: http://stackoverflow.com/q/78952895
tags question: http://stackoverflow.com/q/79058934
tags question: http://stackoverflow.com/q/78926909
tags question: http://stackoverflow.com/q/78977674
tags question: http://stackoverflow.com/q/79044932
tags question: http://stackoverflow.com/q/79009672
tags question: http://stackoverflow.com/q/78996817
type: Tag
tags question: http://stackoverflow.com/q/79023867
tags question: http://stackoverflow.com/q/78942230
tags question: http://stackoverflow.com/q/78967214
tags question: http://stackoverflow.com/q/78926774
tags question: http://stackoverflow.com/q/78913588
tags question: http://stackoverflow.com/q/79040690
tags question: http://stackoverflow.com/q/79036823
tags question: http://stackoverflow.com/q/78958156
tags question: http://stackoverflow.com/q/79067744
tags question: http://stackoverflow.com/q/79129492
tags question: http://stackoverflow.com/q/79123480
tags question: http://stackoverflow.com/q/79179418
tags question: http://stackoverflow.com/q/79197805
tags question: http://stackoverflow.com/q/79150821
tags question: http://stackoverflow.com/q/79121100
tags question: http://stackoverflow.com/q/79086886
tags question: http://stackoverflow.com/q/79213143
tags question: http://stackoverflow.com/q/79074420
tags question: http://stackoverflow.com/q/79212931
tags question: http://stackoverflow.com/q/79073002
tags question: http://stackoverflow.com/q/79189222
tags question: http://stackoverflow.com/q/79189172
tags question: http://stackoverflow.com/q/79152828
tags question: http://stackoverflow.com/q/79242257
tags question: http://stackoverflow.com/q/79181828
tags question: http://stackoverflow.com/q/79075814
tags question: http://stackoverflow.com/q/79130028
tags question: http://stackoverflow.com/q/79101985
tags question: http://stackoverflow.com/q/79321267
tags question: http://stackoverflow.com/q/79289182
tags question: http://stackoverflow.com/q/79383863
tags question: http://stackoverflow.com/q/79318246
tags question: http://stackoverflow.com/q/79252565
tags question: http://stackoverflow.com/q/79245633
tags question: http://stackoverflow.com/q/79390521
tags question: http://stackoverflow.com/q/79273311
tags question: http://stackoverflow.com/q/79398114
tags question: http://stackoverflow.com/q/79389834
tags question: http://stackoverflow.com/q/79282610
tags question: http://stackoverflow.com/q/79326112
tags question: http://stackoverflow.com/q/79317260
tags question: http://stackoverflow.com/q/79309600
tags question: http://stackoverflow.com/q/79245711
tags question: http://stackoverflow.com/q/79390788
tags question: http://stackoverflow.com/q/79336772
tags question: http://stackoverflow.com/q/79280469
tags question: http://stackoverflow.com/q/79375436
tags question: http://stackoverflow.com/q/79518654
tags question: http://stackoverflow.com/q/79461882
tags question: http://stackoverflow.com/q/79475547
tags question: http://stackoverflow.com/q/79466482
tags question: http://stackoverflow.com/q/79543425
tags question: http://stackoverflow.com/q/79478476
tags question: http://stackoverflow.com/q/79471335
tags question: http://stackoverflow.com/q/79499434
tags question: http://stackoverflow.com/q/79464474
tags question: http://stackoverflow.com/q/79498732
tags question: http://stackoverflow.com/q/79532800
tags question: http://stackoverflow.com/q/79509425
tags question: http://stackoverflow.com/q/79443989
tags question: http://stackoverflow.com/q/79490951
tags question: http://stackoverflow.com/q/79495694
tags question: http://stackoverflow.com/q/79453837
tags question: http://stackoverflow.com/q/79490962
tags question: http://stackoverflow.com/q/79497639

http://stackoverflow.com/comment/139239237
comment on: http://stackoverflow.com/a/78967999
type: Comment
has text: @AneesUrRehmanMian, It will block default behavior. Refer this : https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
score: 0
type: AnswerComment

http://stackoverflow.com/a/79017177
answers question: http://stackoverflow.com/q/79016813
downvote count: 1
upvote count: 0
has body: For making a multiline paragraph element dynamically shrink horizontally to remove white space? Use inline-block for the article class to allow the text to shrink based on it's content, and insure the text does not exceed the actual width. Use max-width to limit the horizontal expansion, but avoid pre-wrap if it's forcing unnecessary vertical expansion. Ensure white-space: 'nowrap' is not used unless you want single-line bubbles. Here is output image it's working on my side Here is the adjusted code: CSS @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap"); body { background-color: black; margin: 0; font-family: "Roboto", sans-serif; font-size: 2rem; } section { margin: 0 auto; background-color: white; max-width: 1080px; display: flex; flex-direction: column; padding: 20px; } article { display: inline-block; padding: 10px 20px; border-radius: 30px; width: auto; max-width: 75%; word-wrap: break-word; } article p { margin: 0; display: inline; white-space: normal; } article.them { color: black; background-color: lightgray; align-self: flex-start; } article.me { color: white; background-color: darkblue; align-self: flex-end; } article.me+article.me, article.them+article.them { margin-top: 3px; } article.me+article.them, article.them+article.me { margin-top: 20px; } HTML Lorem ipsum, dolor sit amet. Lorem ipsum. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nostrum tempore excepturi dolore nam? Odio architecto tempora maiores corrupti nihil autem necessitatibus natus consequuntur adipisci hic nisi quaerat voluptate, incidunt beatae? Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat officia delectus sequi quo quas! This code should be shrink the text bubble horizontally based on the content. The bubble will wrap only when required, and it won’t exceed the maximum width of 75%. Hopefully this will work for you if you have any further issue please let me know, thanks.
type: Answer
score: -1

http://stackoverflow.com/q/78935431
linked to: http://stackoverflow.com/q/44488357
answer count: 1
type: AnsweredQuestion
upvote count: 1
has answer: http://stackoverflow.com/a/78935465
duplicate of: http://stackoverflow.com/q/44488357
tagged with: css
downvote count: 1
has body: I have a list of vertically stacked boxes with dynamic heights. I would like each box to be as heigh as the heighest of them. How can I do that using display grid? Here's what I have - I would like box 1 to always be as heigh as box 2 - or vice versa: .container { display: grid; grid-template-columns: repeat(1, 1fr); row-gap: 1rem; } .box { border: 1px solid #ddd; padding: 1rem; margin-bottom: 1rem; } Box 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis lectus quis sem lacinia nonummy. Proin mollis lorem non dolor. In hac habitasse platea dictumst. Nulla ultrices odio. Donec augue. Phasellus dui. Box 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis lectus quis sem lacinia nonummy. Proin mollis lorem non dolor. In hac habitasse platea dictumst. Nulla ultrices odio. Donec augue. Phasellus dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis lectus quis sem lacinia nonummy. Proin mollis lorem non dolor. In hac habitasse platea dictumst. Nulla ultrices odio. Donec augue. Phasellus dui. EDIT: I'm not looking for a spread evenly height solution. Thanks :-)
has title: How to make elements equal height (same height as the heighest) in a column of vertically stacked boxes
favorite count: 0
score: 0
accepted answer: http://stackoverflow.com/a/78935465
type: Question

http://stackoverflow.com/comment/139221786
comment on: http://stackoverflow.com/q/78957189
type: QuestionComment
type: Comment
has text: » properties that may require further computation, especially if the properties may affect geometry requirements. Adding the base64 feature (detecting, decoding, validation) would most probably increase the overhead of an already delicate mechanism that should always be as fast as possible under any circumstance (you may have a relatively static UI, but the styling API cannot make that assumption), therefore I can understand the reasoning behind not implementing that possibility. Note that if you want to provide advanced customization, you may consider switching to a QProxyStyle instead. »
score: 0

http://stackoverflow.com/comment/139373253
type: QuestionComment
has text: Have you had a look around to see if there is useful info already on SO? For example, does this help? https://stackoverflow.com/questions/60705386/styles-in-react-pdf-showing-abnormal-behaviour
type: Comment
comment on: http://stackoverflow.com/q/79043745
score: 0

http://stackoverflow.com/comment/139258694
type: QuestionComment
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78980629
has text: Is `Masonry()` a custom constructor or are you using https://masonry.desandro.com/ ?

monospace
tag name: monospace
type: Tag
tags question: http://stackoverflow.com/q/78955926

stimulusjs
tags question: http://stackoverflow.com/q/78925225
tag name: stimulusjs
type: Tag

http://stackoverflow.com/comment/139162779
has text: what if im not using react 19, is there a way to do it somehow close to what i have so far?
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78928449
type: QuestionComment

http://stackoverflow.com/a/78938706
has body: When a browser is displaying a simple image, it can display it however it wants to. But when it is displaying a web page, it has to follow the layout rules for web pages, and those rules are that the contents of a web page are laid out starting from the top of the page. If you want a different layout, you as the web designer have to specify that. Option 1 - Flexbox html, body { height: 100%; } body { margin: 0; display: flex; justify-content: center; align-items: center; } &lt;img src="https://fastly.picsum.photos/id/382/200/300.jpg?hmac=ql7Jj1WJu3zhhAn2p18Oxdn-JE1qZBR-lDF-MOVXCUA"&gt; Read more about flexbox and centering elements using flexbox. Option 2 - Fixed positioning img { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); } &lt;img src="https://fastly.picsum.photos/id/382/200/300.jpg?hmac=ql7Jj1WJu3zhhAn2p18Oxdn-JE1qZBR-lDF-MOVXCUA"&gt; Read more about centering elements using fixed positioning.
score: 1
type: AcceptedAnswer
downvote count: 0
answers question: http://stackoverflow.com/q/78938572
type: Answer
accepted answer of: http://stackoverflow.com/q/78938572
upvote count: 1

http://stackoverflow.com/a/78931803
answers question: http://stackoverflow.com/q/78931768
accepted answer of: http://stackoverflow.com/q/78931768
type: AcceptedAnswer
type: Answer
upvote count: 3
score: 3
downvote count: 0
has body: You can create different css classes and put them in an array. Everytime you click on a button you can switch styles by changing index. Since you did not provide any code here is an example. let styleIndex = 0; const styles = ['style1', 'style2', 'style3']; // styles array function changeStyle() { styleIndex = (styleIndex + 1) % styles.length; document.body.className = styles[styleIndex]; } body.style1 { background-color: white; color: black; } body.style2 { background-color: black; color: white; } body.style3 { background-color: blue; color: yellow; } /* You can change the css classes depends on your choice and application */ Calculator Click to change background color

http://stackoverflow.com/q/79060016
has answer: http://stackoverflow.com/a/79060081
has comment: http://stackoverflow.com/comment/139403128
type: UnansweredQuestion
favorite count: 0
downvote count: 2
type: Question
tagged with: http://stackoverflow.com/tag/html
linked to: http://stackoverflow.com/q/42530261
tagged with: javascript
score: -1
upvote count: 1
has answer: http://stackoverflow.com/a/79060088
has title: Why is this code not checking the validity of the passcode?
has body: The checkValidity function does not work and there is no alert dialogue box that appears, I want so that the passcode entered by the user is compared with the constant "Pass" const Pass = '2207' function checkValidity() { const pass_code = document.getElementById("passcode").value; if (pass_code == Pass) { alert("Correct Passcode!"); } else { alert("Wrong Passcode!"); } } Enter your Passcode: Enter↵
has comment: http://stackoverflow.com/comment/139402472
tagged with: css
answer count: 3
has comment: http://stackoverflow.com/comment/139402462
has answer: http://stackoverflow.com/a/79060359

http://stackoverflow.com/a/78980481
upvote count: 0
score: -3
has comment: http://stackoverflow.com/comment/139258953
downvote count: 3
type: Answer
has body: Yep, you’re right—this is something that CSS can't do. Since you need to check if all the input elements inside a specific group are disabled, JavaScript will work. Here’s how I would do it: document.querySelectorAll('.filter-form__group').forEach(function(group) { const inputItems = group.querySelectorAll('input'); const allDisabled = Array.from(inputItems).every(input =&gt; input.disabled); if (allDisabled) { group.style.display = 'none'; } });
answers question: http://stackoverflow.com/q/78980450
has comment: http://stackoverflow.com/comment/139257148
has comment: http://stackoverflow.com/comment/139257137

http://stackoverflow.com/comment/139261733
type: Comment
score: 0
type: QuestionComment
has text: This question is similar to: [Inner text shadow with CSS](https://stackoverflow.com/questions/2889501/inner-text-shadow-with-css). If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem.
comment on: http://stackoverflow.com/q/78982848

http://stackoverflow.com/comment/139296924
type: Comment
score: 0
comment on: http://stackoverflow.com/q/79002045
has text: The sub-menus are hidden via `display: none`, when their button is not hovered - so you would have to overwrite that, because trying to transform an element that is not shown, is of course pointless.
type: QuestionComment

http://stackoverflow.com/comment/139145989
type: QuestionComment
score: 1
comment on: http://stackoverflow.com/q/78919901
type: Comment
has text: Do you always want all of that image to show regardless of the dimensions of the parent? And is it always to be at the bottom right?

http://stackoverflow.com/a/78994354
type: Answer
score: 0
has body: Make sure your "testbold.otf" file is in a directory within your webserver's root. /your webserver root/ /fonts/ testbold.otf /your project/ index.html . . . other files After this update the CSS using the updated source url.
has comment: http://stackoverflow.com/comment/139284185
answers question: http://stackoverflow.com/q/78993739

http://stackoverflow.com/comment/139148392
comment on: http://stackoverflow.com/a/78918300
has text: That works perfectly but can we add border bottom to last element too ?
score: 0
type: AnswerComment
type: Comment

http://stackoverflow.com/comment/139306296
score: 0
type: AnswerComment
has text: @AndreasBöttcher: When the code is executed on the page, are there any errors on the browser's development console? Now is the time to do some debugging. Is the resulting selector what you expect? Does the selector find any matching elements? If you run it manually after loading the page, is the behavior different? Maybe the element(s) being targeted don't exist on the page yet when the code runs? You're going to have to do some testing and investigating to narrow down the problem.
comment on: http://stackoverflow.com/a/79006973
type: Comment

http://stackoverflow.com/comment/139181133
has text: Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking.
type: QuestionComment
type: Comment
comment on: http://stackoverflow.com/q/78906496
score: 0

http://stackoverflow.com/comment/139309119
comment on: http://stackoverflow.com/q/78973058
score: 0
type: QuestionComment
type: Comment
has text: sorry @mrconcerned ive been mia for some time and focused on studying instead. I ended up using grid instead, and it seems to work the best.

tailwind-ui
tags question: http://stackoverflow.com/q/78935921
tag name: tailwind-ui
type: Tag
tags question: http://stackoverflow.com/q/79067649
tags question: http://stackoverflow.com/q/79000858
tags question: http://stackoverflow.com/q/79197899
tags question: http://stackoverflow.com/q/79244056
tags question: http://stackoverflow.com/q/79274439
tags question: http://stackoverflow.com/q/79411149
tags question: http://stackoverflow.com/q/79432594

zooming
tag name: zooming
type: Tag
tags question: http://stackoverflow.com/q/78948236
tags question: http://stackoverflow.com/q/79225416

http://stackoverflow.com/a/79037001
score: 0
has body: You can use flexbox or grid layout to move the elements properly. these provide more control and is overall better for manual positioning * { margin: 0; padding: 0; box-sizing: border-box; } #main { width: 100vw; height: 100vh; background-color: rgb(49, 49, 49); } .nav-bar { color: white; } #nav-border { background-color: aqua; border-radius: 10px; padding: 5px; } .nav-bar ul { display: flex; justify-content: flex-start; /* Aligns items to the left */ list-style-type: none; } .nav-bar li { margin-right: 20px; /* Adds space between items */ } a { text-decoration: none; color: black; } a:hover { color: skyblue; } Practice Makes Perfect Home Contact
answers question: http://stackoverflow.com/q/79036975
type: Answer

http://stackoverflow.com/q/78911557
type: AnsweredQuestion
tagged with: javascript
tagged with: css
has title: Trigger child click event when parent is clicked(HTML, CSS, JS)
has answer: http://stackoverflow.com/a/78911574
upvote count: 0
has comment: http://stackoverflow.com/comment/139130288
score: -2
accepted answer: http://stackoverflow.com/a/78911574
has body: The problem is that i have that have padding containing I want to trigger checkbox input change when is click( padding) handleTravelTypesInput( event.target )"/> Type1 I hope i can fix it with a simple solution
favorite count: 0
downvote count: 2
tagged with: http://stackoverflow.com/tag/html
type: Question
answer count: 1

http://stackoverflow.com/comment/139378737
has text: Please [edit] your question to include a [mre] so that readers can run your code to answer your question.
type: Comment
type: QuestionComment
comment on: http://stackoverflow.com/q/79046794
score: 1

http://stackoverflow.com/comment/139123861
has text: paste the code itself, not the screenshot of it
score: 2
type: Comment
comment on: http://stackoverflow.com/q/78908058
type: QuestionComment

http://stackoverflow.com/a/79519372
type: Answer
answers question: http://stackoverflow.com/q/78912182
score: 0
has body: Here's my attempt: Create a copy of the "strip" and place the 2 strips side by side (using flex). Translate both divs to the left until the right end of first div goes off the screen. At this point, the front part of the second div fully covers the screen, making it indistinguishable from the initial state. Then loop over the animation. const arr = ['AAA','BBB','CCC','DDD','EEE','FFF','GGG','HHH','III','JJJ','KKK','LLL','MMM','NNN','OOO','PPP','QQQ','RRR','SSS','TTT','UUU','VVV','WWW','XXX','YYY','ZZZ'] function App() { return ( {/* 2 copies */} {[1, 2].map((i) => ( {arr.map((text, j) => ( {text} ))} ))} ) } ReactDOM.createRoot(document.getElementById("root")).render(<App/>) @keyframes marquee { to { transform: translateX(-100%); } } .animate-marquee { animation: marquee 10s linear infinite; } You can further enhance with pause on hover and masking with a linear gradient. const arr = ['AAA','BBB','CCC','DDD','EEE','FFF','GGG','HHH','III','JJJ','KKK','LLL','MMM','NNN','OOO','PPP','QQQ','RRR','SSS','TTT','UUU','VVV','WWW','XXX','YYY','ZZZ',] function App() { return ( {/* 2 copies */} {[1, 2].map((i) => ( {arr.map((text, j) => ( {text} ))} ))} ) } ReactDOM.createRoot(document.getElementById("root")).render(<App/>) @keyframes marquee { to { transform: translateX(-100%); } } .animate-marquee { animation: marquee 10s linear infinite; }

http://stackoverflow.com/comment/139381438
has text: Solved by just passing the color the `linear-gradient` needs to use to match the background, even though it's ugly/messy. It works though. I did learn about `mask-image` though, which is great too.
type: QuestionComment
comment on: http://stackoverflow.com/q/79029341
type: Comment
score: 0

http://stackoverflow.com/comment/139146212
score: 0
has text: Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/) using the `<>` icon. See [**How to create a Minimal, Reproducible Example**](http://stackoverflow.com/help/reprex)
type: QuestionComment
comment on: http://stackoverflow.com/q/78920407
type: Comment

http://stackoverflow.com/comment/139294630
type: Comment
score: 0
has text: Ah I see, I thought you were confused by why the `:hover` is overwritten. I might not be understanding your question then. So what is the thing that is confusing you?
comment on: http://stackoverflow.com/a/79000845
type: AnswerComment

http://stackoverflow.com/comment/139398243
type: AnswerComment
has text: I tried adding margins with a media query and it worked. This is what I did: @media (min-width: 677px) and (max-width: 1027px) { .reading1 { margin: 0 200px 0 200px; } } –
comment on: http://stackoverflow.com/a/79056394
type: Comment
score: 0

http://stackoverflow.com/comment/139375635
comment on: http://stackoverflow.com/q/79045030
score: 0
has text: "I wonder if I can prevent this behaviour" - yes: use Firefox :)
type: QuestionComment
type: Comment

http://stackoverflow.com/comment/139277443
type: Comment
score: 0
comment on: http://stackoverflow.com/a/78991158
type: AnswerComment
has text: The original post has been updated @AryaanSheth

http://stackoverflow.com/comment/139371997
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/79037831
has text: if the image width and height set from css is different (let s say I set it 75px), how could I scale the final canvas (not resize) so it looks identical but better quality. Something like apply scaling x2 (for example) on the matrix and everything else so it’s double in size. I tried using selfScale but it did not help. Your help is appreciated

http://stackoverflow.com/q/78926741
has title: How to check css property already present in an element in javascript
has answer: http://stackoverflow.com/a/78926787
has comment: http://stackoverflow.com/comment/139158114
has answer: http://stackoverflow.com/a/78926845
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139158202
has comment: http://stackoverflow.com/comment/139158229
has comment: http://stackoverflow.com/comment/139158152
has comment: http://stackoverflow.com/comment/139158118
has answer: http://stackoverflow.com/a/78926954
has body: I have a div .... now in Js, if border css property is already present I need to remove that by using let element = document.getElementById("myDiv") element.style.removeProperty("border"); if border css property not present, need to add let element = document.getElementById("myDiv") element.style.border = '1px solid white' but, How to check whether the css property(border) exists or not in element(myDiv)
type: Question
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139158129
tagged with: javascript
score: 0
tagged with: css
has comment: http://stackoverflow.com/comment/139158171
answer count: 3

http://stackoverflow.com/q/78986796
type: UnansweredQuestion
has answer: http://stackoverflow.com/a/78986883
type: Question
answer count: 1
has body: I'm trying to create a responsive contact us section for a website I'm designing and coding for a local business, but the justify-content-center class from bootstrap v4.5 is not centering the icons in their container. The Bootstrap CSS doc is correctly linked, as is the JS at the bottom. I already have a working navbar, so that's not the problem. I save my work and refresh the browser, and I get this (I added a thin border so you can see the container): justify-content-center malfunction Here's my code for that section so far: Contact Us <path d="M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.6 17.6 0 0 0 4.168 6.608 17.6 17.6 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.68.68 0 0 0-.58-.122l-2.19.547a1.75 1.75 0 0 1-1.657-.459L5.482 8.062a1.75 1.75 0 0 1-.46-1.657l.548-2.19a.68.68 0 0 0-.122-.58zM1.884.511a1.745 1.745 0 0 1 2.612.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.68.68 0 0 0 .178.643l2.457 2.457a.68.68 0 0 0 .644.178l2.189-.547a1.75 1.75 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.6 18.6 0 0 1-7.01-4.42 18.6 18.6 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877z" /> <path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1zm13 2.383-4.708 2.825L15 11.105zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741M1 11.105l4.708-2.897L1 5.383z" /> <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5z" /> <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5M1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4z" /> I have a div with a container class followed by a div with a row class, just like it's portrayed in the Bootstrap v4.5 docs: Bootstrap v4.5 docs example I'm not sure why I'm getting…
tagged with: bootstrap-4
score: 0
has title: The justify-content-center class from bootstrap v4.5 is not working
tagged with: css
tagged with: twitter-bootstrap
tagged with: flexbox

http://stackoverflow.com/a/78993718
type: Answer
answers question: http://stackoverflow.com/q/78993557
has comment: http://stackoverflow.com/comment/139281319
has body: The problem is justify-content: end;. Remove it and it's functionality will be replaced with &amp;&gt;:first-child { margin-top: auto !important;}. #item-outer-container { overflow-x: auto; height: 50px; flex-shrink: 1; display: flex; align-items: center; &amp; &gt; :first-child { margin-top: auto !important; } ... } This solution came up with some help from this answer: Use justify-content: flex-end and to have vertical scrollbar The discussion is pointing to an old bug
downvote count: 1
has comment: http://stackoverflow.com/comment/139281388
upvote count: 0
score: -1
has comment: http://stackoverflow.com/comment/139281330

http://stackoverflow.com/comment/139158129
type: Comment
has text: @fdomn-m I was doing that but I wondered why no one have ever came across this. which is time saver in many critical situations. hence, asked the question.
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78926741

http://stackoverflow.com/comment/139182461
score: 0
type: AnswerComment
has text: So simple! Thank you so much.
comment on: http://stackoverflow.com/a/78939881
type: Comment

http://stackoverflow.com/q/78913478
score: 0
tagged with: css
has answer: http://stackoverflow.com/a/78913523
linked to: http://stackoverflow.com/q/29966499
has title: Unwanted line appears on the semicircle when zooming in on the page
tagged with: http://stackoverflow.com/tag/html
type: Question
answer count: 1
has body: When I zoomed in on the page (it was at 67 percent), I observed that an unwanted straight line appeared at the top of the semicircle. Normally, it does not occur at 100% appearance. I expect such a line not to appear when zooming in or out. with zoom: without zoom: What causes this and how do I fix it? I was also expecting a semicircle shape as seen in the images, but a complete semicircle was not formed. Header with Half Circle Is it possible to find such a header ready-made?
accepted answer: http://stackoverflow.com/a/78913523
type: AnsweredQuestion

http://stackoverflow.com/comment/139260213
type: Comment
score: 0
type: QuestionComment
has text: I think you need a combination of container units and possibly `minmax`.
comment on: http://stackoverflow.com/q/78982161

http://stackoverflow.com/q/78971081
has comment: http://stackoverflow.com/comment/139240427
downvote count: 0
has title: Flexible elements between min and max width with CSS grid?
upvote count: 1
has comment: http://stackoverflow.com/comment/139240233
tagged with: css
has comment: http://stackoverflow.com/comment/139240193
answer count: 0
has body: I'm trying to achieve some particular behaviour with grid but I have a problem. I'm using grid-template-columns: repeat(auto-fit, minmax(260px, 400px)); To my understanding it should flex between 260px and 400px - in other words, width of the element in grid should start at 260px, then expand to maximum of 400px as width of the viewport increases, and then when space allows for it, it should add another element into the row and shrink back all elements in the row to 260px, and then repeat the process...if that makes sense. Unfortunately all elements always stay at 400px all the time and never shrink to 260px. Is there a way to achieve what I want with grid but without to much complication?
has comment: http://stackoverflow.com/comment/139240410
has comment: http://stackoverflow.com/comment/139254694
tagged with: css-grid
type: UnansweredQuestion
score: 1
has comment: http://stackoverflow.com/comment/139240450
favorite count: 0
has comment: http://stackoverflow.com/comment/139240412
type: Question

http://stackoverflow.com/comment/140100580
type: Comment
score: 0
type: AnswerComment
has text: Did you find any solution yet? This solution doesn.t work for me.
comment on: http://stackoverflow.com/a/78995645

http://stackoverflow.com/q/78986317
has comment: http://stackoverflow.com/comment/139267820
type: Question
has body: I want to display a photo underneath some text. I want the photo to be centered horizontally, and to shrink as necessary to fit the remaining rectangular space between the end of the text and the bottom edge of the browser window. It should not enlarge beyond 100% its original size if there is more than enough room. There should never be a need for scroll bars to appear. Here's a demo. Things to note: The html, as styled, is always equal to the space inside the window. This is the space I don't want to extend beyond. I set body margin to zero, so that it would superimpose the html space (otherwise, the default margin would shift the body down and to the right, extending outside the html area and activating scroll bars). I define a div (.outer-div) inside and superimposed over the body. This gives me a container that is guaranteed not to have any user agent styling. I reinstate the margin for the left and right side, causing it to narrow symmetrically within the body. I define it with display: flex and flex-flow: column because someone said to :-) I create a flex item, .inner-fixed-div, to contain the text at the top of the page. I create another flex item, .inner-remaining-div, to occupy the unused rectangular space below the text. It is the container that the image must fit within. It's set to flex-grow: 1, as per the flex solution I was trying to apply. I create a container for the picture, .picture-div. The display: inline-block causes it to respond to its container's text-align: center. Finally, the img is styled with width: 100% and height: auto, which I understood would scale the image to fit its container, retaining aspect ratio. Most of the duplicate questions suggested by the Wizard had to do with excess white space at the bottom of a page. This answer relied on magic numbers; i.e. the pixel sizes of various components of the page. I don't want a solution that needs to know the absolute size of anything - there must be a self-maintaining way to do this. Not…
has comment: http://stackoverflow.com/comment/139267807
has title: Shrink an image to fit remaining space at bottom of web page
tagged with: http://stackoverflow.com/tag/html
linked to: http://stackoverflow.com/q/39812393
answer count: 1
type: AnsweredQuestion
score: 0
accepted answer: http://stackoverflow.com/a/78986353
tagged with: css
has comment: http://stackoverflow.com/comment/139267817
tagged with: scale
has answer: http://stackoverflow.com/a/78986353

http://stackoverflow.com/a/79017132
type: Answer
score: 2
downvote count: 1
answers question: http://stackoverflow.com/q/79017087
upvote count: 3
accepted answer of: http://stackoverflow.com/q/79017087
has comment: http://stackoverflow.com/comment/139325870
type: AcceptedAnswer
has body: The status of the document is the key here. The CSS Nesting Module is still in draft status. You have three choices: Wait until the spec becomes a recommendation (probably several years). I assume that once this happens, the W3C will update their validator. Ignore the validation error message, or don’t use the W3C validator. Avoid nesting.

http://stackoverflow.com/comment/139374851
type: Comment
score: 0
comment on: http://stackoverflow.com/q/79044610
type: QuestionComment
has text: A note on SVG inside HTML5: when used as a normal HTML element, SVG is not XML, and does not use namespaces: it _should not_ include the `xmlns` attribute. Also note that `width` and `heigh` indicate the on-page size of the element, and so they need a unit, not just a number. And finally, you almost always want an explicit `viewBox` attribute (which is based on internal SVG units already, so uses plain numbers). And then on a plain HTML note: `id` attributes are meant to be unique identifiers. If that's not what you need, use `class`, not `id`.

mocha.js
type: Tag
tags question: http://stackoverflow.com/q/78978679
tag name: mocha.js

http://stackoverflow.com/comment/139393236
type: AnswerComment
score: 0
comment on: http://stackoverflow.com/a/79055020
has text: see again question
type: Comment

http://stackoverflow.com/comment/139406237
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/79062015
has text: I am pretty sure `gap` is the preferred method for both grid and flexbox. I might be wrong here, but it is what I use in these cases.

http://stackoverflow.com/comment/139281461
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78992567
type: Comment
has text: Just now checked the website on firefox android and brave browser by switching to desktop site. It works fine on firefox but not on Brave browser. To summarize the font size works fine in desktop site mode only in firefox and kiwi so far.

http://stackoverflow.com/comment/139362877
comment on: http://stackoverflow.com/a/79037831
type: AnswerComment
score: 0
type: Comment
has text: `getImageData` forces a synchronous read-back from the context. This will cause the whole context to be deaccelerated, i.e. you won't benefit from GPU rendering anymore, and is thus generally frowned upon. But since you're going to use the same canvas's `toDataURL` method right after, which causes the same issues, it might actually be fine in this exceptional case. But usually it's almost always better to use `drawImage()` to draw a canvas on another canvas.

http://stackoverflow.com/q/78921098
tagged with: css
linked to: http://stackoverflow.com/q/78920407
tagged with: flexbox
upvote count: 0
type: UnansweredQuestion
score: -2
downvote count: 2
favorite count: 0
has answer: http://stackoverflow.com/a/78921202
tagged with: http://stackoverflow.com/tag/html
has title: How can I make a card like this which is responsive in HTML/CSS
type: Question
tagged with: responsive
answer count: 2
tagged with: responsive-design
has body: I would like to make a card (image 1) which is fully responsive and can support two cards sitting to the left of it for a total of three cards on a website I am building (image 2). I've coded this up without responsiveness but I am struggling to get a responsive card. Any help is great, thank you! JSFiddle: https://jsfiddle.net/brax/2o01k7ps/ .alignment2 { display: flex; justify-content: space-between; column-gap: 20px; padding-bottom: 6%; } .container { padding: 2px 16px; } .card2 { box-shadow: 0 5px 13px 0 #000; border-radius: 15px; background-color: #121212; border-color: #121212; height: 188px; } .card2:hover { box-shadow: 0 8px 16px 0 000; } .card2 img { width: 50%; float: left; border-radius: 15px 0px 0px 15px; margin-right: 20px; display: inline; } .card2 h3 { display: inline; } .card2 h4 { display: inline; font-size: 24px; color: white; } .card2 p { display: inline; font-size: 18px; color: white; padding-top: 20px; } .card2 .link-a { display: inline; margin-top: 35px; font-size: 12px; font-weight: 700; text-transform: uppercase; text-decoration: none; } Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor CTA Link Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor CTA Link Image 1 Image 2
has comment: http://stackoverflow.com/comment/139148025
has answer: http://stackoverflow.com/a/78921206

http://stackoverflow.com/a/79049727
has body: Just checked in Google Chrome, using a CSS class will do the trick, for example: .tbl_reader { width: 100%; } and of course, don't forget to add the class="tbl_reader" to the table tag.
type: Answer
score: 0
answers question: http://stackoverflow.com/q/79049598
has comment: http://stackoverflow.com/comment/139403126
has comment: http://stackoverflow.com/comment/139395916

http://stackoverflow.com/comment/139181317
has text: You can edit your post to include a picture ... and yes, you should do this. Keep improving your question until it is as good as it can be.
score: 1
type: Comment
type: AnswerComment
comment on: http://stackoverflow.com/a/78939019

http://stackoverflow.com/comment/139252269
comment on: http://stackoverflow.com/a/78974992
type: Comment
score: 0
has text: @HeikoTheißen I am not dev enough to answer this question. Had a class definition inside a ` ` tag embedded in normal html. Getting rid of the ` ` tag solved everything.
type: AnswerComment

http://stackoverflow.com/q/78905359
has body: I have the following: Shrinking Header with Smooth Scroll Shrinking Header Content Title Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nunc id aliquam tincidunt, nisl nunc tincidunt nunc, vitae aliquam nunc nunc vitae nunc. Sed euismod, nunc id aliquam tincidunt, nisl nunc tincidunt nunc, vitae aliquam nunc nunc vitae nunc. So when I start scrolling, the header and the content (text under the header) is moving. And the content is moving under the header directly when start scrolling. But I want now, that when I start scrolling, the header is collapsing at first to minimal height and the content is vertically under the header all the time and then after that, the content should scroll/move under the header, when I scroll further. Is that possible? I followed the guide in the link above and tried to develop it and I also researched for coding examples, but I found nothing. Perhaps there is a (better) solution with ReactJS. I could also develop it in React.
tagged with: css
has title: How to NOT scroll under collapsing header? The content should scroll under header, when the collapsing header reaches minimal height
type: UnansweredQuestion
has answer: http://stackoverflow.com/a/78905399
score: 0
tagged with: html-heading
type: Question
tagged with: http://stackoverflow.com/tag/html
has answer: http://stackoverflow.com/a/78905374
tagged with: reactjs
tagged with: javascript
answer count: 2

http://stackoverflow.com/comment/139200506
score: 1
type: Comment
comment on: http://stackoverflow.com/a/78950019
has text: This doesn't explain the phenomenon described in the question.
type: AnswerComment

http://stackoverflow.com/comment/139219647
score: 1
has text: I cannot see any element with id = "equiv-submenu".
comment on: http://stackoverflow.com/q/78960206
type: Comment
type: QuestionComment

http://stackoverflow.com/comment/139245777
type: QuestionComment
comment on: http://stackoverflow.com/q/78972066
has text: @Thomasantony do you have any plugins/extension installed for ESLint? Because I think ESLint doesn't understand EJS syntax on its own. What's weird though is that it only has an issue with the second ejs part.
type: Comment
score: 0

http://stackoverflow.com/a/79024073
answers question: http://stackoverflow.com/q/79023871
downvote count: 0
upvote count: 1
has body: I second jerad.blair's answer, but if you were wondering why it isn't working your way (or need to specify other properties in the future like background-color or content), it is because acts like a "replaced element". This means the ::before and ::after pseudo-elements will not be displayed if the element loads/renders properly. Read more on the MDN Web Docs The solution using a ::before element would require you to layer a non-replaced element in the markup, such as a . So something like this will work: Toggle Audio Disable This is quite a lot of markup and style overhead for simply an extra opacity property, but if you need to do anything more complex with the pseudo-element (e.g., background-color, content), you may have to go this route.
score: 1
type: Answer

http://stackoverflow.com/a/78972034
score: 1
has body: MS Outlook Windows is a totally different beast. However it does have various alternative ways of doing things. Try mso-text-orientation: vertical. Alternatively you can put a number in there - I've never tried, but perhaps the number would be for degrees, e.g. mso-text-orientation: 180 I would put it on the , e.g. This should be vertically aligned
has comment: http://stackoverflow.com/comment/139249487
type: Answer
downvote count: 0
has comment: http://stackoverflow.com/comment/139249415
has comment: http://stackoverflow.com/comment/139242872
has comment: http://stackoverflow.com/comment/139249821
upvote count: 1
has comment: http://stackoverflow.com/comment/139249347
answers question: http://stackoverflow.com/q/78971720
has comment: http://stackoverflow.com/comment/139249068

http://stackoverflow.com/comment/139164548
type: QuestionComment
has text: https://www.exo.inc/iris - I believe its baked into a canvas threejs element.
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78930122

http://stackoverflow.com/comment/139195855
has text: I already said. See my comment below his question. The HTML is invalid.
comment on: http://stackoverflow.com/a/78946752
type: Comment
score: 0
type: AnswerComment

http://stackoverflow.com/comment/139137891
type: AnswerComment
has text: yes! thank you very much
comment on: http://stackoverflow.com/a/78916029
type: Comment
score: 0

http://stackoverflow.com/q/78971876
score: 0
has answer: http://stackoverflow.com/a/78972122
tagged with: css
answer count: 3
has comment: http://stackoverflow.com/comment/139245805
has answer: http://stackoverflow.com/a/78972203
has comment: http://stackoverflow.com/comment/139241636
type: UnansweredQuestion
has title: Overflow wrap does not adjust text width
has answer: http://stackoverflow.com/a/78972198
type: Question
has comment: http://stackoverflow.com/comment/139244244
tagged with: responsive
tagged with: http://stackoverflow.com/tag/html
has body: I want the text div to be centered but the text to be aligned left. The inner div (#introduction-child) is wider than its content. Instead it should be the width of the text (max-width 80vw). The font-size seems to be changing the font size without changing its containers width. Any idea how I can make it fit to content? EDIT: I want the width of the child container to adjust [if the text is too wide for the container (>80vw)] to the width of the text after a linebreak happened. Please see photos below what it is supposed to look like/what it should not look like. #introduction { display: flex; justify-content: center; background-color: grey; height: 100vh; width: 100vw; } #introduction-child { overflow-wrap: break-word; max-width: 80vw; background-color: #80b0ff; margin-top: 28vh; } #introduction h2 { font-size: 1.8em; /* ??*/ } Max Mustermann Lorem ipsum dolor sit amet, consectetur ad Lorem amet, consectetur ad This is what it is supposed to be like The Blue box should shrink to the text width. The red part should not exist
has comment: http://stackoverflow.com/comment/139242096

http://stackoverflow.com/q/79000858
tagged with: tailwind-css
score: 0
has body: I need to make the design in tailwind. Check the below outline references,Please help me. Need to build same design. I have used But its shows more top and the mobile is not responsive. Image part is cut more portion.
has comment: http://stackoverflow.com/comment/139295460
has comment: http://stackoverflow.com/comment/139294979
tagged with: css
has comment: http://stackoverflow.com/comment/139294810
type: UnansweredQuestion
has title: How to make card layout above the banner to ovelap
tagged with: tailwind-ui
has answer: http://stackoverflow.com/a/79052824
type: Question
has comment: http://stackoverflow.com/comment/139295226
has comment: http://stackoverflow.com/comment/139298411
answer count: 1
tagged with: http://stackoverflow.com/tag/html

http://stackoverflow.com/a/78979310
answers question: http://stackoverflow.com/q/78979144
type: Answer
has body: min-width: 0 does not break the flex-wrap: wrap property of .monitored-entities. The issue you're encountering is caused by nested flex containers, where the child container (.entity-variables div) lacks flex-wrap: wrap. To fix this, you have two options: Remove the nested flex container (.entity-variables div). Add flex-wrap: wrap to the nested flex container to allow its content to wrap correctly. Here’s how you can apply the second option: document.querySelector('button').addEventListener('click', () => { [...document.querySelectorAll('.entity-container')] .map(item => item.style.minWidth != '' ? item.style.minWidth = '' : item.style.minWidth = 0) }) .monitored-entities { display: flex; justify-content: space-around; flex-wrap: wrap; } .entity-title { padding-top: 16px; padding-bottom: 16px; text-overflow: ellipsis; overflow: hidden; } .entity-container { border-radius: 16px; border-style: solid; border-width: 1px; padding: 32px; margin: 16px; display: flex; flex-direction: column; flex: 1; min-width: initial; } .entity-container > span { font-size: 30px; color: blue; } .entity-variables div { display: flex; flex-wrap: wrap; } Toggle element min-width host.webdata.replica.123456789.123456789.123456789 health: Bad db.webdata.source health: Good db.webdata.replica health: Bad
score: 0

http://stackoverflow.com/a/79000252
has comment: http://stackoverflow.com/comment/139293534
downvote count: 0
has body: One solution is to use grid layout, render both child span, and hide the one that shouldn't be rendered (using visibility:hidden). The advantage is that this can be done pure CSS without needing to calculate the Text size, which is usually pretty troublesome and buggy. But the drawback is of course the user can see the other child in the DOM tree, which might not be ideal depending on your use case. .wrapper { display: inline-grid; border: 1px solid red; /* for showing the size*/ } .wrapper>span { grid-column: 1; grid-row: 1; text-wrap: nowrap; } .wrapper>span:not(.rendered) { visibility: hidden; } Short Text Example 1. Long text I'm very long Example 2. Short Text Very Long textttttttttttttttttttttttttttttttttttt Code sample const MyComponent = (props: { readonly textA: string; readonly textB: string; readonly renderB: boolean; }) => { return ( {props.textA} {props.textB} ); };
answers question: http://stackoverflow.com/q/79000174
accepted answer of: http://stackoverflow.com/q/79000174
score: 1
upvote count: 1
type: AcceptedAnswer
has comment: http://stackoverflow.com/comment/139293524
type: Answer

http://stackoverflow.com/comment/139358995
type: QuestionComment
type: Comment
comment on: http://stackoverflow.com/q/79035574
score: 0
has text: @AHaworth https://codepen.io/waterstart/pen/XWvmKOp

http://stackoverflow.com/q/79025615
answer count: 2
tagged with: http://stackoverflow.com/tag/html
has answer: http://stackoverflow.com/a/79025648
has body: I'm trying to make an item tracker for a game as a webapp. I wanted to have the icon of each item displayed in a grid, and when you click on the image it darkens to indicate that you've gotten it. So far I've only figured out how to affect the opacity of the images, but works well enough for now. Though when the opacity starts at 1.0, it requires a second click to activate, but only for the first time. After that it works as intended, toggling on click. If I set the initial opacity to 0.5, it works on the first click. I made a table to place the images in a grid (added 8 for the time being) and gave each one a unique id, and the class "Loot" like so: function lootDarken(x) { image = document.getElementById(x); if (image.style.opacity === "1") { image.style.opacity = "0.5"; } else { image.style.opacity = "1"; } } Also, if there's a cleaner/easier way to place these images in a grid, please share. I have to go through hundreds of these. I thought maybe it was because the opacity wasn't officially set, and that clicking it the first only set the opacity to 1 since technically, the opacity wasn't 1. So I added the class "Loot" in order to set the opacity on startup. That didn't work, so I tried setting the initial opacity to 0.5 just to see what would happen and that worked wonderfully. I also tried reversing the function, making it check if the opacity is not 1: function lootDarken(x) { image = document.getElementById(x); if (image.style.opacity != "1") { image.style.opacity = "1"; } else { image.style.opacity = "0.5"; } } But that led to the same result. I don't even know what is happening that's causing this weird interaction, so I came here hoping for an explanation... and maybe tips on how to make it less repetitive.
possible better answer: http://stackoverflow.com/a/79025663
tagged with: javascript
accepted answer: http://stackoverflow.com/a/79025648
tagged with: css
type: Question
has answer: http://stackoverflow.com/a/79025663
type: AnsweredQuestion
has title: Darkening an image when clicked is requiring an initial click on that image, and I don't know why
score: 0

http://stackoverflow.com/a/79004004
answers question: http://stackoverflow.com/q/79003946
accepted answer of: http://stackoverflow.com/q/79003946
has comment: http://stackoverflow.com/comment/139300227
type: AcceptedAnswer
has body: Block elements take up the width of their containers by default. The menu items near the top are using float: left; so they are "floating" in their container and not taking up the whole width. I wouldn't want to overuse float (or use it at all, if I'm being honest), but you can set your elements to display: inline-block; which provides a reasonable mix of inline and block styles. In this case it doesn't take up the full width of the container. For example: .container { height: 100vh; display: flex; align-items: center; } .subcontainer { height: 100vh; } .menubackground { width: 91%; height: auto; border-radius: 25px; margin: auto; background: rgba(255, 255, 255, 0.7); max-height: 90%; min-height: 90%; overflow-y: auto; } .submenu { width: 80%; height: auto; border-radius: 25px; margin: auto; background: white; min-height: 10%; } .title { margin: 20px; text-align: center; } .bodytextcss { margin-left: 20px; margin-right: 20px; margin-bottom: 20px; text-align: left; } .menubuttons { float: left; } #menubutton1 { border-radius: 25px; margin: 10px; padding: 10px; background-color: #451255; color: #ffffff; display: inline-block; } #menubutton2 { border-radius: 25px; margin: 10px; padding: 10px; background-color: #451255; color: #ffffff; display: inline-block; } body { background-image: url("background5.png"); background-size: cover; background-color: #451255; } titletext { font-size: 22px; color: #000000; font-weight: bold; } bodytext { font-size: 20px; color: #000000; } buttontex { font-size: 20px; } home recipies Welcome to the stories section This is where I will upload short stories that I write story title 1 story title 2 You'll notice that there's also an errant underline in between the two. I'd honestly recommend simplifying your structure and styles a lot, much more than is addressed in the scope of this answer. But for this specific case what you have is an around an entire , and the two are not sizing very cleanly. A quick fix just for visual styles could be to…
type: Answer
score: 0
has comment: http://stackoverflow.com/comment/139300235
has comment: http://stackoverflow.com/comment/139300183

http://stackoverflow.com/q/78960395
has title: SASS Scoping Issue on a wordpress theme called Flynt
tagged with: sass
tagged with: css
accepted answer: http://stackoverflow.com/a/78964325
type: Question
has comment: http://stackoverflow.com/comment/139221828
answer count: 1
has answer: http://stackoverflow.com/a/78964325
type: AnsweredQuestion
has body: I have an issue with scoping and I can not understand why. I am using the Flynt wordpress theme with components . I am trying to build a component with scoping but it doesn't work (I have seen other scoped components working just fine) , here is how my SASS(CSS) works: .flynt-component[name='BackgroundImagesStackable'] { position: relative; } .background-images-stackable { position: relative; } .background-image { position: relative; z-index: 1; } .stacked-image { inline-size: 50%; inset-block-start: 50%; inset-inline-start: 50%; position: absolute; transform: translate(-50%, -50%); z-index: 2; } But it doesnt work when i try to scope the elements: .flynt-component[name='BackgroundImagesStackable'] { position: relative; .background-images-stackable { position: relative; } .background-image { position: relative; z-index: 1; } .stacked-image { inline-size: 50%; inset-block-start: 50%; inset-inline-start: 50%; position: absolute; transform: translate(-50%, -50%); z-index: 2; } .flynt-component[name='BackgroundImagesStackable']::after { background-color: #ffc0cb; block-size: 100%; content: "Test"; /* Adjust content as needed */ inline-size: 100%; inset-block-start: 0; inset-inline-start: 0; position: absolute; z-index: 0; /* Lower than both images */ } } I tried several solutions to scoping and none of them gave me any hints on solving the problem
score: 0

styled-components
tags question: http://stackoverflow.com/q/78983131
tag name: styled-components
type: Tag
tags question: http://stackoverflow.com/q/79063149
tags question: http://stackoverflow.com/q/79131548
tags question: http://stackoverflow.com/q/79167752
tags question: http://stackoverflow.com/q/79184839
tags question: http://stackoverflow.com/q/79176607
tags question: http://stackoverflow.com/q/79112738
tags question: http://stackoverflow.com/q/79391702
tags question: http://stackoverflow.com/q/79351860
tags question: http://stackoverflow.com/q/79342476
tags question: http://stackoverflow.com/q/79509425
tags question: http://stackoverflow.com/q/79478614

http://stackoverflow.com/comment/139207766
type: Comment
comment on: http://stackoverflow.com/a/78953732
score: 0
type: AnswerComment
has text: And you absolutely should not be applying such a heavy-handed style to the top-level element on your document.

http://stackoverflow.com/q/78905228
tagged with: webpack
has title: Webpack HTML loader doesn't work along with CSS loader
downvote count: 0
answer count: 0
tagged with: electron
has comment: http://stackoverflow.com/comment/139145230
tagged with: webpack-html-loader
upvote count: 1
type: UnansweredQuestion
score: 1
tagged with: css
type: Question
tagged with: electron-forge
has body: Issue I'm creating a project with Electron Forge and webpack. I added a 'public' directory to my project, and a HTML-loader plugin to resolve the imports in the HTML files. Some parts of my webpack configuration are as follows: export const rules: Required<ModuleOptions>["rules"] = [ // Add support for native node modules { // We're specifying native_modules in the test because the asset relocator loader generates a // "fake" .node file which is really a cjs file. test: /native_modules[/\\].+\.node$/, use: "node-loader", }, { test: /[/\\]node_modules[/\\].+\.(m?js|node)$/, parser: { amd: false }, use: { loader: "@vercel/webpack-asset-relocator-loader", options: { outputAssetBase: "native_modules", }, }, }, { test: /\.tsx?$/, exclude: /(node_modules|\.webpack)/, use: { loader: "ts-loader", options: { transpileOnly: true, }, }, }, { test: /\.(png|jpe?g|gif|svg|ico|woff|woff2|ttf|otf|eot|mp4|webm|mp3|wav|pdf|txt)$/, type: "asset/resource", generator: { filename: "assets/[hash][ext][query]", } }, { test: /\.(htm|html)$/, use: [{ loader: "html-loader", }], }, ]; export const alias = { "source": path.resolve(__dirname, "source"), "public": path.resolve(__dirname, "public") } Then I'm trying to import a CSS file directly from my HTML like this: Hello World! But the CSS styles don't appear: Bad CSS styles My project structure Attempts I checked the DevTools and the HTML looks like this: Hello World! Then I went to '/29125ef8bd79b19044b6.css', instead of CSS code, I saw something unexpected: import API from "!../../../../node_modules/.pnpm/style-loader@3.3.4_webpack@5.94.0/node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"; import domAPI from "!../../../../node_modules/.pnpm/style-loader@3.3.4_webpack@5.94.0/node_modules/style-loader/dist/runtime/styleDomAPI.js"; import insertFn from "!../../../../node_modules/.pnpm/style-loader@3.3.4_webpack@5.94.0/node_modules/style-loader/dist/runtime/insertBySelector.js"; import setAttributes from "!../../../../node_modu…
favorite count: 0

http://stackoverflow.com/comment/139157773
type: Comment
score: 1
comment on: http://stackoverflow.com/q/78926526
type: QuestionComment
has text: _"I'm thinking that I can do `TABLE#myId TD[Text$='- date1end']`"_ - unless you are talking about something else than actual CSS in the browser - like the extended syntax of some DOM library or scraper - then no, you won't be able to do that. `[foo$='bar']` is attribute selector syntax, but you are not dealing with an attribute here. The answer to [Is there a CSS selector for elements containing certain text?](https://stackoverflow.com/q/1520429/1427878) is still "No" as of now.

webgl
type: Tag
tag name: webgl
tags question: http://stackoverflow.com/q/78922065
tags question: http://stackoverflow.com/q/79112975
tags question: http://stackoverflow.com/q/79280928

http://stackoverflow.com/comment/139317280
has text: The author of this library has been [working on this very recently](https://github.com/t1m0n/air-datepicker/issues/8#ref-commit-87362b2). The code is currently in a separate branch called [**multiple-calendars**](https://github.com/t1m0n/air-datepicker/tree/multiple-calendars). It appears that you invoke it by specifying `calendars: 2` when instantiating the Airdatepicker. Not sure if it’s responsive and will automatically adjust back to 1 calendar on mobile devices.
comment on: http://stackoverflow.com/q/79013255
type: Comment
score: 0
type: QuestionComment

http://stackoverflow.com/comment/139163353
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78929444
has text: Perhaps an outside-the-box suggestion, but... I wouldn't use a ` ` for this output at all. Instead, I'd create a ` ` for each heading/value pair and put those divs into a flex container that wraps.

http://stackoverflow.com/q/79030864
type: UnansweredQuestion
tagged with: vercel
type: Question
has title: NextJS doesn't load module's CSS file on Vercel but does on local development machine
score: 0
has body: I am using React Day picker calendar module and loading styles according to their docs: If you are using a React framework, such as Next.js or Gatsby, or a bundler like Webpack with css-loader, import the CSS file in your app's main JavaScript or TypeScript file: ./App.jsx import "react-day-picker/style.css"; Thats exactly what I am doing. In the NextJS I am loading stylesheet in _app.js at the top of the file before other imports: import "react-day-picker/style.css"; ... Stylesheet is loaded and used on local development machine, but when app is deployed to Vercel styles are not loaded. Any idea why?
tagged with: next.js
tagged with: css
answer count: 0

http://stackoverflow.com/q/79043889
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139373927
type: AnsweredQuestion
has answer: http://stackoverflow.com/a/79045116
tagged with: reactjs
score: 0
answer count: 2
possible better answer: http://stackoverflow.com/a/79045116
has answer: http://stackoverflow.com/a/79044255
has body: I am working on a React project where I need to animate individual letters in a string, so I am splitting the string into separate span elements for each letter. However, I'm facing an issue where the text looks different when split compared to when it is rendered normally as a continuous string. Note: The text is split until character level, with each character wrapped with span. Here is a simplified version of my code: import { ReactNode } from "react"; export function splitWord(input: string): string[] { return input.match(/\S+|\s+/g) || []; } export function splitLetter(input: string): string[] { const characters: string[] = []; const regex = /[\s\S]/gu; let match; while ((match = regex.exec(input)) !== null) { characters.push(match[0]); } return characters; } export function splitStringWithSpan(input: string): ReactNode { return ( <> {splitWord(input).map((wordOrSpace, wordIndex) => ( *]:overflow-y-clip [&>*]:inline-flex leading-tight" key={wordIndex} > {splitLetter(wordOrSpace).map((letter, letterIndex) => ( {letter === " " ? "\u00A0" : letter} ))} ))} </> ); } const Help = () => { return ( Splitted {splitStringWithSpan("Young")} Not Splitted Young ); }; export default Help; In the code, I render the text "Young" in two ways: Split into individual letters using splitStringWithSpan. Rendered as a normal string. Issue: example The splitted text looks slightly wider from the non-split text. You can see there's slightly different width at the character "Y" in the example. Question: How can I make the splitted text look the same as the non-split text in terms of character width and spacing? Attempts: I tried changing the max width of each individual character to max-width: 0.94em; It works for some character like "W", but still can't handle all character's spacing.
tagged with: css
linked to: http://stackoverflow.com/q/64825661
accepted answer: http://stackoverflow.com/a/79044255
has comment: http://stackoverflow.com/comment/139373801
tagged with: fonts
type: Question
has title: How to ensure consistent text rendering between split and non-split text?

http://stackoverflow.com/q/79058055
type: Question
tagged with: http://stackoverflow.com/tag/html
downvote count: 0
tagged with: javascript
upvote count: 1
has body: I have this grid with 3 columns, and when i click one of the divs it'll go down a row and span the whole row, it also closes back up when i click on it again. Also, when I open a different div, it'll close all the other ones if theyre open. so that there's only one open at a time how do I make it so that when I hover on it, it'll blur the div and show "Click for more info" in the middle? i was thinking of adding a div with the text on each one but that seems too repetitive.. is there an easier way to do it? document.querySelectorAll('#gridALBUM > div').forEach((D,_,A)=> { D.addEventListener('click', e=> { if (D.classList.toggle('span')) A.forEach(d =>{ if(d!=D) d.classList.remove('span') }); }) }) #gridALBUM { margin: 50px auto; max-width: 908px; display: grid; grid-gap: 0 4px; grid-template-columns: repeat(3, 300px); grid-auto-flow: dense; background-color: lightblue; } #gridALBUM > div { border : 1px solid black; display : flex; } #gridALBUM > div:not(.span) > div { display : none; } #gridALBUM > div.span { grid-column : 1 / 4; background-color : #47479c; } 1 one 2 two 3 three 4 four 5 five 6 six 7 seven 8 eight 9 nine 10 ten
answer count: 2
tagged with: css
tagged with: grid
has title: blur image and show text on hover?
has answer: http://stackoverflow.com/a/79058091
has answer: http://stackoverflow.com/a/79058076
type: UnansweredQuestion
score: 1
favorite count: 0

http://stackoverflow.com/q/78941593
tagged with: css
linked to: http://stackoverflow.com/q/3331353
has answer: http://stackoverflow.com/a/78941635
accepted answer: http://stackoverflow.com/a/78941635
type: Question
has body: So I make something very basic. I want to make a button have a slide down feature using CSS. However it doesn't seem to work. In fact it seems like CSS maybe has removed it for everything except for the body. h3 { display: none; } body:active h3 { display: block; opacity: 2; } words here The thing is I don't feel the need to add the code for the button because no matter what I do it doesn't work. I can create a text using p and try to make it so that when you click on it or hover over it it would make the the div pop up. However it doesn't. Literally nothing works. I can put anything to replace body nothing seems to work. The only thing that seems to work is body. Which I find weird. Why isn't working? Literally it is so simple and I search online and people who are using visibility make it work and they don't even need bunch coding. Just add animations and all that. All I want is to make this work so I can add whatever I want to edit it. However it isn't working no matter what I replace it with. Why isn't it only working on body only? Tried everything doesn't work. Only thing that works is using body. I tried doing it to just .subcontent but it didn't work so I added h3 to the words to see if that would do anything but it still didn't work.
has title: CSS visibility and block doesn't work when I am trying to animation
has comment: http://stackoverflow.com/comment/139185317
tagged with: http://stackoverflow.com/tag/html
type: AnsweredQuestion
has answer: http://stackoverflow.com/a/78941648
possible better answer: http://stackoverflow.com/a/78941648
duplicate of: http://stackoverflow.com/q/3331353
score: 0
answer count: 2

http://stackoverflow.com/q/78912380
downvote count: 4
has comment: http://stackoverflow.com/comment/139131882
has title: How do I use flex to have a div aligned to the left spanning all the height, two divs to the right aligned to top and bottom within a background div?
tagged with: css
tagged with: twitter-bootstrap
tagged with: flexbox
upvote count: 0
type: UnansweredQuestion
favorite count: 0
score: -4
type: Question
answer count: 1
has answer: http://stackoverflow.com/a/78912453
has body: So I have 4 divs, one of which is the parent acting as a "background" div, and 3 other divs inside of that one. I want to align the larger one to the left and have it span the full height of the div. I want to align the two smaller ones to the right with the first one on top and the second one on bottom. How could I achieve this with flex? This is what I want: This is the code I currently have: .brown { display: flex; width: 300px; height: 170px; background: brown; } .yellow { background: yellow; } .green { background: green; } .blue { background: blue; } I am also using bootstrap so if I could do this with only bootstrap util classes that would be awesome. Thanks in advance!

http://stackoverflow.com/q/78965453
tagged with: node.js
has body: I apologize if this is a dumb question as I am not a web developer. I am trying to use rollup.js to bundle a web components pack to use inside WebIQ. When building with rollup -c --bundleConfigAsCjs I get the following error ./src/index.ts → dist_rollup/lib-OB-ian.js... [!] Error: Could not load C:\Users\...\file.css?inline (imported by file.ts): ENOENT: no such file or directory, open 'C:\Users\file.css?inline' at open (node:internal/fs/promises:636:25) at Object.readFile (node:internal/fs/promises:1246:14) at C:\Users\PORT_IM_3\AppData\Roaming\npm\node_modules\rollup\dist\shared\rollup.js:20102:24 at Queue.work (C:\Users\PORT_IM_3\AppData\Roaming\npm\node_modules\rollup\dist\shared\rollup.js:20468:32) I believe that rollup is trying to acess a file that is ".css?inline" instead of ".css" but I am not sure. Is there any way to fix this? My rollup.config.cjs looks like this: import resolve from "@rollup/plugin-node-resolve"; import commonjs from "@rollup/plugin-commonjs"; import typescript from "@rollup/plugin-typescript"; import json from "@rollup/plugin-json"; import css from "rollup-plugin-import-css"; import postcss from 'rollup-plugin-postcss'; export default [ { input: './src/index.ts', output: [ { file: 'dist_rollup/lib-OB-ian.js', format: 'cjs' }, ], plugins: [resolve(), commonjs(), typescript({ tsconfig: "./tsconfig.json" }), json(), css(), postcss({extensions: ['.css'],}) ], } ] Try: rollup -c --bundleConfigAsCjs Expected: a file bundle.js with the code
accepted answer: http://stackoverflow.com/a/79055637
type: Question
answer count: 1
type: AnsweredQuestion
score: 0
tagged with: bundle
has answer: http://stackoverflow.com/a/79055637
has title: Rollup.js is trying to access "*.css?inline"
tagged with: css

http://stackoverflow.com/comment/139467255
has text: @fweth I've updated my answer. The default is `auto`, afaik.
comment on: http://stackoverflow.com/a/79089955
type: Comment
score: 0
type: AnswerComment

http://stackoverflow.com/comment/139349167
comment on: http://stackoverflow.com/q/79030490
type: QuestionComment
has text: Thanks, understood - I guess it's for the sort of problem e.g. caused by email clients.
type: Comment
score: 0

http://stackoverflow.com/a/78924436
downvote count: 1
upvote count: 0
score: -1
has body: Prior to the response, I apologize if the comments felt curt due to lack of English. Where is the white background coming from when using mix-blend-mode? The above question seems to be asking why the white color occurs, so I answered it in the comments. What mix-blend-mode causes. I'm sorry for quoting another answer. I don't want to accept. Now, the white of the rotated element has nothing to blend with outside of the stacking context created by the middle div. Since it has nothing to blend with, it just outputs the source color — white. The size of div was defined as 200px, but when you rotate it, the size of the actual element changes. body { background: #060f11; } p { color: white; font-weight: bold; margin-bottom: 40px; font-size: 2rem; } #with-z-index { position: relative; z-index: 0; } #with-z-index .filter-bg { position: relative; background: #060f11; height: 300px; } #with-z-index .filter-content { filter: contrast(200%) brightness(1000%) invert(100%); mix-blend-mode: multiply; position: absolute; top: 0; left: 0; transform: translate(25%,25%) rotateZ(45deg); height: 200px; width: 200px; } /* if-not-filter */ #if-not-filter { position: relative; z-index: 0; } #if-not-filter .square-bg { position: relative; background: red; height: 300px; } #if-not-filter .square { filter: contrast(200%) brightness(1000%) invert(100%); position: relative; transform: translate(25%,25%) rotateZ(45deg); width: 200px; height: 200px; } Document With blend mode <div class="filter-content" style="background:linear-gradient(0deg, rgba(0,0,0,1), rgba(0,0,0,0) 50%), linear-gradient(90deg, rgba(0,0,0,1), rgba(0,0,0,0) 50%), linear-gradient(180deg, rgba(0,0,0,1), rgba(0,0,0,0) 50%), linear-gradient(270deg, rgba(0,0,0,1), rgba(0,0,0,0) 50%), url("data:image/svg+xml,%3Csvg viewBox='0 0 500 500' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25'…
type: Answer
has comment: http://stackoverflow.com/comment/139154067
has comment: http://stackoverflow.com/comment/139156433
answers question: http://stackoverflow.com/q/78923418

http://stackoverflow.com/a/78936086
has body: Few improvements to streamline your HTML and JavaScript for the capture-element custom element, ensure that the inner div doesn't need to be explicitly declared, adjusting the image size to match the div size, making the div's bottom border appear, and ensuring styles are properly captured within the SVG serialization. use this modified code snippet.
type: Answer
downvote count: 1
answers question: http://stackoverflow.com/q/78936071
upvote count: 0
score: -1
has comment: http://stackoverflow.com/comment/139210847
has comment: http://stackoverflow.com/comment/139176465

http://stackoverflow.com/comment/139391485
comment on: http://stackoverflow.com/q/79040449
type: Comment
has text: You can inspect that element from chrome element and then apply your desired css to the class mentioned there. Check what class is the child of the wrapper class that is directly attached to the input field
type: QuestionComment
score: 1

http://stackoverflow.com/comment/139244908
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78973195
has text: This is really all quite unclear. We don't know how your "custom page" works, how exactly you embedded the form there, etc. Please go read [ask] and [mre], and then edit your question accordingly.

http://stackoverflow.com/comment/139375447
score: 0
comment on: http://stackoverflow.com/q/79044837
type: QuestionComment
has text: no not even one tailwind styling component is working /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./src/pages/**/*.{js,ts,jsx,tsx,mdx}", "./src/components/**/*.{js,ts,jsx,tsx,mdx}", "./src/app/**/*.{js,ts,jsx,tsx,mdx}", ], theme: { extend: { colors: { background: "var(--background)", foreground: "var(--foreground)", }, }, }, plugins: [], }; this is my tailwind.config.js file
type: Comment

http://stackoverflow.com/comment/139178883
type: AnswerComment
has text: Can you share the updated fiddle ?
comment on: http://stackoverflow.com/a/78936756
type: Comment
score: 0

http://stackoverflow.com/q/79035988
has title: How to properly animate loading bar in React?
has body: I'm building a loading bar in React, but something is not right. I want it to fill width 100% once the timer is reached 3 seconds, but for some reason it does not work as expected. const { useState, useEffect } = React; const Loading = () => { const [isLoading, setIsLoading] = useState(true); const [progress, setProgress] = useState(0); useEffect(() => { const duration = 3000; const increment = 100 / duration; const timer = setInterval(() => { setProgress((prevProgress) => { const newProgress = prevProgress + increment; if (newProgress >= 100) { clearInterval(timer); setIsLoading(false); return 100; } return newProgress; }); }, 10); return () => clearInterval(timer); }, []); return ( {isLoading && ( )} ); }; // Render it ReactDOM.createRoot( document.getElementById("root") ).render( <Loading /> ); .loadng_bar { position: absolute; top: 0; left: 0; width: 0; height: 5px; background-color: #c4483f; transition: width 3.05s linear; } It should increase the progress up to full width during 3 seconds. How can I achieve it?
type: Question
answer count: 1
type: AnsweredQuestion
accepted answer: http://stackoverflow.com/a/79036263
tagged with: reactjs
score: 0
has answer: http://stackoverflow.com/a/79036263
tagged with: javascript
tagged with: css

http://stackoverflow.com/q/78930122
has comment: http://stackoverflow.com/comment/139164591
has comment: http://stackoverflow.com/comment/139164581
type: AnsweredQuestion
score: 0
answer count: 2
has comment: http://stackoverflow.com/comment/139164549
tagged with: javascript
has comment: http://stackoverflow.com/comment/139164570
accepted answer: http://stackoverflow.com/a/78930608
has comment: http://stackoverflow.com/comment/139164551
possible better answer: http://stackoverflow.com/a/78934246
tagged with: css
has comment: http://stackoverflow.com/comment/139164539
has title: Eggshell gradients in css
has answer: http://stackoverflow.com/a/78930608
has answer: http://stackoverflow.com/a/78934246
has comment: http://stackoverflow.com/comment/139164548
has body: What is the best strategy to creating subtle complex gradients like the attached. I tried to see what the css was in this element, but it may be set in the canvas javascript itself. I am not sure if this is a linear gradient - or made up of multiple gradients stacked on top of each other with differing degrees of opacity. Its as if there is a spot of indigo top/left and peach in the bottom/left https://jsfiddle.net/Ls4dr3bo/1/ body{ background: rgb(229,232,236); background: linear-gradient(90deg, rgba(229,232,236,1) 0%, rgba(229,232,236,1) 35%, rgba(231,217,219,1) 74%, rgba(231,221,224,1) 100%); } .container{ height: 100vh; width:100%; } &lt;div class="container"&gt; &lt;/div&gt; possible html and css used in reference https://www.exo.inc/iris jsx 'use client'; import gsap from 'gsap'; import { useLayoutEffect, useRef } from 'react'; import { Section } from '~/components/ui'; import { cx } from '~/utils'; import styles from './ExoIrisGradientTransition.module.scss'; export const ExoIrisGradientTransition = () =&gt; { const containerRef = useRef(null); useLayoutEffect(() =&gt; { const ctx = gsap.context(() =&gt; { if (!containerRef.current) return; gsap.to('.js__solid', { opacity: 1, scrollTrigger: { trigger: '.js__gradientContainer', start: '80% bottom', end: 'bottom bottom', // markers: true, scrub: true, }, }); }, containerRef); return () =&gt; { ctx.revert(); }; }, []); return ( &lt;Section className={styles.container} ref={containerRef}&gt; &lt;div className={cx(styles.gradientContainer, 'js__gradientContainer')}&gt; &lt;div className={cx(styles.gradient, 'js__gradient')} aria-hidden /&gt; &lt;div className={cx(styles.solid, 'js__solid')} aria-hidden /&gt; &lt;/div&gt; &lt;/Section&gt; ); }; css .container { position: relative; display: flex; background: transparent; flex-flow: column nowrap; z-index: 5; } .gradientContainer { --container-height: 160vh; height: var(--container-height); position: relative; width: 100%; @include landscape { --container-height: 200…
has comment: http://stackoverflow.com/comment/139164805
tagged with: http://stackoverflow.com/tag/html
type: Question

http://stackoverflow.com/comment/139218226
type: Comment
has text: There is only one php file involved - submit.php The relevant code for the message is; if (mail($toEmail, $emailSubject, $htmlContent, $headers)) { echo json_encode(['status' => 'success', 'message' => 'THANK YOU FOR YOUR MESSAGE. WE WILL RESPOND AS SOON AS POSSIBLE.']); } else { echo json_encode(['status' => 'error', 'message' => 'Failed to send your message.']); } The contact form is in the index page (the only page) with html: <div id="responseMessage" Your style code has been tried both in this div and in the index page style statement
score: 0
comment on: http://stackoverflow.com/a/78956442
type: AnswerComment

http://stackoverflow.com/comment/139294511
type: QuestionComment
has text: Let me just post an answer I guess, it's easier to explain.
score: 1
comment on: http://stackoverflow.com/q/79000658
type: Comment

http://stackoverflow.com/q/79029100
favorite count: 0
has comment: http://stackoverflow.com/comment/139347763
type: Question
score: 2
downvote count: 0
has title: Is there any way to get chromium to use overlay scrollbars via CSS?
has comment: http://stackoverflow.com/comment/139351448
has body: The 'scrollbar styling' chrome dev article talkts about 'classic' and 'overlay' scrollbars https://developer.chrome.com/docs/css-ui/scrollbar-styling#classic_and_overlay_scrollbars I'm working on a UI that runs inside an embedded chromium (vuplex webview) inside the application. I am supposed to implement a design that uses overlay scrollbars. I heard there is a flag to make chrome use overlay scrollbars (that apparently seems to come and go with versions) - but the problem is, I don'T know if there even is a way to make that embedded chromium use these flags. I also found a few questions in that direction, but no answers. I tried playing around with scrollbar-gutter, &amp;::-webkit-scrollbar+width, but I couldn't come up with a solution: when the vertical scrollbar is visible, the scrollbar-gutter will always 'steal' away space on the right side of the div that should be scrollable. Is it really impossible to make chromium use an overlay scrollbar? Is there any way to hack it?
tagged with: chromium-embedded
tagged with: css
tagged with: scrollbar
upvote count: 2
answer count: 0
linked to: http://stackoverflow.com/q/73152038
type: UnansweredQuestion

http://stackoverflow.com/a/78955191
answers question: http://stackoverflow.com/q/78954897
type: Answer
has body: This is the tried-and-true method for keeping an element in the centre of its parent: .parent { position: relative; } .centered-child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } p { position: relative; } span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: red; color: white; padding: 0.5em; font-weight: bold; } Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempor nunc mauris, sit amet placerat tortor lobortis dapibus. Nam lectus eros, maximus ac magna vel, congue consequat eros. Fusce id pretium diam. Cras sit amet pharetra ante. Sed quis commodo quam, vel facilisis ipsum. Vestibulum sodales iaculis arcu, et fringilla nisi ullamcorper sed. Donec interdum sit amet est non accumsan. Donec non augue feugiat, fermentum nunc non, convallis est. Cras vel ligula nec odio faucibus ultricies. Sed vulputate tortor eget pretium convallis. Cras interdum elit eget mi porta suscipit. Morbi ut velit diam. Etiam finibus eros et efficitur rutrum. Quisque viverra metus ac eleifend imperdiet. Quisque pretium ut purus vitae tempus. Duis varius risus congue velit faucibus, sed interdum purus consectetur. centered
score: 0

http://stackoverflow.com/comment/139244519
type: AnswerComment
score: 1
has text: @KIKOSoftware Yes, I know it's not responsive. One can use the tricks from [this answer](https://stackoverflow.com/a/76931643/51685) to make a `path()` clip-path responsive.
type: Comment
comment on: http://stackoverflow.com/a/78973672

http://stackoverflow.com/comment/139136840
has text: @deceze I still think my inital question is as exact as it can be. But i added a DOM snippet. Working this out in HTML would be a hilariously lot of useless code.
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78913738
type: QuestionComment

http://stackoverflow.com/comment/139167336
type: QuestionComment
score: 1
has text: Keep a counter variable, that you increase on every click. Based on the value, decide which style to apply. When the counter variable goes over the threshold of available styles, either reset it via an explicit check with an `if` condition, or apply the modulo operator, to keep it "in bounds."
type: Comment
comment on: http://stackoverflow.com/q/78931768

http://stackoverflow.com/a/78924846
accepted answer of: http://stackoverflow.com/q/78924442
has body: Seems like the dropdown is displaying over the hero component. Rather, it seems like the dropdown is lacking any background color so the hero showns through it. Consider adding some kind of background color to cover the hero when the dropdown shows, such as in FlyoutLink: {showFlyout && ( <motion.div … className="… bg-white" > const { useState } = React; const { AnimatePresence, motion } = Motion; const { DownOutlined } = icons; const { Link } = ReactRouterDOM; const Example = () => { return ( Projects <DownOutlined className="py-auto" /> ); }; const FlyoutLink = ({ children, href, FlyoutContent }) => { const [open, setOpen] = useState(true); const showFlyout = FlyoutContent && open; return ( setOpen(true)} onMouseLeave={() => setOpen(false)} className="relative w-fit h-fit !z-50" > {children} {showFlyout && ( <motion.div initial={{ opacity: 0, y: 15 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: 15 }} transition={{ duration: 0.3, ease: "easeOut" }} className="absolute left-1/2 top-12 !-translate-x-1/2 w-[calc(100vw-17px)] !z-50 bg-white" > <FlyoutContent /> </motion.div> )} ); }; const ProjectTypes = () => { return ( /01 GitHub Projects /02 School Projects /02 School Projects /02 School Projects ); }; // === Hero const { Button } = antd; const HeroSection = () => { return ( Hi! I'm Patrik Bajzík I am a full stack programmer and software developer based in Trnava, Slovakia. Contact Me ); }; // === App.tsx const { createBrowserRouter, RouterProvider } = ReactRouterDOM; const router = createBrowserRouter([ { path: "/js", element: ( <React.Fragment> <Example/> <HeroSection/> </React.Fragment> ), }, ]); ReactDOM.createRoot(document.getElementById('app')).render(<RouterProvider router={router} />);
type: AcceptedAnswer
type: Answer
score: 0
answers question: http://stackoverflow.com/q/78924442

http://stackoverflow.com/q/79011399
has answer: http://stackoverflow.com/a/79011566
score: 1
upvote count: 1
tagged with: css
has comment: http://stackoverflow.com/comment/139313635
tagged with: flexbox
accepted answer: http://stackoverflow.com/a/79011566
tagged with: css-grid
has title: Aligning content from header and main horizontally
favorite count: 0
type: Question
has body: What are the easiest methods of centering the header with the main of the page so that they will stay centered no matter the screen resolution? I have my header container like this: .header-container { display: flex; position: relative; margin: 2rem 1rem; justify-content: center; max-width: 100%; } And my main container like this: .main-container { display: grid; justify-content: center; grid-template-columns: repeat(3, minmax(100px, 400px)); column-gap: 2rem; row-gap: 3rem; } How can I align both of them horizontally if they're both centered but have different sizes? I've tried to use align or justify content with this and grid but it's cropping my whole page then and making my page look bad overall: * { box-sizing: border-box; } body { display: flex; flex-direction: column; height: 100vh; margin: 0; padding: 0; align-items: center; } .header-container { display: flex; position: relative; margin: 2rem 1rem; justify-content: center; width: 100%; } .main-container { display: grid; justify-content: center; grid-template-columns: repeat(3, minmax(100px, 400px)); column-gap: 2rem; row-gap: 3rem; width: 100%; } .header-item { background-color: lightblue; padding: 1rem; } .main-item { background-color: lightcoral; padding: 2rem; } Header Item Header Item Header Item Header Item Header Item Header Item Main item Main item Main item Main item
downvote count: 0
answer count: 1
type: AnsweredQuestion

http://stackoverflow.com/a/79006173
score: 1
type: AcceptedAnswer
type: Answer
downvote count: 0
upvote count: 1
answers question: http://stackoverflow.com/q/79005867
has body: I faced the same issue here's what I found out. The issue lies in how Tailwind CSS handles class names dynamically. Tailwind generates the necessary CSS classes at build time, meaning if you use a dynamic value like bg-{{$color}}-100, it won't be recognized since Tailwind doesn't know all possible values at build time. Here's a few work-arounds: (Apologies for the code examples, I am using React, but the underlying aspect remains the same) 1. Using Template Literals with Full Class Name Tailwind requires the full class names to be present in the code. When dynamically changing classes, you can use conditional logic to dynamically set the class names. However, this will still only work for the specific colors that Tailwind knows at build time. 2. Ensure Tailwind Classes Are Generated for All Themes If you're using multiple themes (like blue, red, green, etc.), ensure that all the theme color classes (text-blue-500, text-red-500, etc.) are included in your final CSS. Tailwind needs to see these class names to generate the corresponding styles. You can achieve this by using a theme object in your Tailwind configuration. 3. Recommended Approach with Conditional Classes You can explicitly create a map of themes and dynamically set the class based on the value const themeClasses = { blue: 'text-blue-500', red: 'text-red-500', green: 'text-green-500', // add more colors as needed }; Home 4. Approach with Tailwind's @apply If you want more flexibility, you can define your own color schemes in Tailwind’s config file (tailwind.config.js), allowing you to have more control over the theme and apply styles dynamically. Configure the colors on the tailwind.config.js module.exports = { theme: { extend: { colors: { 'theme-blue': '#1DA1F2', 'theme-red': '#E0245E', 'theme-green': '#17BF63', }, }, }, // other config... }; Use the dynamic class based on a theme or predefined color Home
accepted answer of: http://stackoverflow.com/q/79005867

http://stackoverflow.com/comment/139380484
type: QuestionComment
comment on: http://stackoverflow.com/q/79044837
type: Comment
score: 0
has text: @ram shinde Tailwind CSS is not applying to anything, like not even `font-bold text-5xl` like nothing ??

http://stackoverflow.com/q/78919468
tagged with: bootstrap-grid
answer count: 1
has body: I tried to use Bootstrap grid, but I encountered a problem. When I'm running the following code: Card Gallery a horizontal scroll appears to fix this, I added the 'w-100' class on the 'row' element Card Gallery but now I have space on the right. How to remove the scroll in the first case or remove the space on the right in the second case?
type: AnsweredQuestion
score: 0
has title: Empty space on the right when using the bootstrap 5.3.3 grid with 'row w-100'
has answer: http://stackoverflow.com/a/78919751
accepted answer: http://stackoverflow.com/a/78919751
has comment: http://stackoverflow.com/comment/139145256
tagged with: css
tagged with: bootstrap-5
has comment: http://stackoverflow.com/comment/139145137
linked to: http://stackoverflow.com/q/11695354
favorite count: 0
tagged with: http://stackoverflow.com/tag/html
downvote count: 2
type: Question
upvote count: 2
has comment: http://stackoverflow.com/comment/139145019

siblings
tags question: http://stackoverflow.com/q/78962819
type: Tag
tag name: siblings

http://stackoverflow.com/q/79052599
upvote count: 1
has comment: http://stackoverflow.com/comment/139392781
tagged with: css
answer count: 0
has body: An element with position: fixed; and bottom: 0; set extends beyond the bottom of the browser. Setting height: 100%; and overflow: auto; for html and body solves the problem, but is there any other way? Due to certain circumstances, meta tags cannot be changed. For some reason the snippet doesn't cause the problem. An element with position: fixed; bottom: 0; set extends beyond the bottom of the browser contents fixed
has comment: http://stackoverflow.com/comment/139389447
downvote count: 1
type: UnansweredQuestion
favorite count: 0
type: Question
tagged with: http://stackoverflow.com/tag/html
has title: An element with position set to fixed in CSS extends beyond the bottom of the browser
score: 0
tagged with: css-position

http://stackoverflow.com/comment/139217753
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78959123
has text: I can't do this because the message wraps around. So if the container is resized the emote could end up on the left side of the container which would cause the tooltip to clip on the left side of the container. My current solution of centering looks bad as well on either end of the container. Perhaps i would have to include a known parent container width in the calculation. Maybe at least i can get the tool tip to only show inside the container bounds. I will explore this more.
type: Comment

http://stackoverflow.com/q/78921533
score: 0
has answer: http://stackoverflow.com/a/78921792
answer count: 2
has title: Table columns above header in Chrome
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139148543
tagged with: html-table
has body: I have a html table with a sticky header. I need to fix it because in Chrome the top of column values can be seen above the header: Top of table header STUFF 1 STUFF 2 text text I tried modifying z-index, the height and padding of the header, using grid.
tagged with: header
type: UnansweredQuestion
tagged with: css
type: Question
has answer: http://stackoverflow.com/a/78921561

http://stackoverflow.com/comment/139252816
comment on: http://stackoverflow.com/a/78978167
has text: I was a bit confused about the overlay, the issue was that the SVG background was transparent so by using the `mix-blend-mode` when the text was on the page background it was drawn withing a black square, btw by making the SVG background monochrome it does work pretty well.
type: Comment
score: 0
type: AnswerComment

http://stackoverflow.com/q/79004360
tagged with: css
tagged with: twitter-bootstrap
has comment: http://stackoverflow.com/comment/139301142
tagged with: bootstrap-5
has body: I have columns in Bootstrap 5 something like the following. Column 1 Column 2 Column 3 Column 4 With a border, I can see that there is no spacing between columns. So I changed the top-level to have class="row gap-3". This correctly gives me a space between each column. However, it also causes the 4th column to wrap. Is there any way to put a space between each column but not change the number of columns per row?
has title: Adding margins between Bootstrap columns
type: Question
possible better answer: http://stackoverflow.com/a/79006998
tagged with: http://stackoverflow.com/tag/html
accepted answer: http://stackoverflow.com/a/79012238
type: AnsweredQuestion
score: 0
answer count: 2
has answer: http://stackoverflow.com/a/79012238
has answer: http://stackoverflow.com/a/79006998

http://stackoverflow.com/q/79026380
has comment: http://stackoverflow.com/comment/139341099
score: 0
answer count: 0
tagged with: css
tagged with: maui
type: UnansweredQuestion
tagged with: xaml
has body: I am developping a MAUI application and during the process I decided to use Blazor component so I switched my project to a MAUI Blazor Hybrid application and use Blazor components through BlazorWebView. I don't how I should use the XAML mechanism to retrieve colors on the Blazor side, though. For example I have in Resources/Styles/Color.xaml #CABEFF And in Blazor code, I use css to style my elements like this: How should I proceed to retrieve "Primary" in my css ?
type: Question
has title: MAUI Blazor Hybrid and static resources
tagged with: c#
tagged with: blazor

background-image
tags question: http://stackoverflow.com/q/78915933
tag name: background-image
type: Tag
tags question: http://stackoverflow.com/q/79196764
tags question: http://stackoverflow.com/q/79237945
tags question: http://stackoverflow.com/q/79177406
tags question: http://stackoverflow.com/q/79148874
tags question: http://stackoverflow.com/q/79139104
tags question: http://stackoverflow.com/q/79182230
tags question: http://stackoverflow.com/q/79111203
tags question: http://stackoverflow.com/q/79333894
tags question: http://stackoverflow.com/q/79246383
tags question: http://stackoverflow.com/q/79507384
tags question: http://stackoverflow.com/q/79469148
tags question: http://stackoverflow.com/q/79536138
tags question: http://stackoverflow.com/q/79538849

http://stackoverflow.com/comment/139164581
comment on: http://stackoverflow.com/q/78930122
type: QuestionComment
type: Comment
score: 0
has text: Looks more like 3 x radial gradients

http://stackoverflow.com/q/78940243
type: UnansweredQuestion
score: 1
has body: I'm trying to customize a MatChip and cannot get it to appear as desired. The out of the box MatChip has 3 behaviours I am trying to customize plus add a fourth of my own The default color The hover color change The onClick color change Addition of a label below the chip which must appear/behave exactly like the chip it is attached to What I have tried I have managed to change the default color (item 1) using [style.background-color] ... no success with [class.my-class] as class was applied but the value superceded somewhere else in the style cascade. I have the label in place (item 4) but it is not behaving like the chip it is attached to because I can't figure out how to make the label behave like the main chip for the color changes associated with hover and onClick. When you hover or click the chip, the distinct color separation between the label and the chip is visible because the chip is changing color but the label is not. How do I make the label and chip appear/behave the same so it just appears and behaves like a single customized chip. Stackblitz Demo A list of employees, each represented as a chip, the manager will be marked with a special label Default state (no line visible between chip and label) Hover state (ie hover over the chip, not the label ... feint line visible between chip and label) OnClick state (ie click and hold, clear line visible between chip and label)
has answer: http://stackoverflow.com/a/78940390
favorite count: 0
type: Question
has title: Customizing Angular Material MatChip
downvote count: 0
tagged with: angular-material
answer count: 1
upvote count: 1
tagged with: sass
has comment: http://stackoverflow.com/comment/139188867
tagged with: css
tagged with: angular

http://stackoverflow.com/a/79041580
type: Answer
score: 0
has body: The scrollbar isn't appearing because the .thelist container is wrapping each individual task instead of the entire list of tasks. This means there's no overflow within .thelist to trigger the scrollbar. To fix this, you should move the .thelist div to wrap around all the ListNote components collectively. Here's how you can modify your code. Update your parent component to wrap all tasks within .thelist: function TaskList({ tasks, onDelete, onEdit }) { return ( {tasks.map(task => ( <ListNote key={task.id} title={task.title} id={task.id} onDelete={onDelete} onEdit={onEdit} /> ))} ); } And your ListNote component: function ListNote({ title, onDelete, onEdit, id }) { return ( {title} onEdit(id)}>Edit onDelete(id)}>Delete ); }
answers question: http://stackoverflow.com/q/79041461

http://stackoverflow.com/comment/139134990
has text: @MaheshThorat your solution seems to ignore the animation needing to be triggered when .animate class is added. You are forcing the animation with javascript. I am pretty sure this can be done via css like in this codepen https://codepen.io/t_afif/pen/XWaPXZO but I wasn't able to repurpose it to solve my problem.
type: Comment
score: 0
comment on: http://stackoverflow.com/a/78914370
type: AnswerComment

http://stackoverflow.com/comment/139391420
comment on: http://stackoverflow.com/a/79051720
type: Comment
score: 0
type: AnswerComment
has text: Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer).

http://stackoverflow.com/a/79057772
answers question: http://stackoverflow.com/q/79050234
type: Answer
score: 0
has body: The best solution I found is using position: fixed. Then you should write the following JS code to control the item's position. This function is actuarial for a context menu item if it has a scrollable sub menu: import { DomHandler } from 'primevue/utils'; const { getViewport } = DomHandler export default function nestedPosition(element) { if (element) { let { left, top, width, height } = element.getBoundingClientRect() const parentItem = element.parentElement; const parentItemClientRect = parentItem.getBoundingClientRect() top = parentItemClientRect.top left = parentItemClientRect.width + left const viewport = getViewport(); if (left + width &gt; viewport.width) { left = parentItemClientRect.left - width } if (top + height &gt; viewport.height) { top -= height - parentItemClientRect.height } element.style.top = `${top}px`; element.style.left = `${left}px`; } } And also use CSS as an example of how it could be in a real context menu: .p-contextmenu .p-submenu-list { position: fixed; max-height: 300px; min-width: 230px; max-width: 520px; overflow-y: auto; overflow-x: hidden; }

http://stackoverflow.com/comment/139177320
comment on: http://stackoverflow.com/q/78937046
type: QuestionComment
has text: what about using `setTimeout(() => { console.log...; })` ?
type: Comment
score: 0

http://stackoverflow.com/comment/139148663
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78921605
type: QuestionComment
has text: Please add the relevant HTML to create a [mre]

http://stackoverflow.com/comment/139388073
type: Comment
score: 0
comment on: http://stackoverflow.com/q/79044610
type: QuestionComment
has text: Another side note, IDs **must** be unique

http://stackoverflow.com/q/78988246
type: UnansweredQuestion
score: 0
type: Question
answer count: 1
tagged with: http://stackoverflow.com/tag/html
has title: Layout Issues on Mobile View - Header Cut Off, Text Overflows, and Newsletter Misalignmen
has answer: http://stackoverflow.com/a/78988300
tagged with: css
has body: I'm working on a website, and it's displaying fine on desktop, but the mobile version looks weird. Here are the issues I'm facing (as shown in the screenshot below): The header and navigation bar are cut off. The text overflows outside the boxes. The newsletter signup isn't aligned properly. I've tried to adjust the header and nav parts to 100% of the viewport and also I've tried to add a margin-left to the newsletter sign up, but no luck! This is my code: * { box-sizing: border-box; } body { margin: 0; font-family: Arial, sans-serif; overflow-x: hidden; /* To prevent horizontal scrolling */ } header { background-color: #0047ab; color: white; text-align: center; padding: 20px; width: 100%; } nav { background-color: #333; color: white; display: flex; justify-content: center; align-items: center; padding: 10px; } nav ul { list-style: none; display: flex; padding: 0; } nav ul li { margin: 0 10px; } nav input { margin-left: 20px; padding: 5px; } .container { max-width: 1200px; margin: 20px auto; padding: 20px; } .post { background-color: #fff; padding: 20px; margin-bottom: 20px; border: 1px solid #ddd; } .newsletter { background-color: #f9f9f9; padding: 20px; margin: 20px auto; text-align: center; max-width: 600px; } .newsletter input[type="email"], .newsletter input[type="submit"] { padding: 10px; margin-bottom: 10px; width: 100%; } Mobile Layout Issue Science Simplified Exploring Science, One Post at a Time Home About Featured Article Some text that overflows... Sign Up for Our Newsletter

http://stackoverflow.com/comment/139157819
has text: @C3roe Okay thanks. I need to think of some other magic
comment on: http://stackoverflow.com/q/78926526
type: Comment
score: 0
type: QuestionComment

http://stackoverflow.com/a/78915820
type: Answer
downvote count: 0
answers question: http://stackoverflow.com/q/78915026
has comment: http://stackoverflow.com/comment/139161423
upvote count: 2
has comment: http://stackoverflow.com/comment/139159292
has body: Using sticky on both the first row and column is working. The header didn't scroll up. It's just being covered by the tbody rows. You can adjust the z-index of the top-left cell to prevent it being covered by others. .container { width: 100%; max-height: 100vh; overflow-x: auto; } table { border-collapse: collapse; } th, td { border: 1px solid #ddd; padding: 8px; white-space: nowrap; box-sizing: border-box; } td { background: white; } th { background: #f2f2f2; } .container th { &:first-child { z-index: 1; } position: sticky; top: -1px; } .container td:first-child, th:first-child { position: sticky; left: -1px; } HR DB (just example) Employee ID Full Name Department Position Start Date EMP001 John Smith Marketing Marketing Manager 2020-03-15 EMP002 Emma Johnson Human Resources HR Specialist 2019-11-02 EMP003 Michael Brown IT Senior Developer 2018-07-20 EMP004 Sarah Davis Sales Sales Representative 2021-01-10 EMP005 David Wilson Finance Financial Analyst 2020-09-05 EMP006 Jennifer Lee Customer Service Customer Support Manager 2019-04-18 EMP007 Robert Taylor Operations Operations Coordinator 2020-11-30 EMP008 Lisa Anderson Marketing Content Writer 2021-06-22 EMP009 Daniel Martinez IT Network Administrator 2018-12-01 EMP010 Emily White Human Resources Recruitment Specialist 2020-02-14 EMP011 Christopher Clark Sales Account Manager 2019-08-07 EMP012 Olivia Harris Finance Accountant 2021-03-29 EMP013 William Turner IT Software Engineer 2020-07-11 EMP014 Sophia Rodriguez Marketing Digital Marketing Specialist 2019-10-05 EMP015 James Nelson Operations Logistics Manager 2018-05-19 EMP016 Ava Thompson Customer Service Customer Support Representative 2021-09-03 EMP017 Alexander Scott Sales Business Development Manager 2020-01-25 EMP018 Mia Green Human Resources Training Coordinator 2019-06-14 EMP019 Ethan Baker IT Data Analyst 2021-04-07 EMP020 Isabella King Finance Financial Controller 2018-09-22
score: 2

http://stackoverflow.com/q/79035574
has body: .CategoryBlock { margin-top: 0.5rem; gap: 1rem; display: flex; overflow-x: scroll; scrollbar-width: thin; } .CategoryBlock>*:first-child { margin-left: auto; } .CategoryBlock>*:last-child { margin-right: auto; } .CategoryBlock button { font-family: "Roboto", "Helvetica Neue", "Helvetica", "Arial", sans-serif; font-size: 2rem; border: 0; color: #2e652d; background-color: white; position: relative; } .CategoryBlock button:hover { color: #51b44f } .Categories { position: absolute; display: none; border: #2e652d; background-color: hsl(0, 0%, 95%); border-color: #2e652d; border-style: solid; border-width: thin; max-width: 10rem; } .DropDown a { display: block; text-decoration: none; color: #63815f; font-family: "Roboto", "Helvetica Neue", "Helvetica", "Arial", sans-serif; font-size: 1.125rem; margin: 0rem 0.5rem 1rem 0.5rem; } .DropDown a:hover { text-decoration: underline; } .DropDown:hover .Categories { display: block; } Articles Feature articles Opinion articles Informative Short stories Narratives Retellings Poetic Essays Persuassive Summaries Book reviews Debates Scientific reports Physics Chemistry Devlogs Physom Automatic Page Generator Programs Physom Automatic Page Generator Raytracer 3D renderer Math Discrete Linear Algebra PreCalculus Calculus I have a dropdown box that won't move with the buttons as they are scrolled into a different position, this is because the dropdown box is absolute,and I have no idea how to: keep the absolute behaviour, but sort of anchor it to the button itself, rather than its own absolute positioning, basically I want to create a dropdown box that is under the button, but also acts absolute and effects no margins, i tried making the category block relative, but that just added a overflow-y rather than the effect I was looking for. It would be very helpful if someone pointed me in the right direction!
type: Question
tagged with: http://stackoverflow.com/tag/html
answer count: 1
type: AnsweredQuestion
has answer: http://stackoverflow.com/a/79037433
has comment: http://stackoverflow.com/comment/139358968
has comment: http://stackoverflow.com/comment/139358550
score: 0
has comment: http://stackoverflow.com/comment/139359036
has comment: http://stackoverflow.com/comment/139358628
tagged with: css
has comment: http://stackoverflow.com/comment/139358995
has title: Drop down box wont move with button when button is moved
has comment: http://stackoverflow.com/comment/139358357
accepted answer: http://stackoverflow.com/a/79037433

http://stackoverflow.com/q/78985952
tagged with: http://stackoverflow.com/tag/html
type: Question
has answer: http://stackoverflow.com/a/78986079
has answer: http://stackoverflow.com/a/78986055
has comment: http://stackoverflow.com/comment/139286630
has title: Dropdown menu for survey form that adds new question after selecting yes option - Only CSS
tagged with: css
has comment: http://stackoverflow.com/comment/139267151
answer count: 3
downvote count: 1
has body: I'm learning html and for a project I'm making a survey form. I want a dropdown menu that when the user selects yes it has new question pop up relating to the subject. How would i do this? I have no knowledge of JavaScript. Do you own the DLC? `(select one) Yes No What i want is when someone selects yes other questions will now show relating to the dlc. Will this be possible with only html and css?
upvote count: 2
has answer: http://stackoverflow.com/a/78986931
type: UnansweredQuestion
score: 1
favorite count: 0

http://stackoverflow.com/a/79056370
type: Answer
score: 0
answers question: http://stackoverflow.com/q/79056227
has comment: http://stackoverflow.com/comment/139433039
has comment: http://stackoverflow.com/comment/139434900
has comment: http://stackoverflow.com/comment/139398941
has body: I have fixed the layout issue by doing the following things: Used flex properties in .green-investment-title to center the heading. Set color: #fff; in .green-investment-title. Added padding and gap in .green-content. Set width: 50%; for .green-text and .green-image-container. Used clip-path property to display image according to design. Used multiple inside .green-text. Note: I didn't have actual images so I used different ones. You can set them back while using this code in your original one. body { background-image: url("file:///C:/xampp/htdocs/templatemo_591_villa_agency/assets/images/techno%20background.jpg"); height: 100%; background-position: top center; background-size: cover; margin: 0; } .green-investment-title { width: 100%; height: 70px; background-color: #56aeff; display: flex; align-items: center; justify-content: center; color: #fff; } .green-content { display: flex; flex-direction: row; gap: 20px; background-image: url("../img/techno-desgin-bg.avif"); padding: 80px 0 80px 80px; } .green-text { width: 50%; font-size: 20px; font-family: Arial; } .green-image-container { width: 50%; height: auto; overflow: hidden; position: relative; } .cropped-image { width: 100%; height: auto; clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%, 0 100%); } Green Investment Profit from the green revolution Reduce your carbon foot print and make a positive impact on the environment and the community by investing in clean and green energy. Bali offers untaped green investment potential as the booming tourism industry draws an international crowd of environmentally conscious people to the island who not only want to livre a healthy lifestyle being close to nature but also perserve it Despite the vast potential of being an ecohub the island’s consciousness towards the environment is poorly managed due to a mentality of unhygienic lifestyle especially relating to waste disposal. Passed down from generations, the people of Bali are taught that everything used in their daily …
has comment: http://stackoverflow.com/comment/139403444

http://stackoverflow.com/a/78927325
type: Answer
has comment: http://stackoverflow.com/comment/139159289
downvote count: 1
answers question: http://stackoverflow.com/q/78926909
score: 0
has comment: http://stackoverflow.com/comment/139164903
has comment: http://stackoverflow.com/comment/139163355
has comment: http://stackoverflow.com/comment/139159480
upvote count: 1
has comment: http://stackoverflow.com/comment/139162840
has body: You can achieve same effect with @keyframes as mentioned by @NINE. Just need to add different background images at different percentage. I have created example with two images but you can use more images. Below is working example. Document
has comment: http://stackoverflow.com/comment/139165775

gtmetrix
tags question: http://stackoverflow.com/q/78949680
tag name: gtmetrix
type: Tag

http://stackoverflow.com/comment/139307006
score: 1
comment on: http://stackoverflow.com/q/79007606
has text: PS: A `div` also not a permitted child element for a `label`. `label` only allow **phrasing content** as child elements.
type: Comment
type: QuestionComment

http://stackoverflow.com/q/78936855
tagged with: http://stackoverflow.com/tag/html
has answer: http://stackoverflow.com/a/78939399
score: 0
tagged with: css
answer count: 3
has title: How to break the CSS styling from all rows inside ngFor?
has answer: http://stackoverflow.com/a/78936974
has body: I am building angular app, and I am using ngFor directive to create a table for the employees. for the employee's name, when I hover over it, I want this field to change its color (the hover over field only), I use(mouseenter) event binding to change the text color. the problem is when the mouse enters a specific employee name, all the employees names change their text color because of the ngFor directive instead of the specific field only, how can I solve it? Employee Name Department Salary {{ employee.name }} {{ employee.department }} {{ employee.salary }} I tried to use inner span to include the styling but the same issue still exists.
tagged with: angular
type: UnansweredQuestion
has answer: http://stackoverflow.com/a/78936868
type: Question

http://stackoverflow.com/comment/139354294
comment on: http://stackoverflow.com/a/79029558
score: 0
type: AnswerComment
has text: @Nexo I've edited my answer, and also remove the non-functional `top` and `right` from `.child` to make it more clear. Let me know if you have more questions about this `sticky` situation ;)
type: Comment

http://stackoverflow.com/comment/139295101
type: QuestionComment
has text: You should really rather use flexbox all the way - instead of mixing in `float`.
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78998815

http://stackoverflow.com/q/79045395
has answer: http://stackoverflow.com/a/79045402
tagged with: css-animations
answer count: 1
type: AnsweredQuestion
tagged with: http://stackoverflow.com/tag/html
has body: I am kind of curious as to why this feature is name Marquee? It is an animation of a text scrolling horizontally or vertically across the screen. I searched through the internet and I got nothing.
accepted answer: http://stackoverflow.com/a/79045402
upvote count: 0
tagged with: scroll
score: -5
has comment: http://stackoverflow.com/comment/139376275
tagged with: css
has comment: http://stackoverflow.com/comment/139376840
tagged with: marquee
downvote count: 5
favorite count: 0
has title: Why Marquee in HTML and CSS context is named that way?
type: Question

http://stackoverflow.com/comment/139408794
score: 0
has text: When you're speaking about a pseudo-element, does it mean that it could also be a good idea to use an element instead of using the background?
type: QuestionComment
comment on: http://stackoverflow.com/q/79062969
type: Comment

http://stackoverflow.com/comment/139218552
has text: So what exactly do you want to achieve here? Do you want the word to just not split? Or split in certain ways? Please provide a minimal reproducible code so that we can help you debug. Thanks!
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78959474

http://stackoverflow.com/q/78913588
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139158592
has comment: http://stackoverflow.com/comment/139133732
type: Question
tagged with: css-animations
answer count: 1
tagged with: http://stackoverflow.com/tag/html
has body: I'm trying to make a website for my husbands business. I have been messing around with different looks and layouts and he really likes this card animation but it messed up my entire page now my header and footer and h1 and h2 content are all smooched in with the 3d card rotation. Any help would be greatly appreciated! * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Kumbh Sans', sans-serif; } /* spline interactive */ /* .background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: scale(1.3); background-color: #fff; z-index: -1; } */ .navbar { background: #1f456e; height: 80px; display: flex; justify-content: center; align-items: center; font-size: 1.2rem; position: sticky; top: 0; z-index: 999; } .navbar__container { display: flex; justify-content: space-between; height: 80px; z-index: 1; width: 100%; max-width: 1300px; margin: 0 auto; padding: 0 50px; } /*Moving img/logo to the top left*/ .logo_navbar { position: flex; height: flex; left: 0px; width: 100px; } #navbar__logo { background-color: #f99185; background-image: linear-gradient(to top, #fde7b1 0%, #ff6700 100%); background-size: 100%; -webkit-background-clip: text; -moz-background-clip: text; -webkit-text-fill-color: transparent; -moz-text-fill-color: transparent; display: flex; align-items: center; cursor: pointer; text-decoration: none; font-size: 2rem; } .fa-g { margin-right: 0.5rem; } .navbar__menu { display: flex; align-items: center; list-style: none; text-align: center; } .navbar__item { height: 80px; } .navbar__links { color: #fff; display: flex; align-items: center; justify-content: center; text-decoration: none; padding: 0 1rem; height: 100%; } .navbar__btn { display: flex; justify-content: center; align-items: center; padding: 0 1rem; width: 100%; } .button { display: flex; justify-content: center; align-items: center; text-decoration: none; padding: 10px 20px; height: 100%; width: 100%; border: none; outline: none; border-radius: 4px; background: #f9b27…
has title: How can I fix my 3d rotation cards animation so my header and footer aren't smooshed togeather?
score: 0
has answer: http://stackoverflow.com/a/78913998
tagged with: css

quarto
tag name: quarto
tags question: http://stackoverflow.com/q/79049572
tags question: http://stackoverflow.com/q/79000393
tags question: http://stackoverflow.com/q/79048771
tags question: http://stackoverflow.com/q/78971306
tags question: http://stackoverflow.com/q/79004101
type: Tag
tags question: http://stackoverflow.com/q/79205802
tags question: http://stackoverflow.com/q/79298122
tags question: http://stackoverflow.com/q/79294888
tags question: http://stackoverflow.com/q/79270706
tags question: http://stackoverflow.com/q/79347273
tags question: http://stackoverflow.com/q/79258700
tags question: http://stackoverflow.com/q/79368456
tags question: http://stackoverflow.com/q/79259745
tags question: http://stackoverflow.com/q/79353265
tags question: http://stackoverflow.com/q/79422307

http://stackoverflow.com/q/79064735
duplicate of: http://stackoverflow.com/q/36247140
type: Question
tagged with: http://stackoverflow.com/tag/html
has answer: http://stackoverflow.com/a/79064784
type: AnsweredQuestion
possible better answer: http://stackoverflow.com/a/79064784
tagged with: tailwind-css
downvote count: 0
linked to: http://stackoverflow.com/q/36247140
upvote count: 1
answer count: 2
has body: The first child div is a sidebar and the second a table: The sidebar is causing the layout to have a second horizontal scrollbar at the bottom: I know it's the sidebar because that second scrollbar disappears if I remove the sidebar: https://play.tailwindcss.com/AU3667Sv4d What's the issue here and how to fix it?
tagged with: css
has title: Sidebar making horizontal scroll bar appear at the bottom of the screen
tagged with: flexbox
has answer: http://stackoverflow.com/a/79064798
accepted answer: http://stackoverflow.com/a/79064798
score: 1
favorite count: 0

http://stackoverflow.com/a/78978650
type: Answer
downvote count: 0
answers question: http://stackoverflow.com/q/78978467
has body: It looks like your adjustContentMargin applies different margin-top to your content element. possible quick fix: You've mentioned that this only happens on the pageLoad event, so try to remove the: // Adjust margin on page load window.onload = function() { adjustContentMargin(); }; this should leave you with the happy flow you described, on page load no gray space, but after user interaction (scroll?) the adjustment will happen. It seems that you want to achieve a navbar, that will be "fixed" to the top of the page once the user is scrolling, and when the user is at the top of the page the navbar should "be at the top" without causing layout shifts. try to add a "ghost" element that will take the navbar space (mainly height i guess) this element can be a sibling of the navbar fixed element. (allowing it to take the needed space we currently using margin to compensate the gap with. so html should look something like: ... ... ... ... ... ... .. I believe this should help you achieve what you're after. and you won't need JS here to change your page layout causing unnecessary layout shifting because: Navbar is always fixed now Content element will always start after the "ghost" giving the feel the navbar will be fixed when the user scrolls, and when the user is at the top of the page they'll have the fixed navbar fits nicely into the "ghost" element position. P.S make sure the ghost element has the lowest z-index if this is somehow changed in your code. I hope this helps you. Cheers.
accepted answer of: http://stackoverflow.com/q/78978467
type: AcceptedAnswer
upvote count: 2
has comment: http://stackoverflow.com/comment/139254707
score: 2

http://stackoverflow.com/q/78958156
tagged with: css
has title: Keyframe Css animation not working in Nextjs 14
has body: I wanted to apply based css animation using keyframe. While I was able to get it to work using taiwind css. I was unable to get it to work using css. Maybe I am missing something. I would like to know how to. I have searched online and everyone keep using a animation package/library. Is it complicated to do with raw css? So, I have a css file called animation.module.css; There I applied the following css properties: .slideAnimation { animation: 2s linear infinite; } @keyframes slideAnimation { 0% { opacity: 1; transform: scale(1); } 5% { opacity: 0.7; } 100% { opacity: 0; transform: scale(1.1); } } Then I applied it this way: export const FadeAnimationComponent =()=&gt;{ return( &lt;&gt; &lt;div class={&gt; &lt;Image className={`${style.slideAnimation} absolute w-full h-full`} /&gt; &lt;/div&gt; &lt;/&gt;) } It doesn't work. I added same animation to global css file and still didn't work. How do I use css animation and keyframe in nextjs?
accepted answer: http://stackoverflow.com/a/78958367
type: Question
answer count: 1
tagged with: css-animations
type: AnsweredQuestion
has answer: http://stackoverflow.com/a/78958367
tagged with: reactjs
score: 0
tagged with: javascript
tagged with: next.js

http://stackoverflow.com/comment/139305148
type: Comment
score: 0
comment on: http://stackoverflow.com/q/79006685
type: QuestionComment
has text: I think therefore tht this question should be closed as the problem was created by what is basically a typo.

http://stackoverflow.com/comment/139362578
type: QuestionComment
has text: "Both solutions?" I did not give any solutions. I asked for you to update your code and then to have a look at last-of-type. Since you did not update or post anything, we have no idea of what you tried.
comment on: http://stackoverflow.com/q/79033378
type: Comment
score: 0

http://stackoverflow.com/comment/139413861
comment on: http://stackoverflow.com/q/79063526
type: Comment
score: 0
type: QuestionComment
has text: @MisterJojo why haven't you answered yet?

http://stackoverflow.com/comment/139206517
comment on: http://stackoverflow.com/q/78953159
type: QuestionComment
has text: Aah yes, it's working now, I change .nice-select .list:hover .option:not(:hover) { background-color: none !important; }. Thank you for your help.
score: 1
type: Comment

http://stackoverflow.com/q/78963829
has comment: http://stackoverflow.com/comment/139227168
has title: How do you build a React component that can be dynamically resized via both the left and right side, with the other side staying in place?
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139227706
has body: I'm trying to build a resizable component that can be resized from either the left or right side. The user should be able to change the width of the component from either the left or right side. If the user resizes from the left side of the component, the right side of the component should stay in place. If the user resizes from the right side of the component, the left side of the component should stay in place. The user also needs to be able to see this resize happening in real-time as they drag the end of the component back and forth. I've got this (mostly) working - resizing from the right side works fine, but when resizing from the left side, the right side wiggles back and forth slightly. I assume this is because lots of updates are happening very quickly to the same piece of state, but I'm not sure how to fix it. I tried using a ref to track the size values and just update the size state on resize stop, which worked, but then the component was only re-rendered after the resize was completed, meaning the user couldn't see the resize happening in real-time, which is a requirement here. I've tried two different libraries for resizing components, react-resizable and re-resizable, and both produce the same issue. Here's a gif of what's happening: And here's a CodeSandbox with the minimum code I could put to reproduce the issue. Here's the code if you don't want to hop: import React, { useState } from "react"; import { Resizable } from "re-resizable"; import "./styles.css"; export default function App() { const [size, setSize] = useState({ left: 100, width: 400 }); const [dragStartSize, setDragStartSize] = useState(null); const onResize = function ({ delta, direction, size }) { setSize((prevSize) => { if (!dragStartSize) { return; } let newLeft = size.left; if (direction === "left") { newLeft = dragStartSize.left - delta.width; } let newWidth = dragStartSize.width + delta.width; return { ...prevSize, left: newLeft, width: newWidth }; }); }; return ( { setDragStartS…
type: Question
has comment: http://stackoverflow.com/comment/139227771
tagged with: reactjs
tagged with: javascript
tagged with: resize
score: 0
answer count: 0
tagged with: css

http://stackoverflow.com/a/78947206
answers question: http://stackoverflow.com/q/78946720
downvote count: 0
upvote count: 1
score: 1
has body: First, answer your question about the hamburger menu. You can use a combination of HTML, CSS, and JavaScript or jQuery to make a navigation menu responsive. It will expand on desktop devices and become a hamburger menu on mobile devices. Below is a basic example of how to use the hamburger menu. $(".hamburger ").on("click", function() { $(this).toggleClass('active'); $(".main-menu").toggleClass('active'); }); body { margin: 0; } header { display: flex; align-items: center; padding: 20px 40px; background: lightgray; font-size: 18px; } .hamburger { display: none; } .main-menu ul { display: flex; column-gap: 30px; padding-left: 0; list-style: none; margin: 0; } .main-menu ul li a { color: #000000; text-decoration: none; } @media only screen and (max-width: 768px) { .hamburger { display: block; line-height: 1; cursor: pointer; } .main-menu { display: none; position: absolute; top: 60px; width: 100%; left: 0; background: lightgray; } .main-menu ul { flex-direction: column; row-gap: 20px; padding: 20px 40px; } .hamburger .close { display: none; } .hamburger.active .bar { display: none; } .hamburger.active .close { display: block; } .main-menu.active { display: block; height: 100%; } } <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" integrity="sha512-<hash>" crossorigin="anonymous" referrerpolicy="no-referrer" /> Home Destinations Book Now
type: Answer

http://stackoverflow.com/q/78918675
type: UnansweredQuestion
has body: My main goal is to save pandas dataframe with html and scc styles as image. I'm having problems imgkit so I tried html2image. And it worked for me. But a few days later the same code doesn't do anything. No error either. I even created a new venv with html2imageonly and ran simple code from other examples from html2image import Html2Image hti = Html2Image() html = ' A title Some text.' css = 'body {background: red;}' # screenshot an HTML string (css is optional) hti.screenshot(html_str=html, css_str=css, save_as='page.png') However, it doesn't save anything, and just finishes programm with "Process finished with exit code 0". I also tried looking in Temp\html2image and only found file from when the pachage was working. Tried downgrading to 2.0.4, still no results. First version of code looked like this html = s.set_td_classes(cell_color).to_html() root = get_project_root() image_path = pathlib.Path(root, 'resources') hti = Html2Image(output_path=image_path) image_name = 'top_5_table.png' hti.screenshot(html_str=html, css_str=CSS, save_as=image_name) And it stopped working. I've tried removing css_str, changing output_path, still no result I'm trying all of the versions, 1.1.3 and 2.0.3 at least save html files, not png, and to Temp\html2image
favorite count: 0
type: Question
tagged with: http://stackoverflow.com/tag/html
upvote count: 4
downvote count: 0
has answer: http://stackoverflow.com/a/79459542
has answer: http://stackoverflow.com/a/78919490
tagged with: python
answer count: 3
score: 4
has answer: http://stackoverflow.com/a/78961455
tagged with: css
tagged with: pandas
tagged with: file-conversion
has title: HTML to image html2image doesn't save files

http://stackoverflow.com/comment/139335022
comment on: http://stackoverflow.com/q/79012295
type: Comment
has text: You've got a button to activate the menu, the menu itself, and the menu's contents. Are you saying that contents are variable, or that they entire menu might not be available depending on the user? If the latter, the advantage of the `querySelector` (or `getElementById`) is that if it doesn't return anything, then you just don't bind an event handler, and you can optionally hide the button.
score: 0
type: QuestionComment

http://stackoverflow.com/comment/139371249
has text: Use your browser devtools inspect facility to find out exactly where the width is being set. I'm afraid we can't help you without seeing relevant code within the question (not on an external site as the question will become useless for future readers once the problem is fixed).
type: Comment
score: 1
type: QuestionComment
comment on: http://stackoverflow.com/q/79042496

http://stackoverflow.com/comment/139260535
type: QuestionComment
comment on: http://stackoverflow.com/q/78982161
type: Comment
has text: @G-Cyrillus I watched the demo on liveweave and I think it's very convoluted plus the height doesn't fit actually the whole available space
score: 0

http://stackoverflow.com/q/78921976
type: Question
has comment: http://stackoverflow.com/comment/139151216
downvote count: 0
answer count: 1
has answer: http://stackoverflow.com/a/78922655
tagged with: mantine
has title: Mantine Flex Stack and Image -- image not showing
tagged with: reactjs
has body: I want to render a preview image horizontally next to two vertically stacked inputs. If I was using simple CSS, I would do it like this: #container { display: flex; height: 40px; width: 100%; } #container img { object-fit: contain; } #inputs { flex: 1; display: flex; flex-direction: column; } (Ideally I'd also like not to specify the height of #container, but rather have it be only just as high as the height of the combined inputs.) I'm trying to achieve a similar layout using Mantine components. This is what I have ATM: <Image src="https://picsum.photos/id/17/200/300" /> <TextInput label="Image url" value="https://picsum.photos/id/17/200/300" /> <TextInput label="Image alt goes here" /> But the image ends up with a width of 0: How can I fix this?
has comment: http://stackoverflow.com/comment/139150403
tagged with: css
score: 2
upvote count: 2
type: UnansweredQuestion
favorite count: 0

http://stackoverflow.com/comment/139318352
type: Comment
has text: document.querySelectorAll('*').forEach(element => {if (element.textContent.trim() === 'Test') {...}}); like this....
type: QuestionComment
comment on: http://stackoverflow.com/q/79013945
score: 1

http://stackoverflow.com/a/79054254
score: 0
answers question: http://stackoverflow.com/q/79054198
accepted answer of: http://stackoverflow.com/q/79054198
type: AcceptedAnswer
type: Answer
has body: Essentially, you don't want a 3 column grid, you want a six column grid with each card two columns wide (thus the min is halved in your case), like so. .grid { display: grid; grid-template-columns: repeat(6, minmax(135px, 1fr)); gap: 1em; } .item { height: 100px; outline: 1px solid red; grid-column: span 2; } .item:nth-child(4) { grid-column: 2 / span 2; }

http://stackoverflow.com/comment/139421385
type: AnswerComment
comment on: http://stackoverflow.com/a/79065494
score: 1
type: Comment
has text: yes It is working.. its highlighting the text color and changes background of active link.. I was looking for such solution.. thanks

http://stackoverflow.com/comment/139134441
comment on: http://stackoverflow.com/q/78913738
type: Comment
has text: Trying to get my brain round this: you want the first ul descendant of a given li? Is that correct?
type: QuestionComment
score: 1

http://stackoverflow.com/comment/139237990
has text: But I suspect this is a duplicate of https://stackoverflow.com/questions/37406353/make-container-shrink-to-fit-child-elements-as-they-wrap
score: 1
type: Comment
type: QuestionComment
comment on: http://stackoverflow.com/q/78970177

http://stackoverflow.com/a/79050397
has comment: http://stackoverflow.com/comment/139397511
answers question: http://stackoverflow.com/q/79049022
has body: .eltdf-banner-image img, rs-sbg { opacity: &lt;your value&gt; } result:
has comment: http://stackoverflow.com/comment/139386737
score: 0
type: Answer

http://stackoverflow.com/comment/139292602
type: Comment
score: 0
comment on: http://stackoverflow.com/a/78993261
type: AnswerComment
has text: As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer).

http://stackoverflow.com/q/78948750
tagged with: typescript
score: 0
tagged with: javascript
has title: How to Add a Scrollbar to a Status Container When Content Exceeds 100% Height Without Setting a Fixed Height?
has answer: http://stackoverflow.com/a/78948951
tagged with: css
has comment: http://stackoverflow.com/comment/139198443
tagged with: angular
has body: I'm working on a responsive layout where I want the .status container to have a scrollbar if its content exceeds the available space. However, I don't want to set a fixed height for the .status container since the layout needs to be flexible and responsive. I'm looking for a solution primarily using HTML and CSS, but I'm open to JavaScript, TypeScript, or Angular solutions if necessary. In this example, each .status container should display a scrollbar if the content exceeds the available height. However, I'm not sure how to achieve this without setting a fixed height. Is there a way to make the .status container handle overflow correctly in this scenario? Here is the code I'm working with: Status Status Status Status
has comment: http://stackoverflow.com/comment/139199043
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139198967
has comment: http://stackoverflow.com/comment/139198384
type: Question
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139198488
answer count: 1

http://stackoverflow.com/comment/139148470
score: 1
type: Comment
comment on: http://stackoverflow.com/a/78918300
type: AnswerComment
has text: I revised my answer. Please correct any additional things yourself. @Meet

http://stackoverflow.com/q/79027712
type: AnsweredQuestion
linked to: http://stackoverflow.com/q/72873824
tagged with: chakra-ui
has answer: http://stackoverflow.com/a/79028154
tagged with: reactjs
possible better answer: http://stackoverflow.com/a/79028000
accepted answer: http://stackoverflow.com/a/79028154
answer count: 2
has body: I'm trying to clone some projects interfaces on dribble for study purposes and raise my css skills, i've selected the layout below: As you can see it's a mobile interface but i'm using react dom to build it ( as i mention before, it's just for study purpose ). My problem is about this wavy bordered div's on the top and the bottom of the layout, i have tried to follow some tutorials but i did not be able to do it. What i've tried: At first i have tried css to solve this, using position absulote an z-index to render divs to "hide" the purple background, but the final result was weird. Here is my code: import { Flex, useBreakpointValue } from '@chakra-ui/react'; import { Box, Flex } from '@chakra-ui/react'; const Curve = () => ( ); export function Login() { return ( <> <Curve /> Content </> ); } At last, i read that i can use SVG elements to handle it, but the final result was not responsive to other layouts. I would like to use css to solve it because it is the purpose of this clone. Is it possible to do it?
downvote count: 0
tagged with: css
upvote count: 1
has answer: http://stackoverflow.com/a/79028000
has title: Wave design on a div border
score: 1
favorite count: 0
has comment: http://stackoverflow.com/comment/139343351
linked to: http://stackoverflow.com/q/78172810
type: Question
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139343516

http://stackoverflow.com/comment/139364304
score: 4
type: QuestionComment
comment on: http://stackoverflow.com/q/79038954
type: Comment
has text: RELEVANT code in a [mcve]

http://stackoverflow.com/comment/139176814
type: QuestionComment
score: 1
type: Comment
has text: How horribly non-responsive!
comment on: http://stackoverflow.com/q/78936697

http://stackoverflow.com/a/78952600
has body: From your description, I see no reason to try to solve the issue with JS. Simply solve it on CSS level by using white-space: nowrap let ele = document.getElementById('header-inner'); ele.textContent = 'There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which '; #header-inner { margin: 0 auto; width: max-content; max-width: 461px; max-height: 29px; min-height: 25px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } &lt;div id='header-inner'&gt;&lt;/div&gt;
has comment: http://stackoverflow.com/comment/139205802
type: Answer
downvote count: 0
answers question: http://stackoverflow.com/q/78952516
has comment: http://stackoverflow.com/comment/139205323
has comment: http://stackoverflow.com/comment/139205368
upvote count: 1
score: 1

http://stackoverflow.com/comment/139400673
type: Comment
comment on: http://stackoverflow.com/q/79058968
score: 0
has text: If I use this code, it works so long as I don't mind all gifs on the page being styled this way (a bit irritating), and so long as I put class="img, items" in that order on each image loaded. .items { clear: both; display: flex; position: relative; width: 100%; max-width: 200px; height: auto; max-height: 100%; object-fit: contain; margin: 5px; } img[src$=".gif"] { width: 100%; max-width: 80px; height: auto; max-height: 100%; object-fit: contain; margin: 5px; } If anyone knows how to constrain it...
type: QuestionComment

http://stackoverflow.com/a/79039619
accepted answer of: http://stackoverflow.com/q/79039117
has comment: http://stackoverflow.com/comment/139366184
has body: Don’t absolutely position your title. After running this snippet, use the full page link to test it. html, body, .page { height: 100%; } body { margin: 0; } .page { display: flex; align-items: center; justify-content: center; background: #ecf0f1; } .chart { width: 450px; padding: 15px 15px; min-height: 200px; display: flex; flex-direction: column; background: #fff; border: 1px solid #7f8c8d; } .chart__title { background: #3498db; width: 50%; height: 25px; margin-top: 0; } .chart__body { width: 100%; height: 100%; display: flex; align-items: center; flex-grow: 1; column-gap: 15px; padding-bottom: calc(25px + 1em); } .chart__datasets { width: 70%; background: #f1c40f; color: white; } .chart__canvas { background: #2ecc71; width: 30%; aspect-ratio: 1; } @media (max-width: 600px) { .chart__body { flex-direction: column-reverse; align-items: normal; row-gap: 15px; } .chart__datasets { width: 100%; flex-grow: 1; } .chart__canvas { width: 100%; height: 50px; } } Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempor nunc mauris, sit amet placerat tortor lobortis dapibus. Nam lectus eros, maximus ac magna vel, congue consequat eros. Fusce id pretium diam. Cras sit amet pharetra ante. Sed quis commodo quam, vel facilisis ipsum. Vestibulum sodales iaculis arcu, et fringilla nisi ullamcorper sed. Donec interdum sit amet est non accumsan. Donec non augue feugiat, fermentum nunc non, convallis est. Cras vel ligula nec odio faucibus ultricies. Sed vulputate tortor eget pretium convallis. Cras interdum elit eget mi porta suscipit. Morbi ut velit diam. Etiam finibus eros et efficitur rutrum. Quisque viverra metus ac eleifend imperdiet. Quisque pretium ut purus vitae tempus. Duis varius risus congue velit faucibus, sed interdum purus consectetur.
has comment: http://stackoverflow.com/comment/139369659
type: AcceptedAnswer
type: Answer
score: 0
answers question: http://stackoverflow.com/q/79039117

http://stackoverflow.com/a/78989718
has body: Technically this because of the way color inherits its value (i.e. if a style is set on a higher-up element ). See color - Formal Definition. Because no value has been set, the color will inherit whatever color it can find (in this case, from its parent) You could set the colour to the initial value: li { color: initial; } ul.m>li { color: orange; } test l1 l11 l12 l2 Note: This could lead to unexpected side-effects because of browser-implementation - see this answer. Ultimately this is why developers often include a Reset StyleSheet too Alternatively, you could specify the color yourself: li { color: black; } ul.m>li { color: orange; } test l1 l11 l12 l2
score: 1
answers question: http://stackoverflow.com/q/78989619
downvote count: 0
type: Answer
upvote count: 1

http://stackoverflow.com/a/78995513
type: Answer
has comment: http://stackoverflow.com/comment/139284662
answers question: http://stackoverflow.com/q/78995412
score: 0
has comment: http://stackoverflow.com/comment/139287727
has body: Maybe this is a dirty option, but you can close the space with other elements in popover: ::backdrop { background: rgba(255, 255, 255, 0.4); backdrop-filter: grayscale(40%) blur(3px); } #mypopover { overflow: visible; i { position: absolute; &:first-child { inset: -100vmax -100vmax 100%; } &:last-child { inset: 100% -100vmax -100vmax; } } &:before, &:after { content: ''; position: absolute; } &:before { inset: 0 100% 0 -100vmax; } &:after { inset: 0 -100vmax 0 100%; } } Show popover Popover content Links

http://stackoverflow.com/comment/139122578
score: 1
type: QuestionComment
has text: I´d say you need to store the history, or in your case the initial positions, for each draggable then, because on the initial position of the one you want to reset, could already be another draggable which you would to reset as well then?
type: Comment
comment on: http://stackoverflow.com/q/78906077

http://stackoverflow.com/comment/139310930
score: 0
has text: Please make it clear what axis you want the rotation to be about - is this to be 3d or to stay in the plain?
type: Comment
comment on: http://stackoverflow.com/q/79009672
type: QuestionComment

http://stackoverflow.com/a/78908435
score: 0
answers question: http://stackoverflow.com/q/78908209
has comment: http://stackoverflow.com/comment/139133022
has comment: http://stackoverflow.com/comment/139129307
has body: If you want is " Show text area and 'How can we improve the page?' when you hover on 'Would you like to give feedback?'then this will help you also you can achieve that with html and css only. I have added class someCss & hiddenContent. Add hiddenContent to div which you want to hide. Most css I have added is basic but this .someCss:hover ~ .hiddenContent{ display:block;} is important as it adds display: block to hiddenContent when you hover on someCss text. I have explained in stort as its simple. Below is working example. .hiddenContent { display: none } .someCss:hover~.hiddenContent { display: block; } Would you like to give feedback? How can we imporve the page?
has comment: http://stackoverflow.com/comment/139128866
has comment: http://stackoverflow.com/comment/139132841
type: Answer

http://stackoverflow.com/q/79035218
has comment: http://stackoverflow.com/comment/139357048
answer count: 0
tagged with: css
has title: Hide spinner/loader when clicking browser back/forward button
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139357045
has comment: http://stackoverflow.com/comment/139357102
tagged with: http://stackoverflow.com/tag/html
type: Question
score: 0
has comment: http://stackoverflow.com/comment/139357314
tagged with: javascript
has comment: http://stackoverflow.com/comment/139357080
tagged with: jquery
has body: I have an css spinner that animates after an anchor link tag is clicked (redirecting to an external webpage/app). However, after the page is finished loading to the external webpage, and the user clicks the browsers back button (and even the forward button), the spinner is still showing. Is there a way to hide the spinner on the event the windows back/forward button is clicked? Or is there a better way to implement the spinner, so that when the user navigates the browsers back and forward button, the spinner gets hidden? Locally on VScode the spinner does hide after clicking the back button, but after deploying to Github the spinner still displays. From the browser inspector tool, i've also cleared the cache/cookie and it still shows. Work Portfolio link here: https://austinxduong.com/ HTML Apps i recently created: This API connects to an interactive front-end built with React.js. When pasting a url link of a website, it renders a shortened link --- shareable across various social media websites posts API: https://backend-microservice-urlshortener.onrender.com/ CSS .loadingDiv { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #f7f9fb89; } .loadingDiv::after { content: ""; width: 60px; height: 60px; border: 15px solid #dddddd; border-top-color: #1ecd97; border-radius: 50%; animation: loading 0.75s ease infinite; } JavaScript/jQuery $('a').on("click", function(){ $(' loading... ').prependTo(document.body); }); $(window).on("click", function(){ $(' loading... ').hide(); }); I also thought/tried the 'popstate' event would hide the div, after the event the window history changes (clicking the windows back button), but still same results also... (maybe because the clicking the back button restores the history's' previous state?) // $(window).on('popstate', function(){ // $(' loading... ').hide(); // }) Alternatively, I've also tried to implement the spinner feature with just Vani…

http://stackoverflow.com/comment/139143941
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78919137
type: QuestionComment
has text: Seems you are SOL - try https://www.apple.com/feedback/

http://stackoverflow.com/q/79035604
tagged with: css
has title: Bootstrap form not showing validation when used browser saved data
upvote count: 2
score: 2
type: UnansweredQuestion
has answer: http://stackoverflow.com/a/79037267
favorite count: 0
type: Question
tagged with: http://stackoverflow.com/tag/html
downvote count: 0
tagged with: bootstrap-4
has answer: http://stackoverflow.com/a/79162019
answer count: 2
tagged with: javascript
linked to: http://stackoverflow.com/q/61083813
has body: In the below code the bootstrap validation which is the green tick does not show when the data saved in the browser, but it works fine when the data is entered manually. Registration Form Register First Name Please enter your first name (letters only). Last Name Please enter your last name (letters only). Email Please enter a valid email address. Password Please enter a password with at least 6 characters. Confirm Password Passwords do not match. I agree to the terms and conditions You must agree to the terms and conditions. Register See below images for reference: When data entered manually When using browser saved data I also want to get the tick when the browser saved data is also used. So, how can I do so?

http://stackoverflow.com/comment/139417731
score: 1
type: Comment
has text: Regarding graphs/charts, I suggest that you research the [visualisation methods](https://developers.google.com/chart/interactive/docs/gallery/piechart#overview); these include setting a background and font colour,
type: QuestionComment
comment on: http://stackoverflow.com/q/79064015

c++
tags question: http://stackoverflow.com/q/79033854
type: Tag
tag name: c++

http://stackoverflow.com/q/78924311
has title: After saving changes in Summernote, it removes classes from <btn> and tags
has body: I have admin website where I am able to change text on the website without opening VSCode. I'm using Summernote for that. Editing text is fine and works like a charm. But when I'm trying to change text of a link or link of that it removes all classes inside of . Same problem is with buttons. Is there any way to fix that? function showEditor() { var editorContainer = document.getElementById('editorContainer'); var summernote = $('#summernote'); // Zobrazit editor editorContainer.style.display = "block"; // Načíst celý obsah z content.txt var content = <?php echo json_encode($content); ?>; // Inicializace editoru Summernote s celým obsahem summernote.summernote({ height: 600, focus: true, callbacks: { onInit: function() { // Manipulace s DOM, aby se zbavila třída fixed-top $('#summernote').contents().find('.navbar').removeClass('fixed-top'); }, onImageUpload: function(files) { var data = new FormData(); data.append('file', files[0]); $.ajax({ url: 'upload.php', method: 'POST', data: data, processData: false, contentType: false, success: function(response) { var jsonResponse = JSON.parse(response); if (jsonResponse.link) { summernote.summernote('insertImage', jsonResponse.link); } else { console.log(jsonResponse.error); } } }); } } }); // Nastavení načteného obsahu do editoru summernote.summernote('code', content); } $(document).ready(function() { // Inicializace Summernote editoru při načtení stránky (pokud chcete) $('#summernote').summernote({ height: 600, focus: true, callbacks: { onInit: function() { // Manipulace s DOM, aby se zbavila třída fixed-top $('#summernote').contents().find('.navbar').removeClass('fixed-top'); }, onImageUpload: function(files) { var data = new FormData(); data.append('file', files[0]); $.ajax({ url: 'upload.php', method: 'POST', data: data, processData: false, contentType: false, success: function(response) { var jsonResponse = JSON.parse(response); if (jsonResponse.link) { $('#summernote').summernote('insertImage', jsonResponse.link); } …
type: UnansweredQuestion
type: Question
score: 0
tagged with: javascript
tagged with: jquery
tagged with: summernote
answer count: 0
tagged with: css

http://stackoverflow.com/a/78907914
score: 0
answers question: http://stackoverflow.com/q/78907119
accepted answer of: http://stackoverflow.com/q/78907119
type: AcceptedAnswer
has body: You can use the following items: Use a linting tool: ESLint or StyleLint can be configured to check for undefined CSS classes. Write a custom script: Create a script that parses your HTML/ASP files and CSS files, then compares the classes used versus those defined. IDE extensions: Look for Visual Studio extensions that offer this functionality. While I can't recommend specific ones, searching the Visual Studio Marketplace might yield results. (Like: CSS Navigation Plugin) I also suggest that if you do not find a solution, use the ideas of jetbrains (Like: WebStorm)
type: Answer

http://stackoverflow.com/comment/139310439
type: Comment
has text: I am sorry I have never posted here. I added an MRE but I will also have a look at the list you sent me. Thank you.
score: 0
comment on: http://stackoverflow.com/q/79009556
type: QuestionComment

http://stackoverflow.com/comment/139230369
comment on: http://stackoverflow.com/q/78948123
score: 0
type: QuestionComment
has text: @HeikoTheißen `content-type: application/xml`
type: Comment

http://stackoverflow.com/q/79040192
has answer: http://stackoverflow.com/a/79040390
possible better answer: http://stackoverflow.com/a/79040269
tagged with: css
answer count: 3
has title: Image and slider dot is out of sync
accepted answer: http://stackoverflow.com/a/79040293
has answer: http://stackoverflow.com/a/79040269
type: Question
tagged with: http://stackoverflow.com/tag/html
type: AnsweredQuestion
has answer: http://stackoverflow.com/a/79040293
score: 0
has body: I just recently completed the basics of HTML, CSS, and Javascript. Now, I am trying to clone the home page of this website: https://www.startech.com.bd/. But I have run into a small problem. The webpage has an image slider, where the image changes every 5 seconds, and there are also three dots representing those three images, respectively. Here is my code - const imageResponsive = document.querySelectorAll('[data-image-responsive]'); const dot = document.querySelectorAll('[data-dot]'); let counter = 0; function changeImage() { // First hide all images imageResponsive.forEach(img => img.style.display = 'none'); // Show the current image based on the counter value imageResponsive[counter].style.display = 'block'; // First hide all slider dots dot.forEach((span) => { span.style.background = '#fff'; span.style.opacity = '0.5'; }); // Show the current slider dot based on the counter value dot[counter].style.background = '#ef4a23'; dot[counter].style.opacity = '1'; // Increment counter and reset if it exceeds the length of the image array counter = (counter + 1) % imageResponsive.length; } // Start the image change every 5 seconds setInterval(changeImage, 5000); // Initially display the first image and the slider dot imageResponsive[0].style.display = 'block'; dot[0].style.background = '#ef4a23'; dot[0].style.opacity = '1'; .image-responsive-div { position: relative; width: 990px; height: 490px; padding: 0px 15px; } .image-responsive { width: 960px; height: 488px; position: absolute; box-shadow: 0 0.5px 4px 0 rgba(0, 0, 0, 0.3); } .slider-dot { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; padding: 10px 0; } .dot { display: inline-block; width: 30px; height: 8px; background: #fff; margin: 0 5px; opacity: .5; cursor: pointer; } But the problem is with the slider. When the website loads, the first image and the first slider load up correctly, but then, when the second image comes, the slider still stays in first place. And when the third image comes,…
tagged with: javascript

http://stackoverflow.com/a/79038090
score: -1
has comment: http://stackoverflow.com/comment/139362698
downvote count: 1
has body: so you can use ClearInterval() and need to change some code. var countDown = setInterval(function () { minutes = parseInt(timer / 60, 10) seconds = parseInt(timer % 60, 10); minutes = minutes < 10 ? "0" + minutes : minutes; seconds = seconds < 10 ? "0" + seconds : seconds; display.textContent = minutes + ":" + seconds; if (--timer < 0) { // This is the part that will call the explosion function. ClearInterval(countDown); // Please call a callback function here. } }, 1000);
upvote count: 0
answers question: http://stackoverflow.com/q/79038018
has comment: http://stackoverflow.com/comment/139362568
type: Answer

http://stackoverflow.com/q/78973373
score: 0
tagged with: http://stackoverflow.com/tag/html
has body: I'm using reacts antd library to display my table contents. I want to add a feature to resize my column widths. Hence I'm wrapping the column in my as shown below. Dragging is working fine as expected but the problem is handleMouseUp method is triggered only when I click again but not called when I release the mouse . I followed the the link https://www.w3schools.com/HOWTO/howto_js_draggable.asp to achieve it but there seems to be some problem as I stated earlier which I couldn't figure it out. Please help me on what could be the issue with the below code import React from 'react'; import { memo } from 'react'; const ResizeableHeaderComponent = (props: any) =&gt; { const onResize = (event: MouseEvent) =&gt; { if (event.movementX != 0) { event.preventDefault(); props.onResize(event, props.index); } }; const handleMouseUp = () =&gt; { window.removeEventListener('mousemove', onResize); }; const handleMouseDown = () =&gt; { window.addEventListener('mousemove', onResize); window.addEventListener('mouseup', handleMouseUp); }; return ( &lt;&gt; {props.title} &lt;div draggable={true} style={{ position: 'absolute', bottom: 0, right: '-5px', width: '10px', height: '100%', zIndex: 5, cursor: 'col-resize' }} onMouseDown={handleMouseDown} /&gt; &lt;/&gt; ); }; export default memo(ResizeableHeaderComponent);
accepted answer: http://stackoverflow.com/a/78973472
tagged with: reactjs
tagged with: javascript
type: Question
answer count: 1
tagged with: css
has answer: http://stackoverflow.com/a/78973472
tagged with: antd
type: AnsweredQuestion
has title: How to make element draggable/resizeable in react to achieve resizeable column in antd table?

http://stackoverflow.com/q/79002494
answer count: 1
score: -1
has answer: http://stackoverflow.com/a/79002598
has body: I am creating a "Side by Side" component. I am designing it in a way where the text and image should be swap-able. Currently the inside border radius is hard coded as follows: .side-by-side:has(img) { img { border: none; border-radius: 0 var(--radius-3) var(--radius-3) 0; } } How can I update this to be more versatile and reversible?
tagged with: css
has title: How to write versatile and reversible css for border radius?
downvote count: 1
tagged with: image
type: UnansweredQuestion
upvote count: 0
favorite count: 0
type: Question
tagged with: border-radius
tagged with: http://stackoverflow.com/tag/html

http://stackoverflow.com/comment/139225499
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78951324
has text: It's a CSS grid site, yeah they are in containers. There is like 15 items on that page that I need to have text appear upon hover.
type: Comment

http://stackoverflow.com/q/79003079
has answer: http://stackoverflow.com/a/79003749
has comment: http://stackoverflow.com/comment/139298677
has comment: http://stackoverflow.com/comment/139299806
has comment: http://stackoverflow.com/comment/139299707
tagged with: http://stackoverflow.com/tag/svg
answer count: 4
possible better answer: http://stackoverflow.com/a/79003124
type: Question
has answer: http://stackoverflow.com/a/79003163
tagged with: focus
tagged with: css
accepted answer: http://stackoverflow.com/a/79003749
tagged with: image
type: AnsweredQuestion
score: 0
has comment: http://stackoverflow.com/comment/139298600
has answer: http://stackoverflow.com/a/79215353
has body: I have an &lt;image&gt; element within an &lt;svg&gt; element, embedded into HTML markup. Somehow the &lt;image&gt; element gets :focus'ed when I navigate through the page with the Tab button. And it has the ugly focus frame around: :focus { /* user agent stylesheet */ outline: -webkit-focus-ring-color auto 5px; } It's Chrome 129. I'm a bit surprised, because I supposed that vector elements within an svg shouldn't be focusable at all. Here are the styles: Why the element can be :focus'ed at all and how to prevent it from behaving so? UPD Accessibility tab says it's focusable: But I still can't get, how it is possible. What property, style or event handler can make it focusable? BTW, it has an assigned Bootstrap tooltip. UPD2 This is the result of applying Bootstrap tooltip: $('.cloudHolder svg .entry').tooltip(); Now I'm investigation what exactly .tooltip(); does to make the element focusable.
has answer: http://stackoverflow.com/a/79003124
has title: Why can <image> inside be :focus'ed?
tagged with: http://stackoverflow.com/tag/html

http://stackoverflow.com/comment/139383198
has text: Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer).
comment on: http://stackoverflow.com/a/79048426
type: Comment
score: 0
type: AnswerComment

http://stackoverflow.com/q/79067521
score: 0
has comment: http://stackoverflow.com/comment/139416627
has title: After element appearing Infront of the parent element
answer count: 0
tagged with: css
type: UnansweredQuestion
tagged with: pseudo-element
type: Question
tagged with: nav
tagged with: http://stackoverflow.com/tag/html
has body: In this code I am trying to make a navigation bar for a dashboard, I went to add a glow effect under my current navbar which has a gray background but when adding the pseudo-element it docent appear bellow the current navbar, it appears above and removes the grey background entirely so I played around with z-index to fix it but it didn't fix the positioning, In the final product I just want a navbar with a grey background and a glow underneath that has a simple glow effect under it using the (::after) element. Here is the code that I am working on for reference I use Brave browser (built over google). Thank you in advance for any help! feather.replace() * { font-family: 'Montserrat', sans-serif; } @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&display=swap'); body { background: #1a1a1a; font-family: 'Open Sans', sans-serif; margin: 0; padding: 0; color: #b0b0b0; } .navbar { position: fixed; top: 1rem; left: 1rem; background: #2c2c2c; border-radius: 10px; padding: 1rem 0; box-shadow: 0 0 40px rgba(0, 0, 0, 0.3); height: calc(100vh - 4rem); } .navbar::after { content: ''; position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px; border-radius: 20px; z-index: -1; filter: blur(15px); opacity: 0.6; background: linear-gradient(0deg, #4285F4 0%, #9b72cb 27%, #d96570 55%); } .navbar__menu { list-style-type: none; padding: 0; margin: 0; position: relative; } .navbar__item { position: relative; } .navbar__link { position: relative; display: flex; align-items: center; justify-content: center; height: 3.5rem; width: 5.5rem; color: #b0b0b0; text-decoration: none; transition: 250ms ease all; } .navbar__link span { position: absolute; left: 100%; transform: translateX(-3rem); margin-left: 1rem; opacity: 0; pointer-events: none; color: #6d8eff; background: #2c2c2c; padding: 0.75rem; transition: 250ms ease all; border-radius: 17.5px; white-space: nowrap; } .navbar__link:hover, .navbar:not(:hover) .navbar__link:focus { color: #6d8eff; } .navb…

http://stackoverflow.com/q/78997595
has comment: http://stackoverflow.com/comment/139334338
type: Question
has body: In angular material design, there is a mat-menu component. When it pops up, I want it to be positioned at the right side. I managed to find a solution on Stackblitz using Angular 10, but when I tried it with Angular 17, it doesn't work. Is there a work around for Angular 17 to position the mat-menu on the right side? Stackblitz Link: https://stackblitz.com/edit/angular-material-menu-position-aside Issues: https://github.com/angular/components/issues/14621 I want the mat-menu to pop up on the right side using Angular 17.
tagged with: http://stackoverflow.com/tag/html
downvote count: 1
score: 0
tagged with: material-design
has title: Angular mat-menu custom position
answer count: 0
tagged with: css
tagged with: angular
type: UnansweredQuestion
favorite count: 0
upvote count: 1

http://stackoverflow.com/q/79037325
linked to: http://stackoverflow.com/q/79044510
tagged with: matrix
has answer: http://stackoverflow.com/a/79037831
accepted answer: http://stackoverflow.com/a/79037831
has body: I have a DIV Container and an image inside of it. The image has CSS transformations like: translate, rotate, scale The image can be dragged by a user (and scaled, rotated) in the parent div. Sometimes, parts of the image can be outside of the parent div. I want to create a new image, identical in size with the original image (with no rotation applied, with no scaling applied), but the part of the image (that is rotated/scaled) from the div that is not visible, should be fully white in the final image. Let me show what I want to obtain using an image: Original image used: I tried various methods, but I fail to get the result I am looking for. Here is the code I came up with (with the help of ChatGPT also) Dynamic Image Transformation and Cropping Dynamic Image Transformation and Cropping Process Download Temporary Canvases (For Debugging)
type: Question
tagged with: html5-canvas
answer count: 1
tagged with: transform
type: AnsweredQuestion
has title: Fill With White, Out Of Bounds Part Of Image - Crop Image With CSS Transformations on it
score: 0
tagged with: javascript
tagged with: css

http://stackoverflow.com/q/78938680
type: Question
tagged with: http://stackoverflow.com/tag/html
has answer: http://stackoverflow.com/a/78939377
type: AnsweredQuestion
has body: I seem to not be able to figure this out for the life of me, I just started to learn to code recently so some answer I have found I just didn't know how to replace my current code with them and some had things I haven't learned yet, and then chatgpt never seems to be able to fix it or show me how to integrate answers I find into my full scripts properly. .html snip A B C .css snip #search-bar { padding: 5px; border: 1px solid #ccc; border-radius: 4px; width: 100%; } #suggestions { border: 1px solid #ccc; border-top: none; max-height: 300px; overflow-y: auto; overflow-x: hidden; background-color: #fff; position: absolute; width: calc(100% - 12px); box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); z-index: 1000; left: 0; padding: 0; margin: 0; list-style-type: none; } #suggestions li { padding: 10px; cursor: pointer; list-style: none; color: #000; text-align: left; white-space: nowrap; font-size: 12px; display: block; width: 100%; box-sizing: border-box; } #suggestions li:hover { background-color: #f0f0f0; } .js snip document.addEventListener("DOMContentLoaded", () => { const searchBar = document.getElementById("search-bar"); const suggestions = document.getElementById("suggestions"); const pages = [ { name: "A", url: "A.html" }, { name: "B", url: "B.html" }, { name: "C", url: "C.html" }, ]; searchBar.addEventListener("input", (e) => { const query = e.target.value.toLowerCase(); suggestions.innerHTML = ""; if (query) { const filteredPages = pages.filter(page => page.name.toLowerCase().includes(query)); console.log("Filtered Pages:", filteredPages); filteredPages.forEach(page => { const suggestionItem = document.createElement("li"); suggestionItem.textContent = page.name; suggestionItem.addEventListener("click", () => { window.location.href = page.url; }); suggestions.appendChild(suggestionItem); }); } }); // Handle enter key press searchBar.addEventListener("keydown", (e) => { if (e.key === "Enter") { const query = searchBar.value.toLowerCase(); const matchedPage = pages.fi…
has answer: http://stackoverflow.com/a/78939019
tagged with: formatting
answer count: 2
score: -1
possible better answer: http://stackoverflow.com/a/78939377
tagged with: css
has comment: http://stackoverflow.com/comment/139181365
has title: How do I make this search bar drop down vertical?
downvote count: 1
upvote count: 0
has comment: http://stackoverflow.com/comment/139180507
favorite count: 0
accepted answer: http://stackoverflow.com/a/78939019

http://stackoverflow.com/comment/139355801
type: QuestionComment
comment on: http://stackoverflow.com/q/79034459
type: Comment
score: 0
has text: Inspect the element in the dev tools. If the answer is not clear, inspect the elements parents, so on and so forth until you see why the element is moving the way it is moving. Change CSS properties in the dev tools, disable properties etc, do the same for the parent properties.

http://stackoverflow.com/comment/139354832
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/79033988
has text: in your case, height is always auto so the transition is never triggered

.net-8.0
tags question: http://stackoverflow.com/q/78987974
type: Tag
tags question: http://stackoverflow.com/q/79063761
tag name: .net-8.0
tags question: http://stackoverflow.com/q/78919730
tags question: http://stackoverflow.com/q/78966785
tags question: http://stackoverflow.com/q/79018918
tags question: http://stackoverflow.com/q/79163405
tags question: http://stackoverflow.com/q/79315896
tags question: http://stackoverflow.com/q/79423252

http://stackoverflow.com/q/78912644
tagged with: ionic-framework
accepted answer: http://stackoverflow.com/a/78912898
favorite count: 0
type: Question
answer count: 1
downvote count: 1
type: AnsweredQuestion
upvote count: 0
has title: How to center ion-text?
score: -1
tagged with: css
has body: I am trying to center ion-text vertically between two buttons. This is my attempt. ion-toolbar { height: 100%; padding: 0; margin: 0; display: flex; align-items: center; justify-content: center; } ion-text { font-size: 1.5rem; padding-left: 2%; padding-right: 2%; } I've also tried vertical-align middle on ion-text, but it's not in the middle. How to bring it exactly to the middle? I'm trying locally on latest (8) ionic version.
has answer: http://stackoverflow.com/a/78912898

http://stackoverflow.com/comment/139340921
type: QuestionComment
comment on: http://stackoverflow.com/q/79025356
type: Comment
score: 0
has text: Please provide a proper [mre] of the issue, when asking this kind of question, and not just snippets that lack context.

http://stackoverflow.com/comment/139409237
type: Comment
comment on: http://stackoverflow.com/q/79063526
score: 0
type: QuestionComment
has text: `right-box = 10% + 80% = 90%`; `left-box = 75%`; `width = right-box - left-box = 90% - 75% = 15%`.

http://stackoverflow.com/comment/139354870
score: 3
type: QuestionComment
comment on: http://stackoverflow.com/q/79033988
type: Comment
has text: [*" Interpolation between two intrinsic sizing keyword is not possible. One of both ends must be a length or percentage."*](https://developer.chrome.com/docs/css-ui/animate-to-height-auto)

http://stackoverflow.com/comment/139149959
score: 0
type: AnswerComment
has text: Thanks a lot but that was a typo error, I had cap T in my Code.
comment on: http://stackoverflow.com/a/78920180
type: Comment

http://stackoverflow.com/q/78996966
has comment: http://stackoverflow.com/comment/139299256
has body: how can i style the border on the bottom left "contact" button like this?(https://i.sstatic.net/xSC2oPiI.png) ` <Image src={Combined} alt="background-image" className="object-contain w-full h-full" /> Expert Construction Service for Every Project General Contractor, Civil Electrical, Power Systems, and Telecommunication Network 20+ 10+ Clients Project Completed ` this is my current approach to this, how can i style it better and is there better approach to this? and alsoe the mask-image styling doesnt work because tbh i dont know what im doing
tagged with: tailwind-css
score: 0
tagged with: next.js
has comment: http://stackoverflow.com/comment/139288755
answer count: 0
has comment: http://stackoverflow.com/comment/139299351
tagged with: css
has comment: http://stackoverflow.com/comment/139291077
downvote count: 1
has title: How to make outer rounded border CSS/TailwindCSS
type: UnansweredQuestion
favorite count: 0
upvote count: 1
type: Question

http://stackoverflow.com/q/78913129
accepted answer: http://stackoverflow.com/a/78917761
tagged with: rvest
tagged with: css
upvote count: 2
downvote count: 1
has comment: http://stackoverflow.com/comment/139139685
has answer: http://stackoverflow.com/a/78917761
score: 1
has comment: http://stackoverflow.com/comment/139134710
has comment: http://stackoverflow.com/comment/139140494
favorite count: 0
has title: rvest to scrape images
tagged with: http://stackoverflow.com/tag/html
type: Question
tagged with: http://stackoverflow.com/tag/r
answer count: 1
type: AnsweredQuestion
has body: I've worked on this for couple of weeks without success. My long term goal is to scrape each image from the following website (link:https://bioguide.congress.gov/search). For starters, I'm trying to get just one location of the image stored in the 'img alt' property of the html code. The html code shows this AANDAHL, Fred George 1897 – 1966 I used the following R code but I get character(0) library(httr) library(rvest) # Fetch the HTML content with a custom User-Agent response <- GET("https://bioguide.congress.gov/search", user_agent("Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.159 Safari/537.36")) # Parse the content page <- read_html(content(response, as = "text", encoding = "UTF-8")) # Navigate to the div with class starting with 'l-grid__item' and extract img alt attributes img_alt_values <- page %>% html_nodes(xpath = "//div[starts-with(@class, 'l-grid__item')]") %>% html_nodes(xpath = ".//img") %>% html_attr("alt") Can anyone suggest how I get past this?

http://stackoverflow.com/q/79007335
has title: highcharts tree graph panning and zoom in and out
type: Question
accepted answer: http://stackoverflow.com/a/79019123
tagged with: highcharts
tagged with: http://stackoverflow.com/tag/html
answer count: 1
type: AnsweredQuestion
score: 0
tagged with: javascript
has comment: http://stackoverflow.com/comment/139306105
has body: I'm using a Highcharts tree graph chart. I managed to enable the scrollbar with some help. Another thing I'm trying to do but keep failing is to be able to move on the graph like on Google maps and zoom in and zoom out with scroll wheel. I might have wrote the correct JS but then didn't have right CSS or had a CSS that made the code no work. Highcharts.chart('container', { chart: { spacingBottom: 150, marginRight: 120, // margin: [50, 50, 50, 50], // Top, right, bottom, left height: 3500, width: 2500 }, title: { text: 'Phylogenetic language tree' }, series: [{ type: 'treegraph', keys: ['parent', 'id', 'level'], clip: false, data: [ [undefined, 'Proto Indo-European'], ['Proto Indo-European', 'Balto-Slavic'], ['Proto Indo-European', 'Germanic'], ['Proto Indo-European', 'Celtic'], ['Proto Indo-European', 'Italic'], ['Proto Indo-European', 'Hellenic'], ['Proto Indo-European', 'Anatolian'], ['Proto Indo-European', 'Indo-Iranian'], ['Proto Indo-European', 'Tocharian'], ['Indo-Iranian', 'Dardic'], ['Indo-Iranian', 'Indic'], ['Indo-Iranian', 'Iranian'], ['Iranian', 'Old Persian'], ['Old Persian', 'Middle Persian'], ['Indic', 'Sanskrit'], ['Italic', 'Osco-Umbrian'], ['Italic', 'Latino-Faliscan'], ['Latino-Faliscan', 'Latin'], ['Celtic', 'Brythonic'], ['Celtic', 'Goidelic'], ['Germanic', 'North Germanic'], ['Germanic', 'West Germanic'], ['Germanic', 'East Germanic'], ['North Germanic', 'Old Norse'], ['North Germanic', 'Old Swedish'], ['North Germanic', 'Old Danish'], ['West Germanic', 'Old English'], ['West Germanic', 'Old Frisian'], ['West Germanic', 'Old Dutch'], ['West Germanic', 'Old Low German'], ['West Germanic', 'Old High German'], ['Old Norse', 'Old Icelandic'], ['Old Norse', 'Old Norwegian'], ['Old Swedish', 'Middle Swedish'], ['Old Danish', 'Middle Danish'], ['Old English', 'Middle English'], ['Old Dutch', 'Middle Dutch'], ['Old Low German', 'Middle Low German'], ['Old High German', 'Middle High German'], ['Balto-Slavic', 'Baltic'], ['Balto-Slavic', 'Slavic'], ['Sla…
tagged with: jquery
has answer: http://stackoverflow.com/a/79019123
tagged with: css
has comment: http://stackoverflow.com/comment/139306460

http://stackoverflow.com/a/79007893
type: Answer
accepted answer of: http://stackoverflow.com/q/79007601
upvote count: 1
answers question: http://stackoverflow.com/q/79007601
has body: You can transform with a scale on hover as that does not affect neighboring elements' positions. This snippet adds a little transition time to it also, and a background of white so if the text is a little too big and overlaps a neighbor it is clearly seen. nav { display: flex; justify-content: space-between; margin: 2rem 10px; align-items: center; padding: 0 5vw; } nav div ul { list-style: none; display: inline-block; position: relative; } nav div ul li { display: inline-block; margin: 0.2rem; font-size: 0.95rem; cursor: pointer; transition: transform 0.3s linear; } nav div ul li:hover { transform: scale(1.5); background: white; } @media(max-width:500px) { nav { margin: 10px 0; } } Writings Categories Articles About
score: 1
type: AcceptedAnswer
downvote count: 0

rvest
tag name: rvest
type: Tag
tags question: http://stackoverflow.com/q/78913129
tags question: http://stackoverflow.com/q/79283098

http://stackoverflow.com/comment/139248806
type: Comment
comment on: http://stackoverflow.com/q/78975874
has text: This is likely harder than it would appear to do since parsing of HTML is not trivial especially when you consider some tags such as ` ` do not require a close tag but CAN have one and some such as a ` ` do and some such as ` ` would not be proper inside visual elements; things like that.
type: QuestionComment
score: 1

http://stackoverflow.com/q/79015496
has body: I'm doing Meta's Front End Web Development lessons on Coursera.org and have nearly finished my client project for the "HTML and CSS in depth" sessions. But when I make my browser smaller or view the mobile browsers via Inspect, the right-hand side of my content is cut-off slightly and shows no white space like the left-hand side. Inspect screenshot: Smaller browser screenshot against my desktop: Here is a snippet with my current code body { background-color: rgb(250, 250, 250); font-family: 'markazi text', serif; margin-top: 3rem; margin-bottom: 3rem; margin-left: 5%; margin-right: 5%; scroll-margin-right: 5%; } h1 { font-size: 3rem; } h2 { font-size: 2rem; } header>img { display: block; margin-left: auto; margin-right: auto; margin-bottom: 20px; } .image-container { text-align: center; } .image-container img { display: inline-block; } nav { background-color: #71d1a1; text-align: center; padding: 2px; border-radius: 10px; width: 100%; } nav a { color: #ffffff; text-decoration: none; padding: 10px 15px; font-size: 25px; } nav a:hover { background-color: #5bb98b; color: #ffffff; border-radius: 10px; text-decoration: underline; } nav ul { list-style: none; text-align: center; } nav li { display: inline-block; } nav li:not(:last-child)::after { content: "|"; margin: 0 10px; } section { display: flex; } article { flex: 1; border-radius: 10px; } .spaced-section article { background-color: #fbe9d3; border: 1px solid #ddd; padding: 15px; margin: 10px; border-radius: 10px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .spaced-section article img { width: 100%; height: auto; display: block; } .spaced-section { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 2rem; } p { font-size: 22px; } a.promotion-banner { display: block; text-decoration: none; color: inherit; width: 100%; } a.promotion-banner article { transition: transform 0.6s ease-in-out; cursor: pointer; } a.promotion-banner:hover { text-decoration: none; } a.promotion-banner:hover h1 { text-decoration: underline;…
tagged with: web-frontend
tagged with: http://stackoverflow.com/tag/html
type: Question
has answer: http://stackoverflow.com/a/79015571
answer count: 1
type: AnsweredQuestion
score: 0
accepted answer: http://stackoverflow.com/a/79015571
has title: Why is the right of my webpage content disappearing on smaller browsers / mobile browser view?
tagged with: css

http://stackoverflow.com/comment/139206256
type: Comment
type: QuestionComment
has text: https://css-shape.com/inner-curve/
comment on: http://stackoverflow.com/q/78953076
score: 2

http://stackoverflow.com/comment/139406569
score: 0
type: QuestionComment
has text: If there's no limit to the width of the parent, why won't all the columns fit into it? Somehow you are assuming a limit but I don't know what it is. Without knowing the width how does the system know how many columns can fit in?
comment on: http://stackoverflow.com/q/79061543
type: Comment

http://stackoverflow.com/comment/139315067
type: AnswerComment
comment on: http://stackoverflow.com/a/79007174
score: 0
type: Comment
has text: @Karol_Ch many thanks, this is the simplest solution and possibly the only one I will be able to implement (specific context not ability). Will test this but will this extend over multiple lines - I have a feeling it might not.

http://stackoverflow.com/a/78932998
answers question: http://stackoverflow.com/q/78929400
score: 1
accepted answer of: http://stackoverflow.com/q/78929400
upvote count: 1
type: AcceptedAnswer
has body: This is because of how browsers handle subpixel rendering. The problem occurs when 800 is not divisible by userInput. For example, 800 / 20 = 40, so it renders fine, but 800 / 14 = 57.143, and due to inaccuracies, that gap appears. They can appear not only on edges but between cells as well. I came up with two methods to solve this: Change background color If you change the background-color of the container to black and squares to white, the white gap will become black. As a side effect, the border may become a little thicker: .container { height: 800px; width: 800px; background-color: black; display: flex; flex-wrap: wrap; } .squares { border: 1px solid black; background-color: white; } Adjust the size of the container Another method, which I believe works better, is to first round the gridPixelSize to the nearest integer in the createGrid function: let gridPixelSize = Math.round(gridSize / gridDimensions); And then calculate the container size based on that: let containerSize = gridDimensions * gridPixelSize; Then we can resize the container with the newly calculated size: container.style.height = `${containerSize}px`; container.style.width = `${containerSize}px`; As a side effect, the container size will change slightly, but the difference is negligible. This is the final result: let container = document.querySelector('.container'); createGrid(16); function createGrid(gridDimensions) { let gridSize = 800; let gridPixelSize = Math.round(gridSize / gridDimensions); let containerSize = gridDimensions * gridPixelSize; for (let row = 1; row < (gridDimensions + 1); row++) { for (let column = 1; column < (gridDimensions + 1); column++) { let square = document.createElement('div'); square.id = 'square-' + row + '-' + column; square.className = 'squares'; square.style.height = `${gridPixelSize}px`; square.style.width = `${gridPixelSize}px`; container.appendChild(square); } } drawOnGrid(gridPixelSize); container.style.height = `${containerSize}px`; container.style.width = …
type: Answer
downvote count: 0

http://stackoverflow.com/a/79044893
downvote count: 0
answers question: http://stackoverflow.com/q/79043745
upvote count: 1
has body: Make sure you've registered the italic font correctly in react-pdf import { Font } from '@react-pdf/renderer'; Font.register({ family: 'Roboto', fonts: [ { src: 'path/to/Roboto-Regular.ttf' }, { src: 'path/to/Roboto-Bold.ttf', fontWeight: 'bold' }, { src: 'path/to/Roboto-Italic.ttf', fontStyle: 'italic' }, ], }); Then apply: Inspection: { top: 15, left: 55, fontFamily: "Roboto", fontStyle: "italic", fontSize: 7, fontWeight: 'bold' }
score: 1
type: Answer

http://stackoverflow.com/q/79059469
type: Question
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139401214
has title: I can't seem to reflect my lists with my updated data whenever position is changing
score: 0
tagged with: javascript
has comment: http://stackoverflow.com/comment/139401245
tagged with: list
answer count: 0
tagged with: data-structures
tagged with: css
has body: I've been sitting with this problem for days, and I can't quite figure out what's wrong with my code. My problem is that whenever my data gets re-ordered or change position, like changing the tabs position, the values don't properly reflect. I'm so burnt out with this problem and I can't really think straight anymore. I regretted using index as my identifier, but in this case, which I'm really sure, doesn't have any affect on how my data is being displayed. Please help! Thank you. My popup.js let data_placeholder = {}; initialize_data(); // Update the storage after the popup is closed document.addEventListener("visibilitychange", () => { chrome.runtime.sendMessage({ message: "set_data", data: data_placeholder }); }); // Update data_placeholder everytime the checkbox is toggled function update_data(checkbox, type, index, method) { if (checkbox.nodeName == "INPUT" && checkbox.type == "checkbox") { checkbox.addEventListener("change", () => { data_placeholder[type][index][method] = checkbox.checked; }); } else { console.warn("This shouldn't be happening: Error(Incompatible type)"); } } // Execute script document.getElementById("execute-script").addEventListener("click", (e) => { chrome.runtime.sendMessage({ message: "execute_methods", data: data_placeholder, }); }); // some code function initialize_data() { chrome.runtime.sendMessage({ message: "get_data" }, (data) => { // Update data_placeholder with the latest data data_placeholder = structuredClone(data); console.log("Popup data: ", data_placeholder); if (data.extensions.length > 0) { let frag_ext = document.createDocumentFragment(); data.extensions.sort((a, b) => a.ext_name.localeCompare(b.ext_name)); data.extensions.forEach((extension, i) => { // Don't show self if (extension.ext_name == "Chroxt") { return; } // Setting up the elements let container = document.createElement("div"); let name = document.createElement("p"); let reload = document.createElement("input"); let uninstall = document.createElement("input"); …
has comment: http://stackoverflow.com/comment/139401361
type: UnansweredQuestion

http://stackoverflow.com/q/79063526
has comment: http://stackoverflow.com/comment/139409433
has answer: http://stackoverflow.com/a/79063912
has comment: http://stackoverflow.com/comment/139409604
has comment: http://stackoverflow.com/comment/139413903
has answer: http://stackoverflow.com/a/79063970
answer count: 2
score: -1
upvote count: 1
has comment: http://stackoverflow.com/comment/139409447
tagged with: css-calc
has body: I'm trying to set the width of the striped area in my drawing below, so that it falls within the bounds of the site content. The width of the content is 80%, with a maximum width of 1080px, and centered (illustrated below in purple). The columns are variable widths, but together always fill the width of the page - I used 75%/25% in the illustration below to simplify, but the widths of the actual page are included in the following code snippet. :root { --column-width-multiplier: 8.333; --column-gap: 2.13%; } /* Making it look nice */ h2 {text-align: center} body {width: 100%; margin: 0;background-color: #ff48a6; color: #fff; font-family: monospace; font-size: 16px;} .row-fluid {display: flex; justify-content: space-between;} .site-container {border: 4px solid #a64df5; background-color: #a64df570;} .side-a {border: 2px solid #bff661;} .side-b {border: 2px solid #caf87a;} /* End making it look nice */ .site-container { max-width: 1080px; width: 80%; margin: 0 auto; } .span5 { width: calc(var(--column-width-multiplier) * 1% * 5 - var(--column-gap) * (7 * var(--column-width-multiplier) / 100)) } .span7 { width: calc(var(--column-width-multiplier) * 1% * 7 - var(--column-gap) * (5 * var(--column-width-multiplier) / 100)); } .side-b .site-container { float: left; /* TODO: Add width dimensions to make this fall inside content container */ } Divided Container We don't need this stuff to fall within the site container This is the content that need to fit within the content container at every breakpoint!!! Normal Section Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et fermentum dui. Ut orci quam, ornare sed lorem sed, hendrerit auctor dolor. Nulla viverra, nibh quis ultrices malesuada, ligula ipsum vulputate diam, aliquam egestas nibh ante vel dui. Sed in tellus interdum eros vulputate. What is the algorithm to achieve this? I want the CSS width assignment to work for any column size.
has comment: http://stackoverflow.com/comment/139409126
has comment: http://stackoverflow.com/comment/139409237
tagged with: css
has title: Calculate width of divided container
type: UnansweredQuestion
favorite count: 0
has comment: http://stackoverflow.com/comment/139413861
downvote count: 2
type: Question

http://stackoverflow.com/comment/139203617
type: AnswerComment
has text: Why would OP then include media queries in the code if they are not relevant?
score: 1
comment on: http://stackoverflow.com/a/78951589
type: Comment

http://stackoverflow.com/comment/139391925
type: AnswerComment
type: Comment
comment on: http://stackoverflow.com/a/79053907
score: 0
has text: Creating ONE SVG is easy. **Duplicate IDs** is the major issue OP hasn't run into yet, because he is experimenting with one SVG. He wants to show a whole list of LI (conversions to multiple SVG)... I think shadowDOM is his only _**sane**_ way out, they can also be attached to (his current) LIs, doesn't have to be a Custom Element with shadowDOM

http://stackoverflow.com/comment/139177417
has text: @Teemu indeed, OP is not reproducible and doesn't offer enough context, and accessing `offsetHeight` twice with `requestAnimationFrame` callback in between the two calls results in layout thrashing. I spent a lot of time in CSS transition land, so I forgot that triggering a reflow is not necessary to get the current `offsetHeight`.
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78937092

http://stackoverflow.com/comment/139240410
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78971081
has text: `a` in `minmax(a, b)` is only setting a `min-width: a;` on the grid items, while always trying to make the grid cell `b` wide, that is, if the grid container allows for `b`.
type: QuestionComment

http://stackoverflow.com/q/78973739
tagged with: css
score: 0
has title: styling right click menu vscode
has body: i am styling my vscode to my liking. so far it is alright but i can't figure out how to style the right click menu. it is linked to the menu bar. had to remove the menu bar menu's background cause it interfered with the background i had set to it. but that made the right click menu for the editor transparent. the code i have: .shadow-root-host > .context-view.monaco-component.monaco-menu-container.bottom.left.fixed > .monaco-scrollable-element > .monaco-menu > .monaco-action-bar.vertical { box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.45) !important; padding: 10px 10px 10px 10px !important; background-image: linear-gradient(#30363d 0%, #010409 100%) !important; backdrop-filter: blur(3px) !important; border-radius: 20px !important; border: 1px solid #303031 !important;} somehow when inspecting vscode and breaking on subtree mod it shows me this element. but for some reason it doesn't work "workbench.colorCustomizations": { "menu.background": "#00000000" }, this is the styling in the json file. but that interferes with the styling set to the main menu bar drop down list
tagged with: http://stackoverflow.com/tag/json
tagged with: http://stackoverflow.com/tag/html
answer count: 0
type: UnansweredQuestion
type: Question

http://stackoverflow.com/a/78977191
score: 3
has comment: http://stackoverflow.com/comment/139251059
upvote count: 3
answers question: http://stackoverflow.com/q/78977141
type: AcceptedAnswer
type: Answer
accepted answer of: http://stackoverflow.com/q/78977141
downvote count: 0
has body: This can be achieved with a combination of position sticky and a negative margin to hide the initial space the element would take up. body, html { padding: 0; margin: 0; font-family: sans-serif; } .page-content { position: relative; min-height: 100vh; background: #eee; z-index: 1; } .content { padding: 2em; } .vertical-separator { position: absolute; top: 0; left: 50%; width: 3px; height: 100%; background-color: #fff; z-index: 2; } .half-vertical-separator { position: sticky; /* This has changed to sticky */ top: 0; left: 50%; width: 3px; height: 50vh; /* This has changed to using vh units to keep it proportional to the window */ background-color: red; z-index: 3; margin-top: -50vh; /* This negates the original space taken up by a sticky element */ } .page-footer { background: #444; color: #eee; position: sticky; bottom: 0; height: 100vh; } Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Footer

http://stackoverflow.com/comment/139293328
type: Comment
score: 0
type: QuestionComment
has text: the browser will first ignore the percentage width to define the parent width and then it will use the defined width as a reference for the percentage calculation
comment on: http://stackoverflow.com/q/79000172

http://stackoverflow.com/comment/139348771
has text: read the duplicate to understand why
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/79030661

http://stackoverflow.com/comment/139143669
type: Comment
has text: Have you checked if `Helvetica Neue` optimized for Arabic or Urdu scripts?
score: 1
type: QuestionComment
comment on: http://stackoverflow.com/q/78919137

http://stackoverflow.com/comment/139219322
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78959474
has text: You might be using `word-break: break-all`, follow @Owenn link to know more about it.

http://stackoverflow.com/comment/139170939
score: 1
type: Comment
has text: You added the event listener to the modal. So how will it detect clicks outside the modal?
comment on: http://stackoverflow.com/q/78933676
type: QuestionComment

http://stackoverflow.com/q/79004164
tagged with: tabs
upvote count: 1
linked to: http://stackoverflow.com/q/1575141
has title: Stretching content tab container to 100%
type: Question
duplicate of: http://stackoverflow.com/q/1575141
tagged with: css
accepted answer: http://stackoverflow.com/a/79004507
answer count: 1
type: AnsweredQuestion
favorite count: 0
has body: How do I go about stretching my tab content container to 100% of the screen? .season_tabs { position: relative; min-height: 360px; clear: both; margin: 25px 0; } .season_tab { float: left; clear: both; width: 286px; } .season_tab label { background: #eee; padding: 10px; border: 1px solid #ccc; margin-left: -1px; font-size: 21px; vertical-align: middle; position: relative; left: 1px; width: 264px; height: 68px; display: table-cell; } .season_tab [type=radio] { display: none; } .season_content { position: absolute; top: 0; left: 286px; background: white; right: 0; bottom: 0; padding: 20px; border: 1px solid #ccc; } .season_content span { animation: 0.5s ease-out 0s 1 slideInFromTop; } [type=radio]:checked ~ label { background: white; border-right-color: #FFF; border-left: 2px solid #2C71DA; font-weight: bold; z-index: 2; } [type=radio]:checked ~ label ~ .season_content { z-index: 1; } tab 1 content 1 tab 2 content 2 tab 3 content 3 tab 4 content 4
score: -1
downvote count: 2
has answer: http://stackoverflow.com/a/79004507
has comment: http://stackoverflow.com/comment/139300679
tagged with: http://stackoverflow.com/tag/html

http://stackoverflow.com/comment/139131647
comment on: http://stackoverflow.com/q/78910465
score: 1
type: Comment
has text: There's no need to set the content-type as speculated in another [comment](https://stackoverflow.com/questions/78910465/stylesheet-properties-not-reflecting-on-the-webpage-due-to-mime-type#comment139128967_78910465). http.FileServer calls [mime.TypeByExtension](https://pkg.go.dev/mime#TypeByExtension) to get the value of the response Content-Type header. @BrettDonald The name of the language is "Go", not "Golang".
type: QuestionComment

quasar
type: Tag
tag name: quasar
tags question: http://stackoverflow.com/q/79059436
tags question: http://stackoverflow.com/q/79511837

http://stackoverflow.com/q/79059286
has comment: http://stackoverflow.com/comment/139402614
type: UnansweredQuestion
score: 1
favorite count: 0
type: Question
has comment: http://stackoverflow.com/comment/139401237
has comment: http://stackoverflow.com/comment/139402592
downvote count: 0
has comment: http://stackoverflow.com/comment/139401504
tagged with: browser
has title: Any way to make Chrome not flicker on the right size when changing window width?
tagged with: electron
upvote count: 1
has comment: http://stackoverflow.com/comment/139401466
answer count: 0
tagged with: css
tagged with: google-chrome
has comment: http://stackoverflow.com/comment/139400838
has body: I'm animating a browser windows' left edge in Electron. So the left side moves, the right side is fixed. My problem is that everything seems to be really flickering / jumping on the right side. It's the exact same behaviour with any Chrome window, you don't need Electron for this. Moving the right side with mouse gives super stable visuals on the left side, but moving the left side with mouse makes a flickering / jumping mess on the right side. Is there any possible way to make the right side fixed and have the left side jump? I'm thinking maybe with some RTL tricks we could change the behaviour of the browser. Or is this hardcoded into the low-level display code of the browser? Minimal reproducible example uploaded here Screen recording on macOS: https://youtu.be/UM7if2LLMqE?si=vl7nfQGnlCBJP0s8

http://stackoverflow.com/q/78913859
tagged with: frontend
accepted answer: http://stackoverflow.com/a/78913985
type: Question
has body: I'm developing a simple webapp on Windows in PHP and Laravel with TailwindCSS. This is my card.blade.php: {{$product->title}} {{$product->artist}} Release date: {{$product->date}} Release genre: {{$product->genre}} Release format: {{$product->format}} As per the screenshot, the text is overflowing and occupying more space than needed. I have tried class="truncate" and class="line-clamp-1" to the {{$product->title}} anchor link, to no avail. I have also tried Firefox and Opera, which produces the same result. How do I fix this? Thanks in advance.
answer count: 1
tagged with: http://stackoverflow.com/tag/html
type: AnsweredQuestion
tagged with: tailwind-css
has answer: http://stackoverflow.com/a/78913985
score: 0
has title: Why is line-clamp-1 and truncate not working with my anchor link?
tagged with: css

http://stackoverflow.com/comment/139139099
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78916318
has text: @NijatMursali you answer is actually wrong ...

http://stackoverflow.com/comment/139325490
comment on: http://stackoverflow.com/q/79015795
type: QuestionComment
has text: You want the straight vertical right-side edge of the progress bar to become rounded in the "last few percent" of the wrapper element? If so, how do you want it to change, should the right edge start to bulge outwards (towards the end), should the corners soften and recede to allow the radius to form?
score: 0
type: Comment

http://stackoverflow.com/q/78972066
has title: Embedded JS - property value expected
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139249650
type: Question
answer count: 1
tagged with: http://stackoverflow.com/tag/html
has answer: http://stackoverflow.com/a/78976432
has comment: http://stackoverflow.com/comment/139242830
score: 0
tagged with: ejs
has comment: http://stackoverflow.com/comment/139243505
has body: I was working on a project using embedded JS, and when I try to load a property, it displays the error "property value expected." The code runs perfectly fine, but the error always appears at the beginning. <label for="<%= user.id %>" style="background-color: <%= user.color %>;"> The error occurs at the beginning and end of this segment: <%= user.color %>. Error [{ "resource": "", "owner": "_generated_diagnostic_collection_name_#4", "code": "css-propertyvalueexpected", "severity": 8, "message": "property value expected", "source": "css", "startLineNumber": 15, "startColumn": 60, "endLineNumber": 15, "endColumn": 61 }] [{ "resource": "", "owner": "_generated_diagnostic_collection_name_#4", "code": "css-ruleorselectorexpected", "severity": 8, "message": "at-rule or selector expected", "source": "css", "startLineNumber": 15, "startColumn": 78, "endLineNumber": 15, "endColumn": 79 }] I attempted to search online, but I was unable to find a solution for this issue. I am looking for an alternative method or solution to eliminate this error.
has comment: http://stackoverflow.com/comment/139243485
tagged with: css
has comment: http://stackoverflow.com/comment/139245777
has comment: http://stackoverflow.com/comment/139241648

http://stackoverflow.com/q/79043745
has comment: http://stackoverflow.com/comment/139373253
has comment: http://stackoverflow.com/comment/139373288
type: Question
linked to: http://stackoverflow.com/q/60705386
has answer: http://stackoverflow.com/a/79044893
answer count: 1
tagged with: reactjs
score: 0
tagged with: css
has title: How can i make a class italic using pdf react renderer?
type: UnansweredQuestion
has body: I want to style a class of a text, in a way my text gets in italic. I've imported the Roboto font, with plenty styles, yet I can't make it italic. This is my "css" (It's not exactly css because it's the styling in the react-renderer-pdf library) Inspection: { top: 15, left: 55, fontFamily: "Roboto", fontSize: 7, fontWeight: 'bold' } This way works Inspection: { top: 15, left: 55, fontFamily: "Roboto", fontStyle: "italic", fontSize: 7, fontWeight: 'bold' } this way it doesnt I've shared a print of how my fonts are structured in my project.

http://stackoverflow.com/comment/139409471
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/79063318
has text: I see, since I was following the example I have linked I guess I thought it would function the same way in the code. Do you know how I can fix it? Thank you for your comment ◡̈

http://stackoverflow.com/comment/139408895
type: QuestionComment
comment on: http://stackoverflow.com/q/79062969
type: Comment
has text: I meet an issue there, because the fixed element cannot be cropped with the `overflow:hidden` property on its parent
score: 0

http://stackoverflow.com/comment/139151685
type: Comment
score: 0
has text: If you run the both snippets (and use the "Full page" option so it's easier to see), the alignment of both the container and the content seem to have changed. I _think_ the asker was just trying to get the page to scroll when the transform caused the container to overflow the page.
type: AnswerComment
comment on: http://stackoverflow.com/a/78917362

http://stackoverflow.com/comment/139181441
has text: the hamburger placeholder is actually showing.. what you don't see are the menu options just because they are empty. But that's not related to what you stated as previously working with `position: relative`. You are missing the whole menu logic in your original code
type: QuestionComment
comment on: http://stackoverflow.com/q/78939256
type: Comment
score: 0

http://stackoverflow.com/a/78911968
type: AcceptedAnswer
answers question: http://stackoverflow.com/q/78911856
type: Answer
accepted answer of: http://stackoverflow.com/q/78911856
score: 0
has body: don't use quotes in rotate function rotateY('-90deg') use rotateY(-90deg) instead of first using rotate and then translate (or worse, mix the two logics), first: translate a face, and then rotate it: .container { width: 400px; height: 400px; border: 2px solid white; border-radius: 4px; display: flex; justify-content: center; align-items: center; perspective: 800px; } .cube { position: relative; width: 200px; height: 200px; transform-style: preserve-3d; animation: cubeRotate 5s linear infinite alternate; } .face { position: absolute; width: 200px; height: 200px; opacity: 0.7; line-height: 100px; text-align: center; font-size: 1.4rem; /* backface-visibility: hidden; /* uncomment to test all 6 faces */ } .front { background-color: lightblue; transform: translateZ(100px) rotateY(0deg); } .back { background-color: lightgreen; transform: translateZ(-100px) rotateY(180deg); } .left { background-color: peru; transform: translateX(-100px) rotateY(-90deg); } .right { background-color: blueviolet; transform: translateX(100px) rotateY(90deg); } .top { background-color: brown; transform: translateY(-100px) rotateX(90deg); } .bottom { background-color: aqua; transform: translateY(100px) rotateX(-90deg); } @keyframes cubeRotate { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } } Front Left Right Back Top Bottom The above can now be rewritten also using translate and rotate CSS properties without changing the values for axis: .container, .cube, .face { position: relative; display: grid; place-items: center; width: var(--size, 200px); aspect-ratio: 1; transform-style: preserve-3d; } .container { --size: 400px; perspective: 800px; } .cube { --size: 200px; animation: cubeRotate 5s linear infinite; } .face { position: absolute; opacity: 0.8; font-size: 1.4rem; background-color: var(--bg); } .front { --bg: #0bf; translate: 0 0 100px; rotate: 0 0 0 90deg; } .back { --bg:#fb0; translate: 0 0 -100px; rotate: 0 1 0 180deg; } .left { --bg:#f0b; translate: -100px 0 0; ro…

http://stackoverflow.com/q/79031158
type: Question
tagged with: css
has comment: http://stackoverflow.com/comment/139349547
has title: Bug on mobile - Interactive cards (HTML, CSS, JavaScript)
favorite count: 0
has body: I am working on a card interface where the user can navigate between steps. There is just one bug on mobile. For example, when you click from step 1 to step 2, it works fine, but when you click from step 2 to step 3, it goes wrong. The third card is not fully visible on mobile. When you click back from step 5 to step 1, the entire flow works perfectly. This is how it should also work when moving forward, but in the opposite direction, of course. Can someone please help me with this on short notice? It’s for a client’s website that needs to be finished quickly. Bug on mobile Element I have tried to restructure the JavaScript, but unfortunately, my knowledge of JavaScript is limited, so I am unable to solve the problem. My code: document.addEventListener('DOMContentLoaded', () => { const container = document.querySelector('.container'); function switchCard(targetCard) { let currentCard = document.querySelector('.bigCard'); if (currentCard) { currentCard.classList.remove('bigCard'); currentCard.classList.add('smallCard'); let currentButton = currentCard.querySelector('.button'); if (currentButton) { currentButton.classList.add('hidden'); } let currentSecondText = currentCard.querySelector('.secondHeadText'); if (currentSecondText) { currentSecondText.classList.add('hidden'); } let currentPrevButton = currentCard.querySelector('.button.prev'); if (currentPrevButton) { currentPrevButton.classList.add('hidden'); } } targetCard.classList.remove('smallCard'); targetCard.classList.add('bigCard'); let targetButton = targetCard.querySelector('.button'); if (targetButton) { targetButton.classList.remove('hidden'); } let targetSecondText = targetCard.querySelector('.secondHeadText'); if (targetSecondText) { targetSecondText.classList.remove('hidden'); } let targetPrevButton = targetCard.querySelector('.button.prev'); if (targetPrevButton) { targetPrevButton.classList.remove('hidden'); } // Scroll naar de juiste positie const cardRect = targetCard.getBoundingClientRect(); const c…
has comment: http://stackoverflow.com/comment/139355191
tagged with: http://stackoverflow.com/tag/html
answer count: 0
downvote count: 0
tagged with: javascript
type: UnansweredQuestion
upvote count: 1
score: 1

image
tags question: http://stackoverflow.com/q/79003079
tags question: http://stackoverflow.com/q/78971464
tag name: image
tags question: http://stackoverflow.com/q/79039436
tags question: http://stackoverflow.com/q/79054258
tags question: http://stackoverflow.com/q/78965578
tags question: http://stackoverflow.com/q/79021456
tags question: http://stackoverflow.com/q/79000908
tags question: http://stackoverflow.com/q/79057460
type: Tag
tags question: http://stackoverflow.com/q/79040050
tags question: http://stackoverflow.com/q/79059752
tags question: http://stackoverflow.com/q/78995721
tags question: http://stackoverflow.com/q/79002494
tags question: http://stackoverflow.com/q/78967340
tags question: http://stackoverflow.com/q/79000228
tags question: http://stackoverflow.com/q/78973058
tags question: http://stackoverflow.com/q/79009569
tags question: http://stackoverflow.com/q/78943230
tags question: http://stackoverflow.com/q/79228738
tags question: http://stackoverflow.com/q/79220759
tags question: http://stackoverflow.com/q/79233888
tags question: http://stackoverflow.com/q/79232439
tags question: http://stackoverflow.com/q/79123085
tags question: http://stackoverflow.com/q/79124464
tags question: http://stackoverflow.com/q/79088112
tags question: http://stackoverflow.com/q/79201515
tags question: http://stackoverflow.com/q/79243382
tags question: http://stackoverflow.com/q/79152427
tags question: http://stackoverflow.com/q/79087222
tags question: http://stackoverflow.com/q/79075952
tags question: http://stackoverflow.com/q/79168662
tags question: http://stackoverflow.com/q/79237945
tags question: http://stackoverflow.com/q/79225097
tags question: http://stackoverflow.com/q/79131442
tags question: http://stackoverflow.com/q/79235180
tags question: http://stackoverflow.com/q/79193324
tags question: http://stackoverflow.com/q/79087907
tags question: http://stackoverflow.com/q/79239510
tags question: http://stackoverflow.com/q/79128659
tags question: http://stackoverflow.com/q/79416565
tags question: http://stackoverflow.com/q/79265483
tags question: http://stackoverflow.com/q/79267107
tags question: http://stackoverflow.com/q/79310764
tags question: http://stackoverflow.com/q/79404949
tags question: http://stackoverflow.com/q/79343659
tags question: http://stackoverflow.com/q/79309037
tags question: http://stackoverflow.com/q/79307708
tags question: http://stackoverflow.com/q/79357680
tags question: http://stackoverflow.com/q/79412564
tags question: http://stackoverflow.com/q/79324126
tags question: http://stackoverflow.com/q/79477932
tags question: http://stackoverflow.com/q/79504488
tags question: http://stackoverflow.com/q/79454611
tags question: http://stackoverflow.com/q/79439062
tags question: http://stackoverflow.com/q/79476597
tags question: http://stackoverflow.com/q/79476386
tags question: http://stackoverflow.com/q/79537404
tags question: http://stackoverflow.com/q/79514901
tags question: http://stackoverflow.com/q/79474427
tags question: http://stackoverflow.com/q/79507384
tags question: http://stackoverflow.com/q/79476638
tags question: http://stackoverflow.com/q/79540884
tags question: http://stackoverflow.com/q/79510723
tags question: http://stackoverflow.com/q/79463588

http://stackoverflow.com/comment/139182423
type: AnswerComment
score: 0
type: Comment
comment on: http://stackoverflow.com/a/78939863
has text: Can confirm,I was 2 seconds away from the same answer. https://codepen.io/Paulie-D/pen/oNraLQK

http://stackoverflow.com/comment/139326465
type: Comment
has text: I tried using addEventListener before but it's not working at all. Also it won't make sense in the program for me, since many onclicks have to be overwritten.
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/79018085

http://stackoverflow.com/a/79057943
has body: There are lots of ways you can achieve this effect. Here is just one example. In the example I have applied the CSS transition not only to the sidebar (the element) but also to the element, so that the content area is expanded when the menu is hidden. Working Example: const menuButton = document.querySelector('.menuButton'); const sidebar = document.querySelector('aside'); const toggleSidebar = () => { sidebar.classList.toggle('hidden'); } menuButton.addEventListener('click', toggleSidebar); header { position: absolute; inset: 0 0 0 180px; display: block; height: 60px; padding-left: 12px; color: rgb(255, 255, 255); background-color: rgb(0, 127, 0); } h1 { margin: 0; padding: 0; line-height: 60px; } .menuButtonSection { position: absolute; top: 0; left: 0; display: block; width: 180px; height: 60px; box-sizing: border-box; background-color: rgb(255, 0, 0); } .menuButton { display: block; margin: 18px auto; cursor: pointer; } aside { position: absolute; top: 60px; left: 0; display: block; width: 180px; height: calc(100vh - 60px); background-color: rgb(255, 127, 0); transition: left 0.4s linear; } main { position: absolute; top: calc(60px + 12px); left: calc(180px + 12px); display: block; transition: left 0.4s linear; } aside.hidden { left: -180px; } aside.hidden + main { left: 12px; } Welcome to my Test Page Toggle menu this item tests the button Welcome Again! This page has been created to test my button to toggle menus. I've put another sentence here just to check whether or not the content area is expanded when the menu is hidden.
type: Answer
score: 0
answers question: http://stackoverflow.com/q/79057850

http://stackoverflow.com/a/79035942
has comment: http://stackoverflow.com/comment/139359803
downvote count: 0
has body: I do not think that you can get the desired result altering only the td styles. The reason being that you have to separate out the cross background image from the plain color background. They must not be in the same plain so the child elements can be slipped between the two. This snippet therefore uses perspective-3d and puts the td background color on the child element, simulated with a large box-shadow which then gets clipped - the horizontal sides through a clip path on the child itself and the vertical with a clip on the tr. Yes, it's hacky but it does work for the given code. <td style="width: 56.7pt; border: 1px solid red; background-image: linear-gradient(to right bottom, transparent 0%, transparent 49.9%, black 50%, black 52%, transparent 52.1%, transparent 100%), linear-gradient(to right top, transparent 0%, transparent 49.9%, blue 50%, blue 51%, transparent 51.1%, transparent 100%); background-size: 100% 100%; background-clip: padding-box; transform-style: preserve-3d; --bg: green;"> Content <td style="width: 56.7pt; border: 1px solid red; background-image: linear-gradient(to right bottom, transparent 0%, transparent 49.9%, black 50%, black 52%, transparent 52.1%, transparent 100%), linear-gradient(to right top, transparent 0%, transparent 49.9%, blue 50%, blue 51%, transparent 51.1%, transparent 100%); background-size: 100% 100%; background-clip: padding-box; transform-style: preserve-3d; --bg: green; "> Content <td style="width: 56.7pt; border: 1px solid red; background-image: linear-gradient(to right bottom, transparent 0%, transparent 49.9%, black 50%, black 52%, transparent 52.1%, transparent 100%), linear-gradient(to right top, transparent 0%, transparent 49.9%, blue 50%, blue 51%, transparent 51.1%, transparent 100%); background-size: 100% 100%; background-clip: padding-box; transform-style: preserve-3d; --bg: grey;"> Content
answers question: http://stackoverflow.com/q/79030490
accepted answer of: http://stackoverflow.com/q/79030490
type: AcceptedAnswer
score: 2
upvote count: 2
type: Answer

http://stackoverflow.com/q/78930583
score: 1
accepted answer: http://stackoverflow.com/a/78930741
upvote count: 1
tagged with: css
tagged with: flexbox
favorite count: 0
has body: I'm working on a section of a basic website that requires an image and text on the left and other smaller boxes on the right side. The left side is supposed to take 60% of the available screen and the right side the other 40%. I decided to use flexbox since I thought it would make my life a lot easier by basically putting boxes inside boxes and so on. As the provided code below will show, I have the left flexbox on a width: 60%; and the image inside it a width: 100%; so that it takes 100% of the space available in that 60%. My main problem comes when I bring the second flexbox in. I also give it a width: 40%; but it starts to overlap the other flexbox. I also tried explicitly giving the parent a width of 100% so that is would divide properly once I got to the children but that didn't do anything... The project is supposed to look like this: Desired outcome But the furthest I got by myself is this: Current outcome The HTML section for what I'm currently working on is: &lt;div class=&quot;mid_content&quot;&gt; &lt;div class=&quot;box_1&quot;&gt; &lt;img src=&quot;./resources/capstone_colmar_assets/images/information-main.jpg&quot; alt=&quot;Man in a white sweater reading a book&quot; /&gt; &lt;h2&gt;It doesn't hurt to keep practicing.&lt;/h2&gt; &lt;p&gt; &quot;Curabitur vitae libero in ipsum portitor consequat. Aliquam et commodo lectus, nec consequat neque. Sed non accumsan urna. Phasellus sed consequat ex. Etiam eget magna laoreet, efficitur dolor consequat, tristique ligula. &lt;/p&gt; &lt;br /&gt; &lt;br /&gt; &lt;footer&gt;Emanuel, Sr Strategist at Hiring-com&lt;/footer&gt; &lt;/div&gt; &lt;div class=&quot;box_2&quot;&gt; &lt;div class=&quot;box_2_1&quot;&gt; &lt;img src=&quot;./resources/capstone_colmar_assets/images/information-orientation.jpg&quot; alt=&quot;Birdseye view of people walking &quot; /&gt; &lt;div class=&quot;asidetext&quot;&gt; &lt;h3&gt;Orientation Date&lt;/h3&gt; &lt;p&gt;Tue 10/11 &amp;amp; Wed 10/12: 8am-3pm&lt;/p&gt; &lt;a href=&quot;#&quot…
has answer: http://stackoverflow.com/a/78930741
has title: My flex-boxes are not aligning properly / overlapping
type: Question
tagged with: http://stackoverflow.com/tag/html
answer count: 1
type: AnsweredQuestion
downvote count: 0

http://stackoverflow.com/a/78986466
type: AcceptedAnswer
score: 2
upvote count: 2
downvote count: 0
type: Answer
has comment: http://stackoverflow.com/comment/139268001
has body: The issue is that you are trying to read the height and width before the image loads. Because of that, you get the values as zero. You need to wait until the image has loaded to be able to read the actual values. Adding an event listener for the load event on the first image should fix the issue. Something like this: const img1 = document.getElementById("1"); img1.addEventListener("load", function() { const w = img1.offsetWidth; const h = img1.offsetHeight; const img2= document.getElementById("2"); img2.style.width = w + 'px'; img2.style.height = h + 'px'; }); &lt;img id='1' src='https://images.unsplash.com/photo-1725859685127-c723ea1d32a1?'&gt; &lt;img id='2' src='https://images.unsplash.com/photo-1725859685127-c723ea1d32a1?'&gt;
answers question: http://stackoverflow.com/q/78986450
accepted answer of: http://stackoverflow.com/q/78986450
has comment: http://stackoverflow.com/comment/139268069
has comment: http://stackoverflow.com/comment/139267964

http://stackoverflow.com/q/79022864
upvote count: 0
type: UnansweredQuestion
favorite count: 0
score: -2
has body: I want for Chrome browser to use the San-serif option in chrome://settings/fonts. I have the font below and sans-serif as fallback, but it uses the Standard font in Chrome settings not the Sans-serif font option. How do I force Chrome to use Sans-serif option from the CSS below: body { font-family: 'Poppins', sans-serif; } I tried sans-serif as fallback
downvote count: 2
type: Question
answer count: 1
has comment: http://stackoverflow.com/comment/139334790
tagged with: css
tagged with: google-chrome
has title: Chrome ignores sans-serif font option from CSS stylesheet
has comment: http://stackoverflow.com/comment/139334592
has answer: http://stackoverflow.com/a/79030319

http://stackoverflow.com/a/78922079
has body: Finally it moved. I'm sorry for my noob action. It didn't work because I didn't set both top and left. Thanks for everyone that take parted. :D
type: Answer
answers question: http://stackoverflow.com/q/78916876
score: 0
has comment: http://stackoverflow.com/comment/139150113
has comment: http://stackoverflow.com/comment/139176704

http://stackoverflow.com/a/78905374
type: Answer
score: -1
downvote count: 1
upvote count: 0
has body: You can achieve this by using position: sticky for your header.
has comment: http://stackoverflow.com/comment/139118744
answers question: http://stackoverflow.com/q/78905359

http://stackoverflow.com/comment/139280493
type: QuestionComment
type: Comment
has text: @AHaworth I have now added the screenshot. Please check them.
score: 0
comment on: http://stackoverflow.com/q/78992567

http://stackoverflow.com/comment/139252705
has text: You're working with `%`... try `--translateY: 0%` instead of `--translateY: 0`.
type: Comment
comment on: http://stackoverflow.com/q/78977674
type: QuestionComment
score: 1

http://stackoverflow.com/a/79049372
type: Answer
answers question: http://stackoverflow.com/q/79049142
has body: in the primeng library you can make use of the [style] property to change the color or even inject style to the plugin ie, Lorem ipsum dolor sit amet... here the [style]="{ background: 'purple' }" will do the action needed here. im adding a stackblitz example here for clarity here
score: 1
upvote count: 1
downvote count: 0

http://stackoverflow.com/a/79054520
downvote count: 0
upvote count: 1
score: 1
answers question: http://stackoverflow.com/q/79054258
has body: You weren't clear about why a style property wouldn't work. Seems like it would. const products = [{ "id": 1, "image": "https://via.placeholder.com/50", "name": "Orient Vita Pro 28\"", "price": "284.00", "inventory": 4, "productCode": "K203" }, { "id": 2, "image": "https://via.placeholder.com/50", "name": "Orient S-400 26\"", "price": "198.00", "inventory": 14, "productCode": "K433", "styles": { // <----------------------------------- HERE width: "25px", border: "2px solid orange" } }, { "id": 3, "image": "https://via.placeholder.com/50", "name": "Bullet Bora 20\"", "price": "350.00", "inventory": 7, "productCode": "K012" }, { "id": 4, "image": "https://via.placeholder.com/50", "name": "Feder handmade", "price": "790.00", "inventory": 5, "productCode": "G0127" }, { "id": 5, "image": "https://via.placeholder.com/50", "name": "Ibanez G120", "price": "430.00", "inventory": 2, "productCode": "G1233" }, { "id": 6, "image": "https://via.placeholder.com/50", "name": "Feder Blues edition", "width": "1000", "price": "650.00", "inventory": 6, "productCode": "G4478" } ]; const placeholder = document.querySelector("#data-output"); let out = ""; products.forEach(product => { let styleStr = ''; if (product.styles) { Object.entries(product.styles).forEach(([key, value]) => { styleStr += key + ': ' + value + '; ' }); } out += ` ${product.name} ${product.price} ${product.inventory} ${product.productCode} `; }); placeholder.innerHTML = out; Image Product name Price inventory Product code
type: Answer

http://stackoverflow.com/q/79002259
has title: How to add watermark when exporting html to doc file with html & css?
tagged with: export-to-word
score: 0
has body: I am trying to add a watermark when exporting html to doc but I am not sure where to start I searched everywhere but I couldn't find a solution , I tried to use background-image or img tag with position fixed to center but it doesn't work as expected , how can I add a watermark using mso- attributes? I tried to use this code but it doesn't work , I expected to have a watermark on everypage with my logo when exporting html to doc &lt;div style='mso-element:header' id=h1&gt; &lt;p class=MsoHeader&gt; &lt;div style='text-align: center; position: relative;'&gt; &lt;img src="logo.png" alt="Watermark" style="opacity: 0.2; width: 200px; height: auto; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);" /&gt; &lt;/div&gt; &lt;img src="logo.png" alt="Header Image" width="80" height="60" /&gt; &lt;/p&gt; &lt;/div&gt;
has comment: http://stackoverflow.com/comment/139297812
has comment: http://stackoverflow.com/comment/139297843
tagged with: css
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139297258
tagged with: doc
has comment: http://stackoverflow.com/comment/139298063
type: Question
answer count: 1
has answer: http://stackoverflow.com/a/79017102
tagged with: http://stackoverflow.com/tag/html

http://stackoverflow.com/a/78989705
answers question: http://stackoverflow.com/q/78989508
score: 1
downvote count: 0
type: Answer
has body: It's a special situation, so try this. As the number of blocks increases, the height can be adjusted. body { padding: 50px; } .block1 { position: relative; padding: 20px; border-width: 1px 1px 0 1px; border-style: solid; border-radius: 4px 4px 0 0; border-color: #d5dce3; } .block1:after { content: ''; display: block; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 200%; /* for 2 blocks */ box-shadow: 0 0 2px #00000017,0 5px 25px #000,0 1px 5px #040b170a; /* origin: #0000000a */ } .block2 { padding: 20px; border-width: 0 1px 1px 1px; border-style: solid; border-radius: 0 0 4px 4px; border-color: #d5dce3; } &lt;div class="block1"&gt; Block 1 &lt;/div&gt; &lt;div class="block2"&gt; Block 2 &lt;/div&gt;
upvote count: 1

http://stackoverflow.com/q/79036975
favorite count: 0
answer count: 2
has comment: http://stackoverflow.com/comment/139360726
tagged with: http://stackoverflow.com/tag/html
downvote count: 0
tagged with: css-position
type: UnansweredQuestion
score: 1
upvote count: 1
has answer: http://stackoverflow.com/a/79037001
tagged with: css
type: Question
has body: I'm trying to get the nav to position to the left as relative. I've been encountering this issue quite a lot and can't get my head around it. * { margin: 0; padding: 0; box-sizing: border-box; } #main { width: 100vw; height: 100vh; background-color: rgb(49, 49, 49); } nav-bar{ color: white; } #nav-border { background-color: aqua; border-radius: 10px; padding: 5px; } nav-links { display: inline; } li { display:inline; position: relative; right: 0; } a { text-decoration: none; } a:link { color: black; } a:visited { color: black; } a:hover { color: skyblue; } Practice Makes Perfect Home Contact I have attempted to create a class to contain the nav-bar to get it to align to the right. I am also aware of how to do this via flex, absolute positioning however i cant get my mind around why it wont shift as relative.
has answer: http://stackoverflow.com/a/79037018
has title: Position: relative; right: 0; Doesn't seem to position although the parent is also relative

http://stackoverflow.com/q/78916733
downvote count: 0
tagged with: sass
has body: I have an Angular project and import my styles.scss file in angular.json: "styles": [ "src/scss/styles.scss" ], In the styles.scss file, I import bootstrap: $table-striped-order: even; $table-active-bg: rgba(102, 102, 102); @import "../../node_modules/bootstrap/scss/bootstrap"; @import "./variables"; @import "./mixins"; Also in my styles.scss file, I have the table styles that formerly worked great: table { border-collapse: collapse; margin: 25px 0; font-size: 0.9em; font-family: $main-font; min-width: 400px; thead { position: sticky; top: 0; z-index: 1; tr { background-color: $lt-gray; color: $black; text-align: left; z-index: 1; } } tbody { tr { color: $mallard; &:nth-of-type(even) { background-color: $white-smoke; } &:last-of-type { border-bottom: 2px solid $mallard; } &:hover { background-color: $mercury !important; color: $dim-gray !important; } td { vertical-align: middle; margin: 0; } } } } This was working with "bootstrap": "~5.2.3" and "@ng-bootstrap/ng-bootstrap": "^15.1.2" set in package.json. Upgrading to "bootstrap": "^5.3.2" and "@ng-bootstrap/ng-bootstrap": "^16.0.0" seems to have broken that. I did not see anything that jumped out at me when I review the update notes for bootstrap and ng-bootstrap. I have experimented with several SASS variables, and that has helped some, but the issue is editing those can affect areas that I do not wish to change. For instance, I changed one for the background attempting to modify the thead, but it also modified the tbody. I have tried with no effect: Changing from element selector to setting it as a class and applying it. Using [ngClass] to try and set it both statically and dynamically. Using very specific selectors and even ng-deep Moving the bootstrap import to the end of the file I have other custom CSS such as for button styles and fonts in the styles.scss file that are still working correctly.
upvote count: 2
answer count: 0
tagged with: css
tagged with: angular
type: UnansweredQuestion
score: 2
tagged with: bootstrap-5
favorite count: 0
type: Question
has title: After Bootstrap upgrade in Angular project, custom table CSS is no longer being applied

http://stackoverflow.com/q/79056960
type: UnansweredQuestion
score: 1
upvote count: 1
favorite count: 0
type: Question
has body: I'm working on the reponsiveness of my site using media queries. when i click on the icon, the menu drops but when i click agaiin to return... it doesn't return. my html code Home About Services Contact This is my css for the specific screens i'm working on @media (min-width: 481px) and (max-width: 768px) { nav .fa-circle-chevron-down { display: block; font-size: 85px; position: fixed; top: 20px; right: 20px; color: transparent; -webkit-text-stroke: 4px #fff; z-index: -2; transition: transform 0.5s ease-in-out; margin-top: 60px; cursor: pointer; } nav img { width: 325px; height: 325px; } nav .fa-solid:hover { transform: translateY(-10px); transform: rotate(90deg); } nav ul { display: flex; flex-direction: column; row-gap: 20px; margin-left: 0; background: transparent; position: fixed; text-align: center; margin-top: 20px; top: -100vh; left: 0; width: 27%; height: 100vh; padding: 50px 20px; z-index: 2; transform: translateX(230%); transition: top 0.5s ease-in-out; } /* When the menu is active */ nav ul.show-menu { top: 0; /* Slide down into view */ } /* Styling for individual list items */ nav ul li { margin: 5px 0; font-size: 1.5rem; } /* Make sure links are styled clearly */ nav ul li a { color: white; text-decoration: none; } } The provided CSS code seems to be styling a navigation element (nav) with a menu icon and a list of items. my javascript code for the functionality of the menu bar function toggleMenu() { const menu = document.getElementById('sidemenu'); const toggleIcon = document.querySelector('.toggle-menu'); menu.classList.toggle('show-menu'); toggleIcon.classList.toggle('rotate'); } document.addEventListener('DOMContentLoaded', () => { const toggleIcon = document.querySelector('.toggle-menu'); if (toggleIcon) { toggleIcon.addEventListener('click', toggleMenu); } else { console.error('Element with class "toggle-menu" not found.'); } }); I tried to get a correction from Gemini AI, but it began to show me errors, below is the javascript code function togg…
tagged with: http://stackoverflow.com/tag/html
answer count: 1
has answer: http://stackoverflow.com/a/79242781
tagged with: media-queries
tagged with: javascript
has comment: http://stackoverflow.com/comment/139396687
downvote count: 0
tagged with: css
has comment: http://stackoverflow.com/comment/139396771
has title: Drop down menu not functioning properly

http://stackoverflow.com/a/79076430
type: Answer
has comment: http://stackoverflow.com/comment/139539697
downvote count: 0
answers question: http://stackoverflow.com/q/79041478
upvote count: 1
has body: Upgrade my sphinx to the latest version-8,inline math words do not have a break line.
accepted answer of: http://stackoverflow.com/q/79041478
score: 1
type: AcceptedAnswer

http://stackoverflow.com/q/79035255
answer count: 2
has comment: http://stackoverflow.com/comment/139363249
possible better answer: http://stackoverflow.com/a/79035456
tagged with: css
has answer: http://stackoverflow.com/a/79062162
has title: How to align items on single row in ion-grid?
tagged with: angular
upvote count: 2
downvote count: 1
tagged with: ionic-framework
has comment: http://stackoverflow.com/comment/139357227
favorite count: 0
has answer: http://stackoverflow.com/a/79035456
has body: I would like to have the text 12345 to be vertically aligned with the avatar on the left. How to solve it first with means of ionic(while using grid) and if not possible, then with css? I've tried to set style="align-items: center;" to the ion-row without much success. This is the minimal code I used to reproduce the issue. Following is the code snippet to meet community standards: 12345
type: Question
accepted answer: http://stackoverflow.com/a/79062162
type: AnsweredQuestion
has comment: http://stackoverflow.com/comment/139360907
score: 1

http://stackoverflow.com/a/79027184
answers question: http://stackoverflow.com/q/79027165
upvote count: 1
score: 1
type: Answer
has body: You can use media querys of CSS inside @media print to adjust the elements you need to adjust based on the screen width pixels. (You can aswell use orientation portrait) @media print { @media print and (max-width: 500px) { /*Your desired width*/ /* Change whatever element you need to adjust*/ .example { transform: scale(0.8); } } }
downvote count: 0

http://stackoverflow.com/a/79012509
type: AcceptedAnswer
type: Answer
has comment: http://stackoverflow.com/comment/139315685
has body: Apply label { display: inline-grid; }, and slightly position : document.querySelectorAll("[data-is=select2]").forEach(el => { // the Select2 component only works with JQuery objects let $jqo = $(el); $jqo.select2({ width: "auto", placeholder: el.firstElementChild.textContent }); // making sure select2 works with the existing handlers $jqo.on("select2:select", ev => el.dispatchEvent(new Event("change"))); }); form { width: 20rem; } label { align-items: center; column-gap: 1ch; display: inline-grid; grid-template-columns: auto 1fr; position: relative; width: 100%; .select2-hidden-accessible { grid-column-start: 2; left: 8px; bottom: 0; } } <!-- Standard select example --!> Greetings: Select a Greetings Greetings: Select2 a Greetings
has comment: http://stackoverflow.com/comment/139317757
downvote count: 0
answers question: http://stackoverflow.com/q/79011753
score: 1
upvote count: 1
accepted answer of: http://stackoverflow.com/q/79011753
has comment: http://stackoverflow.com/comment/139315844

http://stackoverflow.com/comment/139267820
has text: "The html, as styled, is always equal to the space inside the window." by this do you mean the page or the view - if a user shrinks the browser the view changes and in this context "window" has no meaning to us. Do you mean the view or the full page/document size? - which you conveniently do not do here.
comment on: http://stackoverflow.com/q/78986317
score: 0
type: QuestionComment
type: Comment

http://stackoverflow.com/a/78979825
has body: With raw styles yeah I'd probably create a function to handle it like: function makeImportant(value) { return value ? `${value} !important` : undefined; } { backgroundColor: makeImportant(field?.secondary_color), } With tailwind classes you could use a class like !text-red-500 to indicate it's !important and use classNames or something to set the class, like: className={cn({ "!my-class": field?.secondary_color })}
answers question: http://stackoverflow.com/q/78979648
type: Answer
score: 0

http://stackoverflow.com/comment/139375199
type: QuestionComment
comment on: http://stackoverflow.com/q/79044341
has text: @AHaworth: I've updated my post with the extra details.
type: Comment
score: 0

http://stackoverflow.com/a/79063748
score: 2
downvote count: 0
type: Answer
has body: Since the div's are already clipped, all it takes is to nudge them to the side, for example with a negative margin, in your case -15%. This would make the combined width 85% of the container. To compensate I use an inner container wider by ~15%. This may effect the angel of the diagonals. .container { width: 100%; height: 100px; border: 1px solid red; overflow: hidden; } .slider { display: flex; width: calc(100% / 0.85); } .left, .right { width: 50%; height: 100px; } .left { background-color: #4CAF50; clip-path: polygon(0 0, 100% 0, 70% 100%, 0 100%); shape-outside: polygon(0 0, 100% 0, 70% 100%, 0 100%); } .right { background-color: #2196F3; shape-outside: polygon(30% 0, 100% 0, 100% 100%, 0 100%); clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%); margin-left: -15%; } Lorem Ipsum asj sjas hhjks hskj hsjkas hkjas hakjsh skjh skj hsakj sakja shkjas hkjsa hskj hskjs hkjshakjsh sksah kjlash akjshskjasha kjsl
answers question: http://stackoverflow.com/q/79063602
upvote count: 2

http://stackoverflow.com/a/79008065
score: 0
has body: Half the button doesn't show because your container doesn't have any space left One way to fix this is to set the width of .home-container to 80% with 10% padding on each left and right. .home-container { display: flex; flex-direction: column; flex: 1 1; overflow-y: auto; max-width: calc(100% - 20%); padding: 0 10%; } Working sample: https://stackblitz.com/edit/vitejs-vite-dmzcxb?file=src%2FApp.tsx,src%2Findex.css,src%2Fmain.tsx&amp;terminal=dev
type: Answer
answers question: http://stackoverflow.com/q/79007191

http://stackoverflow.com/q/79015795
has answer: http://stackoverflow.com/a/79016879
accepted answer: http://stackoverflow.com/a/79016879
tagged with: border-radius
type: AnsweredQuestion
tagged with: http://stackoverflow.com/tag/html
upvote count: 3
score: 3
has body: I have multiple segments in a progress bar, in this example representing two states - achieved and planned values. The planned segment should have a border and nearing the end of the progress bar it should get the same border-radius as the background. My problem is the following. Either the the radius is also visible within the progress bar, or I don't use a border-radius for the right corner and use overflow: hidden; to "cut off" the unwanted overflowing part of the segment but then I lose the border on the radius. Difficult to explain, images are probably better. This is my current output: This is basically how I want it to look. Is it possible with a reasonably simple solution? .progress-bar { position: relative; height: 40px; width: 400px; background: lightgray; border-radius: 24px; .segment { position: absolute; height: 40px; box-sizing: border-box; &:first-of-type { border-radius: 24px 0 0 24px; width: 70%; background: blue; } &:last-of-type { left: 70%; width: 28%; background: lightblue; border: 1px solid blue; } } }
linked to: http://stackoverflow.com/q/74517249
has answer: http://stackoverflow.com/a/79015809
answer count: 3
downvote count: 0
tagged with: css
has comment: http://stackoverflow.com/comment/139322157
has comment: http://stackoverflow.com/comment/139325490
has title: How to partially use a border-radius with an actual border in a progress bar
has answer: http://stackoverflow.com/a/79015918
favorite count: 0
tagged with: progress-bar
possible better answer: http://stackoverflow.com/a/79015809
type: Question

http://stackoverflow.com/a/79011841
type: AcceptedAnswer
has body: It needs to work on images with different aspect ratios. @AHaworth is right - you'll need JS here to: inspect and compare the original dimensions of the image inspect and compare the dimensions of the viewport Working Example: (Toggle to Full Page to see the effect...) const bgImage = document.querySelector('.bgImage'); const resizeDiv = () =&gt; { const imageDimensions = { width: bgImage.naturalWidth, height: bgImage.naturalHeight } if ((imageDimensions.width / imageDimensions.height) &lt; (window.innerWidth / window.innerHeight)) { bgImage.style.setProperty('width', '100vw'); bgImage.style.setProperty('height', 'auto'); } else { bgImage.style.setProperty('width', 'auto'); bgImage.style.setProperty('height', '100vh'); } } window.addEventListener('resize', resizeDiv); resizeDiv(); body { margin: 0; } .bgImage { position: absolute; top: 0; left: 0; display: block; } &lt;div&gt; &lt;img class="bgImage" src="https://www.w3schools.com/w3css/img_lights.jpg" alt="Northern Lights" /&gt; &lt;/div&gt;
has comment: http://stackoverflow.com/comment/139314481
type: Answer
score: 0
has comment: http://stackoverflow.com/comment/139314729
has comment: http://stackoverflow.com/comment/139314487
has comment: http://stackoverflow.com/comment/139314582
answers question: http://stackoverflow.com/q/79010419
has comment: http://stackoverflow.com/comment/139316022
has comment: http://stackoverflow.com/comment/139318217
accepted answer of: http://stackoverflow.com/q/79010419

http://stackoverflow.com/a/78991981
accepted answer of: http://stackoverflow.com/q/78991187
has comment: http://stackoverflow.com/comment/139287629
has comment: http://stackoverflow.com/comment/139287574
upvote count: 2
answers question: http://stackoverflow.com/q/78991187
type: AcceptedAnswer
score: 2
downvote count: 0
type: Answer
has body: Something like this? There's built-in DialogOptions that you can use to configure the dialog. In this example, I set the MaxWidth and FullWidth in DialogOptions. There's also options to fullscreen the dialog in the examples Datagrid + Dialog @code { private readonly DialogOptions _maxWidth = new() { MaxWidth = MaxWidth.Medium, FullWidth = true }; private async Task OpenDialogAsync() { var dialog = await DialogService.ShowAsync<DialogScrollableExample_Dialog>("My Title",_maxWidth); var result = await dialog.Result; } } Then in the Dialog, I give the MudDataGrid a Height and a FixedHeader so that the headers are fixed when scrolling. There's also a FixedFooter. Also, applied an overflow:hidden on MudDialog.ContentStyle to hide the scroll from the dialog. DataGrid Height Slider = @_height <PropertyColumn Property="x => x.Number" Title="Nr" /> <PropertyColumn Property="x => x.Sign" /> <PropertyColumn Property="x => x.Name" /> <PropertyColumn Property="x => x.Position" /> <PropertyColumn Property="x => x.Molar" Title="Molar mass" /> Cancel Ok Demo MudBlazor Snippet

http://stackoverflow.com/q/79064518
answer count: 0
downvote count: 1
has body: I use tailwind css and fluid-tailwind plugin. but I'm new to this plugin. I'm facing situation to make div responsive. here is my code: A B and my question is. how to make it responsive in small screen using fluid-tailwind instead of manually using tailwind class? I want it displayed as w-2/2 in small screen I already use this following css class selector, but not work ~w-2/2/1/2 ~w-[2/2]/[1/2] ~sm/md:~w-2/2/1/2 Anyone experienced using fluid-tailwind, could you please help me. Thanks in advance
upvote count: 1
type: UnansweredQuestion
favorite count: 0
tagged with: http://stackoverflow.com/tag/html
type: Question
tagged with: tailwind-css
has title: How to make responsive percentage div with fluid-tailwind
tagged with: fluid-layout
score: 0
tagged with: tailwind-3
tagged with: css

http://stackoverflow.com/q/78959126
has title: Full Screen background image in React
answer count: 1
tagged with: http://stackoverflow.com/tag/html
tagged with: jsx
has answer: http://stackoverflow.com/a/78959402
has comment: http://stackoverflow.com/comment/139218104
tagged with: react-typescript
score: -1
tagged with: css
downvote count: 1
type: UnansweredQuestion
upvote count: 0
favorite count: 0
type: Question
has body: I'm trying to create a website using typescript + React but I'm having some issues. I have embedded a video into my website that I want to be the background for the first section but no matter what I do there are white borders and both sides of my video. I'm very new to React so if someone could help me out that would be great! Current state of website No matter what I do I can't seem to fill in the two columns on either side. html, body { margin: 0; padding: 0; } I've already set the margins and padding to 0 style={{ position: "absolute", width: "100%", height: "100%", zIndex: -1, objectFit: "cover", pointerEvents: "none", }} I've also set the height and width of the video to be 100%. Even when I change my css and set background-color to black the columns on either side still don't change color. I'm aware this might be a super novice mistake but I'm spinning my wheels and would love a pointer.

http://stackoverflow.com/comment/139194850
has text: Use flex on button, or `calc(size - x)` x=button's border(px) padding, margin...
type: Comment
comment on: http://stackoverflow.com/q/78946570
type: QuestionComment
score: 1

http://stackoverflow.com/a/78975976
score: 2
downvote count: 0
type: Answer
answers question: http://stackoverflow.com/q/78971329
has body: CSS grid applies a default min-width configuration to its grid items preventing them from shrinking past a minimum size which is basically equal to "min-content". In your case, the min-content is defined by the longest word verysuperlongtimeword. If you inspect the grid, you can easily notice this. And since it's a grid, that item will define the width of the column where all the items will get placed so even the text below it will have that same width and will overflow as well. To fix this, you have to disable the min-width constraint by using min-width: 0 #wrapper { max-inline-size: 25ch; margin-inline: auto; word-wrap: break-word; hyphens: auto; } #grid, #flow { padding: 1em; background-color: oldlace; } #flow { margin-block-start: 2em; } .tag { padding: 0.25em; background-color: azure; inline-size: min-content; font-family: monospace; } #grid { display: grid; gap: 1em; } #grid > * { min-width: 0; } grid This is a long headline with a verysuperlongtimeword Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tortor nisl, sagittis ac lectus et, blandit varius leo. Sed vel finibus nunc. Nam ipsum mi, mattis quis cursus id, hendrerit tristique dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis eu placerat quam, vitae pretium tellus. Sed consequat tellus eu diam commodo, quis ultricies libero ultrices. Praesent nec ipsum venenatis, semper magna at, pretium tortor. Aliquam tempus lectus iaculis lacus pretium sollicitudin. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse dictum, felis eu pulvinar scelerisque, risus diam rutrum velit, vel lacinia leo risus vel purus. Integer ipsum justo, auctor eu volutpat non, pellentesque a est. Maecenas sollicitudin fermentum mauris, egestas viverra augue congue vitae. Nam non nisi urna. Nullam non cursus orci. flow This is a long headline with a verysuperlongtimeword Lorem ipsum dolor sit amet, consectetur adipiscing…
upvote count: 2
accepted answer of: http://stackoverflow.com/q/78971329
type: AcceptedAnswer

http://stackoverflow.com/comment/139257137
has text: Thanks for the prompt reply ebilly, unfortunately it still isn't working with the above JS.
score: 1
type: Comment
comment on: http://stackoverflow.com/a/78980481
type: AnswerComment

http://stackoverflow.com/comment/139413788
has text: Professional Web Developers will not misuse tools as outdated hacks. They will use the correct tools such as `Flexbox`. `float` is for floating elements within **flow text**. It is not a tool to align elements next to each other. PS What is the main div? Add a drawing of the intended layout.
comment on: http://stackoverflow.com/q/79066173
type: Comment
score: 3
type: QuestionComment

http://stackoverflow.com/q/78962936
has title: How to Connect this Scrolling Feature & removing that gap?
answer count: 0
tagged with: css
linked to: http://stackoverflow.com/q/78360027
has comment: http://stackoverflow.com/comment/139224770
downvote count: 1
has comment: http://stackoverflow.com/comment/139225204
type: UnansweredQuestion
has body: Newbie here! Easy Question for those with experienced eyes! Okay, first the code (Pt 1 HTML, Pt 2 CSS, & Pt 3 JavaScript) and then my question (pt 4) at the end! Pt 1 HTML code is: Why ain't it connecting? There's a gap. 1 should go after 5 and be a continuous loop. Pt 2 The CSS Code is: .container { display: flex; justify-content: space-around; overflow: hidden; height: 500px; /* Adjust as needed */ } .column { display: flex; flex-direction: column; animation: scroll 10s linear infinite; } .column img { width: 100px; /* Adjust as needed */ height: 100px; /* Adjust as needed */ } @keyframes scroll { 0% { transform: translateY(0); } 100% {transform: translateY(-500px); /* Adjust based on image height */ } } Pt 3 The JavaScript is: const columns = document.querySelectorAll('.column'); columns.forEach(column =\> { column.addEventListener('animationiteration', () =\> { const firstImage = column.querySelector('img:first-child'); column.appendChild(firstImage); }); }); Pt 4:> The question: I want these images to appear in the background of a website. 3 columns of 1-2-3-4-5 appearing vertically. Did that. I am trying to have it scroll like a wheel. It's scrolling. My Problem: The "Number 1," should appear, IMMEDIATELY after "the Number 5" there should not be a gap. (if you run the code/run the code snipbit you should see it) It should be continuous, like a wheel. I feel like I'm in too deep at the moment and I'm missing something really easy. My question is how do I get "the 1," right after "the 5," (but continually looping into 2-3-4-5-1-2-3-4-5-1-2-3-4-5-1 &) to continue the loop endlessly with no gap. I tried fiddling with the CSS and HTML but i'm not TOO experienced with JavaScript enough to comfortably toy with it. Is this more of a JavaScript thing? Closing Note 1:> (this question was uncorrectly edited in the staging ground and messed up how its being asked by e t h a n. i have resetted the question back to its normalcy. The person who edited the first time did not …
favorite count: 0
tagged with: http://stackoverflow.com/tag/html
type: Question
has comment: http://stackoverflow.com/comment/139225043
score: 0
tagged with: scroll
tagged with: javascript
tagged with: mousewheel
upvote count: 1
has comment: http://stackoverflow.com/comment/139224909
duplicate of: http://stackoverflow.com/q/78360027

http://stackoverflow.com/q/78991428
type: AnsweredQuestion
tagged with: gsap
favorite count: 0
possible better answer: http://stackoverflow.com/a/78994858
answer count: 2
has answer: http://stackoverflow.com/a/78995606
tagged with: http://stackoverflow.com/tag/html
downvote count: 0
has body: i'm in trouble with a project. I'm trying to create a horizontal scroll with Javascript and GSAP, but only if width is > 1200px. i did a thing and it kinda works, but if i resize the web page to a smaller width it still does the horizontal scroll. srry for my english and please help me!!! const aboutContainer = document.querySelector(".about__container"); const aboutContent = gsap.utils.toArray(".about__container .about__content"); const aboutMask = document.querySelector(".about__mask"); if (document.body.clientWidth > 1200) { let scrollTween = () => { gsap.to(aboutContent, { xPercent: -100 * (aboutContent.length - 1), ease: "none", scrollTrigger: { trigger: ".about__container", pin: true, scrub: 1, end: "+=3000", }, }); gsap.to(aboutMask, { width: "100%", scrollTrigger: { trigger: ".about__section", start: "top left", scrub: 1, }, }); let tl = gsap.timeline({ scrollTrigger: { trigger: ".about__container", start: "center bottom", }, }); tl.from(aboutContent, { x: 300, opacity: 0, duration: 1 }); }; scrollTween(); };
tagged with: javascript
has title: how can i tell gsap and js to do something ONLY IF width is above 1200px?
score: 1
has answer: http://stackoverflow.com/a/78994858
upvote count: 1
tagged with: jquery
accepted answer: http://stackoverflow.com/a/78995606
tagged with: css
type: Question
has comment: http://stackoverflow.com/comment/139285430

http://stackoverflow.com/q/78966984
upvote count: 1
has title: Does TailwindCSS support ch units of measurement?
tagged with: css
tagged with: width
has body: New to Tailwind and re-writing a site but in my Styled Components file I'm declaring a ch unit of 50, example: const Foobar = styled.div` max-width: 50ch; ` when researching the documentation I don't see if this is supported in my version: "tailwindcss": "^3.4.6" and the so far I've only see this be a feature request in this discussion. In TailwindCSS how can I utilize a ch unit of width measurement?
score: 1
favorite count: 0
type: Question
downvote count: 0
answer count: 1
type: AnsweredQuestion
tagged with: tailwind-css
has answer: http://stackoverflow.com/a/79006481
accepted answer: http://stackoverflow.com/a/79006481

http://stackoverflow.com/comment/139206591
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78952895
type: Comment
has text: here you go @I_am_prince link:- https://codesandbox.io/p/sandbox/myp7d5?file=%2Fsrc%2FApp.js%3A57%2C15 Output i am looking for:- https://i.sstatic.net/EDjoMYoZ.png

http://stackoverflow.com/comment/139261728
comment on: http://stackoverflow.com/q/78982848
type: Comment
has text: Yes, I have edited my question. They work on a gradient text with a "drop shadow" and not an "inner shadow".
score: 0
type: QuestionComment

opera
type: Tag
tags question: http://stackoverflow.com/q/79005724
tag name: opera

http://stackoverflow.com/comment/139235657
type: Comment
score: 0
comment on: http://stackoverflow.com/a/78952913
type: AnswerComment
has text: Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer).

http://stackoverflow.com/a/79049375
upvote count: 2
score: 2
downvote count: 0
type: Answer
has body: The Indeed site uses Cloudflare's bot protection. You can verify this by checking the cookies in your browser. Therefore, it's not feasible to retrieve content using the requests library. Please consider alternative solutions.
answers question: http://stackoverflow.com/q/79049135

http://stackoverflow.com/q/79055459
tagged with: http://stackoverflow.com/tag/html
answer count: 1
has body: Pretty basic use case but unfortunately I haven't found a working solution yet: I am writing a UI using CSS/Html, and I simply would like to add some horizontal space between the vertical scroll-bar and the right-margin. How do I achieve that ? Here is how my code looks now. As you can see I have tried using box-sizing + padding trick but this does not do it unfortunately. ::-webkit-scrollbar { margin-right: 20px; /* This does not work, but offsetting with padding will */ width: 8px; } ::-webkit-scrollbar-thumb { background-color: #201F24; border-radius: 8px; border: 3px solid transparent; } ::-webkit-scrollbar-track { background-color: transparent; } ::-webkit-scrollbar-thumb:hover { background-color: #2B292F; } #container { width: 100%; height: 100vh; overflow-y: scroll; padding-right: 20px; /* Adjust to create the space between scrollbar and the right side */ box-sizing: content-box; /* Ensure padding doesn't affect scroll area */ } https://jsfiddle.net/rtobgy5h/4/ What is missing here ? (This is what I am trying to achieve. See the yellow bar not being stuck to the right edge)
has comment: http://stackoverflow.com/comment/139394095
score: 0
tagged with: css
has answer: http://stackoverflow.com/a/79055506
has title: How to add horizontal spacing to vertical scrollbar in CSS?
type: UnansweredQuestion
type: Question

http://stackoverflow.com/comment/139417377
has text: Looks like you meant to call `resetArray` once on first render, but `useEffect` only runs an empty function. Try changing that line to `useEffect(resetArray, [])` and either move it below where you assign a function to `resetArray` or change that assignment to a hoisted function declaration, like `function resetArray() {...}`.
score: 2
type: Comment
type: QuestionComment
comment on: http://stackoverflow.com/q/79068036

http://stackoverflow.com/comment/139512953
comment on: http://stackoverflow.com/q/79035820
type: Comment
score: 0
type: QuestionComment
has text: The only major solution I see is to somehow change the positioning to absolute while keeping the rest of the elements fixed in place...

http://stackoverflow.com/comment/139158612
type: Comment
comment on: http://stackoverflow.com/q/78926774
score: 0
type: QuestionComment
has text: @mplungjan thanks for clarifying my code! any ideas on how to implement what is shown in the gif?

http://stackoverflow.com/comment/139417770
type: AnswerComment
has text: @Pablo, Could you explain a bit more how this works based on your code? ` where did you put `ion-justify-content-center` or `ion-align-items-center`?
comment on: http://stackoverflow.com/a/79062162
type: Comment
score: 0

http://stackoverflow.com/q/79052887
type: AnsweredQuestion
has title: styling a table with multiple rows inside the
upvote count: 1
tagged with: css
tagged with: twitter-bootstrap
has answer: http://stackoverflow.com/a/79053028
score: 1
has body: I am trying to display 5 columns table inside a panel . Below is what I am trying to do that is not working properly: I want SKU, Description, Unit price, Quantity and Amount to be displayed in one single line rather than up and down and then I want service fee to come as $0.69 on next line and then at the bottom, I want "Total amount paid" with 32.69 displayed on one line. description and amount is coming from code behind and the digits can change to be three digits or two digits. I want something like this below image to be displayed with the titles at the top that says SKU, Description, Unit price, Quantity and Amount. This is the code that I tried: Transaction Details SKU Description Unit Price Quantity Amount CCB Total Amount Paid chocolate Certificate Service Fee $32.00 1 $32.00 $0.69 32.69 is it possible to align the digits too in the amount column. any help will be appreciated.
favorite count: 0
tagged with: http://stackoverflow.com/tag/html
type: Question
downvote count: 0
answer count: 1
accepted answer: http://stackoverflow.com/a/79053028

http://stackoverflow.com/q/79020132
has comment: http://stackoverflow.com/comment/139336561
tagged with: javascript
has comment: http://stackoverflow.com/comment/139329940
type: UnansweredQuestion
tagged with: leaflet
has comment: http://stackoverflow.com/comment/139331350
tagged with: css
has body: I was wondering how to make my leaflet map displayed slightly to right with using css, so I won't have to set setview or center values for that. After I fold the sidebar I want the map to come back to center of the site. I tried something with add left:10% to leaflet.css but it messes with the coords popup. function setupMap() { let mapData; // Zmienna do przechowywania danych mapy // Pobranie bieżącej ścieżki URL const currentPath = window.location.pathname; // Sprawdzenie ścieżki i ustawienie odpowiednich wartości if (currentPath.includes('/white_orchard/')) { mapData = mapdata_wo; // Użyj danych z mapdata_wo } else if (currentPath.includes('/velen_novigrad/')) { mapData = mapdata_vn; // Użyj danych z mapdata_vn } else { console.error('Nieznana ścieżka mapy'); return; } var bounds = L.latLngBounds(mapData.sWest, mapData.nEast); var map = L.map('mapid', { zoomControl: false, center: mapData.map_center, // Ustawienie poprawnych współrzędnych (lat, lng) zoom: mapData.map_zoom, maxZoom: mapData.max_zoom, minZoom: mapData.min_zoom, attributionControl: false, zoomSnap: 0.5, // Umożliwia zoom co 0.5 zoomDelta: 0.5, maxBounds: bounds, maxBoundsViscosity: 0, fullscreenControl: true }); function addBoundaryLine() { var corners = [ [mapData.sWest.lat, mapData.sWest.lng], // Dolny lewy róg [mapData.nEast.lat, mapData.sWest.lng], // Górny lewy róg [mapData.nEast.lat, mapData.nEast.lng], // Górny prawy róg [mapData.sWest.lat, mapData.nEast.lng], // Dolny prawy róg [mapData.sWest.lat, mapData.sWest.lng] // Zamknięcie obwodu (powrót do dolnego lewego rogu) ]; // Dodanie polilinii (linii wielokątnej) z czerwoną linią var boundaryLine = L.polyline(corners, { color: 'red', // Kolor linii weight: 2, // Grubość linii opacity: 1 // Przezroczystość }).addTo(map); } // Wywołanie funkcji po załadowaniu mapy addBoundaryLine(); // Dodanie kontrolek zoomu L.control.zoom({ position: 'bottomright', zoomInTitle: 'Przybliż', zoomOutTitle: 'Oddal' }).addTo(map); // Okienko z koordynatami map.on('…
type: Question
score: 0
has title: Moving map to the center after folding the sidebar
answer count: 0

http://stackoverflow.com/comment/139426485
comment on: http://stackoverflow.com/a/79064079
has text: I didn't change anything in my code and suddenly the transition works normally. I don't know why, but I'm closing this issue. Thanks for your answer.
type: Comment
score: 0
type: AnswerComment

vuejs3
type: Tag
tag name: vuejs3
tags question: http://stackoverflow.com/q/78950932
tags question: http://stackoverflow.com/q/79059436
tags question: http://stackoverflow.com/q/78906471
tags question: http://stackoverflow.com/q/79017364
tags question: http://stackoverflow.com/q/78978286
tags question: http://stackoverflow.com/q/79174992
tags question: http://stackoverflow.com/q/79098050
tags question: http://stackoverflow.com/q/79141047
tags question: http://stackoverflow.com/q/79114186
tags question: http://stackoverflow.com/q/79152293
tags question: http://stackoverflow.com/q/79244773
tags question: http://stackoverflow.com/q/79261216
tags question: http://stackoverflow.com/q/79350525
tags question: http://stackoverflow.com/q/79407123
tags question: http://stackoverflow.com/q/79261133
tags question: http://stackoverflow.com/q/79296190
tags question: http://stackoverflow.com/q/79375508
tags question: http://stackoverflow.com/q/79260936
tags question: http://stackoverflow.com/q/79417475
tags question: http://stackoverflow.com/q/79413290
tags question: http://stackoverflow.com/q/79273614
tags question: http://stackoverflow.com/q/79312275
tags question: http://stackoverflow.com/q/79267691
tags question: http://stackoverflow.com/q/79416530
tags question: http://stackoverflow.com/q/79280735
tags question: http://stackoverflow.com/q/79332871
tags question: http://stackoverflow.com/q/79474800
tags question: http://stackoverflow.com/q/79462361
tags question: http://stackoverflow.com/q/79511837
tags question: http://stackoverflow.com/q/79422907
tags question: http://stackoverflow.com/q/79542395
tags question: http://stackoverflow.com/q/79518975
tags question: http://stackoverflow.com/q/79437499

http://stackoverflow.com/comment/139140644
type: QuestionComment
has text: I'm sorry. I'm not native in English. On using native language, coworker barely understand my saying though. ...OK. I'll make example. Please wait a minutes. Thanks.
type: Comment
comment on: http://stackoverflow.com/q/78916876
score: 0

http://stackoverflow.com/q/78956829
answer count: 0
downvote count: 0
tagged with: css
has body: I am using an Excel macro to compose an Outlook email that is based on an external HTML file. The email looks perfect when zoomed to 100%. However, when zooming in (e.g., to 120%), a white line appears above the bottom borders in all the tables. Problem: When zooming the email in Outlook to more than 100%, a white line appears above the bottom border of the tables. The issue doesn't occur at 100% zoom, and everything looks normal. This behavior disrupts the email's appearance at different zoom levels. What I've Tried: I’ve reviewed the table and border-related CSS properties in the HTML, but the issue persists across zoom levels. I suspect the issue could be related to how Outlook handles rendering at higher zoom levels, but I’m not sure how to fix it. What I Need: Fix the CSS: Adjust the CSS in my HTML file to prevent the white line from appearing, regardless of the zoom level in Outlook. Maintain design consistency: Ensure the email design remains consistent, responsive, and looks as intended across different zoom levels in Outlook. Here’s a snippet of the current HTML/CSS that defines the table and border properties: &lt;html&gt; &lt;head&gt; &lt;style&gt; html { font-size: 11px; background-color: #ffffff; padding: 0; margin: 0; width: 100%; height: 100% } body { font-size: 11px; background-color: #ffffff; padding: 0; margin: 0; width: 100%; height: 100% } table.data { cell-spacing: 0px; cell-padding: 0px; border-collapse: collapse; border: none; border-collapse: collapse; background-color: white } td.tdcontent { font-family: Arial, Helvetica, sans serif; font-size: 11px; border-bottom: solid 1px #dddddd; padding-bottom: 10px; padding-top: 10px; padding-right: 10px; text-align: justify; } td.tdcomment { font-family: Arial, Helvetica, sans serif; font-size: 11px; color: #004499; border-bottom: solid 1px #dddddd; border-left: solid 1px #dddddd; text-align: right } td.tdheader { border: solid 1px #00915A; background-color: #00915A; color: #FFFFFF; font-family: Arial…
type: UnansweredQuestion
favorite count: 0
upvote count: 1
has title: Issue with Table Border in Outlook Emails: White Line Appears Above Bottom Borders at Zoom Levels Above 100%
tagged with: excel
score: 1
type: Question
tagged with: http://stackoverflow.com/tag/html
tagged with: vba
tagged with: outlook

http://stackoverflow.com/comment/139230986
comment on: http://stackoverflow.com/a/78963199
type: Comment
score: 0
type: AnswerComment
has text: any update on the example?

http://stackoverflow.com/q/79013220
type: Question
has answer: http://stackoverflow.com/a/79013229
possible better answer: http://stackoverflow.com/a/79013302
downvote count: 3
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139317207
type: AnsweredQuestion
has body: I'm remaking a dying online game and I need some help with a bit of my code. .player-selection { display: flex; justify-content: center; align-items: center; gap: 50px; /* Space between the buttons */ margin-top: 100px; width: 100%; } #newPlayerButton, #returningPlayerButton { height: 100px; display: inline-block; text-align: center; line-height: 150px; font-size: 16px; /* Initially hide the buttons */ opacity: 0; transform: scale(0); transition: transform 1s ease-in-out, opacity 1s ease-in-out; } New Player Returning Player And here's what happens when I change the margin: original: .player-selection { display: flex; justify-content: center; align-items: center; gap: 50px; /* Space between the buttons */ margin-top: 50px; /* Adjust this value to create space between the logo and buttons */ width: 100%; } #newPlayerButton, #returningPlayerButton { height: 100px; display: inline-block; text-align: center; line-height: 150px; font-size: 16px; /* Initially hide the buttons */ opacity: 0; transform: scale(0); transition: transform 1s ease-in-out, opacity 1s ease-in-out; } As you can see margin-top is set to 50px. Here's what happens when ran: And when its 100px... nothing. No matter how much I change the margin-top, it doesn't move away from the logo. How do I fix this?
score: 0
answer count: 2
accepted answer: http://stackoverflow.com/a/79013229
has answer: http://stackoverflow.com/a/79013302
tagged with: css
upvote count: 3
has title: I need help giving more spacing between the logo and login/register buttons
favorite count: 0

http://stackoverflow.com/q/78908521
answer count: 0
tagged with: npx
has body: when I run npx tailwindcss init in my poweshell it shows this. I don't know what this means. npm error code ENOENT npm error syscall lstat npm error path C:\\Users\\cv\\AppData\\Roaming\\npm npm error errno -4058 npm error enoent ENOENT: no such file or directory, lstat 'C:\\Users\\cv\\AppData\\Roaming\\npm' npm error enoent This is related to npm not being able to find a file. npm error enoent npm error A complete log of this run can be found in: C:\\Users\\cv\\AppData\\Local\\npm-cache\\\_logs\\2024-08-24T08_27_09_429Z-debug-0.log I don't know what to do it, because I cannot understand this problem.
has title: npx tailwind css init not working in powershell
has comment: http://stackoverflow.com/comment/140020238
type: UnansweredQuestion
type: Question
tagged with: tailwind-css
score: 0
linked to: http://stackoverflow.com/q/79380514
has comment: http://stackoverflow.com/comment/139126417
tagged with: css

http://stackoverflow.com/q/78949395
upvote count: 1
score: 1
has answer: http://stackoverflow.com/a/78950347
has body: I built a simple breakout layout using Rachel Andrew's documentation https://rachelandrew.co.uk/archives/2017/06/01/breaking-out-with-css-grid-explained/ I would like to adjust the layout so that the menu items are centered. To be more specific, I want the first menu item to align with the content, or in other words, for the menu area to have the same width as the content area. How can I accomplish this? The breakout area of the navigation bar (left and right) will remain empty and is intended solely for its color. :root { font-size: 1em; line-height: 1.5; box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } body { margin: 0; padding: 0; } .header { grid-area: header; } .nav { grid-area: nav; background: slateblue; } .menu { padding: 0; display: flex; list-style: none; & li + li { margin-left: 1em; } & a { color: #fff; } } .main { grid-area: main; } .footer { grid-area: footer; } .grid-container { display: grid; grid-gap: 10px; grid-template-columns: 1fr; grid-template-areas: "header" "nav" "main" "footer"; } @media (min-width: 52em) { .grid-container { grid-template-columns: minmax(1em, 1fr) minmax(300px, 800px) minmax(1em, 1fr); /* justify-content: center; */ } .grid-container > * { grid-column: 2; } .grid-container > .full { grid-column: 1/-1; } } Layout Header Menu Item Menu Item Menu Item Menu Item Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid deleniti velit odit, quasi culpa inventore ratione asperiores repellat adipisci enim, maxime iusto optio labore incidunt non natus delectus, soluta exercitationem! Footer The method I found is to add a container inside the nav, like so: Menu Item Menu Item Menu Item Menu Item And do: .nav-container { max-width: 800px; margin: 0 auto; } but this seems to be a dirty hack.
has title: CSS Grid Breakout Layout: How to Ensure Menu Items Align with Content?
tagged with: css
tagged with: css-grid
type: UnansweredQuestion
favorite count: 0
type: Question
answer count: 1
downvote count: 0

http://stackoverflow.com/comment/139278407
type: Comment
type: QuestionComment
score: 0
has text: Thanks to @Diego D's investigations the answer is: 1. don't use this font source - it's badly compiled 2. don't use cdnfonts.com - they list quite a few questionable fonts in terms of quality and respected licenses. Besides, the CDN file delivery is sluggish – just load the fonts locally (as a GDPR affected designer I can confirm: It works fine even compared to google's infrastructure) 3. you may find a better source of this file (e.g from the designers directly or a more trustworthy repository)
comment on: http://stackoverflow.com/q/78981553

http://stackoverflow.com/comment/139225043
score: 0
has text: actually that answer was mine so you can upvote it
type: QuestionComment
comment on: http://stackoverflow.com/q/78962936
type: Comment

http://stackoverflow.com/comment/139270392
type: Comment
comment on: http://stackoverflow.com/q/78987841
score: 0
type: QuestionComment
has text: Sorry! Just added the rest of my code after I realized my error

http://stackoverflow.com/q/79014407
tagged with: jsx
tagged with: reactjs
tagged with: javascript
has answer: http://stackoverflow.com/a/79015259
downvote count: 0
tagged with: css
accepted answer: http://stackoverflow.com/a/79015259
has comment: http://stackoverflow.com/comment/139321288
has comment: http://stackoverflow.com/comment/139319602
has title: Call custom hook only on the active component in the DOM
has comment: http://stackoverflow.com/comment/139322867
upvote count: 1
has body: My goal is to detect a click outside of the components using this custom hook: const useOutsideClick = (callback) => { const reference = useRef(); useEffect(() => { const handleClick = (event) => { if (reference.current && !reference.current.contains(event.target)) { console.log(reference.current); console.log(event.target); callback(); } }; document.addEventListener("click", handleClick); return () => { document.removeEventListener("click", handleClick); }; }, [reference]); return reference; }; I have a <HeaderSearch /> custom component which looks like this: const HeaderSearch = ({ screenWidth }) => { function checkInput(event) { if (event.keyCode !== 13) { setSearch(event.target.value); } } const mobileRef = useOutsideClick(test); const ref = useOutsideClick(test); if (location.pathname !== "/") { if (screenWidth == "mobile") { return ( <FontAwesomeIcon className="search-icon" id="search-icon" icon={faSearch} onClick={() => toggleSearchInput()} /> checkInput(e)} onChange={(e) => setSearch(e.target.value)} // ref={searchInputRef} // onClick={() => searchReqClientSide()} placeholder="Search..." /> ); } else { return ( <FontAwesomeIcon className="search-icon" id="search-icon" icon={faSearch} onClick={() => toggleSearchInput()} /> checkInput(e)} onChange={(e) => setSearch(e.target.value)} // ref={searchInputRef} // onClick={() => searchReqClientSide()} placeholder="Search..." /> ); } } else { return null; } }; The HeaderSearch component is displayed conditionally by CSS classes. If parent header element has class "active" change display of header without active to display "none". However when I click outside of the component, the custom hook is still being called for both of the HeaderSearch components. See screenshot below: How can I make it that only the <HeaderSearch/> which is active calls the useOutsideClick hook instead of both firing every click? Here is the test callback, it's a simple log: function test() { console.log("clicked outside"); }
score: 1
favorite count: 0
type: Question
tagged with: react-hooks
answer count: 1
type: AnsweredQuestion

http://stackoverflow.com/comment/139284459
type: QuestionComment
comment on: http://stackoverflow.com/q/78989661
type: Comment
score: 0
has text: (requiring `container:` properties on the elements created in the main component's CSS is for me adequate isolation between the components)

http://stackoverflow.com/a/79053028
downvote count: 0
answers question: http://stackoverflow.com/q/79052887
upvote count: 1
accepted answer of: http://stackoverflow.com/q/79052887
score: 1
type: AcceptedAnswer
has body: &lt;br&gt;'s shouldn't be used to try and force a lay-out instead you should use a &lt;tr&gt; for each product/item in your table, by doing this you are creating a row for each product, aligning everything nicely &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /&gt; &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" /&gt; &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"&gt;&lt;/script&gt; &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"&gt;&lt;/script&gt; &lt;div class="container"&gt; &lt;div class="panel panel-primary"&gt; &lt;div class="panel-heading"&gt;Transaction Details&lt;/div&gt; &lt;div class="panel-body"&gt; &lt;table class="table"&gt; &lt;thead&gt; &lt;tr&gt; &lt;th scope="col"&gt;SKU&lt;/th&gt; &lt;th scope="col"&gt;Description&lt;/th&gt; &lt;th scope="col"&gt;Unit Price&lt;/th&gt; &lt;th scope="col"&gt;Quantity&lt;/th&gt; &lt;th scope="col"&gt;Amount&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td&gt;&lt;span class="lblSKU"&gt;CCB&lt;/span&gt;&lt;/td&gt; &lt;td&gt;&lt;span class="lblDesc"&gt;chocolate Certificate&lt;/span&gt;&lt;/td&gt; &lt;td&gt;&lt;span class="lblUnitPrice"&gt;$32.00&lt;/span&gt;&lt;/td&gt; &lt;td&gt;&lt;span class="lblQuantity"&gt;1&lt;/span&gt;&lt;/td&gt; &lt;td class="text-right"&gt;&lt;span class="lblAmount"&gt;$32.00&lt;/span&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&amp;nbsp;&lt;/td&gt; &lt;td&gt;Service Fee&lt;/td&gt; &lt;td&gt;&lt;span class="lblServiceFee"&gt;$0.69&lt;/span&gt;&lt;/td&gt; &lt;td&gt;&amp;nbsp;&lt;/td&gt; &lt;td class="text-right"&gt;$0.69&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td colspan="4"&gt;Total amount paid&lt;/td&gt; &lt;td class="text-right"&gt;$32.69&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; Note: I've used colspan on the Total amount paid to &quot;br…
type: Answer

http://stackoverflow.com/q/78952690
tagged with: css
has answer: http://stackoverflow.com/a/78952913
type: Question
tagged with: angular
answer count: 1
has title: How to make Angular image slider skip intermediate steps when jumping between slides?
tagged with: image-slider
score: 0
tagged with: http://stackoverflow.com/tag/html
has body: I have implemented an image slider in my Angular application, and it is working fine. However, I would like to modify its behavior when jumping directly between non-adjacent slides using the round navigation buttons below the slider. Currently, when I move from one image to another (e.g., from the 4th image to the 2nd image), the slider shows all intermediate images as it transitions. I would like the slider to skip these intermediate steps and smoothly glide directly from the current image to the target image, displaying only the two images involved in the transition (the starting and ending images). What is a way to implement this? Here is a Stackblitz Demo html &lt;div class=&quot;slider-container&quot;&gt; &lt;div class=&quot;slider&quot;&gt; &lt;div class=&quot;slide&quot; *ngFor=&quot;let image of images; let i = index&quot; [ngClass]=&quot;{'active': i === currentIndex, 'prev': i === (currentIndex - 1 + images.length) % images.length}&quot; &gt; &lt;img [src]=&quot;image&quot; alt=&quot;Image {{ i + 1 }}&quot; /&gt; &lt;/div&gt; &lt;div class=&quot;nav prev&quot; (click)=&quot;prevSlide()&quot;&gt;&amp;#10094;&lt;/div&gt; &lt;div class=&quot;nav next&quot; (click)=&quot;nextSlide()&quot;&gt;&amp;#10095;&lt;/div&gt; &lt;/div&gt; &lt;div class=&quot;indicators&quot;&gt; &lt;span class=&quot;dot&quot; *ngFor=&quot;let image of images; let i = index&quot; [ngClass]=&quot;{'active': i === currentIndex}&quot; (click)=&quot;goToSlide(i)&quot; &gt;&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; css .slider-container { position: relative; max-width: 800px; margin: 0 auto; } .slider { position: relative; height: 500px; overflow: hidden; display: flex; } .slider .slide { position: absolute; top: 0; left: 100%; width: 100%; height: 100%; opacity: 0; transition: opacity 1s ease-in-out, left 1s ease-in-out; display: flex; } .slider .slide img { width: 100%; object-fit: cover; } .slider .slide.active { opacity: 1; left: 0; } .slider .slide.prev { left: -100%; } .slider .nav { posit…
tagged with: carousel
type: UnansweredQuestion

http://stackoverflow.com/q/79050895
tagged with: tailwind-css
score: 0
has title: Nuxt 3 layout+page with height=100% doesn't scroll normally until a few seconds after page load
tagged with: overflow
answer count: 0
tagged with: css
type: UnansweredQuestion
has body: I'm working on a Nuxt 3 app with dvh units for height, and overflow-y-auto to keep certain layout elements stuck to top of bottom, and only scroll and transition the page content. At first I was pleased with the result, but then I noticed that, in mobile, when you get you scroll down, neither the address bar nor the tabs bottom bar move out of the screen, losing so much screen real state that I could really use. Example: https://buscamusicos-ui-nuxt-git-main-moluls-projects.vercel.app/es/musicos So I'm trying to go for a different approach, not as clean, but I want to be able to reach full screen and show more content. This time I'm not using overflow-y-auto and I'm using fixed for the top and bottom elements This is the second attempt (in this case, just html elements): https://buscamusicos-ui-nuxt-git-main-moluls-projects.vercel.app/altLayout2 This layout does push address bar and tabs bottom bar out of the screen, but only after 3-4 seconds after page load, and that's really annoying. I wonder what might be causing a different scroll behavior depending on time, in such a simple page. It's not hydration, as I put a flag to check when the page hydrates. But I can't figure out what else is happening there. Any hint is greatly appreciated.
tagged with: nuxt3.js
type: Question
tagged with: http://stackoverflow.com/tag/html

content-security-policy
type: Tag
tags question: http://stackoverflow.com/q/79057952
tag name: content-security-policy
tags question: http://stackoverflow.com/q/79078680
tags question: http://stackoverflow.com/q/79107916
tags question: http://stackoverflow.com/q/79394682

http://stackoverflow.com/comment/139179051
comment on: http://stackoverflow.com/a/78911196
type: Comment
has text: For javascript:- You can debug through developer's tools in your browser, press F12, and go to the Network tab.
score: 0
type: AnswerComment

http://stackoverflow.com/comment/139393866
has text: If I understand your solution, you dim everything and brighten the sectors as they are hovered. However, this makes them always dim unless you hover over them. My intent is to have them all bright until you hover which dims all other sectors. I'm investigating if I can do this with your solution.
score: 0
type: Comment
type: AnswerComment
comment on: http://stackoverflow.com/a/79051990

http://stackoverflow.com/comment/139194400
comment on: http://stackoverflow.com/q/78946426
type: QuestionComment
has text: You can try setting the `animation-direction` to `normal` which will stop once it runs once.
type: Comment
score: 0

http://stackoverflow.com/q/78939256
has title: Fixed Header Containing Image and Hamburger Menu With Scrollable Content
has comment: http://stackoverflow.com/comment/139181469
tagged with: fixed
score: -1
has body: This is what I am trying to do link While I want the image 9 and the hamburger menu fixed and scroll the rest of the content. I changed the position to fixed and the header is messed up. This is my code: #title_and_menu { position: fixed; /*was previously relative when the code worked*/ width: 100%; } #myHeader { display: inline-block; background-color: white; } #drop_menu { position: absolute; top: 50%; right: 25px; transform: translateY(-50%); cursor: pointer; } #drop_menu>*{ width: 35px; height: 1px; background-color: #c9c9c9; margin: 6px 0; } Heading Introduction Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
downvote count: 2
has comment: http://stackoverflow.com/comment/139181725
has comment: http://stackoverflow.com/comment/139181478
has comment: http://stackoverflow.com/comment/139181441
has comment: http://stackoverflow.com/comment/139181668
tagged with: css
has comment: http://stackoverflow.com/comment/139181507
has answer: http://stackoverflow.com/a/78939581
has comment: http://stackoverflow.com/comment/139181506
has comment: http://stackoverflow.com/comment/139181433
has comment: http://stackoverflow.com/comment/139181414
accepted answer: http://stackoverflow.com/a/78939581
has comment: http://stackoverflow.com/comment/139181389
has comment: http://stackoverflow.com/comment/139181644
tagged with: hamburger-menu
upvote count: 1
linked to: http://stackoverflow.com/q/4069734
favorite count: 0
has comment: http://stackoverflow.com/comment/139181492
type: Question
has comment: http://stackoverflow.com/comment/139181638
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139181665
has comment: http://stackoverflow.com/comment/139181669
answer count: 1
has comment: http://stackoverflow.com/comment/139181484
type: AnsweredQuestion
has comment: http://stackoverflow.com/comment/139181421

http://stackoverflow.com/comment/139221340
type: Comment
comment on: http://stackoverflow.com/q/78960567
score: 0
has text: You can maybe try using getBoundingClientRect().width to get width of each child element and their sum and compare it with the wrapper one
type: QuestionComment

spring-boot
tags question: http://stackoverflow.com/q/79058417
type: Tag
tag name: spring-boot
tags question: http://stackoverflow.com/q/79113153
tags question: http://stackoverflow.com/q/79528674

http://stackoverflow.com/comment/139178233
has text: Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/) using the `<>` icon. See [**How to create a Minimal, Reproducible Example**](http://stackoverflow.com/help/reprex)
type: QuestionComment
score: 1
comment on: http://stackoverflow.com/q/78937649
type: Comment

http://stackoverflow.com/a/79007174
answers question: http://stackoverflow.com/q/79006880
has body: To archive this you need alteast 2 elements simply dummy text of simply dummy text of At this point you can animate width on mark-placeholder and transform mark-hightlight as you wish without interupt layout since its absolute body { font-size: 15px; line-height: 21px; font-family: 'Open Sans'; } .section { position: relative; margin: 0px 0px 50px 0px; width: 500px; height: 210px; background: #eeeeee; border: 1px solid #666666; } .paragraph { position: relative; width: 100%; height: 100%; display: inline; vertical-align: middle; } .paragraph1 { background: #00ffff; } .paragraph2 { background: #00ffff; } /* version 1 */ .mark1 { position: relative; width: 150px; height: 21px; transition: all 1.0s; vertical-align: bottom; display: inline-block; overflow: hidden; white-space: pre; } .mark1.hidden { width: 0px; transition: all 1.0s; } .mark-placeholder { position: relative; opacity: 0; display: inline-block; } .mark-hightlight { box-sizing: border-box; display: block; color: red; background-color: #cccccc; z-index: 1; position: absolute; bottom: 0%; top: -0; left: 0%; right: 0%; transform: translateY(-10%); } example <button onclick=" const collection = document.getElementsByClassName('mark1'); for (let i = 0; i < collection.length; i++) { collection[i].classList.toggle('hidden'); } ">toggle version 1 Lorem Ipsum is simply dummy text ofsimply dummy text of the printing and typesetting industry. has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. <button onclick=" const collection = document.getElementsByClassName('mark2'); for (let i = 0; i <…
has comment: http://stackoverflow.com/comment/139318527
upvote count: 1
has comment: http://stackoverflow.com/comment/139315067
has comment: http://stackoverflow.com/comment/139312494
downvote count: 1
type: Answer
score: 0

http://stackoverflow.com/comment/139277707
type: Comment
type: AnswerComment
has text: Please **fully explain** your answer and don't just dump a chunk of code expecting that everyone will understand it
comment on: http://stackoverflow.com/a/78991158
score: 1

http://stackoverflow.com/q/79066590
has title: plotly dash, css file not connecting
type: Question
answer count: 1
has answer: http://stackoverflow.com/a/79072354
has body: I am attempting to move from plotly to dash, and would like to connect a css file to style my dashboard. The app renders fine with my file structure; app.py and index.py in the main folder, and an additional style.css file in the /assets folder. however, when I add some styling to the css, the main dash app does not “automatically render it” as the documentation states it should. my dash version is later than 2.13; specific version is 2.18.1 I have tried both including and excluding name in the Dash() call I have tried specifically stating assets_external_path=“/assets” in the Dash() call I have tried setting external_stylesheets=["/assets/style.css"] in the Dash() call and it still does not connect to the style.css file. does anyone have any tips or tricks to get dash to recognize and connect with the css file?
score: 0
tagged with: python
tagged with: plotly-dash
tagged with: css
type: UnansweredQuestion

http://stackoverflow.com/comment/139341889
has text: Please provide the SVG images as well, otherwise this is hard to reproduce. If you can't host them somewhere externally, so that we can all see them, then you can use a service like https://yoksel.github.io/url-encoder/ to convert them into Data URIs.
comment on: http://stackoverflow.com/q/79026458
type: QuestionComment
score: 2
type: Comment

http://stackoverflow.com/q/78950094
has comment: http://stackoverflow.com/comment/139200674
tagged with: css
has comment: http://stackoverflow.com/comment/139201073
type: Question
linked to: http://stackoverflow.com/q/28577621
has comment: http://stackoverflow.com/comment/139200688
favorite count: 0
score: -1
downvote count: 2
tagged with: http://stackoverflow.com/tag/html
duplicate of: http://stackoverflow.com/q/28577621
has title: Resize CSS triangle with window size
duplicate of: http://stackoverflow.com/q/25360411
has answer: http://stackoverflow.com/a/78950122
has comment: http://stackoverflow.com/comment/139209521
has answer: http://stackoverflow.com/a/78950329
duplicate of: http://stackoverflow.com/q/63931083
answer count: 2
type: UnansweredQuestion
has body: I have a div that defines a triangle using CSS. Here's an example : .arrow-down { width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 20px solid #f00; } I'm trying to make the triangle size responsive when the window is resized. I tried changing the boder from px to vh but it didn't change anything.
upvote count: 1

http://stackoverflow.com/q/78910465
tagged with: mime-types
type: Question
tagged with: mime
tagged with: go
tagged with: mime-message
downvote count: 0
has title: Stylesheet properties not reflecting on the webpage due to MIME type
upvote count: 1
answer count: 0
tagged with: css
has comment: http://stackoverflow.com/comment/139128967
has body: I am working on a project that runs a web server on a specified port written in Golang. The styling properies of the page don't reflect and the following error is logged on the browser console. Refused to apply style from 'http://localhost:9000/static/style.css' because its MIME type ('text/plain') is not a supported stylesheet MIME type, and strict MIME checking is enabled. My index.html file is in a folder named templates while the style.css file in a folder named static. This is how I specified the link relation of the stylesheet in the HTML file. The main.go file inside a folder named cmd is where I serve the static folder as illustrated below. func main() { http.Handle("/static/", http.StripPrefix("/static/", http.FileServer(http.Dir("static")))) http.HandleFunc("/", handlers.ServeIndex) port := ":9000" log.Printf("Server started at http://localhost%v", port) http.ListenAndServe(port, nil) } Based on the provided information, what could be the issue leading to the problem? I have tried clearing the browser's cache hoping the issue would be solved but that didn't solve the problem. Project file structure
type: UnansweredQuestion
score: 1
favorite count: 0
has comment: http://stackoverflow.com/comment/139131647

http://stackoverflow.com/q/78948434
has body: I'm trying to apply an SVG mask to a div element, but I'm encountering an issue where the mask is not scaling correctly with the container. The mask appears to overflow the container, showing only part of the masked content. I am aware that the SVG is 4000 x 7000 but there surely is a way to scale down, right? In the attached image, you can see how the plain SVG, and then the mask made out of it (the goal is to apply the gradient effect using the mask). Below you can also find the code for both of the shown examples: simple SVG: <path d="M 3000,3000 L 5000,0 L 7000,3000 Z" /> <path d="M 2000,3000 L 0,0 L 4000,0 Z"/> 30px masked gradient: <path d="M 3000,3000 L 5000,0 L 7000,3000 Z" /> <path d="M 2000,3000 L 0,0 L 4000,0 Z"/> 30px I've tried setting the width and height of the SVG to 100%, and also trying to set maskUnits & maskContentUnits but the mask still overflows the .logo container. How can I ensure that the mask scales correctly with the element it is applied to? Any advice is very welcome!
has comment: http://stackoverflow.com/comment/139197739
type: Question
has answer: http://stackoverflow.com/a/78963183
has comment: http://stackoverflow.com/comment/139198137
tagged with: http://stackoverflow.com/tag/html
answer count: 1
type: AnsweredQuestion
score: 0
tagged with: http://stackoverflow.com/tag/svg
accepted answer: http://stackoverflow.com/a/78963183
tagged with: responsive-design
tagged with: css
tagged with: masking
has title: How to properly scale an SVG mask within a container element?
has comment: http://stackoverflow.com/comment/139197892
has comment: http://stackoverflow.com/comment/139197858

http://stackoverflow.com/comment/139298600
type: Comment
has text: I agree, that is intuitively unexpected. Did you try adding `tabindex="-1"` to the svg or the image element?
comment on: http://stackoverflow.com/q/79003079
type: QuestionComment
score: 1

http://stackoverflow.com/comment/139407206
has text: Welcome to Stack Overflow. Please take the [tour] to learn how Stack Overflow works and read [ask] on how to improve the quality of your question.
type: QuestionComment
comment on: http://stackoverflow.com/q/79062531
type: Comment
score: 0

vscode-extensions
tags question: http://stackoverflow.com/q/78920122
tags question: http://stackoverflow.com/q/78997269
type: Tag
tags question: http://stackoverflow.com/q/79009939
tag name: vscode-extensions
tags question: http://stackoverflow.com/q/79201778

http://stackoverflow.com/a/79016850
upvote count: 1
downvote count: 1
answers question: http://stackoverflow.com/q/79016707
has body: I couldn't find any CSS method to do this. I only found this solution using JavaScript. Basically, we calculate the bounding box of the text and then determine the width of the parent based on that. (Just make sure that box-sizing is set to border-box.): function adjustContainerWidth(element) { const textSpan = element.getElementsByTagName('span')[0]; const boundingRect = textSpan.getBoundingClientRect(); const horizontalPadding = parseInt(getComputedStyle(element).paddingLeft) + parseInt(getComputedStyle(element).paddingRight); element.style.width = (boundingRect.width + horizontalPadding) + 'px'; } const elements = Array.from(document.getElementsByClassName('hero-title')); elements.forEach((element) => { adjustContainerWidth(element); }); .hero-title { background: #000; color: #ffffff; display: inline-block; padding: 20px; max-width: 473px; box-sizing: border-box; /* for correct width calculation */ font-size: 60px; margin: 5px; } Vessel / tank destruction facility
type: Answer
score: 0

css-print
tags question: http://stackoverflow.com/q/79016277
type: Tag
tag name: css-print
tags question: http://stackoverflow.com/q/79137314
tags question: http://stackoverflow.com/q/79097441
tags question: http://stackoverflow.com/q/79467228

http://stackoverflow.com/q/79068427
has comment: http://stackoverflow.com/comment/139418159
has answer: http://stackoverflow.com/a/79068753
has answer: http://stackoverflow.com/a/79070053
has comment: http://stackoverflow.com/comment/139418806
linked to: http://stackoverflow.com/q/46146126
linked to: http://stackoverflow.com/q/25764551
type: Question
tagged with: css
has comment: http://stackoverflow.com/comment/139418125
has body: I have implemented a style that changes the layout of a table to fit a smartphone screen, based on this answer. It does what I am asking it to do except for 1 thing: it does not allow for any word wrapping, for reasons that will become obvious. Problem is: I need word wrap for the table to fit on the table screen. For illustration, I created this JSFiddle. If the view is sufficiently narrow, the layout changes as expected but the cells containing word wrapping have this annoying behavior that the 2nd line ignores the padding. This is caused by the display:inline in the CSS (Specifically, the one with the commented /*-block*/ next to it. This is the result. When uncommenting the -block to have display:inline-block, then the padding is not ignored as desired but the borders get disconnected from the table on the left, and extend outside the table on the right. What is the way to get the best of both worlds (correct border as in the first screenshot but with paddings as in the second)?
type: AnsweredQuestion
favorite count: 0
possible better answer: http://stackoverflow.com/a/79068753
has comment: http://stackoverflow.com/comment/139418639
accepted answer: http://stackoverflow.com/a/79070053
has comment: http://stackoverflow.com/comment/139418106
answer count: 2
score: -1
downvote count: 2
tagged with: http://stackoverflow.com/tag/html
upvote count: 1
has title: Inline breaks padding/text-indent

http://stackoverflow.com/a/78958721
score: 1
upvote count: 1
type: AcceptedAnswer
type: Answer
answers question: http://stackoverflow.com/q/78958654
downvote count: 0
accepted answer of: http://stackoverflow.com/q/78958654
has body: The solution is to use SVG as svgs don't rely on pixels like mask-image does, it relies on math/geometry. see vector graphics to understand. .shape{ width: 500px; height: 500px; background-image: url('data:image/svg+xml,&lt;svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 74.877 74.877"&gt;&lt;path d="M74.612 0c.65 24.955.082 49.918.265 74.877H0C38.566 72.93 73.975 39.213 74.612 0z" fill="%23ea3323"/&gt;&lt;/svg&gt;'); } &lt;div class="shape"&gt;&lt;/div&gt; note that even with 500px width/height it does not pixelate The thing is that you will have to create the svgs or use from the web create the svg convert to svg to data uri

http://stackoverflow.com/comment/139299252
score: 0
has text: It's not a tailwind or custom color issue. Safari just won't give focus when clicking on buttons by their design. You can see that if you tab onto the button the focus will work.
comment on: http://stackoverflow.com/q/79003190
type: QuestionComment
type: Comment

http://stackoverflow.com/q/79058104
type: Question
has title: Is it possible to slot the style of a shadowRoot?
tagged with: http://stackoverflow.com/tag/html
has answer: http://stackoverflow.com/a/79058183
answer count: 1
type: AnsweredQuestion
has comment: http://stackoverflow.com/comment/139399686
downvote count: 0
tagged with: javascript
tagged with: custom-element
has body: I'm experimenting with Vanilla custom elements and it doesn't seem possible to slot a style tag: class MyElement extends HTMLElement { constructor() { super(); this.attachShadow({mode: "open"}); } connectedCallback() { this.shadowRoot.append(document.getElementById('my-element-template').content.cloneNode(true)); } } window.customElements.define("my-element", MyElement); Why am I still red instead of green?
upvote count: 1
linked to: http://stackoverflow.com/q/61626493
tagged with: css
accepted answer: http://stackoverflow.com/a/79058183
score: 1
favorite count: 0

http://stackoverflow.com/q/79036854
tagged with: http://stackoverflow.com/tag/html
type: Question
upvote count: 2
score: 2
has title: How to create a border for an image that's been resized with object-fit: scale-down
type: AnsweredQuestion
has body: I have a JavaScript slideshow that displays images of various dimensions in a browser window. It uses object-fit: scale-down to resize the image to fit the container. I'd like to add a border to the image, but when I apply the style border: 2px solid black to the element, it seems to surround what would be the image in its original, unscaled size. Is there a way, either with CSS or with JavaScript, to apply the border to the resized image? Update: I'd prefer a solution that allows me to use the border-family of style settings, even if it requires some JavaScript. const duration = 2000; // time (msec) to display each slide const sizes = [ [4000, 500], [1000, 4000], [600, 400], [100, 200] ]; const sleep = ms => new Promise(r => setTimeout(r, ms)); let size_index = 0; function show_slides(duration) { let this_duration = duration; const my_parent = document.querySelector('#slide-div'); if (size_index == sizes.length) { size_index = 0; } let w = sizes[size_index][0]; let h = sizes[size_index][1]; ++size_index; let my_randomizer = `https://placehold.co/${w}x${h}?text=${w}+x+${h}\npx`; fetch(my_randomizer) .then(my_response => my_response.blob()) .then(my_blob => { let my_url = URL.createObjectURL(my_blob); sleep(this_duration) .then(() => { URL.revokeObjectURL(my_parent.querySelector('img').src); my_parent.querySelector('img').src = my_url; show_slides(duration); }); }) .catch(my_error => console.error('Error: ', my_error)); } html { height: 100%; width: 100%; } body { /* prevent body from displacing */ margin: 0; /* body should perfectly superimpose the html */ height: 100%; width: 100%; } .outer-div { display: flex; flex-flow: column; height: 100%; /* Now create left/right margins */ margin: 0 0.5em; } .inner-fixed-div { margin-top: 0.5em; } .inner-remaining-div { margin-bottom: 1em; flex-grow: 1; /* hints the contents to not overflow */ overflow: hidden; } .picture-div { /* force the div to fill the available space */ width: 100%; height: 100%; } .picture-div-img { /* …
tagged with: border
possible better answer: http://stackoverflow.com/a/79037244
tagged with: javascript
answer count: 2
has answer: http://stackoverflow.com/a/79037983
accepted answer: http://stackoverflow.com/a/79037983
tagged with: css
downvote count: 0
tagged with: object-fit
has answer: http://stackoverflow.com/a/79037244
favorite count: 0

http://stackoverflow.com/comment/139391133
comment on: http://stackoverflow.com/q/79053699
type: QuestionComment
has text: FYI: You can achieve sticky headers even when a horizontal parent scroll is necessary. JS is still not needed, even in that case.
type: Comment
score: 0

textinput
tag name: textinput
tags question: http://stackoverflow.com/q/79059314
type: Tag

http://stackoverflow.com/comment/139263259
type: AnswerComment
score: 1
has text: Okay figured out the issue, I was indexing the characters in the remove method while the bold tag characters were still present. I added logic to track the indexing after removing the bold tags. Pretty much all changes are within the range of the replace() callback method.
type: Comment
comment on: http://stackoverflow.com/a/78976989

http://stackoverflow.com/comment/139396687
type: Comment
score: 0
type: QuestionComment
has text: Probably the defined `toggleIcon` constant is not what you expect. There's no element with the class `toggle-menu` in your HTML.
comment on: http://stackoverflow.com/q/79056960

http://stackoverflow.com/q/78931291
type: Question
has title: What am I missing in trying to load a custom font for a Flask-app?
tagged with: flask
has answer: http://stackoverflow.com/a/78931303
tagged with: css
downvote count: 1
type: AnsweredQuestion
upvote count: 0
favorite count: 0
linked to: http://stackoverflow.com/q/32582644
score: -1
has body: I'm trying to get a custom font to load in my Flask-app. Whatever I try, it doesn't seem to work. The layout for my app looks like this: Folder structure - app.py - static -- css --- main.css -- fonts --- Nunito-Italic-VariableFont_wght.ttf - templates -- index.html -- base.html app.py from flask import Flask, render_template, url_for app = Flask(__name__) @app.route('/') def index(): return render_template('index.html') if __name__ == '__main__': app.run(debug=True) index.html {% extends 'base.html' %} {% block title %} Home {% endblock %} {% block body %} Home {% endblock %} base.html {% block title %}{% endblock %} {% block body %}{% endblock %} main.css @font-face { font-family: Nunito; src: url("static/fonts/Nunito-Italic-VariableFont_wght.ttf"); } body { margin: 0; background-color: white; min-height: 100vh; background-size: cover; } Upon loading the webpage, the font doesn't change. Other things: The folder is found by the app (as in: no unresolved file path or directory), so that shouldn't be the problem. Whenever I add a 'font-family' like Arial to the body in main.css, it DOES change the font on the webpage I have looked at the following existing questions and tried to implement what was suggested in the answers, but it doesn't seem to help. What am I missing? How to add custom font in python-flask? Python-Flask not accepting custom fonts How to add custom fonts to Flask? Thanks.
accepted answer: http://stackoverflow.com/a/78931303
tagged with: http://stackoverflow.com/tag/html
answer count: 1
tagged with: python-3.x
linked to: http://stackoverflow.com/q/62976843
linked to: http://stackoverflow.com/q/40013987

bootstrap-5
tags question: http://stackoverflow.com/q/78996044
tags question: http://stackoverflow.com/q/79044235
tags question: http://stackoverflow.com/q/79052029
tags question: http://stackoverflow.com/q/79040651
tags question: http://stackoverflow.com/q/79004964
tags question: http://stackoverflow.com/q/79022741
tags question: http://stackoverflow.com/q/79030647
tags question: http://stackoverflow.com/q/78920900
tags question: http://stackoverflow.com/q/78994787
tags question: http://stackoverflow.com/q/78932299
type: Tag
tags question: http://stackoverflow.com/q/78955699
tags question: http://stackoverflow.com/q/78932108
tags question: http://stackoverflow.com/q/79035449
tags question: http://stackoverflow.com/q/79004360
tags question: http://stackoverflow.com/q/78916733
tags question: http://stackoverflow.com/q/78970924
tags question: http://stackoverflow.com/q/78906921
tag name: bootstrap-5
tags question: http://stackoverflow.com/q/78931755
tags question: http://stackoverflow.com/q/79063993
tags question: http://stackoverflow.com/q/78981277
tags question: http://stackoverflow.com/q/79014379
tags question: http://stackoverflow.com/q/79065331
tags question: http://stackoverflow.com/q/78910515
tags question: http://stackoverflow.com/q/79048994
tags question: http://stackoverflow.com/q/78919468
tags question: http://stackoverflow.com/q/78943230
tags question: http://stackoverflow.com/q/79126504
tags question: http://stackoverflow.com/q/79183921
tags question: http://stackoverflow.com/q/79129921
tags question: http://stackoverflow.com/q/79194635
tags question: http://stackoverflow.com/q/79242891
tags question: http://stackoverflow.com/q/79198469
tags question: http://stackoverflow.com/q/79091588
tags question: http://stackoverflow.com/q/79082926
tags question: http://stackoverflow.com/q/79201838
tags question: http://stackoverflow.com/q/79126119
tags question: http://stackoverflow.com/q/79128675
tags question: http://stackoverflow.com/q/79218607
tags question: http://stackoverflow.com/q/79082907
tags question: http://stackoverflow.com/q/79157236
tags question: http://stackoverflow.com/q/79139611
tags question: http://stackoverflow.com/q/79153246
tags question: http://stackoverflow.com/q/79212666
tags question: http://stackoverflow.com/q/79135053
tags question: http://stackoverflow.com/q/79213307
tags question: http://stackoverflow.com/q/79166246
tags question: http://stackoverflow.com/q/79129133
tags question: http://stackoverflow.com/q/79108174
tags question: http://stackoverflow.com/q/79131219
tags question: http://stackoverflow.com/q/79177137
tags question: http://stackoverflow.com/q/79225816
tags question: http://stackoverflow.com/q/79105803
tags question: http://stackoverflow.com/q/79081959
tags question: http://stackoverflow.com/q/79147947
tags question: http://stackoverflow.com/q/79149320
tags question: http://stackoverflow.com/q/79170579
tags question: http://stackoverflow.com/q/79132852
tags question: http://stackoverflow.com/q/79234947
tags question: http://stackoverflow.com/q/79174527
tags question: http://stackoverflow.com/q/79262569
tags question: http://stackoverflow.com/q/79377317
tags question: http://stackoverflow.com/q/79312743
tags question: http://stackoverflow.com/q/79377562
tags question: http://stackoverflow.com/q/79277166
tags question: http://stackoverflow.com/q/79406976
tags question: http://stackoverflow.com/q/79377941
tags question: http://stackoverflow.com/q/79362870
tags question: http://stackoverflow.com/q/79376758
tags question: http://stackoverflow.com/q/79312403
tags question: http://stackoverflow.com/q/79326479
tags question: http://stackoverflow.com/q/79344842
tags question: http://stackoverflow.com/q/79402842
tags question: http://stackoverflow.com/q/79260929
tags question: http://stackoverflow.com/q/79323965
tags question: http://stackoverflow.com/q/79310042
tags question: http://stackoverflow.com/q/79349162
tags question: http://stackoverflow.com/q/79369802
tags question: http://stackoverflow.com/q/79339144

http://stackoverflow.com/a/79048188
score: 1
upvote count: 1
has body: The only idea I had was to wrap everything in divs and play a little with flexbox. Main change was to wrap icon &amp; button into div with hardcoded height. Not perfect, but result is as expected (just needs pixel adjustments). stackblitz
answers question: http://stackoverflow.com/q/79047869
type: AcceptedAnswer
accepted answer of: http://stackoverflow.com/q/79047869
type: Answer
has comment: http://stackoverflow.com/comment/139384894
has comment: http://stackoverflow.com/comment/139383307
downvote count: 0

http://stackoverflow.com/q/79006007
tagged with: flexbox
has comment: http://stackoverflow.com/comment/139303630
upvote count: 0
type: UnansweredQuestion
favorite count: 0
type: Question
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139304745
answer count: 1
has body: I am creating a site with tabs using style element of tab and tab content. In one of the tabs content, i want to use a flex container to control display of various elements - tables, graphs and text. On a standalone page without the tab, it works fine but when i am trying to use it in the main page within the tabs content, it is stacking up the divs one above the other. My style.css file is as below: // style file for use in all the php files for this site .flex-container { display: flex; flex-wrap: wrap; background-color: DodgerBlue; } .flex-container > div { background-color: #f1f1f1; width: 45%; margin: 5px; text-align: center; line-height: 75px; font-size: 30px; } table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 8px; } tr:nth-child(even) {background-color: #f2f2f2;} /* Style the tab */ .tab { overflow: hidden; border: 1px solid #ccc; background-color: #f1f1f1; } /* Style the buttons that are used to open the tab content */ .tab button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; } /* Change background color of buttons on hover */ .tab button:hover { background-color: #ddd; } /* Create an active/current tablink class */ .tab button.active { background-color: #ccc; } /* Style the tab content */ .tabcontent { display: none; padding: 6px 12px; border: 1px solid #ccc; border-top: none; } .flex-container { display: flex; flex-wrap: wrap; background-color: DodgerBlue; } .flex-container > div { background-color: #f1f1f1; width: 45%; margin: 5px; text-align: center; line-height: 75px; font-size: 30px; } } I am using Chart.js to create graphs and using php javascript for data handling. What am i doing incorrectly? The html file which is not working is as below <?php // Database connection details require_once 'dbconn.php'; ?> Waterfront Trident Current Month History Alarms Trends <?php $sql = "SELECT * FROM pilot_efficiency where Sitename = 'Hercules Tower…
score: -1
has answer: http://stackoverflow.com/a/79007678
tagged with: css
downvote count: 1
has title: flex container not working inside tab content page

focus
tag name: focus
tags question: http://stackoverflow.com/q/79003079
tags question: http://stackoverflow.com/q/79038954
tags question: http://stackoverflow.com/q/78945251
type: Tag
tags question: http://stackoverflow.com/q/79159830

http://stackoverflow.com/comment/139197339
has text: @RohitRajput On a remote web-storage (S4), I updated the question.
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78948123

http://stackoverflow.com/comment/139128906
comment on: http://stackoverflow.com/q/78909194
type: Comment
score: 0
type: QuestionComment
has text: What do you mean by "preloading phase", exactly?

http://stackoverflow.com/q/78948897
has comment: http://stackoverflow.com/comment/139198584
tagged with: css
downvote count: 1
upvote count: 0
type: UnansweredQuestion
favorite count: 0
has comment: http://stackoverflow.com/comment/139198669
tagged with: hover
type: Question
has title: How can I use CSS to create a clickable hover menu?
answer count: 1
tagged with: http://stackoverflow.com/tag/html
has body: I am trying to build a page in html, and I have images overlayed by a transparent background on hover. The hover effect works well, but unfortunately, the links on the overlay are not clickable. I would assume this has to do with the z-index. I have tried changing it, and was able to make the links clickable... but the hover effect became so jittery that actually clicking on the links was no longer possible. I believe this is the result of a circular error of sorts- when the z-index is high enough to make the links clickable, the page assumes I'm not hovering over the original object anymore, thus causing the jittering. I know this is possible in Javascript, but I would like to see if there is a way to fix this in css. Also, currently, my hover effects rely on having the b position as fixed. Here is my code: .grid { width: 100%; display: flex; justify-content: center; align-items: center; margin-top: 10px; flex-wrap: wrap; } * { box-sizing: border-box; margin: 0px; padding: 0px; font-family: sans-serif; } body { font-family: Montserrat, sans-serif; margin: 0; padding: 3rem; background-color: rgb(3, 4, 39); color: white; } .linkhere.fill-div { width: 100%; height: 100%; } .item { position: relative; width: 475px; max-width: 900px; background-color: rgba(3, 4, 39, 0.6); overflow-y: hidden; margin: 10px; h3 { margin: 0; display: block; background-color: rgba(3, 4, 39, 0.6); padding: 1rem; transform: translate3d(0, -100%, 0); transition: transform .4s; } b { position: fixed; top: 20; left: 20; bottom: 10; width: 100%; height: 100%; color: white; z-index: 1; &:hover, &:focus { ~.item__overlay { transform: translate(0, 0); h3 { transform: translate(0, 0); } .item__body { opacity: 1; } } } } } img { width: 100%; height: 100%; display: block; object-fit: cover; } .item__overlay { display: flex; flex-direction: column; justify-content: center; height: 100%; position: absolute; width: 100%; top: 0; transition: transform .4s; color: white; background-color: rgba(3, 4, 39, 0.6)…
has answer: http://stackoverflow.com/a/78949060
score: -1

http://stackoverflow.com/comment/139382313
comment on: http://stackoverflow.com/q/79048295
score: 2
type: Comment
has text: Please always double-check your `@font-face` syntax: urls need to be separated by commas - otherwise your rule is invalidated. Use `src: url('parisienne-regular.woff2') format('woff2'), url('parisienne-regular.woff') format('woff');` Prioritize the woff2 (or ditch the woff completely - no reason to include it nowadays) src otherwise a browser will load the less compressed woff file. As commented before: triple/quadruple check your file paths via dev tools network tab.
type: QuestionComment

http://stackoverflow.com/comment/139368715
comment on: http://stackoverflow.com/q/79025318
type: Comment
score: 0
type: QuestionComment
has text: I added the picture. can you please check it @La Ngoc Hai

http://stackoverflow.com/comment/139403627
type: AnswerComment
comment on: http://stackoverflow.com/a/79051989
has text: I tried that too, mate. Doesn't work. Reader Mode removes all styles. So this has to be done without CSS. I imagine only using HTML.
type: Comment
score: 0

http://stackoverflow.com/comment/139459682
type: Comment
score: 0
type: AnswerComment
has text: What's the problem with my trying to avoid CSS injection attacks? But, for your benefit, let me explain. I have a contenteditable HTML editor where users can also view and edit the raw HTML where necessary. At the moment I sanitize by removing tags like and attributes like style and onXXX to sanitise it, and also I use CSP to ban inline scripts, styles etc. but I want to allow users to choose text colors, which means allowing inline styles. So I want to make sure they don't manually insert anything unpleasant.
comment on: http://stackoverflow.com/a/79057991

http://stackoverflow.com/q/78966048
has comment: http://stackoverflow.com/comment/139230475
favorite count: 0
tagged with: streamlit
tagged with: http://stackoverflow.com/tag/html
type: Question
upvote count: 2
has title: How to change background color of st.text_input() in streamlit?
answer count: 1
score: 2
type: AnsweredQuestion
tagged with: python
has comment: http://stackoverflow.com/comment/139230584
has comment: http://stackoverflow.com/comment/139230489
tagged with: css
downvote count: 0
has body: I am trying to change the background color of st.text_input() box but unable to do so. I am not from web/app development background or with any html css skills so please excuse my naive or poor understanding in this field. So far I have tried: using this link test_color = st.write('test color') def text_input_color(url): st.markdown( f' {url} ', unsafe_allow_html=True ) text_input_color("test_color") Above code works on st.write() but not on st.text_input() I have also come across this link so using this approach and I have modified css for Textinput instead of stForm but this also didn't work and I am not sure what id to use for text input css=""" """ Below is the inspect element screenshot of the webapp:
has answer: http://stackoverflow.com/a/78978395
accepted answer: http://stackoverflow.com/a/78978395

http://stackoverflow.com/comment/139136545
type: Comment
score: 0
comment on: http://stackoverflow.com/a/78915335
type: AnswerComment
has text: For additional information, you might use [position](https://developer.mozilla.org/en-US/docs/Web/CSS/position) documentation to understand how positioning works.

vue.js
tags question: http://stackoverflow.com/q/79059436
tags question: http://stackoverflow.com/q/78941336
tags question: http://stackoverflow.com/q/78978700
tags question: http://stackoverflow.com/q/78933187
type: Tag
tags question: http://stackoverflow.com/q/79030788
tags question: http://stackoverflow.com/q/79025318
tag name: vue.js
tags question: http://stackoverflow.com/q/79060035
tags question: http://stackoverflow.com/q/78911259
tags question: http://stackoverflow.com/q/79047851
tags question: http://stackoverflow.com/q/79152293
tags question: http://stackoverflow.com/q/79174992
tags question: http://stackoverflow.com/q/79137836
tags question: http://stackoverflow.com/q/79157033
tags question: http://stackoverflow.com/q/79102755
tags question: http://stackoverflow.com/q/79170251
tags question: http://stackoverflow.com/q/79232538
tags question: http://stackoverflow.com/q/79200344
tags question: http://stackoverflow.com/q/79098050
tags question: http://stackoverflow.com/q/79139573
tags question: http://stackoverflow.com/q/79220582
tags question: http://stackoverflow.com/q/79141047
tags question: http://stackoverflow.com/q/79114186
tags question: http://stackoverflow.com/q/79397913
tags question: http://stackoverflow.com/q/79374767
tags question: http://stackoverflow.com/q/79348806
tags question: http://stackoverflow.com/q/79277271
tags question: http://stackoverflow.com/q/79416530
tags question: http://stackoverflow.com/q/79280735
tags question: http://stackoverflow.com/q/79256298
tags question: http://stackoverflow.com/q/79390339
tags question: http://stackoverflow.com/q/79398125
tags question: http://stackoverflow.com/q/79288295
tags question: http://stackoverflow.com/q/79356875
tags question: http://stackoverflow.com/q/79251100
tags question: http://stackoverflow.com/q/79330315
tags question: http://stackoverflow.com/q/79261216
tags question: http://stackoverflow.com/q/79261133
tags question: http://stackoverflow.com/q/79391936
tags question: http://stackoverflow.com/q/79384569
tags question: http://stackoverflow.com/q/79375508
tags question: http://stackoverflow.com/q/79329692
tags question: http://stackoverflow.com/q/79395140
tags question: http://stackoverflow.com/q/79289182
tags question: http://stackoverflow.com/q/79281458
tags question: http://stackoverflow.com/q/79260936
tags question: http://stackoverflow.com/q/79417475
tags question: http://stackoverflow.com/q/79346081
tags question: http://stackoverflow.com/q/79394964
tags question: http://stackoverflow.com/q/79413290
tags question: http://stackoverflow.com/q/79337623
tags question: http://stackoverflow.com/q/79462361
tags question: http://stackoverflow.com/q/79533571
tags question: http://stackoverflow.com/q/79438197
tags question: http://stackoverflow.com/q/79539371
tags question: http://stackoverflow.com/q/79439761
tags question: http://stackoverflow.com/q/79497187
tags question: http://stackoverflow.com/q/79433746
tags question: http://stackoverflow.com/q/79454338
tags question: http://stackoverflow.com/q/79502512
tags question: http://stackoverflow.com/q/79545795

http://stackoverflow.com/comment/139415438
comment on: http://stackoverflow.com/a/79064784
has text: And **always** post your [mcve] here, not on another site.
type: Comment
score: 0
type: AnswerComment

http://stackoverflow.com/comment/139178203
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78937609
has text: Not working I am getting error in ```sliderContainer.addEventListener('scroll', () => {``` this line
type: Comment

http://stackoverflow.com/q/79018085
has answer: http://stackoverflow.com/a/79018538
has comment: http://stackoverflow.com/comment/139326028
has title: How can I stop my count if the timer hits 00:00?
type: UnansweredQuestion
has body: I am currently programing an app as a project. While doing so I just got into Javascript yesterday and I am having an issue to stop my count. What is my program doing: You can see an image, which you have to click on. With every click the count gets +1. While doing so, a time of 30sec is running down and showing on the screen as well. What do I want to reach: I got everything working so far. The timer is working perfectly, the count is working while I am clicking on the image. But what I can't get to work is that the image should not be click-able anymore after the timer hits 00:00 and the count should stay at the last reached number, so I can put it into a highscore list. It's especially about this part: function blobPress() { if (timeLeft > 0) { count++; document.getElementById("count").innerHTML = count; } else { blob.style.display = "block"; } } let alarm = new Audio('alarm.mp3'); let finish = new Audio('finish.mp3'); let timerStarted = false; let count = 0; function startTimer() { if (!timerStarted) { let startTime = new Date().getTime(); let thirtySeconds = 1000 * 30; let endTime = startTime + thirtySeconds; alarm.play(); let refreshInterval = setInterval(function() { let timeLeft = endTime - new Date().getTime(); if (timeLeft > 0) { let minutes = timeLeft / (1000 * 60); minutes = Math.floor(minutes); let seconds = (timeLeft / 1000) % 60; seconds = Math.round(seconds); seconds = ('0' + seconds).slice(-2); let text = '0' + minutes + ' : ' + seconds; timer.innerHTML = text; } else { finish.play(); timer.innerHTML = '00 : 00'; clearInterval(refreshInterval); } }, 1000); timerStarted = true; } } function showCount() { if (timerStarted) { document.getElementById('count').style.color = "white"; } else { document.getElementById('count').style.color = "#262626"; } } function hideButton() { if (button.style.display === "none") { button.style.display = "block"; } else { button.style.display = "none"; } } function blobPress() { if (timeLeft > 0) { count++; document.getEl…
favorite count: 0
has comment: http://stackoverflow.com/comment/139326041
has comment: http://stackoverflow.com/comment/139326465
has comment: http://stackoverflow.com/comment/139326056
has answer: http://stackoverflow.com/a/79018993
has comment: http://stackoverflow.com/comment/139326572
tagged with: http://stackoverflow.com/tag/html
linked to: http://stackoverflow.com/q/5871640
type: Question
upvote count: 2
has comment: http://stackoverflow.com/comment/139326471
score: 2
has comment: http://stackoverflow.com/comment/139326044
tagged with: timer
answer count: 2
tagged with: count
tagged with: javascript
tagged with: css
downvote count: 0
has comment: http://stackoverflow.com/comment/139326018

http://stackoverflow.com/comment/139317757
type: AnswerComment
score: 1
has text: I've edited your answer to make std select and Select2 span the remaining width of the line; Also, I used the `.select2-hidden-accessible` class to target the hidden select of Select2 specifically
type: Comment
comment on: http://stackoverflow.com/a/79012509

http://stackoverflow.com/q/79039123
tagged with: css
has title: Div is getting extended even that it has defined width
has comment: http://stackoverflow.com/comment/139364375
type: UnansweredQuestion
type: Question
has body: I'm feeling pretty stupid with this question, but I spent a complete morning and couldn't really understand what happens. Here is my component code : export default function Summary({ activation }: SummaryProps) { const t = useTranslations("ActivationPage.summary"); const tCommon = useTranslations("Common"); const toast = useToast(); return ( {t("activation_key")} { event.stopPropagation(); navigator.clipboard.writeText(activation.activation_key); toast({ type: "info", message: tCommon("actions.copied"), id: "idCopied", }); }} > <Copy className="h-4 w-4" /> {activation.activation_key} {t("machine_num")} <Hash className="h-6 w-6" /> {activation.machine_num} {t("host_id")} { event.stopPropagation(); navigator.clipboard.writeText(activation.host_id); toast({ type: "info", message: tCommon("actions.copied"), id: "idCopied", }); }} > <Copy className="h-4 w-4" /> {activation.host_id} {t("end_date")} <Hash className="h-6 w-6" /> {activation.machine_num} ); } This code represent a page with some cards on headers, with quick look informations. I want each line to be on only one line, and being truncated if it's too long. When working with my activation_keys, everything looks fine. However, when I use the host_id (on the third card), my page is exploding width, creating a horizontal scroll, but the host_id is still truncated. I don't understand why at some point it gets broke by the fact that a string is longer than an other one. Here's 2 picture, the first one working, the second has the bug : I tried many things using break-all, whitespace-nowrap, truncate, .... But none satisfied the problem. I also tried using w-1/4 on Cards containers, but it didn't change nothing I'm using shadcn cards (not updated them) and tailwindcss. This is a nextjs project. EDIT : I found a partial solution (but not the core problem). Limiting my div width with max-w-[30ch] make things work well. But I don't understand why it does. It keeps truncating the text (as exeptected) but not making the pa…
answer count: 1
tagged with: tailwind-css
has answer: http://stackoverflow.com/a/79039692
score: 0
has comment: http://stackoverflow.com/comment/139364404
tagged with: next.js

http://stackoverflow.com/q/78917961
has body: I have this reference website called pipe.com and I'm so impressed with the bounce effect of the first section after the banner (see attached photo and please try to hover on the card on their website). I'm having difficulty on achieving the same effect. Is there anyone who can guide me to do this? I'm building the website on WebFlow Right now I have this: document.addEventListener("DOMContentLoaded", function() { const item1 = document.getElementById("item1"); const items = document.querySelectorAll(".item"); item1.classList.add("initial"); items.forEach(item => { if (item.id !== "item1") { item.addEventListener("mouseenter", () => { if (window.innerWidth > 786) { // Only apply hover effects if screen width is larger than 768px items.forEach(i => i.classList.remove("hovered")); item.classList.add("hovered"); item1.classList.remove("initial"); const initialContent = item1.querySelector('.initial-content'); const hiddenContent = item1.querySelector('.hidden-content'); if (initialContent) initialContent.style.display = 'none'; if (hiddenContent) hiddenContent.style.display = 'block'; } }); item.addEventListener("mouseleave", () => { if (window.innerWidth > 786) { // Only apply hover effects if screen width is larger than 768px items.forEach(i => i.classList.remove("hovered")); item1.classList.add("initial"); const initialContent = item1.querySelector('.initial-content'); const hiddenContent = item1.querySelector('.hidden-content'); if (initialContent) initialContent.style.display = 'block'; if (hiddenContent) hiddenContent.style.display = 'none'; } }); } }); }); var mobilevideo = document.getElementsByTagName("video")[0]; mobilevideo.setAttribute("playsinline", ""); mobilevideo.setAttribute("muted", ""); .ccontainer { display: flex; justify-content: space-between; padding: 20px; gap: 15px; height: 100%; flex-direction: row; } .item { display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 30%; border-radius: 20px; overflow: hidd…
tagged with: webflow
tagged with: css
accepted answer: http://stackoverflow.com/a/78918132
has title: Slow Bouncy Effect on Hover using CSS and JS
score: 1
favorite count: 0
tagged with: css-transitions
type: Question
answer count: 1
type: AnsweredQuestion
tagged with: http://stackoverflow.com/tag/html
downvote count: 0
has answer: http://stackoverflow.com/a/78918132
tagged with: javascript
upvote count: 1

http://stackoverflow.com/a/78960003
accepted answer of: http://stackoverflow.com/q/78959297
score: 1
type: AcceptedAnswer
has body: I found the solution credit to this stack The solution is to put a Video Object inside DIV and apply CSS to that DIV #div_selector { margin-left: 50px; margin-right: 50px; margin-top: 50px; border-radius: 25px; overflow: hidden; }
downvote count: 0
type: Answer
answers question: http://stackoverflow.com/q/78959297
upvote count: 1

http://stackoverflow.com/q/78960567
tagged with: javascript
score: 0
has answer: http://stackoverflow.com/a/78960583
tagged with: css
has comment: http://stackoverflow.com/comment/139220359
has comment: http://stackoverflow.com/comment/139221340
has body: I need to find a way of finding out whether the inner child element's width exceeds that of the parent element. The following is my code. &lt;section class=&quot;anchor-links&quot;&gt; &lt;div class=&quot;container&quot;&gt; &lt;div class=&quot;wrapper&quot;&gt; &lt;div class=&quot;content&quot;&gt; &lt;img decoding=&quot;async&quot; class=&quot;left-arrow&quot; src=&quot;http://staging.slattery.co.uk/wp-content/uploads/2024/06/burgundy.svg&quot;&gt; &lt;div class=&quot;anchor-row&quot;&gt; &lt;div class=&quot;anchor-link&quot;&gt; &lt;a href=&quot;#breakfast-and-sandwiches&quot;&gt;&lt;h3&gt;Breakfast &amp;amp; Sandwiches&lt;/h3&gt;&lt;/a&gt; &lt;/div&gt; &lt;div class=&quot;anchor-link&quot;&gt; &lt;a href=&quot;#on-toast&quot;&gt;&lt;h3&gt;On Toast&lt;/h3&gt;&lt;/a&gt; &lt;/div&gt; &lt;div class=&quot;anchor-link&quot;&gt; &lt;a href=&quot;#egg-dishes&quot;&gt;&lt;h3&gt;Egg&lt;/h3&gt;&lt;/a&gt; &lt;/div&gt; &lt;div class=&quot;anchor-link&quot;&gt; &lt;a href=&quot;#morning-goods&quot;&gt;&lt;h3&gt;Morning Goods&lt;/h3&gt;&lt;/a&gt; &lt;/div&gt; &lt;div class=&quot;anchor-link&quot;&gt; &lt;a href=&quot;#extras&quot;&gt;&lt;h3&gt;Extras&lt;/h3&gt;&lt;/a&gt; &lt;/div&gt; &lt;div class=&quot;anchor-link&quot;&gt; &lt;a href=&quot;#sweet-choices&quot;&gt;&lt;h3&gt;Sweet Choices&lt;/h3&gt;&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;img decoding=&quot;async&quot; class=&quot;right-arrow&quot; src=&quot;http://staging.slattery.co.uk/wp-content/uploads/2024/06/burgundy.svg&quot;&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/section&gt; Essentially, the arrow images should only show to indicate when there are more options to show (when there is an overflow). Take a look at the images below. Image 1 requires no arrows because the menu does not overflow whereas image 2 will need the arrows as the image overflows. image 1 - no arrows needed image 2 - arrows needed Thank you in advance I tried the following code if(document.querySelector('.page-id-1065') || document.querySele…
type: UnansweredQuestion
tagged with: http://stackoverflow.com/tag/html
type: Question
answer count: 1
has title: How can I tell when the width of an inner element exceed that of the outer element

http://stackoverflow.com/a/79059131
has comment: http://stackoverflow.com/comment/139400684
type: Answer
score: 0
answers question: http://stackoverflow.com/q/79059017
accepted answer of: http://stackoverflow.com/q/79059017
has body: You are applying your gradient to a rect element, but there is no rect in the HTML. I assume you are trying to apply it to the path, like this: path { cursor: pointer; shape-rendering: crispEdges; fill: url(#MyGradient); } .custom-shape-divider-bottom-1728146501 { position: relative; bottom: 0; left: 0; width: 100%; overflow: hidden; line-height: 0; transform: rotate(180deg); } .custom-shape-divider-bottom-1728146501 svg { position: relative; display: block; width: calc(134% + 1.3px); height: 150px; } <stop offset="5%" stop-color="#ffd194" /> <stop offset="95%" stop-color="#70e1f5" />
type: AcceptedAnswer

http://stackoverflow.com/a/78974124
score: 0
answers question: http://stackoverflow.com/q/78974046
has body: I don't know why escape characters were being used, but here's a method without them. element1 = document.getElementById("test1") element2 = document.getElementById("test2") element1.style.setProperty("font-family", "Lato, Helvetica Neue, Helvetica;") //and element2.setAttribute("style", "font-family:Lato, Helvetica Neue, Helvetica;") Test1 Test2
type: Answer

http://stackoverflow.com/a/78989599
has comment: http://stackoverflow.com/comment/139274497
has comment: http://stackoverflow.com/comment/139273863
has comment: http://stackoverflow.com/comment/139274201
accepted answer of: http://stackoverflow.com/q/78989508
type: AcceptedAnswer
score: 2
has body: Use clip-path to remove the bottom/top shadow from .block1/.block2 like this: body { padding: 50px; } .block1 { padding: 20px; border-width: 1px 1px 0 1px; border-style: solid; border-radius: 4px 4px 0 0; border-color: #d5dce3; box-shadow: 0 0 2px #00000017,0 5px 25px #0000000a,0 1px 5px #040b170a; clip-path: inset(-25px -25px 0 -25px); } .block2 { padding: 20px; border-width: 0 1px 1px 1px; border-style: solid; border-radius: 0 0 4px 4px; border-color: #d5dce3; box-shadow: 0 0 2px #00000017,0 5px 25px #0000000a,0 1px 5px #040b170a; clip-path: inset(0 -25px -25px -25px); } &lt;div class="block1"&gt; Block 1 &lt;/div&gt; &lt;div class="block2"&gt; Block 2 &lt;/div&gt; To get rid of the line between blocks that is caused by a rounding-type error (as mentioned by @AHaworth) we can use a slightly more complex clip-path using polygon (adjust the value 25px if needed, or use a CSS variable): body { padding: 50px; } .block1 { padding: 20px; border-width: 1px 1px 0 1px; border-style: solid; border-radius: 4px 4px 0 0; border-color: #d5dce3; box-shadow: 0 0 2px #00000017, 0 5px 25px #0000000a, 0 1px 5px #040b170a; clip-path: polygon(-25px -25px, calc(100% + 25px) -25px, calc(100% + 25px) 100%, calc(100% - 1px) 100%, calc(100% - 1px) calc(100% - 1px), 1px calc(100% - 1px), 1px 100%, -25px 100%); } .block2 { padding: 20px; border-width: 0 1px 1px 1px; border-style: solid; border-radius: 0 0 4px 4px; border-color: #d5dce3; box-shadow: 0 0 2px #00000017, 0 5px 25px #0000000a, 0 1px 5px #040b170a; clip-path: polygon(-25px 0, 1px 0, 1px 1px, calc(100% - 1px) 1px, calc(100% - 1px) 0, calc(100% + 25px) 0, calc(100% + 25px) calc(100% + 25px), -25px calc(100% + 25px)); } &lt;div class="block1"&gt; Block 1 &lt;/div&gt; &lt;div class="block2"&gt; Block 2 &lt;/div&gt;
type: Answer
answers question: http://stackoverflow.com/q/78989508
has comment: http://stackoverflow.com/comment/139273756
downvote count: 1
upvote count: 3
has comment: http://stackoverflow.com/comment/139274783

http://stackoverflow.com/comment/139158241
score: 0
type: AnswerComment
has text: here `getComputedStyles` will read all styles. that's sort of unnecessary right just to check one single property. @OMiShah comment will be easier than this I guess.
type: Comment
comment on: http://stackoverflow.com/a/78926787

http://stackoverflow.com/comment/139155977
comment on: http://stackoverflow.com/q/78925311
type: QuestionComment
type: Comment
score: 0
has text: @JaredJensen as Kiko pointed out, you must use `break-inside` not `page-break-inside` and `break-after` not `page-break-after`. Also you can use `@media print` media queries to add styles specifically for printing; I don't know if it would make any difference in this context, just throwing around ideas as without a way to replicate is very hard to point a solution

font-face
tags question: http://stackoverflow.com/q/79013530
tag name: font-face
type: Tag
tags question: http://stackoverflow.com/q/79023236
tags question: http://stackoverflow.com/q/78993739
tags question: http://stackoverflow.com/q/79176091
tags question: http://stackoverflow.com/q/79189186
tags question: http://stackoverflow.com/q/79074714
tags question: http://stackoverflow.com/q/79201587
tags question: http://stackoverflow.com/q/79339313
tags question: http://stackoverflow.com/q/79369590
tags question: http://stackoverflow.com/q/79468235

http://stackoverflow.com/comment/139204016
type: Comment
comment on: http://stackoverflow.com/q/78951104
type: QuestionComment
score: 1
has text: Is your theme lacking some CSS settings? I guess you've inspected in the browser devtools to see exactly what CSS is being applied and from where?

http://stackoverflow.com/q/79013991
answer count: 2
possible better answer: http://stackoverflow.com/a/79014025
has answer: http://stackoverflow.com/a/79014051
tagged with: css
favorite count: 0
type: Question
has answer: http://stackoverflow.com/a/79014025
tagged with: http://stackoverflow.com/tag/html
upvote count: 4
has title: How to prevent child from rotating with parent during the transition?
type: AnsweredQuestion
has body: I'm trying to rotate a parent circle and negate the effect on its children. I tried to negate the effect by using transform: translate(-50%, -50%) rotate(calc(var(--i) * -60deg)) translateY(150px) rotate(calc(var(--i) * 60deg - var(--rotation))) but the children will rotate 60deg at the start of the transition. How to prevent them from rotating completely duration the transition? const circle = document.getElementById('circle'); let deg = 0; function rotate() { deg += 60; circle.style.cssText = `--rotation: ${deg}deg`; } .circle { border: 2px solid #ccc; border-radius: 50%; height: 300px; margin: 40px auto 0; transform: rotate(var(--rotation)); transition: transform 1000ms ease; position: relative; width: 300px; } .item { align-items: center; background: red; border: 2px solid #fff; border-radius: 50%; display: flex; height: 30px; justify-content: center; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%) rotate(calc(var(--i) * -60deg)) translateY(150px) rotate(calc(var(--i) * 60deg - var(--rotation))); width: 30px; } .btn { align-items: center; background: lawngreen; display: flex; height: 30px; justify-content: center; width: 100px; } 1 2 3 4 5 6 rotate
score: 4
accepted answer: http://stackoverflow.com/a/79014051
downvote count: 0
tagged with: javascript

http://stackoverflow.com/q/78957279
tagged with: php
tagged with: css
has title: Div height does not extend in pages other than the first one
has answer: http://stackoverflow.com/a/78957395
has comment: http://stackoverflow.com/comment/139214300
type: UnansweredQuestion
score: 0
has comment: http://stackoverflow.com/comment/139213901
type: Question
tagged with: mpdf
tagged with: http://stackoverflow.com/tag/html
answer count: 1
has comment: http://stackoverflow.com/comment/139213928
has body: I'm using MPDF. I set content div height to 100% so that it extends to the end of page. It works great on the first page. However in case the content is lengthy that needs to extend to more than one page this property seems not work on pages other than the first one. Header Page {PAGENO} of {nbpg} 1. Arsenal Football Club, established in 1886, is one of the most storied and successful football clubs in England. Based in Islington, North London, the club has a rich history characterized by numerous domestic and international achievements. Arsenal has won the English Premier League multiple times and boasts a significant number of FA Cup victories, making it one of the most decorated clubs in English football. The team's iconic red and white colors, along with its passionate fan base, contribute to its reputation as a formidable force in the sport. 2. The club's home ground, the Emirates Stadium, opened in 2006 and has a seating capacity of over 60,000, providing a modern and vibrant atmosphere for supporters. Arsenal is known for its attacking style of play and has produced many legendary players, including Thierry Henry, Dennis Bergkamp, and Tony Adams, who have left an indelible mark on the club's legacy. The team's commitment to developing young talent through its academy has also been a hallmark of its philosophy, ensuring a continuous influx of skilled players. 3. Arsenal's rivalry with clubs such as Tottenham Hotspur, known as the North London Derby, adds to the excitement of the Premier League. The club has a global following, with fans from various countries passionately supporting the team. As Arsenal continues to compete at the highest levels of English and European football, it remains dedicated to its core values of excellence, community engagement, and sportsmanship, striving to add more trophies to its illustrious history. 1. Arsenal Football Club, established in 1886, is one of the most storied and successful football clubs in England. Based in Islingt…

mime-message
tag name: mime-message
type: Tag
tags question: http://stackoverflow.com/q/78910465

http://stackoverflow.com/comment/139267964
type: Comment
score: 0
type: AnswerComment
has text: Thank you for your answer but this still does not seem to work. Still the 2nd image is set to be size 0 sometimes. Does it make any difference that my above code is actually loaded as in an iframe?
comment on: http://stackoverflow.com/a/78986466

http://stackoverflow.com/a/78995645
has body: You may also try to filter popover-open and reset pointer-events on a few elements : CSS idea is: ::backdrop { background: rgba(255, 255, 255, 0.4); backdrop-filter: grayscale(40%) blur(3px); } /* filter element not supposed to catch mouse events */ body:has(:popover-open) :is(button, a) { pointer-events: none; } /* then allow click from #mypopover */ div[popover] :is(button, a) { pointer-events: auto; } Show popover Popover content link in popover Click anywhere outside this box to close the popup Links HTML Ipsum Presents Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Header Level 2 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam tincidunt mauris eu risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est. Header Level 3 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam tincidunt mauris eu risus. #header h1 a { display: block; width: 300px; height: 80px; } Look at https://developer.mozilla.org/en-US/docs/Web/CSS/:popover-open to find your own use caniuse ? https://caniuse.com/?search=%3Apopover-open
has comment: http://stackoverflow.com/comment/140101584
answers question: http://stackoverflow.com/q/78995412
has comment: http://stackoverflow.com/comment/140100580
score: 1
has comment: http://stackoverflow.com/comment/140103478
type: Answer
downvote count: 0
upvote count: 1
has comment: http://stackoverflow.com/comment/140104058

http://stackoverflow.com/comment/139274769
type: Comment
has text: have you tried `@container` query?
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78989661

http://stackoverflow.com/a/78932544
answers question: http://stackoverflow.com/q/78932524
downvote count: 0
type: Answer
has comment: http://stackoverflow.com/comment/139169377
has comment: http://stackoverflow.com/comment/139169273
upvote count: 1
has comment: http://stackoverflow.com/comment/139169122
has body: As mentioned in MDN, initial-value is required for @property to be valid, unless the value for syntax is *, which is not your case. The @property rule must include both the syntax and inherits descriptors; if either are missing, the entire @property rule is invalid and ignored. The initial-value descriptor is also required, unless the syntax is the * universal syntax definition (e.g., syntax: &quot;*&quot;). If the initial-value descriptor is required and omitted, the entire @property rule is invalid and ignored. /*Valid example*/ @property --grid-columns { syntax: &quot;&lt;integer&gt;&quot;; inherits: false; initial-value: 1; } Interestinly discussed in Noleli's post, the fallback value 1 of var(--grid-columns, 1) in your code will only be used if --grid-columns is not correctly defined (such as missing initial-value in your case), or when the initial-value is invalid, such as using 'a' when its an integer.
score: 1

http://stackoverflow.com/a/78960452
type: Answer
downvote count: 0
answers question: http://stackoverflow.com/q/78960154
accepted answer of: http://stackoverflow.com/q/78960154
upvote count: 1
has body: Currently, whenever you press a button, you event handler toggles every .share-icon div. What you want to do is toggle only the one that is a sibling of the clicked button. Also, you want to hide all the other ones. To do so, use $(this) to refer to the clicked button (NB : answers to the thers questions are also in the following code) jQuery(document).ready(function() { $('.loop-item .share-btn').click(function() { let clicked_btn = $(this); //toggle the wanted share-icon clicked_btn.siblings(".share-icon").toggle(); //hide all other .share-icon clicked_btn.siblings(".share-icon").addClass("active"); $(".loop-item .share-icon:not(.active)").hide() $(".loop-item .share-icon.active").removeClass("active"); }); //hide all share-icon when you click outside of a share-icon $("body").click(function(event) { if (!event.target.closest(".share-icon,.share-btn")) { $(".loop-item .share-icon").hide(); } }) }); &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"&gt;&lt;/script&gt; event.target.closest(selector) gets the closest element targeted by your click that matches your selector
score: 1
type: AcceptedAnswer

http://stackoverflow.com/q/79057749
tagged with: http://stackoverflow.com/tag/html
has answer: http://stackoverflow.com/a/79058122
has title: When I try to create a new button, it doesn't duplicate
has answer: http://stackoverflow.com/a/79057950
upvote count: 1
score: 0
answer count: 2
tagged with: javascript
has comment: http://stackoverflow.com/comment/139398861
has body: I want to create a remove button in each row of a table, so I created a removeButton element in JavaScript and appended it to each row. However, it moves to the last row whenever I create new rows. Here is my table Here is my table when i create a new row Code: I created a removeButton element: const removeButton = document.createElement("button"); removeButton.innerText = "Remove book"; removeButton.className = "table__remove-btn"; And append it to each row when update the table: function updateTable() { table.innerHTML = " Title Author Pages Is read? "; if (myLibrary.length != 0) { const tableContent = document.createDocumentFragment(); myLibrary.forEach((value) => { const tableRow = document.createElement("tr"); const titleCell = document.createElement("td"); const title = document.createElement("p"); const author = document.createElement("td"); const pages = document.createElement("td"); const isRead = document.createElement("td"); title.innerText = value.title; titleCell.appendChild(title); titleCell.appendChild(removeButton); // <------------------- Here! titleCell.className = "table__title-cell"; tableRow.appendChild(titleCell); author.innerText = value.author; tableRow.appendChild(author); pages.innerText = value.pages; tableRow.appendChild(pages); isRead.innerText = value.isRead ? "Yes" : "No"; tableRow.appendChild(isRead); tableContent.appendChild(tableRow); }); table.appendChild(tableContent); } } How i can solve it? I want to have the removeButton on each row
tagged with: css
downvote count: 1
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139398130
favorite count: 0
type: Question

http://stackoverflow.com/comment/139391916
has text: why you don't add a class to that image?
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/79054258

http://stackoverflow.com/comment/139385364
score: 0
has text: This SVG pasted here is static, but the real one is built with PHP on the fly so the styling attributes are inline so that they can be changed by the PHP on creation.
type: QuestionComment
comment on: http://stackoverflow.com/q/79044610
type: Comment

http://stackoverflow.com/q/78936697
has body: I am working on a layout where I have some text on the left side and an image on the right side. Below them, I have three smaller images. I want to align the left text and the right image so that they both vertically align with the bottom images. Here is my current layout: As you can see in the image: • The text on the left is higher than the bottom images. • The large image on the right is also higher than the bottom images. What I want to achieve: • I want the text on the left to be vertically aligned with the bottom images. • I also want the large image on the right to be vertically aligned with the bottom images. • The gap between the text and the image should be exactly 160px. I’ve tried adjusting the margins and padding, but I haven’t been able to get the alignment correct. What would be the best approach in CSS to achieve this alignment? I’ve created a Fiddle to demonstrate the issue: https://jsfiddle.net/fptL74bx/ I think the necessary adjustments need to be made in the following section of the CSS code in fiddle. .intro { display: flex; padding-top: 160px; justify-content: center;
has comment: http://stackoverflow.com/comment/139176802
upvote count: 0
downvote count: 2
has comment: http://stackoverflow.com/comment/139176751
has comment: http://stackoverflow.com/comment/139176743
tagged with: css
tagged with: flexbox
tagged with: layout
has comment: http://stackoverflow.com/comment/139176814
type: UnansweredQuestion
favorite count: 0
score: -2
has comment: http://stackoverflow.com/comment/139177071
has answer: http://stackoverflow.com/a/78936756
type: Question
answer count: 1
has comment: http://stackoverflow.com/comment/139176794
has comment: http://stackoverflow.com/comment/139176789
has title: How to vertically align text and image with the bottom elements in CSS?
tagged with: http://stackoverflow.com/tag/html

http://stackoverflow.com/a/78930971
has comment: http://stackoverflow.com/comment/139166135
has comment: http://stackoverflow.com/comment/139166087
answers question: http://stackoverflow.com/q/78930892
has body: You might try: .exp__list__item:not(:hover) .exp__card:first-child { filter: blur(0) !important; } Here's a snippet to test this .exp__card:hover { background-color: #00d20013; border: -1px solid var(--text-primary-color); } .exp__list .exp__card { filter: blur(3px); opacity: .99; } .exp__card:hover { filter: blur(0); opacity: 1; } .exp__list__item:not(:hover) .exp__card:first-child { filter: blur(0) !important; } 2024 - PRESENT Junior Web Developer Build and maintain a website for Dynamic Roofing Solutions Ltd. Working closely with the directors to fulfill their development needs. HTML CSS JavaScript Google Scripts 2024 - PRESENT Junior Web Developer Build and maintain a website for Dynamic Roofing Solutions Ltd. Working closely with the directors to fulfill their development needs. HTML CSS JavaScript Google Scripts
has comment: http://stackoverflow.com/comment/139166072
has comment: http://stackoverflow.com/comment/139166007
type: Answer
score: 0
has comment: http://stackoverflow.com/comment/139165991
has comment: http://stackoverflow.com/comment/139166104

http://stackoverflow.com/q/78954702
tagged with: reactjs
has title: react native - Create a custom curved view (shapes in react native)
has body: I was trying to create a curved layout inside a parent view similar to a tab view with multiple tab. The first view should be curved in a way as shown in the image below. But not able to find out what exactly needs to be done. Here is where i am stuck: import React, {useState} from 'react'; import { View, StyleSheet, Dimensions, TouchableOpacity, Image, } from 'react-native'; import {COLORS, FONTSIZE, IMAGES} from '../../constants'; import {Text} from '../../components'; const windowWidth = Dimensions.get('window').width; const MyTabView: React.FC = () => { const [index, setIndex] = useState<number>(0); const handleTabSelection = (activeIndex: number) => { setIndex(activeIndex); }; return ( <> handleTabSelection(0)} style={[ styles.tabItem, index === 0 ? styles.activeTab : styles.inactiveTab, styles.tab1, ]}> Text handleTabSelection(1)} style={[ styles.tabItem, index === 1 ? styles.activeTab : styles.inactiveTab, styles.tab2, ]}> Text {index === 0 ? ( {[1, 2, 3, 4].map((item, index) => ( <Image key={index} resizeMode="contain" style={styles.image} source={IMAGES.someDummyImage} /> ))} ) : ( Tab body 2 )} </> ); }; const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: 'white', borderTopLeftRadius: 12, borderTopRightRadius: 12, overflow: 'hidden', marginTop: -5, }, tabBar: { flexDirection: 'row', }, tabBarActive: { backgroundColor: 'green', }, tabItem: { width: windowWidth / 2, height: 56, alignItems: 'center', justifyContent: 'center', paddingVertical: 12, }, tab1: { borderTopRightRadius: 20, }, tab2: { borderTopLeftRadius: 0, }, activeTab: { backgroundColor: 'white', // Active tab background color }, inactiveTab: { backgroundColor: '#E9F9F3', // Inactive tab background color }, imagesContainer: { flexDirection: 'row', flexWrap: 'wrap', width: windowWidth, alignItems: 'center', justifyContent: 'center', }, image: { width: 180, height: 92, }, tabBody: { alignItems: 'center', justifyContent: 'center', }, }); export default MyTabView;
tagged with: react-native
tagged with: css
answer count: 0
tagged with: layout
type: UnansweredQuestion
type: Question
tagged with: http://stackoverflow.com/tag/html
score: 0

http://stackoverflow.com/q/78962819
answer count: 1
score: 0
has title: Why is this css sibling selector not selecting all the siblings?
has comment: http://stackoverflow.com/comment/139224453
has comment: http://stackoverflow.com/comment/139227456
tagged with: selector
tagged with: css
has comment: http://stackoverflow.com/comment/139224475
has body: li:has(>label) { background: #0c0; } li~li:has(>label) { border: 4px solid #c0c; } [Item 6.0] [Item 6.1] [Item 6.2] [Item 6.3] [Item 6.4] As I read this, the first selector is selecting lis that have a label as direct descender and the second is selecting all lis that are siblings to a li that has a label. But why is the last selector just selecting items 6.2 and 6.3? It should either select all of them (inclusively all are siblings to a li that has a label) or it should select 6.1 and 6.4 (if it is exclusive). According to this: https://developer.mozilla.org/en-US/docs/Web/CSS/Subsequent-sibling_combinator They dont have to be next to each other, just share the same parent. Which they do.
type: UnansweredQuestion
tagged with: siblings
type: Question
has comment: http://stackoverflow.com/comment/139224505
has answer: http://stackoverflow.com/a/78962872

http://stackoverflow.com/a/78916318
has body: Play with margin: .flex { display: flex; } .flex .item { margin-inline: auto; } .flex :nth-child(1 of .item) { margin-left: 5px; /* the tiny margin after the excluded item */ } .flex :nth-last-child(1 of .item) { margin-right: 0; /* last item with 0 margin right */ } exclude item item item item
answers question: http://stackoverflow.com/q/78915295
has comment: http://stackoverflow.com/comment/139139099
has comment: http://stackoverflow.com/comment/139140858
type: Answer
has comment: http://stackoverflow.com/comment/139138969
score: 0

http://stackoverflow.com/comment/139281401
comment on: http://stackoverflow.com/q/78993739
score: 1
has text: @HadoMonkey This honestly begs the question: why can't you put the file where it can be found, so you don't need to mess with that setting?
type: Comment
type: QuestionComment

http://stackoverflow.com/comment/139356790
type: Comment
type: QuestionComment
comment on: http://stackoverflow.com/q/79035000
score: 0
has text: You've tagged this with [tag:jquery], have you tried `this`?

http://stackoverflow.com/q/79059017
type: AnsweredQuestion
score: 0
tagged with: css
has title: to apply gradient in triangular form in background of a webpage
has body: Im trying to prepare a website but got an error that background gradient is not getting applied to the custom shape. I read all the questions available here but none solved the issue. i tried different ways one of it is mentioned below.... please help me to learn this process <stop offset="5%" stop-color="#ffd194" /> <stop offset="95%" stop-color="#70e1f5" /> In css rect { cursor: pointer; shape-rendering: crispEdges; fill: url(#MyGradient); } .custom-shape-divider-bottom-1728146501 { position: relative; bottom: 0; left: 0; width: 100%; overflow: hidden; line-height: 0; transform: rotate(180deg); } .custom-shape-divider-bottom-1728146501 svg { position: relative; display: block; width: calc(134% + 1.3px); height: 150px; }
has answer: http://stackoverflow.com/a/79059131
accepted answer: http://stackoverflow.com/a/79059131
tagged with: http://stackoverflow.com/tag/html
type: Question
answer count: 1

http://stackoverflow.com/a/79072990
score: 0
has body: In the end, I managed to fix it by creating a div element between main and the sections. main can now have overflow: hidden resulting in scrollbars in the slide's content. And main's sole child element (i.e. the div) has all slider related styling like the transform: translateX(...). This works perfectly fine: const slider = document.querySelector('main > div.slider'); function openSlide(slide) { slider.style.transform = `translateX(-${slide * 100}vw)`; } window.addEventListener('keydown', function(event) { if (['ArrowLeft', 'ArrowRight'].includes(event.key)) { event.key === 'ArrowLeft' ? openSlide(0) : openSlide(1); event.preventDefault(); } }); openSlide(0); *, *::before, *::after { box-sizing: border-box; } html, body { font-family: sans-serif; margin: 0; padding: 0; overflow: hidden; } body { width: 100%; height: 100vh; font-size: 7vh; display: flex; flex-direction: column; } nav { padding: 2vh; } main { display: flex; flex-grow: 1; overflow: hidden; } main > div.slider { display: flex; flex-direction: row; flex-wrap: nowrap; transition: transform 0.6s ease-in-out; } section.slide { padding: 2vh; min-width: 100vw; max-width: 100vw; display: flex; flex-flow: row nowrap; } section.slide .left { width: 55vw; display: flex; flex-flow: column nowrap; overflow-y: auto; } section.slide .left > div { background-color: yellow; margin-bottom: 5vh; } section.slide .right { width: 45vw; display: flex; flex-flow: column nowrap; overflow-y: auto; } section.slide .right > div { background-color: red; margin-bottom: 5vh; } Navigation - press left or right arrow Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla felis lorem, ullamcorper sed porttitor non, hendrerit aliquet nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In interdum varius leo non maximus. Morbi quis dui tellus. Praesent at quam et metus fringilla volutpat ut eu justo. Phasellus at odio non ante consectetur aliquam. Fusce congue ultrices ante, eu sollicitudin lectus tristique sed. Sed n…
type: AcceptedAnswer
answers question: http://stackoverflow.com/q/79067391
type: Answer
accepted answer of: http://stackoverflow.com/q/79067391

http://stackoverflow.com/q/78959474
has comment: http://stackoverflow.com/comment/139219357
has comment: http://stackoverflow.com/comment/139218605
answer count: 0
tagged with: css
has comment: http://stackoverflow.com/comment/139219322
type: UnansweredQuestion
type: Question
has comment: http://stackoverflow.com/comment/139218636
has comment: http://stackoverflow.com/comment/139218552
has comment: http://stackoverflow.com/comment/139222093
has body: I have a block of text that's generated randomly from a JSON file, when I use static text, then the code works fine, at the right end of the div, if the word is too long it goes to the next line but in the other case the word gets split {wordList.map((word, wordIndex) => { const typedWord = typedWords[wordIndex] || ""; const isCurrentWord = wordIndex === typedWords.length; const hasWrongChars = typedWord.split("").some((char, index) => char !== word[index]); const isExcessLength = typedWord.length > word.length; const isIncomplete = typedWord.length >= 0 && typedWord.length < word.length && typedWords.includes(typedWord); const shouldHighlightWordRed = hasWrongChars || isExcessLength || isIncomplete; return ( {word.split("").map((char, charIndex) => { let charColor = "#fff"; if (wordIndex < typedWords.length) { charColor = shouldHighlightWordRed ? "red" : "green"; } else if (isCurrentWord) { const typedChar = typedChars[charIndex] || ""; charColor = typedChar === char ? "green" : typedChar !== "" ? "red" : "#fff"; } return ( {char} ); })} {'\u00A0'} // space after each word ); })} CSS: .test { display: flex; flex-direction: column; justify-content: center; height: 62vh; padding-left: 20px; padding-right: 20px; max-width: 58rem; width: 58rem; } .box { font-size: 1.5rem; overflow: hidden; height: 149px; align-items: center; user-select: none; white-space: pre-wrap; overflow-wrap: break-word } .box .word { position: relative; margin: 0 5px 2px; } .box .word span { color: var(--sub-color); line-height: 2em; font-weight: 100; } With plain text: With dynamic text:
tagged with: reactjs
score: 0
has comment: http://stackoverflow.com/comment/139219376
has comment: http://stackoverflow.com/comment/139219338
has title: Dynamic text within div splits word

http://stackoverflow.com/comment/139314787
type: AnswerComment
comment on: http://stackoverflow.com/a/79011555
score: 1
type: Comment
has text: @iorgu Well, I suggest you take another close look. In my snippet, the stars are aligned to the baseline of the text, in the OP's snippet they are clearly below that, by about 2 to 3 millimeters. Just try adding the settings yourself and switch it on and off, then you see it in comparison.

http://stackoverflow.com/a/79061900
has comment: http://stackoverflow.com/comment/139406915
type: Answer
has body: just remove position:absolute; and move West Coast Golf outside of container
score: 0
answers question: http://stackoverflow.com/q/79061170

bootstrap-grid
tag name: bootstrap-grid
tags question: http://stackoverflow.com/q/78919468
type: Tag
tags question: http://stackoverflow.com/q/79147947
tags question: http://stackoverflow.com/q/79433985
tags question: http://stackoverflow.com/q/79447471

http://stackoverflow.com/comment/139213777
type: QuestionComment
comment on: http://stackoverflow.com/q/78957177
score: 1
type: Comment
has text: I don't think you can have both, wrapping independent columns *and* column headers reacting to each other's content, without using explicit header heights or JS

http://stackoverflow.com/comment/139238790
has text: can you explain it
type: Comment
comment on: http://stackoverflow.com/a/78967999
score: 0
type: AnswerComment

http://stackoverflow.com/q/79049053
tagged with: javascript
upvote count: 1
answer count: 2
tagged with: css
has body: I have an element (container) with horizontal scroll. For example: If you move the element to another row, it will reset the horizontal scroll in the container. Why is that? How can I maintain the scroll position? Is it possible to fix with only CSS? Here's a demo: https://jsbin.com/gugotewane/2/edit?html,css,js,output
has answer: http://stackoverflow.com/a/79049253
type: UnansweredQuestion
score: 1
favorite count: 0
tagged with: http://stackoverflow.com/tag/html
type: Question
has title: How to maintain scroll position when moving element
downvote count: 0
has answer: http://stackoverflow.com/a/79049243

http://stackoverflow.com/comment/139350038
comment on: http://stackoverflow.com/a/79015571
type: Comment
score: 0
type: AnswerComment
has text: Perfect thank you for your help

http://stackoverflow.com/a/79035337
type: Answer
score: 0
has comment: http://stackoverflow.com/comment/139358467
has comment: http://stackoverflow.com/comment/139358610
answers question: http://stackoverflow.com/q/79035136
has body: A bit hacky but doable div { font-size: 20px; font-weight: bold; } .gl { display: grid; grid-template-columns: 500px 200px; grid-template-rows: repeat(4,auto); /* 4 rows with auto height */ align-content: start; /* make sure the rows are auto height*/ grid-auto-flow: dense; gap: 20px; } .b_1 { aspect-ratio: 1; grid-row: span 3; /* take 3 rows */ background: red; } .b_2 { background: blue; grid-column: 2; } .News { grid-column: 2; } .Content { background: #0caa27; padding: 10px; grid-column: 1; } Blok_1 Blok_2 Content News

http://stackoverflow.com/q/79009524
tagged with: iphone
type: UnansweredQuestion
type: Question
has body: In my telegram React/Next JS app in iPhone, element of long list getting cut unexpectedly while scrolling. Some time list element cutting half or from anywhere, which seems to me render issue, because if it hide from CSS/JS complete element will either show or hide. It happens some time and some time its working fine. I tried so many workaround but not able to fix correctly. below code i am using to prevent app close in telegram while scrolling down. html.iphone-device{ overflow: hidden ; overscroll-behavior: none; body{ height: 100dvh !important; overscroll-behavior: none; overflow: auto; touch-action: initial !important; position: relative; scroll-behavior: unset; } }
answer count: 1
tagged with: javascript
has title: In telegram app in iPhone, element of long list getting cut unexpectedly while scrolling
tagged with: reactjs
score: 0
has answer: http://stackoverflow.com/a/79087258
tagged with: css
tagged with: telegram

http://stackoverflow.com/q/79030490
type: Question
has comment: http://stackoverflow.com/comment/139348756
accepted answer: http://stackoverflow.com/a/79035942
has comment: http://stackoverflow.com/comment/139348759
type: AnsweredQuestion
score: 0
has comment: http://stackoverflow.com/comment/139349143
answer count: 2
has comment: http://stackoverflow.com/comment/139349094
possible better answer: http://stackoverflow.com/a/79030730
has comment: http://stackoverflow.com/comment/139349167
has body: the following html/css creates: the difference is only in the span style using a background-color in the second cell. You can see, that the crosses are then behind the text and the background-color. I can not use pseudo elements because sometimes inline styles have to be used (do not ask why this is asked for, it is just wanted in special circumstances) I tried a bit around with z-index but had no success. Is there a way to get the crosses in the foreground? Best with only changing the td style? The cell may have any backcolor and the span may have any backcolor Thanks for any idea Content Content Content
tagged with: css
has comment: http://stackoverflow.com/comment/139354637
has answer: http://stackoverflow.com/a/79035942
has comment: http://stackoverflow.com/comment/139348789
has comment: http://stackoverflow.com/comment/139348769
has answer: http://stackoverflow.com/a/79030730
has title: Get crosses created by linear-gradient in front of span background
has comment: http://stackoverflow.com/comment/139348562
has comment: http://stackoverflow.com/comment/139348828
has comment: http://stackoverflow.com/comment/139353265

http://stackoverflow.com/comment/139401237
type: Comment
score: 0
has text: It's any website really, you can try resizing this one right now. Moving right side -> stable left side text, moving left side -> jumping right side text. I'm using macOS. For an example the best would be to try to make a screen recording, I'll look into it.
comment on: http://stackoverflow.com/q/79059286
type: QuestionComment

http://stackoverflow.com/comment/139373108
comment on: http://stackoverflow.com/a/79043484
has text: I can't find anything to indicate that Mailchimp strips `!important`. I wonder if your syntax was ok. Also, inline styles have a high precedence to begin with, so I'm doubtful that you even need this solution.
type: Comment
score: 0
type: AnswerComment

http://stackoverflow.com/a/79014392
type: Answer
score: 0
answers question: http://stackoverflow.com/q/79014373
has body: You have in your main.js file import imageSrc from './image.jpg'; // Adjust the path if necessary const imgElement = document.createElement('img'); imgElement.src = imageSrc; imgElement.alt = 'Description of image'; document.body.appendChild(imgElement);

http://stackoverflow.com/comment/139257291
type: AnswerComment
has text: It's working as expected. Thank you for you response
comment on: http://stackoverflow.com/a/78973472
type: Comment
score: 0

http://stackoverflow.com/comment/139312995
type: QuestionComment
score: 1
has text: You were on the right track with [vertical-align](https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align), but sticking to just keyword values can be frustrating. You need to apply it to both the stars and the text and even then it might not look like you want. I usually just use a pixel correction. Something like: `.stars { vertical-align: 3px; }`.
type: Comment
comment on: http://stackoverflow.com/q/79010977

http://stackoverflow.com/a/78986573
accepted answer of: http://stackoverflow.com/q/78986363
type: Answer
score: 0
has body: You had the correct idea (using object-fit: cover) but applied it to the wrong element. Let's check this part of the code: .sky-img{ width: 100%; height: auto; object-fit: cover; } That's the image container and not the image in itself. Because of that the container will have the width you want (not the height, though). The image has a class that automatically assigns it a width of 100%. So, it will scale, but it won't occupy its full container full size. You want to have the container occupying 100% of the available width and height, and then do the same for the image and apply the object: fit (to the image!) So change the code above with something like this: .sky-img{ width: 100%; height: 100%; } .sky-img img { height: 100%; object-fit: cover; } That will make the image expand to occupy the whole right side, independently of how tall it is (as you mention, the text will guide how big that would be). Here you can see a running demo with your code and just the change I indicated (I used CSS nesting, but it's the same): .custom-text { font-family: montserrat,sans-serif; color: white; } .sky-header{ font-weight: 400; font-size: 80px; text-shadow: 3px 3px #373737; } .wthin{ font-weight: 100; font-size: 25px; } .wthinbigger{ font-weight: 100; font-size: 35px; } .sky-mask-right { position: relative; z-index: 1; margin-right: -18%; } .sky-curve-right{ height: 100%; background-image: linear-gradient(135deg,rgba(226, 75, 252, 1) 0%,rgb(146, 48, 163) 100%); } @media only screen and (min-width: 992px) { .sky-mask-right { clip-path:url(#sky-clip-right) } } .ratio-svg-right{ width: 50%; } .ratio-img-right{ width: 50%; } .sky-img{ width: 100%; height: 100%; img { width: 100%; height: 100%; object-fit: cover; } } .sky-content-right{ padding-left: 10%; padding-top: 1%; margin-right: 10%; } .sky-column{ float: left; width: 30%; } .sky-list-text{ font-weight: 200; } .col-equal-height{ display: flex; flex: 1; overflow: overlay; } li::marker { content: url(/heart.svg); content: url(#h…
has comment: http://stackoverflow.com/comment/139268128
answers question: http://stackoverflow.com/q/78986363
type: AcceptedAnswer

http://stackoverflow.com/comment/139375998
type: Comment
has text: My Header.js is located in components folder and index.js in pages folder and HeaderItem.js that conains the Icon is also is in components folder. Do we get an option to post an image here in the comments so that i can show you the entire project structure.
score: 0
comment on: http://stackoverflow.com/q/79044837
type: QuestionComment

http://stackoverflow.com/a/79058183
has comment: http://stackoverflow.com/comment/139399669
has comment: http://stackoverflow.com/comment/139405365
score: 1
has comment: http://stackoverflow.com/comment/139399882
type: AcceptedAnswer
answers question: http://stackoverflow.com/q/79058104
downvote count: 0
type: Answer
accepted answer of: http://stackoverflow.com/q/79058104
has body: Update - Move style elements to ShadowDOM The original solution worked, but commenters suggested improvements. Style elements within a slot behave differently from other types elements. They appear in the DOM rather than the component's ShadowDOM. This is why OP's code did not work as expected. The original solution fixed this using shadowRoot.adoptedStyleSheets, but these steps were unnecessary. The simpler solution is to move the style elements directly into the ShadowDOM. Importantly, this only applies to styles added to slots and not to styles in the component definition. class MyElement extends HTMLElement { constructor() { super() this.attachShadow({ mode: "open" }) } connectedCallback() { const root = this.shadowRoot root.append( document.getElementById("my-element-template").content.cloneNode(true), ) // a fix specific to OP's code root.querySelector("slot[name=my-style]") .assignedElements() .forEach((el) => root.append(el)) // and a longer but more universal alternative // this.importStyles(); } // A method to import css from any or all slots /** * Imports slot style elements from lightDOM to shadowDOM * @param {string} [slotname] A slot name or omit for all slots */ importStyles(slotname) { slotname = slotname ? `slot[name="${slotname}"]` : "slot" const root = this.shadowRoot root.querySelectorAll(slotname).forEach((slot) => { slot.assignedElements().forEach((el) => { if (el instanceof HTMLStyleElement) { root.append(el) } else { el.querySelectorAll("style").forEach((style) => root.append(style)) } }) }) } } window.customElements.define("my-element", MyElement) p { font-weight: bold; color: orange; } This text is outside the component (global css) This text is inside the component (component css) Original Solution - works, but verbose class MyElement extends HTMLElement { constructor() { super(); this.attachShadow({mode: "open"}); } connectedCallback() { const root = this.shadowRoot; root.append(document.getElementById('my-element-template').content.clone…
upvote count: 1
has comment: http://stackoverflow.com/comment/139399808

http://stackoverflow.com/comment/139415825
type: QuestionComment
comment on: http://stackoverflow.com/q/79067108
has text: You can put a summary, I just tried to keep it simple. Having a summary doesn't change anything.
type: Comment
score: 0

http://stackoverflow.com/comment/139384057
type: QuestionComment
type: Comment
comment on: http://stackoverflow.com/q/79048767
score: 0
has text: Another side note: if I set the "bglayer" "position" CSS property to "absolute", it breaks scrolling the same way in WebKit, but not Chrome or Firefox...??

http://stackoverflow.com/comment/139268356
score: 4
type: QuestionComment
has text: Resize to width where the elements shrink and inspect their and their parents' styles; what do you see?
comment on: http://stackoverflow.com/q/78986745
type: Comment

http://stackoverflow.com/q/78946426
has title: How can I disable reverse animation for this effect?
answer count: 1
has answer: http://stackoverflow.com/a/78948166
score: 0
has comment: http://stackoverflow.com/comment/139194468
tagged with: javascript
tagged with: css
has comment: http://stackoverflow.com/comment/139194400
has comment: http://stackoverflow.com/comment/139194409
has body: https://jsfiddle.net/9Lbe8kcj/ #container { width: 100%; height: 100%; background-color: red; position: relative; } #scroll-container-one { width: 1000px; height: 500px; overflow-y: scroll; overflow-x: hidden; background: green; } .box-one { height: 600px; background-color: purple; font-size: 32px; } .box-two { height: 1400px; position: relative; background-color: orange; } .inside-box { height: 500px; position: sticky; top: 0; background-color: white; display: flex; justify-content: space-between; opacity: 1; } .inside-box div { width: 300px; height: 200px; background-color: blue; font-size: 40px; animation: appear linear forwards; animation-timeline: view(600px); opacity: 0; } #one { animation-range-start: 100px; animation-range-end: 400px; } #two { animation-range-start: 500px; animation-range-end: 800px; } #three { animation-range-start: 900px; animation-range-end: 1200px; } @keyframes appear { from { opacity: 0; } to { opacity: 1; } } .box-three { height: 1000px; background-color: yellow; } Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, assumenda quisquam. Minus culpa quo a esse nostrum, laborum aspernatur ipsa nisi cum blanditiis facilis, minima unde soluta quos, dolorum impedit! abooga awooga asooga box 3 I created an example of what I basically want. The only thing is, I wanted it so that when the user scrolls back up, they wouldn't have to go through all the animations reversing. As well as not have to go through the entire div that contains the sticky div which is only that height so that the effect of making elements appear with each scroll can be created. I am almost 100% sure I've seen this effect (with no reverse animations when scrolling back up and everything) on some websites in the past but I can't seem to find one now that I am actively looking for one. If anyone can link a or multiple websites that uses this effect, that would be very helpful too
type: UnansweredQuestion
type: Question
tagged with: http://stackoverflow.com/tag/html

http://stackoverflow.com/comment/139196091
comment on: http://stackoverflow.com/a/78947295
score: 0
has text: Actually as the broken HTML is within one of the elements that are placed by the grid, which is the change I made, then of course that might muck up the inside of the right hand side but won't affect the grid which has just two elements - and that's the layout this question is about.
type: AnswerComment
type: Comment

swipe
type: Tag
tag name: swipe
tags question: http://stackoverflow.com/q/79006304

http://stackoverflow.com/comment/139393623
has text: Fix Main closing tag
type: QuestionComment
comment on: http://stackoverflow.com/q/79053699
type: Comment
score: 0

http://stackoverflow.com/a/78976909
type: AcceptedAnswer
upvote count: 2
type: Answer
score: 2
has body: In react, the css of one file is applied to all the files throughout the project. If you have used the same className in more than 1 files, the file will be applied to all the elements with that className, no matter what file they are in. As a solution, you can do the following: For body in the Dashboard section, you should the className dashboard-body in the Dashboard.jsx file and apply the style as follows: .dashboard-body { background-color: lightgray !important; margin: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; Similarly, for body in Homepage module, you apply homepage-body in the Homepage.jsx file and apply the style as follows in the css file .homepage-body { margin: 0; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; background: linear-gradient(180deg, white, rgb(56, 55, 55)); color: #2e2e8f; display: flex; flex-direction: column; min-height: 100vh; } Follow the above steps for rest of the classes
answers question: http://stackoverflow.com/q/78976713
accepted answer of: http://stackoverflow.com/q/78976713
downvote count: 0

http://stackoverflow.com/comment/139308433
type: QuestionComment
comment on: http://stackoverflow.com/q/79000085
has text: Currently, you're only merging circles via paper.js without creating the typical metaball shape transitions. For a slightly snappier rendering you may opt for the infamous "goo/gooey" SVG filter which admittedly also has quite a few flaws (especially on safari/webkit – not aware of any trick to apply it on animated elements in webkit). However these webkit shortcomings may overall be acceptable as they won't necessarily harm usability. You may also find some inspiration in this article by [Varun Vachar](https://varun.ca/metaballs/).
type: Comment
score: 0

http://stackoverflow.com/comment/139313539
comment on: http://stackoverflow.com/a/79011332
type: Comment
has text: The result looks good, but the answer is lacking an explanation. What did you change and why does this solve the problem? What does `.stars {}` do in your stylesheet?
type: AnswerComment
score: 1

http://stackoverflow.com/q/78917282
score: 0
has answer: http://stackoverflow.com/a/78917362
tagged with: css
type: UnansweredQuestion
has body: I'm making a little portfolio website for myself. I want everything to be static, so zooming in doesn't affect the formatting of the containers, which I have managed to do. However, when I zoom in, I can't navigate throughout the page by scrolling. Well, I can scroll down and to the right, but I can't scroll up and down. 100% scaling 250% scaling I tried using transform-origin: top left; because I saw it in another thread, but it didn't quite work. Also tried adding overflow-y: scroll/auto; to html/body/scale-container. html, body { height: 100%; margin: 0; } body { font-family: 'CascadiaMonoNF', sans-serif; background-color: #221a2e; color: #EACDC2; display: flex; justify-content: center; align-items: center; } .scale-container { transform: scale(1.75) translateX(30px); transform-origin: center; display: flex; box-sizing: border-box; position: static; } .container { width: 800px; background-color: #221a2e; padding: 20px; box-sizing: border-box; } .code-container { display: flex; align-items: flex-start; } .line-numbers { width: 50px; background-color: #2C1F35; color: #6C4F6D; padding: 0 5px; text-align: right; font-size: 1em; line-height: 1.2em; border-right: 1px solid #3A2B3A; } .line-number { margin-bottom: 0; line-height: 1.2em; } .code-content { padding-left: 9.99px; flex: 1; line-height: 1.2em; font-size: 1em; } .content-container { background-color: #291e38; max-width: calc(100% - 50px); margin-left: -10.5px; } .header-container { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0; } h1 { font-size: 1em; margin: 0; color: #C66976; } .social-icons { display: flex; } .social-icons a { color: #EACDC2; font-weight: normal; text-decoration: none; margin-left: 10px; } .social-icons a:hover { text-decoration: underline; color: #C66976; } .intro-list { list-style-type: none; padding-left: 20px; margin: 0; } .intro-list li { font-size: 1em; font-weight: normal; margin-bottom: 0; color: #EACDC2; } section { margin: 0; } h3 { font-size:…
type: Question
has title: Can't scroll up/left on HTML/CSS website when zoomed in
answer count: 1
tagged with: http://stackoverflow.com/tag/html

http://stackoverflow.com/comment/139252007
has text: What do you want the actual heights of .Shell and of .Box to be?
type: Comment
comment on: http://stackoverflow.com/q/78976538
type: QuestionComment
score: 0

http://stackoverflow.com/comment/139336406
has text: @mplungjan hey there! I've added a dulled down snippet. Hope that helps! You can also always visit the actual website :) Thanks!
type: Comment
comment on: http://stackoverflow.com/q/79023414
score: 0
type: QuestionComment

http://stackoverflow.com/comment/139389281
comment on: http://stackoverflow.com/a/79046209
has text: Yes this is correct, a reducer function needs to return state. Your `addHabbit` reducer creates a `newHabbit` but doesn't return it with state.
type: AnswerComment
score: 1
type: Comment

http://stackoverflow.com/comment/139125539
comment on: http://stackoverflow.com/q/78907243
score: 0
has text: Trust the evidence of your own test before the internet
type: QuestionComment
type: Comment

http://stackoverflow.com/comment/139158871
type: QuestionComment
has text: you should overthink your HTML structure and use `aside` for a comment sidebar instead of trying to place every single element absolutely.
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78927044

http://stackoverflow.com/comment/139381183
comment on: http://stackoverflow.com/q/79048027
score: 0
type: QuestionComment
has text: Using JS you could compare the width of the text container with the width of parent element and use a conditional to check if text container is wider than the parent container, if so change your menu to vertical.
type: Comment

http://stackoverflow.com/a/79017642
upvote count: 1
accepted answer of: http://stackoverflow.com/q/79017200
score: 1
type: AcceptedAnswer
type: Answer
answers question: http://stackoverflow.com/q/79017200
downvote count: 0
has body: I would not use tabindex because you alter the normal navigation order. If your menu is at the end of the page I would take the focus there when the page loads and continue with the normal order since it is the last element and then jump to the top of the page. window.onload = function() { document.getElementById("nav").focus(); };

http://stackoverflow.com/comment/139325384
type: Comment
comment on: http://stackoverflow.com/q/79017553
type: QuestionComment
has text: 1. You have a typo in your CSS after a property needs to be an `;` not `:`. E.g. `display: flex; flex-direction: column;` 2. This is still not enough code to reproduce the problems that are appearing for you. You want three cards the same height but just providing us with one. And it seems like you are yousing bootstrap so might as well ad `bootstrap` as a tag too.
score: 0

http://stackoverflow.com/comment/139140153
comment on: http://stackoverflow.com/q/78917255
type: Comment
type: QuestionComment
score: 0
has text: It's only possible if you know how many child elements are in each column

http://stackoverflow.com/a/79028403
answers question: http://stackoverflow.com/q/79019992
downvote count: 0
type: Answer
score: 2
has body: Note: subgrid is not crashing anymore but not working within a container in Chrome 130.0.6723.59 (Official Build) (64-bit). Based on below observations and workarounds, I'm guessing the bug is due to subgrid trying to control the layout within a inline-size/size container and the container is not letting it, which then crashes the rendering program. Interestingly if we just set the containment of the container to inline-size without making it a inline-size query container it won't crash the page, so there must be something else going on causing this problem when making an element a query container. Hence, it might be better to report an issue with Chromium instead of hacking the CSS. In older Chrome versions such as Chrome 128, though not crashing, the layout within the container simply won't be affected by the subgrid. Following this observation, in Chrome 129.0.6668.59 (64bit), you can see that if you add a layout containment via contain, it will behave like older versions that the subgrid won't be laying out the child elements within it, and the program won't crash anymore. One interesting thing is that if you remove layout after the size is calculated via JS, both the reflowed result and the container will behave as expected while not crashing the page. Note that this is not intended to be a solution but to demonstrate my observation in Chrome 129. If you really need to acheive the same result you proably should consider other layout modules or combining some JS. window.addEventListener("load", function() { var list = document.querySelectorAll(".comparison-item"); for (let el of list) { el.style.setProperty('contain', 'inline-size'); } }); .comparison-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; } .comparison-item { grid-row: span 3; container-type: inline-size; contain: inline-size layout; display: grid; grid-template-rows: subgrid; .span-two { grid-row: span 2; } } button { @container (max-width: 460px) { color:blue; }…
upvote count: 2

http://stackoverflow.com/q/79062969
tagged with: css-animations
type: Question
downvote count: 1
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139408198
answer count: 1
has comment: http://stackoverflow.com/comment/139408794
has title: How can I add a scale animation to a background-attachment:fixed element?
score: 0
tagged with: javascript
tagged with: css
has body: I am trying to make an element that : has the background-attachment: fixed attribute, so when you scroll it does not scroll with you ; have a beautifull scale-out animation that runs once. My problem is that both does not seem to be compatible. When I use the scale or transform: scale(...) properties, the background-attachment property gets broken. When I use the width and height properties, it does not seem to change the position and size of the image, so there is not any animation, because the image gets only cropped. I've found for a lot of pages, but I couldn't find any dealing with that on stackoverflow, except some couples of unanswered questions. There is my css code (exemple with "scale"): main div.full-banner { position: relative; width: 100%; padding: var(--main-full-banner-padding); box-sizing: border-box; overflow: hidden; box-shadow: 0px 0px var(--main-full-banner-shadow-size) var(--main-full-banner-shadow-color); } div.full-banner div.banner-background { position: absolute; background-position: 50% 50%; background-size: cover; background-image: url('...'); top: -1%; left: -1%; width: 102%; height: 102%; padding: 0px; margin: 0px; animation: full-banner-zoom 60s ease-out; } @keyframes full-banner-zoom { from { scale: 120%; } to { scale: 100%; } } main div.full-banner div.banner-content { position: relative; z-index: 2; } And there is an example of how to use it : Hello world! Lorem Ipsum Dolor Sit Amet How can I allow the background to at the same time have background-attachment: fixed and a animation on its scale?
has comment: http://stackoverflow.com/comment/139408895
has answer: http://stackoverflow.com/a/79063036
tagged with: background-attachment
upvote count: 1
has comment: http://stackoverflow.com/comment/139408809
type: UnansweredQuestion
favorite count: 0

http://stackoverflow.com/comment/139391746
type: Comment
type: QuestionComment
comment on: http://stackoverflow.com/q/79053510
score: 2
has text: `https://www.w3.org/2000/svg` is not the SVG namespace. http not https

http://stackoverflow.com/comment/139360651
has text: Thank you, it was a way easier: https://codepen.io/JonJonCS/pen/MWNamyG I made all the calculations before so I could plot the SVG as I wanted
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/79037047
type: Comment

http://stackoverflow.com/q/78971885
tagged with: http://stackoverflow.com/tag/html
answer count: 1
score: 0
has answer: http://stackoverflow.com/a/78971934
has comment: http://stackoverflow.com/comment/139241335
tagged with: css
has body: This is my template for blog posts. When the window you are viewing the post in is maximized, the spacing between nav and post-title is far too much. I want to reduce the space and keep it consistent. html, body { height: 100%; margin: 0; padding: 0; font-family: 'Cambria', serif; line-height: 1.6; background-color: transparent; } .wrapper { display: flex; flex-direction: column; min-height: 100vh; } .content { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; } .container { width: 80%; margin: auto; text-align: center; } nav { background-color: transparent; color: #fff; padding: 10px 0; text-align: center; } nav a { color: #555; margin: 0 15px; text-decoration: none; font-size: 18px; } nav a:hover { color: #555; text-decoration: underline; } .post-title { font-size: 32px; padding: 5px 10px; margin: 2px 0; } .post-date { font-size: 18px; color: #888; margin-bottom: 40px; } .post-content { text-align: left; } .post-content h2 { margin-top: 40px; font-size: 24px; color: #444; } .post-content p { margin-bottom: 20px; } footer { color: #555; text-align: center; padding: 10px 20px; background-color: transparent; } Button 1 Button 2 Button 3 Title Date Subheader Subheading 1 Content Subheading 2 Content Conclusion Content I have tried reducing padding-top and removing justify-content, but it seems like the title just will not change much at all when the window is maximized. It stays the same.
has title: How can I reduce the space between navigation bar and a title?
type: UnansweredQuestion
tagged with: margin
type: Question

http://stackoverflow.com/comment/139202103
has text: Thing is, we don't know whether the user wants the new date should be attributed to the start or the end date... Unless you chose it and force an odd-numbered choice to stand for start date, and an even-numbered choice to stand for the end date. Another solution would be the one I edited in the solution above, but the odd/even-numbered-choice one looks the best one to me...
type: Comment
score: 0
comment on: http://stackoverflow.com/a/78950845
type: AnswerComment

http://stackoverflow.com/a/79066675
answers question: http://stackoverflow.com/q/79066620
has body: The problem is that you are using a CSS class that is already available in blazor by default: If you rename form-control to something different, e.g. form-control1 (in CSS and in HTML) the result will look like this: So watch out for already used CSS class names and remember the browser inspection tool is your friend in the web :-)
score: 1
has comment: http://stackoverflow.com/comment/139418862
downvote count: 0
has comment: http://stackoverflow.com/comment/139418641
type: Answer
upvote count: 1

http://stackoverflow.com/comment/139395127
has text: Can you provide a working snippet of the issue? https://meta.stackoverflow.com/a/358993/1533592
comment on: http://stackoverflow.com/q/79055334
type: Comment
score: 0
type: QuestionComment

http://stackoverflow.com/comment/139155435
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78917786
has text: could you please also share your application.properties or application.yaml files?

http://stackoverflow.com/q/79060035
has comment: http://stackoverflow.com/comment/139402473
has comment: http://stackoverflow.com/comment/139404730
has comment: http://stackoverflow.com/comment/139407502
has body: I have an image in my Vue.js component with the following HTML: The image is displayed with the object-fit: cover CSS property. I need to capture and save exactly what is shown on the page (with the cropping effect) as a Blob using JavaScript. I've searched online for solutions, but I haven't been able to find anything useful. Any help or examples would be greatly appreciated!
tagged with: css
answer count: 0
tagged with: vue.js
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139403794
has comment: http://stackoverflow.com/comment/139405278
has comment: http://stackoverflow.com/comment/139408045
tagged with: http://stackoverflow.com/tag/html
type: Question
has title: How to save as Blob the displayed image with object-fit: cover property
score: 0
tagged with: javascript

http://stackoverflow.com/comment/139275666
has text: If you want to further develop your code, I recommend looking into the logic of the [kenwheeler/slick](https://github.com/kenwheeler/slick) package, alternatives: [swiper](https://github.com/nolimits4web/swiper), [glide](https://github.com/glidejs/glide).
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78990433
type: QuestionComment

http://stackoverflow.com/q/78945359
linked to: http://stackoverflow.com/q/56711501
score: 0
has comment: http://stackoverflow.com/comment/139192432
tagged with: css
duplicate of: http://stackoverflow.com/q/56711501
answer count: 0
tagged with: flexbox
has body: I have 3 columns where i want the divs to be the same height, i also would like to have the header sections inside those divs to be the same height no matter the content inside of it. I am not sure if this is possible with css only but have high hopes that it is. Here is my codepen of what i am working on: https://codepen.io/theller5567/pen/bGPmyjy .promo-wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; font-family: "Work Sans 1", sans-serif; -moz-column-gap: 20px; column-gap: 20px; row-gap: 20px; } .promo-wrapper .promo { display: flex; flex-direction: column; justify-content: space-between; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; align-self: stretch; } .promo-wrapper .promo-header { background-color: #002168; color: #fff; padding: 20px; border-radius: 10px 10px 0 0; font-size: 1rem; line-height: 1.4; letter-spacing: 0px; font-weight: 700; } .promo-wrapper .promo-content { padding: 20px; } .promo-wrapper .promo-content ul li { padding-bottom: 10px; } .promo-wrapper .promo-btn { background-color: #b2c200; text-decoration: none; text-align: center; margin: 15px; color: #ffffff; padding: 15px; border-radius: 5px; display: inline-block; } &lt;div class="promo-wrapper"&gt; &lt;div class="promo"&gt; &lt;div class="promo-header"&gt; &lt;h2&gt;OMNI Tissue Homogenizer (TH) plus a 5-pack of NEW 12mm Omni Tips for an unbeatable price of $799!&lt;/h2&gt; &lt;/div&gt; &lt;div class="promo-content"&gt; &lt;img src="https://omni-inc.com/hs-fs/hubfs/th-12mm-sale.png?width=300&amp;amp;height=223&amp;amp;name=th-12mm-sale.png" width="300" height="223" loading="lazy" alt="th-12mm-sale" style="height: auto; max-width: 100%; width: 300px;" srcset="https://omni-inc.com/hs-fs/hubfs/th-12mm-sale.png?width=150&amp;amp;height=112&amp;amp;name=th-12mm-sale.png 150w, https://omni-inc.com/hs-fs/hubfs/th-12mm-sale.png?width=300&amp;amp;height=223&amp;amp;name=th-12mm-sale.png 300w, https://omni-inc.com/hs-fs/hubfs/th-12mm-sale.png?width=450&amp;amp;height=335&amp;amp;name=th-12…
type: UnansweredQuestion
has title: Make header sections in a div the same height
type: Question

http://stackoverflow.com/comment/139373927
type: Comment
comment on: http://stackoverflow.com/q/79043889
score: 1
type: QuestionComment
has text: What does leading-tight do? If the character is in a span then it won't 'know' about the next character and how to tighten up on it. Apart from the extra gap between the Y and o I can't see there is any difference.

http://stackoverflow.com/q/79051162
has body: I have placed an image towards the top of the page and to the right of some text, but when I resize the browser the image (composting-machine) overlaps the H1 text, even though it doesn't overlap the other text. How do I fix this and make sure the title text wraps around the image when resizing the browser while keeping the image in the same position? Here is my code: body { margin: 2.5em; margin-left: 5em; margin-right: 5em; margin-bottom: 0em; } h1 { font-size: 3.5em; margin-top: 0.2em; margin-bottom: 0em; width: 70%; } #composting-machine { display: inline-block; width: 25em; float: right; position: relative; top: -12em; } LIDA - COMPOSTING MADE EASY ODOUR FREE AUTOMATED FAST PROCESSING Designed for the kitchen, the in-vessel composting system, LIDA reduces kitchen food waste through an automated process. By providing optimal conditions for the microorganisms, LIDA improves the composting process drastically, cutting processing time to roughly a week and curing time to a month. The result is high quality fertiliser that is nutritious for the soil.
tagged with: responsive-design
downvote count: 0
tagged with: css
has comment: http://stackoverflow.com/comment/139386745
type: UnansweredQuestion
score: 1
favorite count: 0
upvote count: 1
type: Question
answer count: 1
has title: How to stop image overlapping text with relative position
has answer: http://stackoverflow.com/a/79051668
tagged with: css-position
has comment: http://stackoverflow.com/comment/139389962
has comment: http://stackoverflow.com/comment/139389368

http://stackoverflow.com/a/78939581
score: 0
answers question: http://stackoverflow.com/q/78939256
has body: I was about to add this in comments but its so messed that's why adding in resposes. Issue is very simple to fix, instead of position: fixed use position: sticky with top: 0 and it should be fixed. Below is working example. Document Heading Introduction Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
has comment: http://stackoverflow.com/comment/139182254
has comment: http://stackoverflow.com/comment/139182652
accepted answer of: http://stackoverflow.com/q/78939256
type: AcceptedAnswer
has comment: http://stackoverflow.com/comment/139182232
type: Answer

http://stackoverflow.com/q/78927456
tagged with: css
answer count: 0
type: UnansweredQuestion
linked to: http://stackoverflow.com/q/71050102
type: Question
has comment: http://stackoverflow.com/comment/139160135
score: 0
has comment: http://stackoverflow.com/comment/139160071
tagged with: javascript
has body: The add button adds a new card and the position of card changes with my drag and drop input. Whenever i drag the cursor changes to "no-change", i want the cursor to be "grabbing". I tried setting the cursor to 'grab' in all ways possible but couldn't find the solution Additionally, please let me know if my implementation of drag and drop functionality is a bad practice. Image of the website import React from 'react' import { useState } from 'react'; const Card = ({text}) => { const [position, setPosition] = useState({x: 0, y: 0}) const [prevPosition, setPrevPosition] = useState({x: 0, y: 0}) const [isDragging, setIsDragging] = useState(false) const dragEndHandler = (e)=>{ const currPosition = {x: e.screenX, y: e.screenY} const diff = { x: position.x + (currPosition.x - prevPosition.x), y: position.y + (currPosition.y - prevPosition.y) } setPosition(diff) setIsDragging(false) } const dragStartHandler = (e)=>{ setPrevPosition({x: e.screenX, y: e.screenY}) setIsDragging(true) } const cardStyle = { position: 'relative', left: `${position.x}px`, top: `${position.y}px`, backgroundColor: 'white', margin: '8px', padding: '8px', display: 'inline-block', cursor: 'grab' }; return ( {text} ) } export default Card Whenever i drag the cursor changes to "no-change", i want the cursor to be "grabbing". I tried setting the cursor to 'grab' in all ways possible but couldn't find the solution. e.preventDefault() makes the the immovable defeating the entire point Additionally, please let me know if my implementation of drag and drop functionality is a bad practice.
has title: How to disable "not-allowed" cursoe while dragging an element
tagged with: reactjs

http://stackoverflow.com/comment/139401845
score: 0
type: QuestionComment
type: Comment
comment on: http://stackoverflow.com/q/79059752
has text: Certainly not while using `object-fit:` since the whole point is to make the image **fit** the container, not exceed it. Frankly, I'd be using a background image and then you can scale and position it any way you want. Alternatively, a `transform` and/or `transform-origin` might be another option.

http://stackoverflow.com/a/78938629
score: 1
type: AcceptedAnswer
type: Answer
has comment: http://stackoverflow.com/comment/139185456
has body: The question you linked to is definitely the same question. The answer may work but I agree that it’s difficult to understand and seems a hacky way to do it. I would recommend styling .hdr-container using grid instead of flex. Grid gives you easy control of the viewport width at which the columns will stack for mobile view (or the width at which they will unstack for desktop view), and easy control of column widths (I have given them proportional widths of 1:2). I also removed some of your non-breaking spaces and the fixed width on .search-div, to allow things to wrap more easily. body { background-color: #dbd2c3; font-family: Arial, Helvetica, sans-serif; font-size: 80%; } .hdr-container { display: grid; gap: 1em; outline: 2px solid #e73; } @media (min-width: 500px) { .hdr-container { grid-template-columns: 1fr 2fr; } } .logo-div { outline: 2px solid green; } .logo-img { width: 100%; border: 2px solid black; box-sizing: border-box; } .menu-div { align-self: center; outline: 2px solid yellow; } .menu-div p { margin: 0; outline: 2px solid cyan; } .search-div { margin-top: 1em; } .search-text { border-radius: 6px; } &lt;div class="hdr-container"&gt; &lt;div class="logo-div"&gt; &lt;img src="https://picsum.photos/400/175" class="logo-img"&gt; &lt;/div&gt; &lt;div class="menu-div"&gt; &lt;p&gt; &lt;strong&gt;SETLISTS:&lt;/strong&gt; Lorem ipsum&amp;nbsp;| odor amet&amp;nbsp;| consectetuer adipiscing elit&amp;nbsp;| Senectus aliquet&amp;nbsp;| tempor laoreet &lt;/p&gt; &lt;p&gt; &lt;strong&gt;GALLERIES:&lt;/strong&gt; Lorem ipsum&amp;nbsp;| odor amet&amp;nbsp;| consectetuer adipiscing elit&amp;nbsp;| Senectus aliquet&amp;nbsp;| tempor laoreet &lt;/p&gt; &lt;p&gt; &lt;strong&gt;STUFF:&lt;/strong&gt; Lorem ipsum&amp;nbsp;| odor amet&amp;nbsp;| consectetuer adipiscing elit&amp;nbsp;| Senectus aliquet&amp;nbsp;| &lt;/p&gt; &lt;div class="search-div"&gt; &lt;form action="/scripts/search.pl" method="post"&gt; &lt;input type="text" class="search-text" placeholder="Search for th…
answers question: http://stackoverflow.com/q/78938577
downvote count: 0
accepted answer of: http://stackoverflow.com/q/78938577
upvote count: 1
has comment: http://stackoverflow.com/comment/139187176

http://stackoverflow.com/a/78975278
score: 1
answers question: http://stackoverflow.com/q/78974947
has comment: http://stackoverflow.com/comment/139254983
type: Answer
downvote count: 0
has comment: http://stackoverflow.com/comment/139250957
has body: If you want to maintain that syntax, there are two options (the first is not ideal performance-wise, would probably make sense to just write it out as suggested in the other answer) Option 1 - Using the :is selector allows you to use both on one line: &amp;--red:is(&amp;--green){ color: yellow; } Option 2 - A bit less fluid and not the best to look at, but you can store the name in a variable and reference it this way so that it's still managed in one place: .parent { $childClass: child; &amp; &gt; .#{$childClass} { &amp;--red { color: red; } &amp;--green { color: green; } &amp;--red.#{$childClass}--green { color: yellow; } } }
upvote count: 1

http://stackoverflow.com/q/79063788
has title: How to add padding on a container so that a scrollable content won't touch the top and bottom borders?
score: 1
favorite count: 0
type: Question
has comment: http://stackoverflow.com/comment/139409521
has answer: http://stackoverflow.com/a/79063888
tagged with: http://stackoverflow.com/tag/html
accepted answer: http://stackoverflow.com/a/79063825
downvote count: 0
type: AnsweredQuestion
has answer: http://stackoverflow.com/a/79063804
upvote count: 1
has body: The issue is, I can't figure out how to make the top and bottom padding work so that the scrollable content won't touch the top and bottom borders when scrolling. I've tried several methods I can think of, such as adding an outside container element, but didn't work. Also tried the opposite of adding container inside. Here's the code in question: dogs dogs dogs dogs dogs dogs dogs dogs dogs dogs dogs dogs dogs dogs dogs I simply want to add a padding there that will prevent the content touching border. Any ideas would be really appreciated! Thank you!
answer count: 3
possible better answer: http://stackoverflow.com/a/79063888
tagged with: css
has answer: http://stackoverflow.com/a/79063825

http://stackoverflow.com/a/79055637
type: Answer
has body: This plugin should fix it. Another build tool probably needs the ?inline but that will break imports in rollup because they are non-standard. function removeQueryParams() { return { name: 'remove-query-params', resolveId(source) { // Remove query parameter-like strings from the end of the import path const cleanSource = source.replace(/\?.*$/, ''); return cleanSource; } }; } ... plugins: [ removeQueryParams(), ] ...
score: 0
accepted answer of: http://stackoverflow.com/q/78965453
answers question: http://stackoverflow.com/q/78965453
type: AcceptedAnswer

http://stackoverflow.com/comment/139386493
comment on: http://stackoverflow.com/q/79046794
type: Comment
has text: @DarkBee, your right. I tried it in StackBlitz and had no CSS problem. I'm working on identifying what is limiting the dropdown in my component.
score: 0
type: QuestionComment

http://stackoverflow.com/q/79025744
answer count: 0
linked to: http://stackoverflow.com/q/1014861
tagged with: css
has comment: http://stackoverflow.com/comment/139342950
has comment: http://stackoverflow.com/comment/139339888
type: UnansweredQuestion
duplicate of: http://stackoverflow.com/q/1014861
has comment: http://stackoverflow.com/comment/139343224
has body: &lt;style&gt; path[fill] { fill: gray; transition: fill 0.3s; } path[fill] has-parent('div'):hover { fill: red; } &lt;/style&gt; is tis possible somehow? I'm trying to set a :hover effect the svg parent's element.
type: Question
score: 0
has title: does css have an ancestor selector?

http://stackoverflow.com/comment/139392673
has text: @DavidHeadrick Actually, I think you should consider chrwahl's answer. Even if the hover logic is not exactly as you want, his SVG elements are much more simple, elegant, and easy to maintain. Which also make implementing you desired hover logic much easier too.
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/79051111

http://stackoverflow.com/comment/139155204
has text: Try `text-size-adjust: 100%;`.
type: QuestionComment
score: 0
comment on: http://stackoverflow.com/q/78912045
type: Comment

http://stackoverflow.com/comment/139345894
score: 0
type: AnswerComment
has text: You're welcome, yeah that is interesting! Note that only `grid-template-columns` can be animated though, individual `grid-column`'s animation itself is descrete. (Otherwise the code can be easier.)
comment on: http://stackoverflow.com/a/79028934
type: Comment

http://stackoverflow.com/comment/139164549
comment on: http://stackoverflow.com/q/78930122
type: Comment
has text: It's also very similar to the Microsoft 365 login page: https://imgur.com/a/nXvzMue
type: QuestionComment
score: 1

http://stackoverflow.com/comment/139170329
has text: The delay may be there, but think through exactly what is happening. For how long does one of those divs have a z-index less than 2? I think we see a sort of 'OK' result with a few divs because the system just about manages to repaint in the gaps - however, try lengthening the time of each animation - you'll find there is no difference.
type: QuestionComment
comment on: http://stackoverflow.com/q/78926909
type: Comment
score: 0

http://stackoverflow.com/comment/139274783
score: 0
type: AnswerComment
has text: @Kvasimodo I see the line now when zooming in or out. Unfortunately, just magnifying the offset will also create a tiny gap in the border of the blocks. But that gave me the idea to use a little more complex `clip-path` using `polygon`. Please see the updated answer.
comment on: http://stackoverflow.com/a/78989599
type: Comment

bookdown
tags question: http://stackoverflow.com/q/79013297
tag name: bookdown
tags question: http://stackoverflow.com/q/79027960
type: Tag

http://stackoverflow.com/q/78918783
has title: Why isn't my toggle button showing up for my responsive HTML menu?
upvote count: 0
has body: I have this HTML menu and tried to make it responsive. I don't know why, but my toggle button just doesn't appear. I don't understand my mistake because I actually worked according to a tutorial and it worked there too. /* 1. Style-Sheet */ body { font-family: 'Dosis'; font-size: 1.2em; margin: 0; padding: 0; background-color: #f4f4f4; } h1 { font-size: 1.4em; } h2 { font-size: 1.2em; } h3 { font-size: 1.0em; } /*Standard Section*/ section.main { padding: 2em; margin-top: 4em; margin-bottom: 6em; min-height: calc(20em); /*Dieser Wert sollte mindestens so groß wie das vertikale Menü sein*/ } .einrueckung { margin-left: 2em; } .button-container { display: flex; justify-content: center; margin-top: 2em; } .button-container button { background-color: #4CAF50; color: white; padding: 0.5em 0.5em; border: none; border-radius: 0.2em; cursor: pointer; transition: background-color 0.3s ease; font-family: 'Dosis', sans-serif; font-size: 1em; text-transform: uppercase; } .button-container button:hover { background-color: #45a049; } .container { display: flex; margin-top: 1em; } .left-section, .right-section { flex: 1; padding: 2em; } .left-section { text-align: left; } .right-section { text-align: right; } .password-container { display: flex; justify-content: center; align-items: flex-start; height: 200px; padding-top: 20px; } .password-container h2 { font-family: 'Dosis', sans-serif; font-size: 2em; margin-bottom: 20px; } .password-container form { background-color: #f9f9f9; padding: 2em; border-radius: 1em; box-shadow: 0 0.2em 0.2em rgba(0, 0, 0, 0.1); } .password-container label { font-family: 'Dosis', sans-serif; font-size: 1.2em; } .password-container input[type="password"] { width: 100%; padding: 0.8em; margin: 0.8em 0; border-radius: 1em; border: 0.1em solid #ccc; } .password-container button { background-color: #4CAF50; color: white; padding: 1em 2em; border: none; border-radius: 1em; cursor: pointer; transition: background-color 0.3s ease; } .password-container button:…
has answer: http://stackoverflow.com/a/78918827
favorite count: 0
type: Question
score: -3
answer count: 1
downvote count: 3
tagged with: http://stackoverflow.com/tag/html
type: AnsweredQuestion
accepted answer: http://stackoverflow.com/a/78918827
tagged with: css
has comment: http://stackoverflow.com/comment/139142923

http://stackoverflow.com/q/78960268
tagged with: http://stackoverflow.com/tag/docx
tagged with: reactjs
score: 0
has body: I want basically docx to html with the styling of docx also while conversion mammoth gives me HTML but not styling I want to convert word to HTML having inline styles of word docx const handleFileUpload = (event) => { const file = event.target.files?.[0]; if (file) { const reader = new FileReader(); reader.onload = function (event) { const arrayBuffer = event.target?.result; if (arrayBuffer) { mammoth.convertToHtml({ arrayBuffer: arrayBuffer }) .then((result) => { const html = result.value; console.log(html) setContent(html); }) .catch((err) => console.error("Error converting .docx to HTML", err)); } }; reader.readAsArrayBuffer(file); } };
has title: I am using mammoth it is working fine but it not give styling of word document while converting?
tagged with: css
answer count: 0
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139219747
tagged with: mammoth
type: Question
tagged with: http://stackoverflow.com/tag/html

http://stackoverflow.com/a/79018538
upvote count: 2
type: Answer
score: 2
has body: The issues were: timeLeft was not defined inside blobPress(). count was not handled correctly. I fixed the issues by doing the following changes: Removed onclick from #blob. Created a click event listener for the blob. Passed timeLeft to blobPress(timeLeft). Created a function parseTimeToSeconds(timeStr) to return timeLeft in integer as when you get it by innerHTML, it returns string. I also added alt attributes to the images. Rest of your code is untouched. Counter 0 00 : 30
downvote count: 0
answers question: http://stackoverflow.com/q/79018085

http://stackoverflow.com/q/78928520
tagged with: css
has body: Context I am using Tailwind CSS and I am basically trying to create a table using Grid where the number of columns is the same number of items I have in an array called cols. Then, I am trying to fill these cols with the same way of action col-start-${index} and col-end-${index} Problem using dynamic classes like grid-cols-${cols.length}, col-start-${index} col-end-${index} wont work. I know that number of items in cols will be changed in the future and I dont want to deal with this everytime I am adding\removing a column. If anyone has an alternative dynamic way of action for this where I don't have to change the layout every time I'm adding\removing columns that would be great My Code import { modelers, cols, colsLengthForTW, tasks } from "@/util/stuff"; import ModelerRow from "@/components/ModelerRow"; export default function Home() { return ( {cols.map((thead, idx )=> { return {thead} })} {modelers.map((modeler, idx )=> { return <ModelerRow key={modeler+idx} modeler={modeler} tasks={tasks} /> })} ); }
favorite count: 0
type: Question
downvote count: 1
answer count: 1
type: AnsweredQuestion
tagged with: tailwind-css
has answer: http://stackoverflow.com/a/78928743
upvote count: 0
tagged with: reactjs
score: -1
accepted answer: http://stackoverflow.com/a/78928743
has title: Alternative solution to Tailwind CSS dynamic classes for CSS Grid layout

http://stackoverflow.com/comment/139409016
type: Comment
score: 0
has text: @MartinBean It's a rare case for me. I'm building a somewhat complicated form, with "mobile-first" in mind. My example represents one line item in a recipe, and I want maximum space to type in the "item" input, so that it is as visually readable as possible when being modified. The cancel button removes the entire line item, so it won't often be used while typing in the form, but maybe later when editing or re-ordering the list, so I gave it tabindex of -1, but I know I'll eventually have to consider how to make it obviously keyboard-actionable for best accessibility. https://ibb.co/6RKVZNt
comment on: http://stackoverflow.com/q/79060918
type: QuestionComment

http://stackoverflow.com/comment/139219047
type: AnswerComment
has text: This is the one I like the most due to its simplicity. I made an error in my question, which has resulted in an effect in your code I was not desiring. I have corrected my question. Could you please edit your answer (ie put `display: inline-block;` on the hover label section.
comment on: http://stackoverflow.com/a/78959685
score: 1
type: Comment

http://stackoverflow.com/a/78990592
score: 0
has body: If you use CSS flex on all of your "card" elements you can set them to: display: flex; flex-direction: column; justify-content: space-between; This would push the button to the bottom of that container, since the flex logic would be maximizing space in between the contents. The button also becomes full-width, but you can return it to your expected width with: width: 160px; margin: 0 auto; (Or use any width or max-width you like. Or keep it the full width, which may provide a better mobile experience.) For example (see "ADDED" section at the end of the CSS): :root{ --primary-color: #00605f; --secondary-color: #017479; --text-dark:#0f172a; --text-light:#94a3b8; --white:#ffffff; --hover-color:#E5E4E2; --max-width: 1400px; } .canister-a{ background-color: var(--primary-color); color: var(--white); max-width:var(--max-width); border-radius: 7px; padding:1%; margin:2% auto; margin-top: 10px; display: flex; flex-direction: column; } .canister-a .content-d{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "pricing-card-a pricing-card-b pricing-card-c"; } .price-card-a { grid-area: pricing-card-a; border-right: 0.1px solid #ffffff; padding: 1.5rem; } .price-card-b { grid-area: pricing-card-b; border-right: 0.1px solid #ffffff; padding: 1.5rem; } .price-card-c { grid-area: pricing-card-c; padding: 1.5rem; } .price-card-a h2, .price-card-b h2, .price-card-c h2{ color: var(--white); font-weight: 400; background: var(--secondary-color); text-align: center; border-radius: 7px; } .price-card-a h4,.price-card-b h4, .price-card-c h4{ color: var(--white); font-size: 1.5rem; } .price-card-a span, .price-card-b span, .price-card-c span{ margin: .2rem; } .content-d ul{ list-style: none; } .content-d li{ line-height: 1.5rem; margin-bottom: 10px; } .content-d button{ padding: .75rem 2rem; outline: 1px solid var(--white); border:none; font-size: 1rem; font-weight: 600; color: var(--white); background-color: var(--primary-color); cursor: pointer; border-…
answers question: http://stackoverflow.com/q/78990560
type: Answer

http://stackoverflow.com/q/78996274
tagged with: fonts
has comment: http://stackoverflow.com/comment/139294344
has comment: http://stackoverflow.com/comment/139286600
has title: Why are Noto Serif Tibetan font glyphs stretching outside the bounding box of their containing div?
type: UnansweredQuestion
tagged with: line-height
tagged with: http://stackoverflow.com/tag/html
type: Question
has comment: http://stackoverflow.com/comment/139286822
score: 0
has comment: http://stackoverflow.com/comment/139291210
has body: .pb-64 { padding-bottom: 64px; } .p-16 { padding: 16px; } .gap-16 { gap: 16px; } .flex-col { flex-direction: column; } .w-full { width: 100%; } .flex { display: flex; } .relative { position: relative; } * { border: none; } .flex-col { flex-direction: column; } .flex-shrink { flex-shrink: 1; } .flex { display: flex; } .mb-64 { margin-bottom: 64px; } .relative { position: relative; } .items-stretch { align-items: stretch; } .flex { display: flex; } .relative { position: relative; } .block { display: block; } .relative { position: relative; } .transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .gap-8 { gap: 8px; } .flex-col { flex-direction: column; } .flex { display: flex; } .relative { position: relative; } a { color: inherit; text-decoration: inherit; } .items-center { align-items: center; } .flex-col { flex-direction: column; } .flex { display: flex; } .leading-\[1\.4\] { line-height: 1.4; } .font-normal { font-weight: 400; } .text-6xl { font-size: 3.75rem; line-height: 1; } .block { display: block; } .relative { position: relative; } .font-NotoSerifTibetan { font-family: "Noto Serif Tibetan", serif; font-optical-sizing: auto; font-weight: 700; font-style: normal; } .text-gray-500 { --tw-text-opacity: 1; color: rgb(107 114 128 / var(--tw-text-opacity)); } .transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .opacity-0 { opacity: 0; } .p-8 { padding: 8px; } .w-32 { width: 32px; } .h-32 { height: 32px; } ཀ ka ཁ kɦa ག ga ང ṅa ཅ txa ཆ txɦa ཇ dja ཉ nẏa ཏ ta ཐ tɦa ད da ན na པ pa ཕ pɦa བ ba མ ma ཙ tsa ཚ tsɦa ཛ dza ཝ wa ཞ ja ཟ za འ hɦ ཡ ya Right click on the HTML to inspect after running the above example to see. Why is the gray area (behind the blue square), stretching outside of the blue square? The gray area is the hoverable area o…
answer count: 0
tagged with: css

http://stackoverflow.com/comment/139313074
type: AnswerComment
comment on: http://stackoverflow.com/a/79010927
score: 1
type: Comment
has text: Isn’t sup just for typographical reasons, not indicating anything further than that?

http://stackoverflow.com/q/78928681
score: 0
has title: How to apply a .css style to a div tag with air flight board effect
answer count: 0
tagged with: css
has body: I have the following "div" in HTML, {{ x }} Even though the departure-board class is applied to the div tag, I get as a result, The variable x, which is enclosed in braces, is displayed using jinja2. I want the content of x to be displayed using the style departure-board.css, the departure-board.css file was taken from the link, https://github.com/paulcuth/departure-board/tree/master I only want to apply the style departure-board.css to the variable x, I have tried to use the departure-board.css file but I do not have the effect I am looking for, any guide would be appreciated, /* Based upon Jakub Hampl's "Designing a departures board with CSS3". http://gampleman.eu/post/1488470623/designing-a-departures-board-with-css3 */ .departure-board { padding: 0.36em; display: inline-block; line-height: 1.3em; background: rgb(30, 30, 30); -webkit-border-radius: 0.21em; -moz-border-radius: 0.21em; border-radius: 0.21em; color: #eee; font-family: Helvetica; } .departure-board span.letter { display: inline-block; width: 1em; margin: 0 .1em; height: 1.3em; text-align: center; position: relative; } .departure-board span.letter { -webkit-box-shadow: inset 0 -.07em 0 rgba(50, 50, 50, .7), inset 0 -.14em 0 rgba(0, 0, 0, .7), inset .14em 0 .28em rgba(0, 0, 0, .9), inset -.14em 0 .28em rgba(0, 0, 0, .9), 0 .07em 0 rgba(255, 255, 255, .2); -moz-box-shadow: inset 0 -.07em 0 rgba(50, 50, 50, .7), inset 0 -.14em 0 rgba(0, 0, 0, .7), inset .14em 0 .28em rgba(0, 0, 0, .9), inset -.14em 0 .28em rgba(0, 0, 0, .9), 0 .07em 0 rgba(255, 255, 255, .2); -o-box-shadow: inset 0 -.07em 0 rgba(50, 50, 50, .7), inset 0 -.14em 0 rgba(0, 0, 0, .7), inset .14em 0 .28em rgba(0, 0, 0, .9), inset -.14em 0 .28em rgba(0, 0, 0, .9), 0 .07em 0 rgba(255, 255, 255, .2); box-shadow: inset 0 -.07em 0 rgba(50, 50, 50, .7), inset 0 -.14em 0 rgba(0, 0, 0, .7), inset .14em 0 .28em rgba(0, 0, 0, .9), inset -.14em 0 .28em rgba(0, 0, 0, .9), 0 .07em 0 rgba(255, 255, 255, .2); } .departure-board span.letter:before { border-t…
tagged with: jinja2
type: UnansweredQuestion
type: Question
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139164262

http://stackoverflow.com/q/78965523
tagged with: http://stackoverflow.com/tag/html
score: 0
has comment: http://stackoverflow.com/comment/139229488
has title: Old Iteration of index.html Loading Over New
tagged with: css
answer count: 0
tagged with: caching
type: UnansweredQuestion
has body: Every time I try to redeploy to my site and make changes to my index.html it shows the new version for a split second and then loads the old version. Here is a list of things I have done to fix it but to no avail: cleared the browser cache done all if the service worker stuff (restarting service workers or preventing them from working on index.html) made sure to have no caching in my server.js I don't use a CDN I don't have any volumes on my droplet implemented nginx specifically to have it prevent caching deleted all old docker images on my droplet to give it a pure restart In the browser developer tools it says it is only requesting one index.html (which is just the ip) I am kind of out of my element here and am trying to figure out what I don't know. Also what further context could I add that would help find a solution? Any point in the right direction would be greatly appreciated!
tagged with: node.js
tagged with: java
type: Question

http://stackoverflow.com/comment/139419123
type: Comment
score: 0
comment on: http://stackoverflow.com/a/79068924
has text: I see now, probably I have specified the question in a bad way. In this case, I would like to implement the bootstraps settings to my custom one and then "override" certain values. something like: .form-control-another-control { //here somehow inherit from default .form-control and add/override certain values color: #077df2; background: #f2f0f0; }
type: AnswerComment

http://stackoverflow.com/comment/139232589
type: QuestionComment
comment on: http://stackoverflow.com/q/78963317
has text: @HarshaHR on mobile?
type: Comment
score: 0

http://stackoverflow.com/a/78939377
score: 0
has body: If brett's responses is not working for you then try this. Addition to brett's code I haved added display:flex with flex-direction: column to #suggestions:has(li) which should force it to align vertically. Also brett's response was working fine in my system. Below is working example. Document A B C
answers question: http://stackoverflow.com/q/78938680
type: Answer

http://stackoverflow.com/comment/139168438
type: QuestionComment
comment on: http://stackoverflow.com/q/78929068
has text: Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking.
type: Comment
score: 0

http://stackoverflow.com/q/78954075
has body: map_folium = folium.Map(location=[0, 0], zoom_start=2) # Add tile layer tile = folium.TileLayer( tiles='https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', attr='Esri', name='Esri Satellite', overlay=False, control=True ).add_to(map_folium) # Coordinates and other parameters leftlon = -79.4 radius = 30 rightlon = -76.05 toplat = 39.72 botlat = 38.2 states = ['VA', 'MD', 'PA'] # Load cities data cities = pd.read_csv('uscities.csv') cities = cities[cities['state_id'].isin(states)] cities_t1 = cities[cities['ranking'] <= 1] cities_t2 = cities[cities['population'] >= 40000] # Load MADIS and METAR data madis_df = pd.read_csv('madis_data.csv') metar_df = get_metars('VA') # Add county borders geojson_file = 'counties.geojson' with open(geojson_file) as f: geojson_data = json.load(f) folium.GeoJson( geojson_data, name='US Counties', style_function=lambda feature: { 'fillColor': 'black', 'fillOpacity': 0.3, 'color': 'gray', 'weight': 2 } ).add_to(map_folium) # Add highways shapefile_path = 'tl_2019_us_primaryroads.shp' gdf = gpd.read_file(shapefile_path) gdf = gdf[gdf['RTTYP'] == 'I'] geojson_data = gdf.to_json() folium.GeoJson( geojson_data, name='Highways', style_function=lambda feature: { 'color': 'blue', 'weight': 2, 'opacity': 0.7 } ).add_to(map_folium) # Plot MADIS and METAR data madis_layer = folium.FeatureGroup(name='Madis') madis_layer = plot_dataframe_on_map(madis_layer,madis_df, 10, 'pink') madis_layer.add_to(map_folium) metar_layer = folium.FeatureGroup(name='ASOS') metar_layer = plot_dataframe_on_map(metar_layer,metar_df, 20, 'yellow') metar_layer.add_to(map_folium) map_folium = plot_radar_on_map(map_folium,38.948655,-77.460075,radius) # Create a layer for city names city_layer = folium.FeatureGroup(name='City Names') def city_plotting(cities, fontsize, city_layer): for index, city in cities.iterrows(): folium.Marker( location=[city['lat'], city['lon']], icon=folium.DivIcon( html=f""" <div style=" font-size: {fontsize}…
type: UnansweredQuestion
type: Question
score: 0
tagged with: python
has title: Layer order in folium not working how I set it up (Python/HTML/CSS)
tagged with: css
answer count: 0
tagged with: folium

http://stackoverflow.com/q/78973058
has comment: http://stackoverflow.com/comment/139243728
favorite count: 0
has comment: http://stackoverflow.com/comment/139244136
has comment: http://stackoverflow.com/comment/139243951
downvote count: 0
tagged with: css-position
has comment: http://stackoverflow.com/comment/139243545
has answer: http://stackoverflow.com/a/78973340
has title: How to overlay two images?
type: UnansweredQuestion
tagged with: overlay
tagged with: css
has body: So I am trying to have one image overlay another like the image. The screenshot image is how I wish the images to be placed. Screenshot of an image overlaying another However whenever the screen change it size, the overlaying image doesn't move with it. It keeps its position on the screen no matter what I try or changes. I would like for it to have the same position on the background image. I've tried changing the position for both background and overlay image, but it just made the image end up beside each other. Ive also tried changing width for both images and container + looking for others who had the same problem but just doesn't seem to work. .img-container { position: relative; width: 800px; /* Set to the size of your background image */ height: auto; } .background-img { width: 100%; height: 100%; position: relative; z-index: 1; /* Background image stays behind */ } .overlay-img { position: absolute; top: 10rem; /* Adjust the position of the overlay image */ left: 45rem; max-width: 100%; /* Set size of the overlay image */ z-index: 2; /* Overlay image appears on top */ } &lt;section id="portfolio"&gt; &lt;div class="img-container"&gt; &lt;img class="background-img" src="https://picsum.photos/1000/1000"&gt; &lt;img class="overlay-img" src="https://picsum.photos/200/300" alt=""&gt; &lt;/div&gt; &lt;/section&gt;
type: Question
upvote count: 2
answer count: 1
tagged with: image
has comment: http://stackoverflow.com/comment/139243687
score: 2
has comment: http://stackoverflow.com/comment/139297157
has comment: http://stackoverflow.com/comment/139243965
has comment: http://stackoverflow.com/comment/139309119

http://stackoverflow.com/comment/139265367
comment on: http://stackoverflow.com/q/78984963
type: Comment
score: 0
has text: You want your element to scroll with the page but once its 30px below the top it should stick their and rest of the content scroll like usual?
type: QuestionComment

http://stackoverflow.com/comment/139210522
comment on: http://stackoverflow.com/a/78947295
type: AnswerComment
has text: @AHaworth I implemented yourt cfodes and the image is pushed too far left in tits own container while the text is perfectly centered in its container
type: Comment
score: 0

http://stackoverflow.com/a/79006371
has comment: http://stackoverflow.com/comment/139357587
score: 1
type: Answer
downvote count: 0
has body: By default, the function the_content() will render the contents of the post_content column in the wp_posts table. But you can hook into this function using the_content to customise the post content between the database fetch and the rendering. Add your table using this hook, then it will be rendered by the_content() and the other plugin will see it and be able to operate on it.
answers question: http://stackoverflow.com/q/79002715
upvote count: 1

http://stackoverflow.com/comment/139285427
comment on: http://stackoverflow.com/a/78994858
type: Comment
type: AnswerComment
has text: I would honestly be interested in seeing a css version of this specific gcc animation, i'm sure it's possible, i just haven't tried. gsap makes it quite easy, surely it couldn't be too difficult with css? Would be useful to have regardless. My understanding is to do this with CSS you'd need to add a class with javascript to trigger it, but... could media queries do that?
score: 1

http://stackoverflow.com/q/78941051
score: 0
tagged with: javascript
has comment: http://stackoverflow.com/comment/139184315
tagged with: liquid
has body: I am trying to integrate some external code (CSS and JavaScript) into my Shopify store. The integration is mostly working, but it is overriding some of the existing styles of my Shopify theme, causing serious layout and ui issues. Here is what I have added to my Shopify theme files: In 'theme.liquid' (within ): In 'theme.liquid' (within ): In 'footer.liquid': While the code works and displays correctly, the CSS file (embed.css) is causing some of my existing Shopify styles to be overridden, leading to UI inconsistencies. What is the best way to include external CSS and scripts in Shopify without them affecting or overriding the existing theme styles? I am looking for a solution that keeps both the existing Shopify styles and the external styles intact without conflicts
answer count: 0
tagged with: css
has comment: http://stackoverflow.com/comment/139185099
type: UnansweredQuestion
linked to: http://stackoverflow.com/q/2417287
type: Question
has title: How to Integrate External CSS and Scripts in Shopify Without Overriding Existing Theme Styles?
tagged with: shopify
tagged with: user-interface

http://stackoverflow.com/q/79051473
tagged with: javascript
upvote count: 1
has title: How to calculate correct position of a element when dragged using translate with scale applied in javascript
tagged with: drag-and-drop
tagged with: css
accepted answer: http://stackoverflow.com/a/79106771
tagged with: drag
has body: I am working on the following Drag and Drop library as a side project. I am using transform translate to make a element draggable. I store the initial client.x and client.y and calculate the translate value by subtracting the current client.x and client.y when the mouse move. In simple terms I record the initial click coords(x,y) and when I subtract the current coords(x,y) on mouse move it will give me the distance by which mouse has moved from the initial position which I then apply to the element using translate. It works as expected. I have even implemented cursor offset which also works but the only thing I am not able to figure out is how to adjust the position if scale property is applied to the element. When the element scale is changed from 1 to any other value the size and position of the element will change which is messing up my current calculation. I have created a simple diagram which you can see here. I'm also sharing the screenshot bellow. You might need to understand the flow of the program so below is a simple explanation when a element is made draggable a pointer down event is attached to trigger dragStart. dragStart creates the default drag preview, sets the initial position and cursor offset when the element is dragged #translateDragPreview method is called to set the position of the element. The position of the element is handle by these two following methods #translateDragPreview(x?: number, y?: number) { if (this.#draggedPreview.element === null) return; const cords = { x: x ?? this.#internalState.activeCords.x, y: y ?? this.#internalState.activeCords.y, }; const initialX = this.#initialPosition.x / this.#draggedPreview.scale; const initialY = this.#initialPosition.y / this.#draggedPreview.scale; this.#draggedPreview.element.style.transform = `translate( ${cords.x - initialX}px, ${cords.y - initialY}px) scale(${this.#draggedPreview.scale})`; } #setCursorOffset( dragElement: HTMLElement, event: PointerEvent, offset: BaseDraggableType["modifiers…
score: 1
favorite count: 0
type: Question
answer count: 1
has answer: http://stackoverflow.com/a/79106771
tagged with: http://stackoverflow.com/tag/html
downvote count: 0
type: AnsweredQuestion

http://stackoverflow.com/q/79066201
type: Question
answer count: 1
tagged with: microsoft-forms
has title: Microsoft Forms: Ways to embed with possibility to edit via CSS?
score: -1
downvote count: 2
tagged with: forms
has answer: http://stackoverflow.com/a/79068383
tagged with: css
has body: At my place of work we got the office suite and so, most people are adamant to keep using, for online forms, Microsoft Forms. Thing is, I have to embed those to the website and the only way to embed I can currently find is with an Iframe, which comes with the problem that you have to take it as it is. Which is ugly. Is there another way I cannot find? A way to embed that would give me the possibility to spruce them up with my website's CSS? Sadly, the option of 'just make your forms in this particular way' is not an adventure I want to embark in. We already have enough trouble with people deciding to use their own little quirks in their email signature it would be the same problem if we tried to uniformise forms.
tagged with: embed
type: UnansweredQuestion
upvote count: 1
favorite count: 0
tagged with: iframe

http://stackoverflow.com/comment/139306206
has text: ... javascript doesn't add the class to the li-element.
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/79006973

http://stackoverflow.com/comment/139214876
type: QuestionComment
comment on: http://stackoverflow.com/q/78957784
has text: @Syntax_Error I have added the link to the website to the question
type: Comment
score: 0

http://stackoverflow.com/a/78998820
downvote count: 0
has comment: http://stackoverflow.com/comment/139290875
type: AcceptedAnswer
upvote count: 2
type: Answer
score: 2
answers question: http://stackoverflow.com/q/78998768
has comment: http://stackoverflow.com/comment/139291223
has body: The issue is because the target of the click event is not always the button as you expect it to be. It could be the img or any of the other child elements within the button. Therefore the call to dataset returns undefined and your logic falls down. To fix the issue, use e.target.closest('button') to ensure that you have a reference to the button as you expect. Here's a working example with this implemented. Note the use of addEventListener() over the onclick property, and the use of a guard clause to exit the function early when possible. const wmButton = document.querySelector("button"); const tabs = document.querySelector(".wrapper"); const tabButton = document.querySelectorAll(" .tab-button, .toggle-text, .toggle-img"); const contents = document.querySelectorAll(".content"); const wmWhiteBg = document.querySelector(".workmarket-active-bg"); tabs && tabs.addEventListener('click', e => { const button = e.target.closest('button'); if (!button) return; contents.forEach(content => content.classList.remove("active")); tabButton.forEach(btn => btn.classList.remove("active")); button.classList.add("active"); const element = document.getElementById(button.dataset.id); element.classList.add("active"); }); #tab-toggle--workmarket .container, #tab-toggle--profservices .container { margin: 30px auto; } #tab-toggle--workmarket #tab1, #tab-toggle--workmarket #tab2, #tab-toggle--workmarket #tab3, #tab-toggle--workmarket #tab4, #tab-toggle--workmarket #tab5, #tab-toggle--workmarket #tab6, #tab-toggle--profservices #tab1, #tab-toggle--profservices #tab2, #tab-toggle--profservices #tab3, #tab-toggle--profservices #tab4, #tab-toggle--profservices #tab5, #tab-toggle--profservices #tab6 { display: inline-flex; align-items: center; justify-content: center; width: 100%; gap: 50px; padding-top: 50px; } #tab-toggle--workmarket .wrapper, #tab-toggle--profservices .wrapper { max-width: 1330px; margin: auto; border-radius: 10px; } #tab-toggle--profservices .buttonWrapper { display: flex; fle…
accepted answer of: http://stackoverflow.com/q/78998768

http://stackoverflow.com/comment/139230471
score: 1
has text: That seems wrong for an image, and https://github.com/annevk/orb calls that an "opaque-blocklisted MIME type".
type: Comment
type: QuestionComment
comment on: http://stackoverflow.com/q/78948123

http://stackoverflow.com/q/79050234
tagged with: overflow
tagged with: css
has comment: http://stackoverflow.com/comment/139384888
has comment: http://stackoverflow.com/comment/139385004
has comment: http://stackoverflow.com/comment/139384991
type: UnansweredQuestion
has answer: http://stackoverflow.com/a/79057772
type: Question
has comment: http://stackoverflow.com/comment/139385017
has body: I found a behavior that when we use overflow to scroll content and try to change sub elements' horizontal position, the width of the root block increases, and we can see the changed sub element only if we scroll it to the end of the root block. So my question is: how to make appear only the vertical scroll to have an opportunity to change the position of the sub elements to make them visible outside the root block? This following example shows that strong element increases the width of the .block element and it makes appeaser of the horizontal scroll and is hidden inside this element but not offsets outside. Source code: .block { position: absolute; width: 300px; max-height: 100px; background: cyan; overflow-y: auto; overflow-x: auto; padding: 10px; } strong { position: absolute; left: 300px; } some text some text some text some text some some text some text some text some text some some text some text some text some text some some text some text some text some text some some text
answer count: 1
has title: Elements are hidden inside the scrolled block area
score: 0
has comment: http://stackoverflow.com/comment/139384962
tagged with: css-position

http://stackoverflow.com/comment/139319189
comment on: http://stackoverflow.com/q/79014373
type: Comment
has text: Add code for assistance. Makes it convenient to others
score: 1
type: QuestionComment

http://stackoverflow.com/comment/139372391
type: AnswerComment
comment on: http://stackoverflow.com/a/79040390
type: Comment
score: 0
has text: Yes, silly of me, I meant to call the changeImage to get things started (rather than repeating the various settings). Now corrected.

http://stackoverflow.com/q/78974947
type: UnansweredQuestion
tagged with: sass
type: Question
tagged with: css
answer count: 1
has answer: http://stackoverflow.com/a/78975278
score: 0
has title: And selector referencing parent selector twice in SCSS
has body: I want to do in SCSS something quite simple in vanilla CSS: targeting an element that has two classes. A simplified example is below: I want to target the child that has both child--green and child--red. I tried stuff like below, but it doesn't work: .parent { & > .child { &--red { color: red; } &--green { color: green; } &--red.&--green { color: yellow; } } } I understand why that syntax doesn't work, considering how the parent selector works, but I'm wondering if there's an elegant way to do it with the parent selector without having to repeat the child like: .parent { & > .child { &--red { color: red; } &--green { color: green; &.child--red{ color: yellow; } } // OR &--red.child--green { color: yellow; } } } Any idea? Thanks!

http://stackoverflow.com/comment/139180180
score: 0
comment on: http://stackoverflow.com/q/78938648
type: QuestionComment
has text: Try: `position: block;`
type: Comment

http://stackoverflow.com/comment/139136558
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78915276
has text: As you can see, it works in my snippet which contains all the code you provided. So there has to be some additional code which causes that and which you didn't post.
type: Comment

http://stackoverflow.com/q/79013054
has comment: http://stackoverflow.com/comment/139317070
answer count: 0
tagged with: css
has title: How can I use Anime.js to create multiple ripples that spread outward from the center, gradually become transparent, and finally disappear?
type: UnansweredQuestion
tagged with: animejs
has body: When I create an infinite loop animation using CSS, the effect is inconsistent with the one created using Anime.js When I create looping animations using CSS, each loop is seamless. However, when I create animations using Anime.js, there's a pause at the end of each animation cycle I want to use Anime.js to achieve animations consistent with CSS This is the effect I achieved using CSS： This is the effect I achieved using animejs：
type: Question
has comment: http://stackoverflow.com/comment/139316807
tagged with: http://stackoverflow.com/tag/html
score: 0

http://stackoverflow.com/q/78971122
has comment: http://stackoverflow.com/comment/139243083
tagged with: reactjs
score: 0
tagged with: next.js
has body: Due to the fact that I have a lot of dynamic data, it is impossible to use navigation through the Link or tag after updating the page or as soon as the page is loaded for the first time. Because as soon as the user wants to click on the button that will scroll to another section for the first time, he will see that the navigation has scrolled lower than necessary. In addition, after the first scrolling of the navigation, the scroller works as it should be, and stops where it needs to, unless the page is completely refreshed. WorkingWithSection.tsx import { cardItems } from "@/data"; import React from "react"; import Card from "./Card"; import SectionHeader from "./UI/SectionHeader"; const WorkingWithSection = () => { return ( WorkingWith {cardItems.map((item, index) => ( <Card key={item.id} icon={item.icon} title={item.title} description={item.description} addClasses={ index === cardItems.length - 1 ? "md:col-span-2 lg:order-3" : `lg:order-${index === cardItems.length - 2 ? "4" : index}` } /> ))} ); }; export default WorkingWithSection; Card.tsx import React from "react"; interface CardProps { title: string; description: string[]; addClasses: string; icon: React.ElementType; } const Card: React.FC<CardProps> = ({ title, description, addClasses, icon: Icon, }) => { return ( <Icon className="h-16 w-16 fill-white-100 group-hover:fill-black-100" /> {title} {description.map((listItem, index) => ( {listItem} ))} ); }; export default Card; ##Just Link navigation with smooth behavior "use client"; import React, { useLayoutEffect, useState } from "react"; import { Link } from "react-scroll"; interface ButtonNavigationProps { navigateTo: string; children: React.ReactNode; } const ButtonNavigation: React.FC<ButtonNavigationProps> = ({ navigateTo, children, }) => { return ( {children} <path d="m560-240-56-58 142-142H160v-80h486L504-662l56-58 240 240-240 240Z" /> ); }; export default ButtonNavigation; d Most likely, this is the fault of the dynamic content of other sections, bec…
answer count: 0
tagged with: css
tagged with: scrollbar
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139243978
has title: Page scroller does not work correctly due to dynamic data / content
type: Question
tagged with: react-scroll

http://stackoverflow.com/comment/139339143
score: 0
type: AnswerComment
has text: I've been trying this code and I'm having trouble getting it to work. Do I need to make otherchanges to my `hmtl` file?
comment on: http://stackoverflow.com/a/79018152
type: Comment

http://stackoverflow.com/a/79052238
downvote count: 1
answers question: http://stackoverflow.com/q/79052168
type: AcceptedAnswer
type: Answer
score: 0
upvote count: 1
accepted answer of: http://stackoverflow.com/q/79052168
has body: The problem was the top margin that you used, you used it negatively /*Feed*/ .feed-mt{ display:flex; gap:10px } .feed-row { padding-bottom: 40px; padding-right: 20px; } .feed-mt .post-submitted-info { font-weight: 700; text-align: center; line-height: 1; position: relative; } .post-submitted-info { column-width: 55px; margin-left: 10px; } .submitted-date { border-right: 1px solid #c2c2c2; } .submitted-date { margin-top: 12px; width:60px; } .post-submitted-info .year { padding-bottom: 8px } .post-submitted-info .month, .post-submitted-info .year { font-size: 14px; text-transform: uppercase; } .feed-mt .post-submitted-info .day { font-size: 29px; font-weight: 900; padding-bottom: 2px; } .feed-main-content { display:flex; flex-direction:column; align-items:start; width:calc(100% - 100px); } .field-item{ font-weight: normal; border-bottom: 1px solid #acacac; } .feed-main-content .header { }

http://stackoverflow.com/a/79045992
downvote count: 2
has body: color is inherited so you cannot really do this since the h1 will (in all the cases) inherit the color that changes with color-scheme Either set the color of the h1 explicitly or don't set color-scheme on the :root element
upvote count: 1
type: Answer
answers question: http://stackoverflow.com/q/79045866
score: -1

http://stackoverflow.com/a/79000845
has comment: http://stackoverflow.com/comment/139294535
has comment: http://stackoverflow.com/comment/139294563
has comment: http://stackoverflow.com/comment/139294635
upvote count: 2
has comment: http://stackoverflow.com/comment/139295299
has comment: http://stackoverflow.com/comment/139294695
answers question: http://stackoverflow.com/q/79000658
has comment: http://stackoverflow.com/comment/139296893
score: 2
type: Answer
has body: In CSS, when both selectors are selecting the same element and applies the same property, browser chooses which property to apply based on Cascading order, where you can see Specificity is less important than Layers as mentioned in the link: The cascade lies at the core of CSS, as emphasized by the name: Cascading Style Sheets. When a selector matches an element, the property value from the origin with the highest precedence gets applied, even if the selector from a lower precedence origin or layer has greater specificity. I did not see this in the list in MDN, but in the spec Layer's position in Cascading Order is mentioned as such: Origin and Importance Context Element-Attached Styles Layers Specificity Order of Appearance To sum up, Cascading layers is considered less important than origin but more important than specificity. Hence, no matter how you select the element in the base layer, by pseudo classes (such as :hover), or Id, or whatever, it will always be overwrite by later layers in the same stylesheet. With the above knowledge, looking at your example, if all layers are removed, the hovering transition happens because it was originally purple from .item with specificity (0,1,0). When you hover it, it is selected by .item:hover which has specificity (0,2,0), so the red color overwrites the purple color. This doesn't happen when they are grouped into layers such as in your case, because even when its hovered, the :hover selector is still in a lower layer, so it doesn't overwrite .item in the higher layer even if it has higher specificity. If you look into the devs tool, you can see all 3 declarations, while the one in layer special is applied. Hence, I'm not sure if using the term "forgot" is correct since its simply one declaration overwritten by another. You won't say the browser forgots a declaration if its overwritten by another declaration with !important. In terms of Cascading order, selecting an element with :hover has nothing different with selecting…
has comment: http://stackoverflow.com/comment/139294645
downvote count: 0
has comment: http://stackoverflow.com/comment/139294629
has comment: http://stackoverflow.com/comment/139294633
has comment: http://stackoverflow.com/comment/139294630

http://stackoverflow.com/comment/139180748
comment on: http://stackoverflow.com/a/78935743
type: Comment
score: 0
type: AnswerComment
has text: is it not possible to solve it without hidden cell

http://stackoverflow.com/comment/139240371
comment on: http://stackoverflow.com/q/78971329
has text: Please turn your code into a runnable snippet, right here, not on an external site. Also, what's the point in using `grid` without defining an actual grid? You have neither declared `grid-template-rows` nor `grid-template-columns`. What grid do you expect to get?
type: QuestionComment
type: Comment
score: 0

http://stackoverflow.com/comment/139268264
comment on: http://stackoverflow.com/a/78986353
type: AnswerComment
type: Comment
has text: @Chap, you can actually change to `background-size: 100% auto;`. It will not stretch the image larger than 100% of available space, but it can stretch the image if it's smaller than the available space. You can actually extract the image dimensions through javascript and adjust it every time the window size changes... Or just reset the css rule through javascript to `background-size: min(100%, ${width}) auto;`...
score: 0

http://stackoverflow.com/comment/139348506
type: AnswerComment
has text: But the code shown says to default to sans-serif should Poppins not be available so I don't understand how this answer helps.
type: Comment
comment on: http://stackoverflow.com/a/79030319
score: 0

http://stackoverflow.com/comment/139257420
has text: Thank you for reminding me! I’ve updated my response as well.
comment on: http://stackoverflow.com/a/78964887
type: Comment
score: 0
type: AnswerComment

http://stackoverflow.com/comment/139140253
score: 0
comment on: http://stackoverflow.com/q/78917299
type: QuestionComment
has text: Not even if I would manage to import it locally?
type: Comment

http://stackoverflow.com/a/78948951
score: 0
answers question: http://stackoverflow.com/q/78948750
has body: If you don't need individual scroll bars for each .status container, you can apply the following CSS changes: * { box-sizing: border-box; } html, body { margin: 0; width: 100%; height: 100%; background-color: red; color: #fff; text-align: center; } .container { padding: 20px; width: 100%; height: 100%; display: grid; grid-auto-rows: auto 1fr; row-gap: 20px; } .content-1 { width: 100%; height: 60px; background-color: yellow; } .content-2 { width: 100%; height: 100%; background-color: pink; display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 20px; overflow-y: scroll; } .status { background-color: blue; padding: 5px; } .card { width: 100%; height: 200px; background-color: green; margin-bottom: 10px; } Status Status Status Status This will ensure that the .content-2 container has a scrollbar when necessary, without affecting each individual .status container. However, if you need individual scroll bars for each .status container, you can apply the following changes: * { box-sizing: border-box; } html, body { margin: 0; width: 100%; height: 100%; background-color: red; color: #fff; text-align: center; } .container { padding: 20px; width: 100%; height: 100%; display: grid; grid-auto-rows: auto 1fr; row-gap: 20px; } .content-1 { width: 100%; height: 60px; background-color: yellow; } .content-2 { width: 100%; height: 100%; background-color: pink; display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 20px; overflow-y: scroll; } .status { background-color: blue; padding: 5px; overflow-y: auto; } .card { width: 100%; height: 200px; background-color: green; margin-bottom: 10px; } Status Status Status Status Note: Applying overflow-y: scroll; to the .content-2 container will result in an additional scrollbar at the bottom, which will not be useful but will appear due to the overflow-y: scroll property on .content-2.
type: Answer

http://stackoverflow.com/comment/139315314
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/79011686
has text: This is not the problem, because then other SVGs would not be displayed correctly. But thanks for the working code, it helped me narrow down my troubleshooting. It was solved, # had to be coded with %23.

web-frontend
type: Tag
tags question: http://stackoverflow.com/q/79041692
tags question: http://stackoverflow.com/q/78961046
tags question: http://stackoverflow.com/q/78917706
tag name: web-frontend
tags question: http://stackoverflow.com/q/79015496
tags question: http://stackoverflow.com/q/78909194
tags question: http://stackoverflow.com/q/79105355
tags question: http://stackoverflow.com/q/79222206
tags question: http://stackoverflow.com/q/79119746

http://stackoverflow.com/q/79017364
answer count: 1
has title: How to escape conflicts of CSS between two UI Frameworks in Vue3?
has body: We decided to move from one UI framework to another (from early BootstrapVueNext 0.7.3 to PrmeVue v3 or v4) and have style conflicts. The Doprdown component style or the Button component style is broken if we try to use both frameworks. So is there a clear way to resolve these style conflicts? And this is my way to plug in css: import "bootstrap/dist/css/bootstrap.css"; import "bootstrap-vue-next/dist/bootstrap-vue-next.css"; import "primevue/resources/themes/aura-light-green/theme.css"; And how can I use CSS layers, for example, or is it not a correct solution? Primevue v3 has a CSS layer primevue by default, but BootstrapVueNext hasn't.
score: 0
tagged with: css
tagged with: vuejs3
type: UnansweredQuestion
tagged with: bootstrap-vue
tagged with: css-layer
has answer: http://stackoverflow.com/a/79020307
type: Question
tagged with: primevue

http://stackoverflow.com/a/79037983
has comment: http://stackoverflow.com/comment/139367023
score: 1
answers question: http://stackoverflow.com/q/79036854
has comment: http://stackoverflow.com/comment/139368239
type: AcceptedAnswer
has body: You can use max-width and max-height and include calculated padding/margin. I added flex with column axis, justify content and align items to the parent div of image to center. Also added a calculation in CSS for the added margin. const duration = 2000; // time (msec) to display each slide const sizes = [ [4000, 500], [1000, 4000], [600, 400], [100, 200] ]; const sleep = ms => new Promise(r => setTimeout(r, ms)); let size_index = 0; function show_slides(duration) { let this_duration = duration; const my_parent = document.querySelector('#slide-div'); if (size_index == sizes.length) { size_index = 0; } let w = sizes[size_index][0]; let h = sizes[size_index][1]; ++size_index; let my_randomizer = `https://placehold.co/${w}x${h}?text=${w}+x+${h}\npx`; fetch(my_randomizer) .then(my_response => my_response.blob()) .then(my_blob => { let my_url = URL.createObjectURL(my_blob); sleep(this_duration) .then(() => { URL.revokeObjectURL(my_parent.querySelector('img').src); my_parent.querySelector('img').src = my_url; show_slides(duration); }); }) .catch(my_error => console.error('Error: ', my_error)); } html { height: 100%; width: 100%; box-sizing: border-box; } body { /* prevent body from displacing */ margin: 0; /* body should perfectly superimpose the html */ height: 100%; width: 100%; } .outer-div { display: flex; flex-flow: column; height: 100%; /* Now create left/right margins */ margin: 0 0.5em; } .inner-fixed-div { margin-top: 0.5em; } .inner-remaining-div { margin-bottom: 1em; flex-grow: 1; /* hints the contents to not overflow */ overflow: hidden; } .picture-div { /* force the div to fill the available space */ width: 100%; height: 100%; /* center child elements */ display: flex; flex-direction: column; justify-content: center; align-items: center; } .picture-div-img { max-width: calc(100% - 1em); /* included 0.5em * 2 margin on parent */ max-height: calc(100% - 2em); /* included 2em margin on parent, may need adjust this further */ border: 2px solid black; } Lorem Epsom
accepted answer of: http://stackoverflow.com/q/79036854
type: Answer
has comment: http://stackoverflow.com/comment/139367196
downvote count: 0
has comment: http://stackoverflow.com/comment/139368129
has comment: http://stackoverflow.com/comment/139369232
upvote count: 1
has comment: http://stackoverflow.com/comment/139368999
has comment: http://stackoverflow.com/comment/139369206
has comment: http://stackoverflow.com/comment/139367342

http://stackoverflow.com/a/78949894
type: AcceptedAnswer
type: Answer
has body: I was able to resolve this issue by using JS and translateY. Updated version is up in codepen if you guys are curious. const middleTable = document.getElementById('middleTable'); const stickyMiddleHeader = document.getElementById('stickyMiddleHeader'); window.addEventListener('scroll', () =&gt; { const scrollTop = window.scrollY; const tableOffsetTop = middleTable.getBoundingClientRect().top + window.scrollY; const translateY = scrollTop &gt; tableOffsetTop ? scrollTop - tableOffsetTop : 0; stickyMiddleHeader.style.transform = `translateY(${translateY}px)`;});
downvote count: 0
answers question: http://stackoverflow.com/q/78933187
accepted answer of: http://stackoverflow.com/q/78933187
upvote count: 1
score: 1

user-agent
tag name: user-agent
tags question: http://stackoverflow.com/q/79048090
type: Tag
tags question: http://stackoverflow.com/q/79281296

http://stackoverflow.com/q/78951104
type: Question
answer count: 1
tagged with: html-table
tagged with: wordpress
score: 0
has body: I am making a post template that includes a rather large and complicated table. When editing in the classic editor 'visual' mode, everything looks like it matches. However, when it is published, the text does not match up at all. See screen grabs for example of current issue. Below is the code Copy and pasted. LOG DATE: [xyz-ips snippet="ACF-Log-Date"] CHASE VEHICLE: [xyz-ips snippet="ACF-Chase-Vehicle"] CHASE PARTNERS: [xyz-ips snippet="ACF-Chase-Partners"] TARGET REGION: [xyz-ips snippet="ACF-Target-Region"] MILES DRIVEN [xyz-ips snippet="ACF-Chase-Miles"] SPC OUTLOOK: [xyz-ips snippet="ACF-SPC-Outlook"] TORNADO HAIL WIND [xyz-ips snippet="ACF-SPC-Tornado"] [xyz-ips snippet="ACF-SPC-Hail"] [xyz-ips snippet="ACF-SPC-Wind"] TORNADOES SEEN: [xyz-ips snippet="ACF-Tornado"] HAIL ENCOUNTERED: [xyz-ips snippet="ACF-Hail"]" Published View Wordpress Visual Editor Have attempted to make tweaks in the CSS style sheet where a table was defined by adding a second table class. No changed made to published post. /*table*/ table { width: 100%; text-align: left; margin: 0 0 1.5em 0; font-size: 80%; } th, td { padding: 1em 0.8em 0.8em 0.8em; border-top: 1px solid rgba(100,100,100,0.2); line-height: 1.5em; } th { border-top: none; } /*table for chase logs*/ table2 { width: 100%; text-align: left; margin: 0 0 0 0; font-size: 100%; } th, td { padding: 0em 0em 0em 0em; border-top: 0px solid rgba(100,100,100,0.2); line-height: 1.5em; } th { border-top: none; }
tagged with: php
has title: Wordpress Text in Table Doesn't Match Rest of Post
has comment: http://stackoverflow.com/comment/139204016
tagged with: wordpress-theming
tagged with: css
has answer: http://stackoverflow.com/a/78951163
type: UnansweredQuestion

http://stackoverflow.com/q/79003457
tagged with: overflow
tagged with: css
has answer: http://stackoverflow.com/a/79003662
tagged with: transition
has comment: http://stackoverflow.com/comment/139299908
accepted answer: http://stackoverflow.com/a/79003662
tagged with: width
upvote count: 1
has body: Here is the fiddle with the best i could achieve regarding my problem: https://jsfiddle.net/langocha/rofyxbhq/ When i hover the yellow box, i want a message to get out by the right side of it and shift the blue box, also on the right. I'm using a transition but the opening of the message is instantly shifting the blue box (by the width of the message about to be displayed), only then the message starts its width transition ... to fill the space. I'd like a full progressive transition, and not two steps as it is right now. Any idea? Tried to play around with width: 0, width: 0px or width: 0% on .slider and .container:hover .slider to get different results but none fixed anything.
type: Question
answer count: 1
downvote count: 1
type: AnsweredQuestion
score: 0
has title: Overflow hidden and parent width transition
favorite count: 0

http://stackoverflow.com/q/78926724
has comment: http://stackoverflow.com/comment/139162203
has body: My Chart.js line graph dashed border grid line vanishes for few few seconds when I hover over graph point data. This also happens when I activate and deactivate datasets using the "This Month" and "Last Month" toggles. Also, my data line appears to be backwards of those grid lines. The grid lines are supposed to be backward of the data line. I tried increasing the z index for data lines, but it still shows the data line backward of the grid line. Also, regarding the grid line disappearing concerns, I tried plain grid lines, which worked, but I wanted to use dashed border grid lines. I want those grid lines to be backward of the data line, and when I hover over a graph point, it should stay fixed rather than disappear for a few seconds. Also, when I activate and deactivate a data line using the toggle option, the grid line should not vanish at all. Line graph <circle cx="6" cy="6" r="4.5" fill="white" stroke="#5159A7" stroke-width="3"/> This Month <circle cx="6" cy="6" r="4.5" fill="white" stroke="#F8C140" stroke-width="3"/> Last Month
tagged with: css
answer count: 0
tagged with: chart.js
type: UnansweredQuestion
tagged with: http://stackoverflow.com/tag/html
type: Question
has title: Why do my line graph dashed grid lines disappear when I hover over graph point data?
tagged with: graph
tagged with: javascript
score: 0

http://stackoverflow.com/comment/139224453
type: QuestionComment
comment on: http://stackoverflow.com/q/78962819
score: 1
type: Comment
has text: The second setting is selecting all lis that are siblings (come after, not before, so that's all except the first one in this example) an li and that have a label as a direct descendant, not the other way round as you have interpreted it.

java
tags question: http://stackoverflow.com/q/79058417
tags question: http://stackoverflow.com/q/78918262
tag name: java
tags question: http://stackoverflow.com/q/78965523
tags question: http://stackoverflow.com/q/78906838
type: Tag
tags question: http://stackoverflow.com/q/78943928
tags question: http://stackoverflow.com/q/79242206
tags question: http://stackoverflow.com/q/79137572
tags question: http://stackoverflow.com/q/79228210
tags question: http://stackoverflow.com/q/79184745
tags question: http://stackoverflow.com/q/79113153
tags question: http://stackoverflow.com/q/79237942
tags question: http://stackoverflow.com/q/79226268
tags question: http://stackoverflow.com/q/79416043
tags question: http://stackoverflow.com/q/79285720
tags question: http://stackoverflow.com/q/79450669
tags question: http://stackoverflow.com/q/79453924
tags question: http://stackoverflow.com/q/79528674

http://stackoverflow.com/q/78998815
type: Question
has body: I have a horizontal line element connected to a nav menu inside of a flexbox container which in turn is inside of a flexbox container as well: When I resize the window the menu stacks instead of the horizontal line getting shorter. How can I fix it? ( I want menu to stay intact and the line to be the one shrinking) #menu_container { display: flex; justify-content: right; border-style: solid; border-color: #ffffff; border-width: 0px; padding-bottom: 1em; } #menu_align { display: flex; justify-content: flex-end; width: 50%; } #line_horizontal { height: 2px; margin-top: 30px; width: 100%; background: rgba(0, 0, 0, 0.50); } #nav { border-style: solid; border-color: #000; width: 590px; font-size: 0.9em; margin-right: 9em; margin-left: 0em; background-color: rgba(0, 0, 0, 0.1); border-left: solid 1px #000; border-right: solid 1px #000; } #nav ul { list-style: none; padding-left: 0em; } #nav ul li { float: right; padding: 0.5em; } About Portfolio Contact
tagged with: http://stackoverflow.com/tag/html
answer count: 1
has comment: http://stackoverflow.com/comment/139297678
score: 0
has answer: http://stackoverflow.com/a/79012615
tagged with: css
has comment: http://stackoverflow.com/comment/139295101
tagged with: flexbox
type: UnansweredQuestion
has title: How to manage CSS flexbox element size
has comment: http://stackoverflow.com/comment/139293669

http://stackoverflow.com/q/79049572
tagged with: css
has title: How to use font awesome icons as bullet points in Quarto revealjs presentation?
tagged with: reveal.js
tagged with: quarto
has comment: http://stackoverflow.com/comment/139428636
score: 0
type: UnansweredQuestion
has answer: http://stackoverflow.com/a/79052245
type: Question
answer count: 1
linked to: http://stackoverflow.com/q/78646332
has body: I'm making a Quarto presentation and I'd like (for a bit of fun) to be able to use font awesome icons as bullet points. I have a css style sheet which I point my Quarto doc to on rendering. I don't really know much css but can often tinker enough with what I find online to make things work. However I can't really find an answer to how to do this. I have an unordered list with 4 levels and I've figured out how to amend my style sheet to change the type of bullet point at each level. The following works (the list types are just examples): .reveal ul { list-style-type: lower-greek; list-style-position: inside; padding-left: 10; } .reveal ul ul { list-style-type: lower-alpha; list-style-position: inside; padding-left: 10; } .reveal ul ul ul { list-style-type: lower-roman; list-style-position: inside; padding-left: 10; } .reveal ul ul ul ul { list-style-type: square; list-style-position: inside; padding-left: 10; } Is there a simple way to amend this to incorporate a (font awesome) icon as the style type? Thanks.

http://stackoverflow.com/comment/139252515
type: QuestionComment
comment on: http://stackoverflow.com/q/78970177
has text: @Diego D, if I remove the keep-together class, then requirement 1 from desired behaviour will not work anymore. I want the words to change lines together and only when they don't fit alltogether on the same line, only then wrap.
type: Comment
score: 0

http://stackoverflow.com/comment/139269409
type: QuestionComment
comment on: http://stackoverflow.com/q/78986368
type: Comment
has text: @AHaworth take a look at this screenshot please https://prnt.sc/oIQl5OTHlk3L Following Unmitigated's approach below I was able to get the most part of what I want. All that's left is the two items in the rightmost column to go up, just underneath the first item of the column...
score: 0

http://stackoverflow.com/comment/139277568
type: Comment
comment on: http://stackoverflow.com/a/78991582
score: 0
type: AnswerComment
has text: @jmancherje the height/width respect thr same viewbox proportion : 1 pixel for 2 svg coordinates values. the viewbox is `4 4 40 40` not `0 0 48 48`

http://stackoverflow.com/q/78929415
tagged with: mobile
has comment: http://stackoverflow.com/comment/139163464
linked to: http://stackoverflow.com/q/64968386
has comment: http://stackoverflow.com/comment/139163953
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139163309
type: Question
tagged with: http://stackoverflow.com/tag/html
duplicate of: http://stackoverflow.com/q/64968386
has title: How to force a animated background in a website to run on a mobile?
answer count: 1
has body: I'm encountering an issue with my code. I want to set a video as the background of my website. While the code runs perfectly on my computer, the video doesn't play automatically on my phone. Instead, it pauses, and I have to manually tap the screen to start the video. This problem persists even when the site is hosted on an HTTPS server. Below is my code. Any help would be greatly appreciated—thanks in advance! function playVideo() { var video = document.getElementById('background-video'); if (video) { var playPromise = video.play(); if (playPromise !== undefined) { playPromise.then(function() { console.log('Video is playing'); }).catch(function(error) { console.log('Video playback failed:', error); }); } } } function redirectToMenu() { window.location.href = 'menu.html'; } document.addEventListener('DOMContentLoaded', function() { playVideo(); setTimeout(playVideo, 1000); setTimeout(redirectToMenu, 9000); }); document.addEventListener('click', function() { playVideo(); }); html, body { margin: 0; padding: 0; height: 100%; width: 100%; overflow: hidden; position: relative; } video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; } Video Background Your browser does not support the video tag.
has comment: http://stackoverflow.com/comment/139163476
score: 0
has answer: http://stackoverflow.com/a/78930566
tagged with: css
has comment: http://stackoverflow.com/comment/139163951

http://stackoverflow.com/comment/139320061
type: QuestionComment
type: Comment
comment on: http://stackoverflow.com/q/79014805
has text: You mean, what you get for `$attr` is a string with comma-separated values already? Then use `explode` to split those values into an array first, and then loop over the array, to create your individual spans for each one.
score: 0

http://stackoverflow.com/comment/139128967
comment on: http://stackoverflow.com/q/78910465
type: Comment
score: 0
has text: You need to fix this at the server end, not the browser end. The server is labelling the file incorrectly when it sends it to the browser. Fully featured web servers such as Apache contain a config file which associates file types with mime types. I don't know what Golang provides ... if it is more of a DIY solution, then you may need to handle this in your code. When a request is for a CSS file, you may need to set the `content-type` header as you respond. [This post](https://www.informit.com/articles/article.aspx?p=2861456&seqNum=5) may be helpful.
type: QuestionComment

http://stackoverflow.com/comment/139135112
has text: Then give `div.red` a pseudo element that you position over that intersection, so that it can "capture" the mouse cursor in that area.
comment on: http://stackoverflow.com/q/78914275
type: QuestionComment
score: 1
type: Comment

http://stackoverflow.com/comment/139248958
has text: I'm unable to change the style of the embedded checkbox. How is this done?
type: QuestionComment
comment on: http://stackoverflow.com/q/78975917
type: Comment
score: 0

http://stackoverflow.com/comment/139258807
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78980629
has text: by the way the attempt of setting the `columnWidth` with a function instead of using a number it's totally wrong. It doesn't make any difference what the function is going to return, it won't be executed if you don't make it an IIFE expression like `function (){/*...*/}()` .. and by the way it will be evaluated only once when the object gets created .. not again when invoking `.layout()`. For reference I used the js available in the cdn here https://cdnjs.com/libraries/masonry (masonry.desandro.com)
type: QuestionComment

http://stackoverflow.com/comment/139294640
score: 0
comment on: http://stackoverflow.com/q/79000802
type: QuestionComment
has text: Did you forget to attach a picture? And please show us the code you have tried.
type: Comment

http://stackoverflow.com/q/78921605
type: AnsweredQuestion
has answer: http://stackoverflow.com/a/78921759
accepted answer: http://stackoverflow.com/a/78921759
score: 0
tagged with: css
tagged with: flexbox
has comment: http://stackoverflow.com/comment/139148663
has body: I want to know if there is a way to have 4 items per row but not have the rows with &lt;4 items to stretch to fill the space. .item-container { display: inline-flex; flex-wrap: wrap; flex-direction: row; } .item { display: flex; flex: 1 0 calc(25% - 40px); color: black; background-color: rgba(250, 250, 210); flex-direction: column; padding: 10px; margin: 10px; border-radius: 20px; } /* If there are 4 items it works well, but if there is 1-3 items they stretch to fill the space and look off. */
type: Question
has title: 4 items per row but with empty space if there is less than 4 items?
answer count: 1

http://stackoverflow.com/q/79058934
score: 0
has body: So, i'm currently working on my GTA RP loading screen, this screen is just an HTML webpage. I have a general idea about what I want it to look like and it's the same kind of animation as "The Rookie" series opening (something like that : https://www.youtube.com/watch?v=8Q4UALvlcVQ). with the text scrolling out from left and right, then a zoom on the text and the background. So far I've tried to adapt this codepen for the stretchy side, but no luck : const app = document.getElementById('app'); const musique = app.querySelector('audio'); const volume = app.querySelector('#volume'); const VOLUME_MAX_MULT = 0.8; function setVolume(volume) { musique.volume = (volume / 100) * VOLUME_MAX_MULT; } function bootstrap() { // Change volume volume.addEventListener('input', (event) => { setVolume(event.currentTarget.value); }); musique.play() } window.addEventListener('message', function(e) { if (e.data.eventName === 'initFunctionInvoking' && e.data.name === 'FinalizeLoad') { setInterval(function () { if (musique.volume > 0.01) { musique.volume -= 0.01; } }, 50); } }); bootstrap(); @import url('https://fonts.googleapis.com/css2?family=Prompt:wght@300&display=swap'); * { user-select: none; } body { font-family: 'Prompt', sans-serif; font-weight: 300; overflow: hidden; padding: 0; margin: 0; } #logo { position: absolute; color: white; align-content: center; width: 100%; height: 100%; } #logo-container { font-family: 'Prompt'; text-transform: uppercase; font-size: 128px; align-content: center; text-align: center; } #sunset { overflow:hidden; animation: revealup 2s; } #rp { overflow: hidden; animation:reveal 2s; } @keyframes reveal { 0% {width:0px;} 20% {width:0px;} 40% {width:500px;} } @keyframes revealup { 0% {height:0px;} 20% {height:30px;} } #rp { font-family: 'Prompt'; text-transform: uppercase; font-size: 96px; align-content: center; text-align: center; } #app { position: absolute; inset: 0; } img { position: absolute; z-index: -1; object-fit: cover; width: 100%; height: 100%; …
tagged with: css
type: UnansweredQuestion
has title: Text expanding animation in CSS
type: Question
tagged with: css-animations
has answer: http://stackoverflow.com/a/79059083
answer count: 1

http://stackoverflow.com/comment/139273636
type: Comment
has text: *Let's imagine it's not possible to set one box-shadow to parent of this two blocks*, why?
type: QuestionComment
comment on: http://stackoverflow.com/q/78989508
score: 2

http://stackoverflow.com/comment/139290980
type: QuestionComment
has text: Thanks for that suggestion i added a screenshot of intended design, i thought i had previously added my bad
type: Comment
comment on: http://stackoverflow.com/q/78997151
score: 0

http://stackoverflow.com/q/78967859
has answer: http://stackoverflow.com/a/78968651
has body: If you shrink your window until the div's are overflowing and you have to scroll, the padding on the right side disappears. Any ideas on how to add padding to the right side? I've tried moving the padding from .container to .flex-container, but it didn't work. .container { height: 100vh; overflow: scroll; padding: 2rem; } .flex-container { display: flex; gap: 0.5rem; } .card { width: 150px; flex-shrink: 0; background: #e5e7eb; padding: 1rem; border-radius: 4px; } h2 { font-family: sans-serif; } Test1 Test1 Test1 Test1 Test1 Test1
possible better answer: http://stackoverflow.com/a/78968040
type: AnsweredQuestion
score: 0
has title: How to add padding to the right side of an overflowing div
tagged with: http://stackoverflow.com/tag/html
has answer: http://stackoverflow.com/a/78967881
has answer: http://stackoverflow.com/a/78968040
answer count: 3
type: Question
accepted answer: http://stackoverflow.com/a/78967881
tagged with: css

http://stackoverflow.com/q/79023748
has answer: http://stackoverflow.com/a/79026980
favorite count: 0
has comment: http://stackoverflow.com/comment/139337126
type: Question
has answer: http://stackoverflow.com/a/79369673
tagged with: adsense
tagged with: blogger
downvote count: 1
score: 2
upvote count: 3
has comment: http://stackoverflow.com/comment/139339883
has body: We have a website on Blogger to print legal documents but when printing we got a Google Adsense message in the top of the page as you can see in the document picture and same message appears in the footer of the website and it's has this class .ipr-container and same with pop-up in bottom of the website that appears in the printed document and it has an ID #google-anno-sa and they are related to Google Ad intents and each document content exist inside this . I tried many CSS and Javascript solutions like this code to hide all classes and IDs but they don't work at all. However when I use developers tools and delete the DIVs related to .ipr-container and #google-anno-sa everything works fine. How can I hide those two elements to have a normal printed page with a CSS or JavaScript code. @media print { .ipr-container, #google-anno-sa { display: none; } }
tagged with: javascript
has comment: http://stackoverflow.com/comment/139967428
answer count: 2
tagged with: printing
has title: How to hide Google Ads that appeared on our printed documents?
tagged with: css
type: UnansweredQuestion

http://stackoverflow.com/q/79053527
score: -2
upvote count: 1
tagged with: node.js
has title: How do I write a currency symbol other than $ in html document using the vs code editor
type: UnansweredQuestion
linked to: http://stackoverflow.com/q/36356883
favorite count: 0
type: Question
linked to: http://stackoverflow.com/q/57612504
has comment: http://stackoverflow.com/comment/139390717
tagged with: http://stackoverflow.com/tag/html
answer count: 2
tagged with: javascript
tagged with: css
has answer: http://stackoverflow.com/a/79053621
downvote count: 3
has body: I was writing an html codes for online shopping and i needed to include a currency symbol other than the default $ option because it's going to be in another form of currency and not dollar. currency like the Naira which has N with double strike through. I can do that in the microsoft word because it has the strike through and double strike through features but i am stuck in this vs code editor I tried adding a naira symbol but the only available feature is a dollar and euro currency sign on my keyboard
has answer: http://stackoverflow.com/a/79053546
duplicate of: http://stackoverflow.com/q/36356883

http://stackoverflow.com/comment/139134746
has text: You can't just transition CSS variables like that, you need to create a custom `@property` first - https://stackoverflow.com/a/74079080/1427878
comment on: http://stackoverflow.com/q/78914182
score: 1
type: Comment
type: QuestionComment

http://stackoverflow.com/q/79016707
type: Question
upvote count: 2
has answer: http://stackoverflow.com/a/79016899
tagged with: http://stackoverflow.com/tag/html
score: 2
duplicate of: http://stackoverflow.com/q/37406353
has comment: http://stackoverflow.com/comment/139323942
has answer: http://stackoverflow.com/a/79016850
answer count: 2
has comment: http://stackoverflow.com/comment/139324704
linked to: http://stackoverflow.com/q/37406353
downvote count: 0
tagged with: css
has body: I have a element and css like this .hero-title { background: #000; color: #ffffff; display: inline-block; padding: 20px; max-width: 473px; } Vessel / tank destruction facility Here is the outcome: I want to remove the extra spacing on the right side, so that the black background ends at "Vessel / tank", in other words, when line break happens, it should align with the widest word and not take up the entire 473px width.
type: UnansweredQuestion
favorite count: 0
has title: How to remove extra whitespace when line breaks

http://stackoverflow.com/q/79047847
has body: I want "Connor Schotz" to be even with the "Home, About, Contact". Right now the h1 "Connor Schotz" is completely centered but the list is not. I am unsure of how to make them align properly. header { position: relative; top: 0; left: 0; display: flex; padding: 20px 50px; justify-content: space-between; align-items: center; border: 1px solid black; } h1 { margin-top: 0; margin-bottom: 0; margin-left: 0; margin-right: 0; font-weight: normal; padding: 16px; font-size: 24px; border: 1px solid black; } .nav { list-style: none; } .list { float: left; } li a { border: 1px solid black; text-decoration: none; color: black; padding: 16px; font-size: 24px; } Connor Schotz Home About Contact I have tried changing everything and nothing seems to work.
has comment: http://stackoverflow.com/comment/139380692
score: 0
has title: h1 and list items not aligning in my navigation bar
answer count: 2
tagged with: css
has answer: http://stackoverflow.com/a/79047864
has comment: http://stackoverflow.com/comment/139380788
type: UnansweredQuestion
type: Question
has answer: http://stackoverflow.com/a/79047929
has comment: http://stackoverflow.com/comment/139380758
tagged with: http://stackoverflow.com/tag/html

http://stackoverflow.com/q/78914356
tagged with: css
tagged with: background
has answer: http://stackoverflow.com/a/78914621
has title: CSS Animation for Background not covering 100% responsive height
has comment: http://stackoverflow.com/comment/139135093
score: 0
type: UnansweredQuestion
has body: Hey there I have this CSS code I am trying to inject into a ReadyMag project and while it is "mostly" doing what I want it will not cover odd aspect ratio browswer windows. How do I get it to cover full width and height? /* Chrome, Safari, Opera */ @-webkit-keyframes myfirst { 0% {background: #FF85E5; left:0px; top:0px;} 25% {background: #D8F0FB; left:0px; top:0px;} 50% {background: #EAFFE9; left:0px; top:0px;} 75% {background: #FFFEDE; left:0px; top:0px;} 100% {background: #F3E9FF; left:0px; top:0px;} } /* Standard syntax */ @keyframes myfirst { 0% {background: #FF85E5; left:0px; top:0px;} 25% {background: #D8F0FB; left:0px; top:0px;} 50% {background: #EAFFE9; left:0px; top:0px;} 75% {background: #FFFEDE; left:0px; top:0px;} 100% {background: #F3E9FF; left:0px; top:0px;} } /* CSS for the text */ .colorchange { max-width: 100%; min-height: 100%; margin: 0; /* Chrome, Safari, Opera */ -webkit-animation-name:myfirst; -webkit-animation-duration:10s; -webkit-animation-timing-function:linear; -webkit-animation-delay:0s; -webkit-animation-iteration-count:infinite; -webkit-animation-direction:alternate; -webkit-animation-play-state:running; /* Standard syntax */ animation-name:myfirst; animation-duration:20s; animation-timing-function:linear; animation-delay:0s; animation-iteration-count:infinite; animation-direction:alternate; animation-play-state:running; } I have tried a bunch of things to the .colorchange attributes only width: 100% and width 100% and height 100% -- and then both max and min heights at 100% and height: 100vh; Please advise -- thx
type: Question
has comment: http://stackoverflow.com/comment/139134986
tagged with: responsive
tagged with: animation
answer count: 1

http://stackoverflow.com/comment/139401734
comment on: http://stackoverflow.com/q/79059752
type: Comment
score: 0
type: QuestionComment
has text: I don't think CSS support that, but you could place the full size image inside a smaller div with overflow: hidden to achieve this.

http://stackoverflow.com/a/79047929
has comment: http://stackoverflow.com/comment/139382016
type: Answer
score: 0
has body: Consider using a grid and size reset to 16px (the default for most browsers anyway) then align the grid items. Changed here in the CSS and reset style at the top for all elements with * there thus we retain the semantics of the element for the header h1. * { box-sizing: border-box; font-size: 16px; padding: 0; margin: 0; } header { display: grid; grid-template-rows: 1fr; grid-template-columns: repeat(2, 1fr); align-items: center; padding-top: 1.25em; padding-bottom: 1.25em; padding-right: 3.125em; padding-left: 3.125em; justify-content: space-between; align-items: center; border: 1px solid black; grid-gap: 1em; } h1 { font-weight: normal; } .header-text { padding: 1em; font-size: 1.25em; border: 1px solid black; } nav .nav { list-style: none; display: grid; grid-template-rows: 1fr; grid-template-columns: repeat(3, 1fr); } .list a { border: 1px solid black; text-decoration: none; color: black; padding: 1em; font-size: 1.5em; } Connor Schotz Home About Contact
has comment: http://stackoverflow.com/comment/139380871
answers question: http://stackoverflow.com/q/79047847

http://stackoverflow.com/comment/139119557
has text: @NINE I added a backup in the post and also here: [link](https://imgur.com/a/jYMDkaR)
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78904561

http://stackoverflow.com/comment/139201807
type: Comment
score: 0
comment on: http://stackoverflow.com/a/78950019
type: AnswerComment
has text: The topic is not about logic at all, "What is the difference between overflow Hidden and Visible" and this question is answered.

cross-browser
tags question: http://stackoverflow.com/q/78995150
tag name: cross-browser
tags question: http://stackoverflow.com/q/79064004
type: Tag
tags question: http://stackoverflow.com/q/78938279
tags question: http://stackoverflow.com/q/79079507
tags question: http://stackoverflow.com/q/79124924
tags question: http://stackoverflow.com/q/79150403
tags question: http://stackoverflow.com/q/79296636
tags question: http://stackoverflow.com/q/79400861
tags question: http://stackoverflow.com/q/79330427
tags question: http://stackoverflow.com/q/79381307
tags question: http://stackoverflow.com/q/79278247
tags question: http://stackoverflow.com/q/79523469

http://stackoverflow.com/comment/139171248
type: Comment
score: 0
has text: vertical-align: top is more correct than middle
type: QuestionComment
comment on: http://stackoverflow.com/q/78933627

http://stackoverflow.com/comment/139202024
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78950845
has text: This helps for one choice, but what if they choose a start date and end date, but then want to click a third day to change their mind? This would return false.
type: Comment

http://stackoverflow.com/a/78955304
answers question: http://stackoverflow.com/q/78955287
upvote count: 2
has body: I see you use "vmax" in width of some css, so when the height larger than the width of screen your layout will not show right. You should use "vw".
accepted answer of: http://stackoverflow.com/q/78955287
type: AcceptedAnswer
score: 2
downvote count: 0
has comment: http://stackoverflow.com/comment/139210315
type: Answer

http://stackoverflow.com/a/78904621
answers question: http://stackoverflow.com/q/78904335
type: Answer
score: 0
has body: You need to combine transformations: the translateY(-50%) and rotate(-2deg). Below code will help you WELCOME TO OUR WEBSITE

http://stackoverflow.com/a/79035320
has comment: http://stackoverflow.com/comment/139360023
has body: App.jsx: line 23, the promise chain is missing a return line 78, there is a typo.
type: Answer
score: 0
answers question: http://stackoverflow.com/q/79035261
has comment: http://stackoverflow.com/comment/139372458

http://stackoverflow.com/comment/139261444
type: QuestionComment
has text: Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking.
type: Comment
comment on: http://stackoverflow.com/q/78982848
score: 0

http://stackoverflow.com/comment/139195096
score: 0
comment on: http://stackoverflow.com/q/78946570
type: QuestionComment
has text: What browser are you using? Safari on IOS is even less centered. Different browsers style buttons different ways so you may need to remove all potential styling before starting again.
type: Comment

http://stackoverflow.com/q/79042281
type: Question
tagged with: flying-saucer
score: 0
has title: How to stretch content on print page using flying saucer
answer count: 0
tagged with: css
tagged with: css-paged-media
tagged with: pdf-generation
type: UnansweredQuestion
has body: I need to put an image to the bottom of last pdf page (but above page counter which is in bottom-right page margin box). @page { size: A4 landscape; margin: 20mm 10mm 20mm 20mm; @bottom-right { content: element(counterDiv); } } .div-to-stretch { height: 100%; } ... another content I'm not very good at css so my idea is to use a div with this image inside, stretch the div to the whole page by height and align the image to the bottom of the div. But I've failed on the first step - stretch something to the whole print page. Is there any way to stretch the element? Should I use some another approach to put the image to the bottom of the page? I've tried to stretch whole html body to the page like this body, html {height: 100%;} Also tried to position the div as a footer using position: absolute; bottom: 0; Also tried position: fixed; but got the div on every page
tagged with: http://stackoverflow.com/tag/pdf

http://stackoverflow.com/q/79015030
has comment: http://stackoverflow.com/comment/139320495
has comment: http://stackoverflow.com/comment/139320950
score: 0
answer count: 2
has comment: http://stackoverflow.com/comment/139320963
tagged with: css
has answer: http://stackoverflow.com/a/79015211
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139320942
has answer: http://stackoverflow.com/a/79016683
has title: Image in header stops scaling when resolution is too small
has comment: http://stackoverflow.com/comment/139320767
type: Question
has body: I'm currently working on a website and I have an image in my header. It's a placeholder right now but the problem is when I shrink the page down to the resolution of a phone, the image stops scaling down and then starts getting cut off. I've been trying to change some header options and the image will always scale to fit the screen when its getting bigger, but it doesn't want to scale when it gets smaller. Provided is a string of code that just has the header and the navbar. In this example code the header still has the same problem. Ignore the fact that it scales too big if you open it on fullscreen the actual full program forces it to be smaller usually. Works in progress
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139320380

http://stackoverflow.com/comment/139398832
score: 1
comment on: http://stackoverflow.com/q/79057460
type: QuestionComment
has text: Tell your teacher that HTML does not use and does not need closing slashes on self-closing tags such as ` `
type: Comment

http://stackoverflow.com/comment/139401445
type: AnswerComment
has text: @redoc the common browsers do support CSS nesting now.
type: Comment
comment on: http://stackoverflow.com/a/79058981
score: 0

http://stackoverflow.com/comment/139225371
has text: Thanks. .topnav>a is all I needed.
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78963125

http://stackoverflow.com/a/79064784
answers question: http://stackoverflow.com/q/79064735
type: Answer
has body: working example
score: 0
has comment: http://stackoverflow.com/comment/139411301
upvote count: 1
downvote count: 1
has comment: http://stackoverflow.com/comment/139415438

http://stackoverflow.com/comment/139323260
score: 0
has text: The idea of a grid seems more logical to me. I've no sight at all, but try to imagine a page as a set of cards cut to specific sizes. A grid makes this easier to imagine. In the past, I've used CSS, and it's been a bit hit and miss with sizing etc, and has involved the intervention of someone with sight. I feel I've more control with a grid. I can access the code in the codepens, but it won't allow me to copy it. Having said that, typing it in is, for me, a good plan, as I'll remember it and understand it a lot better. Gratefully...
comment on: http://stackoverflow.com/q/79012295
type: QuestionComment
type: Comment

http://stackoverflow.com/comment/139205092
type: Comment
has text: @Chap it is the border of the button that makes the difference. In the example I now subtract 2px from the border of the SVG, so that the button ends up being 2em in width and height.
type: AnswerComment
score: 1
comment on: http://stackoverflow.com/a/78946996

pdf-generation
type: Tag
tag name: pdf-generation
tags question: http://stackoverflow.com/q/79042281
tags question: http://stackoverflow.com/q/79361012
tags question: http://stackoverflow.com/q/79304002
tags question: http://stackoverflow.com/q/79413299
tags question: http://stackoverflow.com/q/79438407
tags question: http://stackoverflow.com/q/79529446

http://stackoverflow.com/comment/139293715
comment on: http://stackoverflow.com/a/78976492
type: AnswerComment
has text: It's a bit hard to capture it as a screenshot. Basically, let's say the navigation baron top(home, cv, about) is supposed to be still on every page. But when I go into `cv` page, as the arrow suggests, the whole page seems to move towards left a bit, which is supposed to be at the same position
type: Comment
score: 0

node.js
type: Tag
tags question: http://stackoverflow.com/q/78978679
tag name: node.js
tags question: http://stackoverflow.com/q/78913099
tags question: http://stackoverflow.com/q/78976041
tags question: http://stackoverflow.com/q/78910515
tags question: http://stackoverflow.com/q/79053527
tags question: http://stackoverflow.com/q/78965453
tags question: http://stackoverflow.com/q/78976920
tags question: http://stackoverflow.com/q/78965523
tags question: http://stackoverflow.com/q/79216464
tags question: http://stackoverflow.com/q/79141215
tags question: http://stackoverflow.com/q/79107916
tags question: http://stackoverflow.com/q/79186331
tags question: http://stackoverflow.com/q/79152780
tags question: http://stackoverflow.com/q/79358397
tags question: http://stackoverflow.com/q/79268603
tags question: http://stackoverflow.com/q/79359155
tags question: http://stackoverflow.com/q/79338412
tags question: http://stackoverflow.com/q/79397913
tags question: http://stackoverflow.com/q/79455257
tags question: http://stackoverflow.com/q/79529446
tags question: http://stackoverflow.com/q/79514779

http://stackoverflow.com/comment/139302381
comment on: http://stackoverflow.com/a/78999464
score: 0
type: AnswerComment
has text: @Yuuki Rika: Some of these issues can be explained using only a technical knowledge of font technology (or at least understanding/anticipating the shortcomings), but many aspects are not obvious to non-native speakers. Therefore, I highly recommend to add appropriate language tags or descriptions to the question. There's a good chance that a language-savvy developer will be able to provide more insight.
type: Comment

http://stackoverflow.com/comment/139399170
score: 0
has text: What did you expect?
comment on: http://stackoverflow.com/a/79058076
type: AnswerComment
type: Comment

http://stackoverflow.com/comment/139314830
type: QuestionComment
has text: I found out that Select2 applies a `position: absolute` to the select, which explains why the error message is displayed under "Greetings". I should be able to fix the problem by putting the ` inside a ``. That won't be not a "progressive enhancement" anymore though...
type: Comment
comment on: http://stackoverflow.com/q/79011753
score: 0

http://stackoverflow.com/q/78957706
answer count: 2
linked to: http://stackoverflow.com/q/75012797
has answer: http://stackoverflow.com/a/78957721
has body: I want to clip the gradient of the parent element to the children but it doesnt quite work. either the gradient shows completely (not only covers the text) or my other, normal background is the background it uses to clip (so completely white). i basically want the same gradient to be applied to both h1, so the patterns remain is there a workaround? Long Text 1 Long Text 2 I also tried making the div absolute but the problem remained
tagged with: next.js
accepted answer: http://stackoverflow.com/a/78958221
tagged with: css
upvote count: 2
has title: How to clip a gradient to Text over the parent element?
favorite count: 0
possible better answer: http://stackoverflow.com/a/78957721
tagged with: http://stackoverflow.com/tag/html
type: Question
has answer: http://stackoverflow.com/a/78958221
score: 2
downvote count: 0
type: AnsweredQuestion
tagged with: tailwind-css

http://stackoverflow.com/comment/139228842
comment on: http://stackoverflow.com/a/78964412
has text: I have no idea about framer motion I’m afraid. Do you have to use that rather than plain CSS?
type: Comment
score: 0
type: AnswerComment

http://stackoverflow.com/comment/139398067
type: Comment
score: 0
has text: You attempted an edit that would've broken the demo. I'm not sure why, but if you're abandoning the question you should delete it.
type: QuestionComment
comment on: http://stackoverflow.com/q/79054258

http://stackoverflow.com/comment/139402592
has text: Thanks for the example. I can confirm that I see the same as you do. I definitely wouldn't call this a flickering/jumping mess. For me the effect is a bit stronger in Chrome than in Firefox. I would say this movement is part of the normal rendering process a browser has to do. Especially because the browser is thinking about adding a vertical scroll bar. What can help a bit is to hide the scroll bar using: `.container { overflow-y: hidden; }`, but you'll never get rid of this completely. Also, why on earth is this a problem?
type: Comment
comment on: http://stackoverflow.com/q/79059286
type: QuestionComment
score: 1

http://stackoverflow.com/comment/139202368
comment on: http://stackoverflow.com/q/78951014
type: Comment
score: 0
has text: Do you not have a set of checkboxes for displaying / hiding grid and flexbox overlays under the _Layout_ tab?
type: QuestionComment

http://stackoverflow.com/comment/139126417
type: QuestionComment
has text: Please provide enough code so others can better understand or reproduce the problem.
comment on: http://stackoverflow.com/q/78908521
type: Comment
score: 0

http://stackoverflow.com/comment/139191873
type: Comment
has text: That's expected, no? A clip-path excludes anything outside the element including the border.
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78944847

http://stackoverflow.com/comment/139136926
has text: What is meant is that your markup as posted is invalid as the id MUST be unique on the entire document ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
type: Comment
comment on: http://stackoverflow.com/q/78915244
type: QuestionComment
score: 1

http://stackoverflow.com/q/78953804
accepted answer: http://stackoverflow.com/a/78953944
has comment: http://stackoverflow.com/comment/139207993
has comment: http://stackoverflow.com/comment/139207540
tagged with: css
duplicate of: http://stackoverflow.com/q/11167281
linked to: http://stackoverflow.com/q/4839613
tagged with: input-type-color
has answer: http://stackoverflow.com/a/78953944
has title: How do i style an HTML standard input-type-color element?
type: Question
tagged with: border-radius
answer count: 1
tagged with: http://stackoverflow.com/tag/html
type: AnsweredQuestion
score: 0
duplicate of: http://stackoverflow.com/q/47971289
linked to: http://stackoverflow.com/q/11167281
has body: I am having trouble styling the default element using CSS. For reference, say i have the following elements and CSS styling: #myColorPicker { border-radius: 50px; } Select a color: This changes the "outside"-rectangle's border-radius property only. Is there a way to also change the "inside"-rectangle's border-radius property? With "inside"-rectangle I mean the colored rectangle actually showing the color picked by the user. It seems to be trickier than expected. Thank you in advance!

http://stackoverflow.com/a/78955822
score: 1
answers question: http://stackoverflow.com/q/78955784
type: AcceptedAnswer
downvote count: 0
type: Answer
upvote count: 1
accepted answer of: http://stackoverflow.com/q/78955784
has body: Since you're already using Flexbox, you can simply add align-items: center to the nav element: .site-title { font-size: 26pt; font-weight: bold; text-decoration: none; } .site-title:hover { text-decoration: underline; } nav { display: flex; align-items: center; justify-content: space-between; ul { list-style-type: none; li { display: inline-flex; } } } /* added by Editor for demonstration reasons */ nav { border: 2px dashed red; } Title About Posts

http://stackoverflow.com/comment/139386372
type: QuestionComment
type: Comment
comment on: http://stackoverflow.com/q/79050955
score: 0
has text: It seems the Safari issue could be resolved by changing the way I positioned the gradients: background: -webkit-radial-gradient(30% 40%, 40% 40%, rgb(254,0,255) 30%, transparent), -webkit-radial-gradient(60% 30%, 50% 50%, rgb(255,61,0) 50%, transparent), -webkit-radial-gradient(50% 70%, 40% 40%, rgb(255,98,0) 100%, transparent); However I ran into another issue which is that Firefox doesn't spread the gradients as much, and they look much more intense. How can I solve that?

http://stackoverflow.com/comment/139152732
score: 0
comment on: http://stackoverflow.com/q/78923868
type: QuestionComment
has text: Not exactly, as i only want it to move if the text is too long for the text area. So in my example, short name stays still but long name moves.
type: Comment

http://stackoverflow.com/comment/139326041
score: 1
has text: You need to move the let timeLeft outside the function since you need it in blobPress where it is currently out of scope
type: Comment
comment on: http://stackoverflow.com/q/79018085
type: QuestionComment

http://stackoverflow.com/a/78915704
has comment: http://stackoverflow.com/comment/139137420
has comment: http://stackoverflow.com/comment/139137517
type: Answer
score: 0
answers question: http://stackoverflow.com/q/78915487
has body: (Two examples ahead!) You need to reference the self body using & in Nested CSS since you actually toggle that class on the body element using document.body.classList.toggle('dark-theme'); body { /* Default body styles */ &.dark-theme { /* alias for: body.dark-theme */ /* Dark theme body styles */ } } Then, for the H1 you can use: H1 being descendant of dark theme body class like: h1 { /* Default h1 styles */ .dark-theme & { /* alias for: .dark-theme h1 */ /* Dark theme h1 styles */ } } and same as above h1 styles you can style any other selector. Also, your JS had a typo; all fixed in the following example: document.querySelector("#theme").addEventListener("click", () => { document.body.classList.toggle("dark-theme"); }); body { background: #fff; color: #333; &.dark-theme { background: #333; color: #fff; } } a { color: #0bf; .dark-theme & { color: #fb0; } } Toggle theme TITLE Lorem ipsum dolor sit amet. I frankly would not bother creating any buttons to toggle anything. Less UI the better, and it's 2024. and dark themes are pretty common in UI design. Instead, I would focus on the User's desired OS preferred theme using the @media prefers-color-scheme and some CSS properties: :root { --accent: #0bf; --color: #333; --bg: #fff; @media (prefers-color-scheme: dark) { --accent: #0bf; --color: #fff; --bg: #333; } } body { background: var(--bg); color: var(--color); } a { color: var(--accent); } TITLE Lorem ipsum dolor sit amet.

http://stackoverflow.com/comment/139145403
type: QuestionComment
score: 1
type: Comment
comment on: http://stackoverflow.com/q/78920045
has text: *"when I try to execute the program I can't see anything except a blank screen"* - Is the problem necessarily linking from one route to another, or is the problem that the application doesn't work **at all**?

http://stackoverflow.com/comment/139143932
type: Comment
score: 0
comment on: http://stackoverflow.com/a/78918132
type: AnswerComment
has text: you're very welcome @JeromeRoldan

http://stackoverflow.com/a/79011720
type: AcceptedAnswer
downvote count: 0
type: Answer
accepted answer of: http://stackoverflow.com/q/79008222
upvote count: 1
has comment: http://stackoverflow.com/comment/139321721
answers question: http://stackoverflow.com/q/79008222
score: 1
has body: The hover pseudo selector need to be on the parent/the anchor element. Now, I don't know what the button should look like, but you could use inline-flex to align the two elements. Btw. reduce you CSS so that you only specify the properties that should change on hover/active. .fa-brands--whatsapp-square { display: inline-block; width: 3rem; height: 3rem; background-repeat: no-repeat; background-size: 100% 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='green' d='M224 122.8c-72.7 0-131.8 59.1-131.9 131.8c0 24.9 7 49.2 20.2 70.1l3.1 5l-13.3 48.6l49.9-13.1l4.8 2.9c20.2 12 43.4 18.4 67.1 18.4h.1c72.6 0 133.3-59.1 133.3-131.8c0-35.2-15.2-68.3-40.1-93.2c-25-25-58-38.7-93.2-38.7m77.5 188.4c-3.3 9.3-19.1 17.7-26.7 18.8c-12.6 1.9-22.4.9-47.5-9.9c-39.7-17.2-65.7-57.2-67.7-59.8s-16.2-21.5-16.2-41s10.2-29.1 13.9-33.1c3.6-4 7.9-5 10.6-5c2.6 0 5.3 0 7.6.1c2.4.1 5.7-.9 8.9 6.8c3.3 7.9 11.2 27.4 12.2 29.4s1.7 4.3.3 6.9c-7.6 15.2-15.7 14.6-11.6 21.6c15.3 26.3 30.6 35.4 53.9 47.1c4 2 6.3 1.7 8.6-1c2.3-2.6 9.9-11.6 12.5-15.5c2.6-4 5.3-3.3 8.9-2s23.1 10.9 27.1 12.9s6.6 3 7.6 4.6c.9 1.9.9 9.9-2.4 19.1M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48M223.9 413.2c-26.6 0-52.7-6.7-75.8-19.3L64 416l22.5-82.2c-13.9-24-21.2-51.3-21.2-79.3C65.4 167.1 136.5 96 223.9 96c42.4 0 82.2 16.5 112.2 46.5c29.9 30 47.9 69.8 47.9 112.2c0 87.4-72.7 158.5-160.1 158.5'/%3E%3C/svg%3E"); } #nosotros .btn:hover .fa-brands--whatsapp-square, #nosotros .btn:active .fa-brands--whatsapp-square { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='white' d='M224 122.8c-72.7 0-131.8 59.1-131.9 131.8c0 24.9 7 49.2 20.2 70.1l3.1 5l-13.3 48.6l49.9-13.1l4.8 2.9c20.2 12 43.4 18.4 67.1 18.4h.1c72.6 0 133.3-59.1 133.3-131.8c0-35.2-15.2-68.3-40.1-93.2c-25-25-58-38.7-93.2-38.7m77.5 188.4c-3.3 9.3-19.1 17.7-26.7 18.8c-12.6 1.9-…

http://stackoverflow.com/comment/139345497
type: QuestionComment
has text: @c3roe edited the post.
type: Comment
comment on: http://stackoverflow.com/q/79026458
score: 0

http://stackoverflow.com/a/79055375
type: Answer
score: -1
downvote count: 1
answers question: http://stackoverflow.com/q/79054875
upvote count: 0
has body: Hope it will fix your issues: body { height: 100vh; margin: 0; padding-bottom: 80px; /* Adjust this value based on your footer height */ } .fixed-footer { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 1300; background: #ffffff; padding: 16px 42px; box-shadow: 0px -3px 4px rgba(0, 0, 0, 0.25); border-top: 1px solid #bebec1; } Add New Contract CANCEL CREATE

http://stackoverflow.com/comment/139119572
type: Comment
score: 0
has text: When I run command "npm run build" on the localhost. No one "css" folder in the "build" folder in localhost. But in localhost when I run command "npx serve" everything working fine.
type: QuestionComment
comment on: http://stackoverflow.com/q/78905678

http://stackoverflow.com/comment/139358504
comment on: http://stackoverflow.com/q/79035901
has text: Could you put the relevant CSS and HTML actually into your example code within the question so it is easy for us to copy? (and also so it doeant disappear in future when the codepen is deleted so it's a useful question for future readers).
score: 2
type: Comment
type: QuestionComment

http://stackoverflow.com/comment/139409262
comment on: http://stackoverflow.com/q/79063318
has text: You take the mouse coordinates, hand them "to CSS", CSS then scales and rotated those into new coordinates, finally your blob is drawn at those transformed coordinates (i.e. not where the mouse cursor is).
type: Comment
score: 0
type: QuestionComment

http://stackoverflow.com/a/78990655
answers question: http://stackoverflow.com/q/78990560
type: Answer
score: 0
has body: Although this can be achieved relatively easily using a flex layout for each column in the grid, subgrid was specifically designed for layouts like this - be aware that this feature does not yet have full browser support. It is supported in all major browsers though. :root { --primary-color: #00605f; --secondary-color: #017479; --text-dark: #0f172a; --text-light: #94a3b8; --white: #ffffff; --hover-color: #E5E4E2; --max-width: 1400px; } .canister-a { background-color: var(--primary-color); color: var(--white); max-width: var(--max-width); border-radius: 7px; padding: 1%; margin: 2% auto; margin-top: 10px; display: flex; flex-direction: column; } .canister-a .content-d { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "pricing-card-a pricing-card-b pricing-card-c"; } .price-card-a { grid-area: pricing-card-a; border-right: 0.1px solid #ffffff; padding: 1.5rem; } .price-card-b { grid-area: pricing-card-b; border-right: 0.1px solid #ffffff; padding: 1.5rem; } .price-card-c { grid-area: pricing-card-c; padding: 1.5rem; } .price-card-a h2, .price-card-b h2, .price-card-c h2 { color: var(--white); font-weight: 400; background: var(--secondary-color); text-align: center; border-radius: 7px; } .price-card-a h4, .price-card-b h4, .price-card-c h4 { color: var(--white); font-size: 1.5rem; } .price-card-a span, .price-card-b span, .price-card-c span { margin: .2rem; } .content-d ul { list-style: none; } .content-d li { line-height: 1.5rem; margin-bottom: 10px; } .content-d button { padding: .75rem 2rem; outline: 1px solid var(--white); border: none; font-size: 1rem; font-weight: 600; color: var(--white); background-color: var(--primary-color); cursor: pointer; border-radius: 7px; } .content-d button>a { text-decoration: none; color: var(--white); } .content-d button:hover, .content-d button:focus { background: var(--secondary-color); } /* NEW */ .item { display: grid; grid-template-columns: subgrid; } .item button { margin-top: auto; } Lore…

http://stackoverflow.com/a/79012615
has body: your Structure: In Flex, the performance works like this: When you give an element display: flex. This affects the children of that element. So it wasn't necessary for all elements to have display: flex. So I just adjusted the sizes and set them with percentages(%) to make it responsive. Flex has a feature called flex-wrapper. which can take two values: no wrap wrap The first amount says that in case of a lack of space, I will move the elements to the next line. The second option says that if there is not enough space, make the elements smaller but keep them in their place. The issue was resolved by adjusting the width of the nav, and they no longer overflow the box. body { margin: 1%; /* For a suitable distance from all four sides. */ } #header, #wrapper, #menu_container { width: 100%; } /* parent for nav */ #menu_align { width: 100%; display: flex; justify-content: right; } #line_horizontal { height: 2px; margin-top: 30px; width: 100%; background: rgba(0, 0, 0, 0.50); } #nav { width:max-content; font-size: 0.9em; flex-wrap: nowrap; } #nav>ul { border: 1px solid black; /* I gave this to the border so it can better cover the links. */ list-style: none; padding-left: 0em; display: flex; justify-content: space-around; flex-wrap: nowrap; } #nav>ul>li { float: right; padding: 0.5em; display: flex; justify-content: space-around; flex-wrap: nowrap; } flex-box About Portfolio Contact</a Good luck!
score: 1
upvote count: 1
type: Answer
answers question: http://stackoverflow.com/q/78998815
downvote count: 0

http://stackoverflow.com/comment/139205049
type: AnswerComment
has text: @ChrisG welcome back :) If you have some spare time, I could really use your help.
comment on: http://stackoverflow.com/a/78941061
type: Comment
score: 0

http://stackoverflow.com/q/79033570
duplicate of: http://stackoverflow.com/q/74601420
tagged with: ios
has title: position: fixed does not work on ios 18 along with container requests
tagged with: css
answer count: 0
has body: I wanted to create a sticky background so that it doesn't scroll along with the page on the iPhone 15 Pro with iOS 18, but there was a problem - if the class has a container with the page/inline-size property set, the position:fixed stops working. Here is my code in scss. .page { margin: 0 auto; min-inline-size: 320px; min-block-size: 100dvb; position: relative; // background-color: var(--color-bg, #fff); // background-image: var(--gradient-light-scheme); // background-attachment: fixed; font-family: var(--main-font, 'inter-variable', sans-serif); font-weight: var(--font-weight-main); color: var(--font-main-color, #000); container: page / inline-size; &amp;::after { content: ''; display: block; position: fixed; inset: 0; block-size: 100vh; background-color: var(--color-bg, #fff); background-image: var(--gradient-light-scheme); z-index: -1; background-position: center center; background-repeat: no-repeat; background-size: cover; } } I want the page's background to not move with it, but remain fixed.
linked to: http://stackoverflow.com/q/74601420
score: 0
type: UnansweredQuestion
type: Question

http://stackoverflow.com/comment/139361999
type: QuestionComment
has text: @UmeshSingh I have been testing it on Chrome Version 128 but I don't think the version makes a difference.
type: Comment
comment on: http://stackoverflow.com/q/79021330
score: 0

http://stackoverflow.com/a/78936868
answers question: http://stackoverflow.com/q/78936855
has comment: http://stackoverflow.com/comment/139181459
has body: The problem is that applyColor is a component-wide variable. When true, 'name-cell': applyColor === true will be true for each row. (I added === true for clarity). If you want to keep your approach, save the index of the hovered element: Employee Name Department Salary {{ employee.name }} {{ employee.department }} {{ employee.salary }} Where hoveredIndex is: public hoveredIndex: number | null;
upvote count: 2
downvote count: 0
type: Answer
score: 2

http://stackoverflow.com/q/78999075
tagged with: css
has title: How to move/fix position of dropdown menu in html/css?
type: UnansweredQuestion
score: 0
has body: I have issue which is the dropdown menu is slightly misaligned or detached from the "Other" tab, I want it to be directly under the "Other" tab, with an arrow pointing to it. HTML CODE: Other Remain Taps Discord Server Link 2 Link 3 CSS CODE: this how the issue looks like: Image For my Issue i'm facting it i want fixs or solution for this issue. it shows in place elsewhere when i clicking on it, so i want it to move to be below "Other" tab.
has answer: http://stackoverflow.com/a/78999243
type: Question
tagged with: http://stackoverflow.com/tag/html
answer count: 1

http://stackoverflow.com/comment/139387797
score: 0
type: QuestionComment
has text: @dalelandry this is ideally what I would like it to look like: https://imgur.com/UzzegZD Ideally, each of those "icons" would be clickable and link to an external site. Doing all that is a future endeavor in this journey of mine but, for now, I'm just stuck at having the separation between the top portion of where the "things and stuff" buttons and contact info sections are and then the useful links section below it
comment on: http://stackoverflow.com/q/79044394
type: Comment

http://stackoverflow.com/q/78941370
favorite count: 0
tagged with: http://stackoverflow.com/tag/html
type: Question
has body: im trying to create a small bit of text with an image to the right of it. However, the site im working on doesnt have the option to create a stylesheet so i have to write my css inside of my html file. The code below shows what im working on (the image is just a random one): Title paragraph of text. another paragraph of text Is there a way to make it so that when the text and the image dont fit next to eachother anymore, the image gets put underneath the text?
answer count: 1
type: AnsweredQuestion
downvote count: 1
has answer: http://stackoverflow.com/a/78942960
upvote count: 0
accepted answer: http://stackoverflow.com/a/78942960
score: -1
has title: Writing responsive css inside an html file
tagged with: css
has comment: http://stackoverflow.com/comment/139188032
has comment: http://stackoverflow.com/comment/139184885

http://stackoverflow.com/a/78912102
has comment: http://stackoverflow.com/comment/139136388
has body: I see two problems at first glance. You have a conflict with other parts of the code. Keep in mind that the essence of sticky elements is also that they must have a place to stick... In other words, the container with content should be of the right height or have the right amount of content. Try manipulating the height of the container... Take a look .sticky-tabs { position: -webkit-sticky; position: sticky; top: 0; z-index: 1000; background-color: #fff; padding: 10px 0; } .content-column { padding: 20px; } .main { padding: 20px; } section { margin-bottom: 100px; } Header content is here Why It Matters Resources Our Approach Our Policies Get Involved Why It Matters Content here Resources Content here Our Approach Content here Our Policies Content here Get Involved Content here
has comment: http://stackoverflow.com/comment/139138295
type: Answer
score: 0
has comment: http://stackoverflow.com/comment/139145425
has comment: http://stackoverflow.com/comment/139138362
answers question: http://stackoverflow.com/q/78912016
has comment: http://stackoverflow.com/comment/139136475

http://stackoverflow.com/comment/139286822
type: QuestionComment
comment on: http://stackoverflow.com/q/78996274
type: Comment
score: 0
has text: What is the actual problem you are trying to solve?

http://stackoverflow.com/comment/139404788
score: 0
comment on: http://stackoverflow.com/q/79061170
type: QuestionComment
has text: Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a **Stack Snippet** using the `<>` icon.. Although you have provided a link, if it was to become invalid, your question would be of no value to other future SO users with the same problem. See [**Something in my website/example doesn't work can I just paste a link**](http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to-it).
type: Comment

http://stackoverflow.com/comment/139302718
score: 0
type: AnswerComment
has text: This shows the scrollbars fine. But if you try the graph with the data in my initial question(which is slightly modified) and go to the *Polish* language you will see that after Polish language all the node are returning back instead of opening forward. Please check the updated code in my initial question.
comment on: http://stackoverflow.com/a/79004766
type: Comment

http://stackoverflow.com/comment/139427834
comment on: http://stackoverflow.com/a/79068151
score: 1
type: Comment
has text: This property sets the flex shrink factor of a flex item. If the combined width of children elements is greater the parent element then the flex items can shrink to fit according to their flex-shrink value. flex-shring property determines how much the flex item will shrink relative to the rest of the flex items in the flex container when negative free space is distributed.
type: AnswerComment

http://stackoverflow.com/comment/139392286
type: Comment
score: 0
type: QuestionComment
has text: If you can't add unique identifiers to the elements, then you may be able to leverage the [`:nth-child()`](https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child) CSS pseudo-selector
comment on: http://stackoverflow.com/q/79054258

http://stackoverflow.com/a/79004766
answers question: http://stackoverflow.com/q/79004380
has comment: http://stackoverflow.com/comment/139302718
downvote count: 0
has comment: http://stackoverflow.com/comment/139304363
type: Answer
has body: Since it is rendered on a canvas element, you can't add the scrollbars directly to it. But you can place it inside a container with overflow: auto. But as the chart fits itself to the container it is placed in, we should make the container's container (.highcharts-figure) be fixed dimensions with overflow: auto. Just remember to set the inner container size to be sufficiently large (in CSS and JS). See example below: Highcharts.chart('container', { chart: { spacingBottom: 30, marginRight: 120, height: 2400, width: 2000 }, title: { text: 'Phylogenetic language tree' }, series: [{ type: 'treegraph', keys: ['parent', 'id', 'level'], clip: false, data: [ [undefined, 'Proto Indo-European'], ['Proto Indo-European', 'Balto-Slavic'], ['Proto Indo-European', 'Germanic'], ['Proto Indo-European', 'Celtic'], ['Proto Indo-European', 'Italic'], ['Proto Indo-European', 'Hellenic'], ['Proto Indo-European', 'Anatolian'], ['Proto Indo-European', 'Indo-Iranian'], ['Proto Indo-European', 'Tocharian'], ['Indo-Iranian', 'Dardic'], ['Indo-Iranian', 'Indic'], ['Indo-Iranian', 'Iranian'], ['Iranian', 'Old Persian'], ['Old Persian', 'Middle Persian'], ['Indic', 'Sanskrit'], ['Italic', 'Osco-Umbrian'], ['Italic', 'Latino-Faliscan'], ['Latino-Faliscan', 'Latin'], ['Celtic', 'Brythonic'], ['Celtic', 'Goidelic'], ['Germanic', 'North Germanic'], ['Germanic', 'West Germanic'], ['Germanic', 'East Germanic'], ['North Germanic', 'Old Norse'], ['North Germanic', 'Old Swedish'], ['North Germanic', 'Old Danish'], ['West Germanic', 'Old English'], ['West Germanic', 'Old Frisian'], ['West Germanic', 'Old Dutch'], ['West Germanic', 'Old Low German'], ['West Germanic', 'Old High German'], ['Old Norse', 'Old Icelandic'], ['Old Norse', 'Old Norwegian'], ['Old Swedish', 'Middle Swedish'], ['Old Danish', 'Middle Danish'], ['Old English', 'Middle English'], ['Old Dutch', 'Middle Dutch'], ['Old Low German', 'Middle Low German'], ['Old High German', 'Middle High German'], ['Balto-Slavic', 'Baltic'], ['Balto-Slavic…
upvote count: 2
score: 2

http://stackoverflow.com/a/78948659
type: Answer
answers question: http://stackoverflow.com/q/78948277
downvote count: 0
accepted answer of: http://stackoverflow.com/q/78948277
has comment: http://stackoverflow.com/comment/139202841
upvote count: 1
score: 1
has body: The quickest way to achieve something barely resembling a masonry layout while using a flexbox layout is to allow its items to shrink and grow according to the remaining space where the next item cannot be accomodated. https://developer.mozilla.org/en-US/docs/Web/CSS/flex Here the main change I made to your snippet was using: flex: 1 1 auto; The side effect is not having control on the item size in advance because it gets dynamic based on how much space is occupied by their minimum width. Any other solution would require to shuffle the order of the items to find most optimum way to organize them to fill the space. To compensate that feature I styled the flex items so that their content is aligned to the center. body { background-color: red; } .wrapper { display: flex; flex-wrap: wrap; gap: 1rem; padding: 0.25rem; width: 12rem; background-color: lime; /*here you set the fixed padding*/ padding: 1em 1em; } .wrapper > div { color: white; background-color: black; padding: 0.25rem; border-radius: 0.25rem; /*here you allow flex items to shrink and grow*/ /*shorthand for flex-grow flex-shrink flex-basis*/ flex: 1 1 auto; text-align: center; } Lorem ipsum dolor sit amet consectetur adipiscing elit Duis lobortis tempor mauris vitae ornare If instead you wished to keep the width of the flex items untouched, you may instruct the layout to use a dynamic gap to fill the remaining space in each row while keeping the first one and last one respectively at the beginning and the end of the row with justify-content justify-content: space-between; body { background-color: red; } .wrapper { display: flex; flex-wrap: wrap; gap: 1rem; padding: 0.25rem; width: 12rem; background-color: lime; /*here you set the fixed padding*/ padding: 1em 1em; justify-content: space-between; } .wrapper > div { color: white; background-color: black; padding: 0.25rem; border-radius: 0.25rem; } Lorem ipsum dolor sit amet consectetur adipiscing elit Duis lobortis tempor mauris vitae ornare
type: AcceptedAnswer

http://stackoverflow.com/comment/139272204
type: AnswerComment
has text: @Chap, I found the problem in the `width/height` of the containers... Now I think its working properly. Try it out.
type: Comment
score: 0
comment on: http://stackoverflow.com/a/78986353

http://stackoverflow.com/q/78929676
tagged with: frontend
type: UnansweredQuestion
type: Question
tagged with: user-interface
tagged with: http://stackoverflow.com/tag/html
answer count: 1
score: 0
tagged with: reactjs
has answer: http://stackoverflow.com/a/78932120
has body: I am currently designing a UI for a website I am working on, and have an asset of a png with a transparent background. I can sucessfully make the background of the image appear transparent, but the "hitbox" includes the transparent background when using this Cursor effect. I want the effect to only be applied when the when the user's cursor hovers over the subject of the image (not the transparent pixels). To do this, do I need to use or some other library? Thanks in advance My existing code: import React from "react"; import { Cursor } from "./cursorHover"; type ImageProps = React.ImgHTMLAttributes<HTMLImageElement> & { alt: string; width?: number; height?: number; hover?: JSX.Element; }; const Image: React.FC<ImageProps> = ( { alt, width, height, hover, ...props }: ImageProps, ref ) => { return ( {hover && ( {typeof hover === "boolean" ? hi : hover} )} ); }; export default Image;
has title: Dealing with transparent backgrounds when using framer motion
tagged with: css

http://stackoverflow.com/comment/139366802
score: 0
type: Comment
comment on: http://stackoverflow.com/a/79034068
type: AnswerComment
has text: I couldn't reproduce that. See [this codepen](https://codepen.io/MSarabi/pen/yLmYZzE?editors=1111) as an example.

http://stackoverflow.com/comment/139374605
has text: Perhaps you can add your other CSS code that is relavent as I am unable to recreate any issue. If I style a colored logo and place a mix-blend-mode on it with difference, then using your code on hover, it renders properly. I even did JS mouseover, mouseout to test the computedStyle and getPropertyValue and it toggles between difference and normal... https://codepen.io/dlandry7/pen/rNXxzPY
type: QuestionComment
type: Comment
comment on: http://stackoverflow.com/q/79044377
score: 0

http://stackoverflow.com/comment/139203047
has text: Why is the footer positioned absolutely?
type: QuestionComment
comment on: http://stackoverflow.com/q/78949149
type: Comment
score: 0

http://stackoverflow.com/comment/139281319
score: 0
type: Comment
has text: if you think the solution is within another SO question, vote to close as duplicate instead of repeating the same answer
type: AnswerComment
comment on: http://stackoverflow.com/a/78993718

http://stackoverflow.com/comment/139368129
comment on: http://stackoverflow.com/a/79037983
has text: It appears from testing on various MacOS and iOS browsers that `object-center` is unnecessary. Could you check that picture-div and picture-div-img styles properties are all necessary, and update your summary of your changes at the top of your answer?
type: Comment
score: 0
type: AnswerComment

http://stackoverflow.com/a/79057956
score: 1
upvote count: 1
type: AcceptedAnswer
has body: You could consider reworking the background gradient such that it covers the border box size of the element. This involves moving its "origin" point to the top-left corner and increasing its size by the border width on all four sides: tailwind.config = { theme: { extend: { colors: { primary: 'red', }, }, }, } <div class=" hover:shadow-primary/25 hover:border-primary box-border flex h-full flex-col justify-center rounded-2xl border-4 border-transparent bg-gradient-to-br from-[#180042] via-[#2e017d] to-purple-900 p-20 text-white shadow-xl duration-100 ease-in-out hover:border-4 lg:col-span-2 lg:row-span-2 lg:bg-gradient-to-br bg-[length:calc(100%+(theme(borderWidth.4)*2))_calc(100%+(theme(borderWidth.4)*2))] bg-[position:calc(theme(borderWidth.4)*-1)_calc(theme(borderWidth.4)*-1)] ">Foo Alternatively, you could also consider using Tailwind's ring-* set of utilities to draw the border on hover: tailwind.config = { theme: { extend: { colors: { primary: 'red', }, }, }, } Foo
answers question: http://stackoverflow.com/q/79057913
type: Answer
accepted answer of: http://stackoverflow.com/q/79057913
has comment: http://stackoverflow.com/comment/139401774
downvote count: 0

http://stackoverflow.com/q/79054912
has comment: http://stackoverflow.com/comment/139393493
favorite count: 0
score: 0
has comment: http://stackoverflow.com/comment/139393603
has comment: http://stackoverflow.com/comment/139393257
type: Question
answer count: 1
has answer: http://stackoverflow.com/a/79055029
type: AnsweredQuestion
tagged with: mudblazor
upvote count: 1
has body: I am creating a component similar to MudRating to display the average of the ratings an item is given. So unlike MudRating which only allows integer values of 1 - 5, this will generally get a rating that's a double. For example 3.21 or 4.88. At present MudBlazor only has empty, half, and full star. So the ratings have to be displayed as: And these are rendered (RatingAverage.razor) as: @for (var i = 0; i < numFullStars; i++) { <MudIcon Icon="@Icons.Material.Filled.Star" Color="Color.Warning" /> } @if (showHalfStar) { <MudIcon Icon="@Icons.Material.Filled.StarHalf" Color="Color.Warning" /> } @for (var i = startEmptyStars; i < 5; i++) { <MudIcon Icon="@Icons.Material.Filled.StarOutline" Color="Color.Warning" /> } Here's my question. Is there a way to render the partial star as: <MudIcon Icon="@Icons.Material.Filled.StarOutline" Color="Color.Warning" /> <MudIcon Crop="0,0, @width ,1" Position="OnTopStarOutline" Icon="@Icons.Material.Filled.Star" Color="Color.Warning" /> where: The Position="OnTopStarOutline" (clearly needs to be something else) will render the Star on top of the StarOutline the @width is a value from 0.0 to 1.0 that crops the Star to that percentage of the width, so it only overwrites the leftmost of StarOutline it is over. Is there a way to accomplish this? And if so, how? And I assume this is a CSS question. But if there's another way, please enlighten me.
has comment: http://stackoverflow.com/comment/139393193
has comment: http://stackoverflow.com/comment/139394000
tagged with: css
has comment: http://stackoverflow.com/comment/139393427
accepted answer: http://stackoverflow.com/a/79055029
has title: Is there a way to crop the display of a SVG using CSS?
downvote count: 1

kendo-ui
type: Tag
tags question: http://stackoverflow.com/q/78943212
tag name: kendo-ui
tags question: http://stackoverflow.com/q/79007505
tags question: http://stackoverflow.com/q/79093513

http://stackoverflow.com/a/79044447
downvote count: 0
type: Answer
has comment: http://stackoverflow.com/comment/139387835
upvote count: 1
has body: Not entirely sure what you are trying to do, but I edited your code a bit and made it so that the useful links are below the other two. Here is the link to see what I did - https://codepen.io/Matthew-Wright-the-sans/pen/yLmeoMO Tell me if this helps *{ box-sizing:border-box; } body{ padding:0px; margin:0px; } div { font-family: 'Arial', sans-serif; } .banner { text-align: center; color: green; font-size: 46px; text-transform: uppercase; font-weight: bold; padding: 15px; } .buttonGrid { display: grid; grid-template-columns: repeat(4 , 1fr); grid-template-rows: 1fr; grid-column-end: auto; grid-row-end: auto; gap: 5px; width: 50%; height: auto; justify-content:center; float:left; } .buttons { text-align: center; color: green; font-weight: bold; text-transform: uppercase; border: 1px solid black; border-radius: 10px; padding: 15px; box-shadow: inset 0 0 10px black; align-content: center; text-wrap: nowrap; } .pocTable { /* this is the one I don't know if it needs to be a grid, but I can't get it to display how I want without it being a grid */ text-align: center; border: 2px dashed black; padding: 10px; display: grid; width:50%; float:right; } .usefulLinks { display: grid; grid-auto-columns: 1fr; width:100%; } .usefulLinks div { border: 1px solid black; text-align: center; } .usefulLinks &gt; div:first-child { grid-column: span 3; text-align: center; color: green; text-transform: uppercase; font-weight: bold; font-size: 36px; padding-bottom: 10px; }
answers question: http://stackoverflow.com/q/79044394
score: 1

http://stackoverflow.com/a/79035266
type: Answer
answers question: http://stackoverflow.com/q/79035136
score: 0
has comment: http://stackoverflow.com/comment/139358612
has comment: http://stackoverflow.com/comment/139358474
has body: No, it’s not possible. To achieve your desired layout, your HTML requires a flex wrapper to combine .b_2 and .news. I have called this wrapper .sidebar. .sidebar { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; } Blok_1 Content Blok_2 News A snippet to demonstrate: body { background: #eee; font-size: 20px; font-weight: bold; margin: 1em; display: grid; grid-template-columns: 5fr 2fr; gap: 1em; } .b_1, .b_2, .content, .news { padding: 0.5em; } .b_1 { aspect-ratio: 1; background: red; } .b_2 { background: blue; } .sidebar { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; gap: 1em; } .content { background: #0caa27; } Blok_1 Content Blok_2 Blok_2 Blok_2 Blok_2 Blok_2 Blok_2 Blok_2 Blok_2 Blok_2 Blok_2 Blok_2 Blok_2 Blok_2 News

http://stackoverflow.com/a/78959402
downvote count: 0
type: Answer
answers question: http://stackoverflow.com/q/78959126
upvote count: 1
has body: // App.jsx function App() { return ( Video is playing ) } export default App /* index.css */ * { padding: 0; margin: 0; box-sizing: border-box; }
has comment: http://stackoverflow.com/comment/139218257
score: 1

http://stackoverflow.com/q/78909882
type: UnansweredQuestion
has body: I am trying to create this animation in react native https://raw.githubusercontent.com/Ramotion/react-native-circle-menu/HEAD/preview.gif Since the library is no longer maintained it doesnt work anymore in modern expo I was able to create the radial menu and almost the circular animation but facing some problems My radial menu Code //ActionButtonItem.js import React, { Component } from "react"; import { StyleSheet, View, Animated, TouchableOpacity, Platform } from "react-native"; import PropTypes from "prop-types"; export const iosElevation = (forIos, forAndroid) => { return ( Platform.OS === "ios" && { shadowOffset: { width: -2, height: 4 }, shadowColor: "#171717", shadowOpacity: 0.2, shadowRadius: 3, } ); }; export default class ActionButtonItem extends Component { handlePress = (e) => { e.stopPropagation(); // Prevents the parent ActionButton from closing this.props.onPress && this.props.onPress(e); }; render() { const offsetX = this.props.radius * Math.cos(this.props.angle); const offsetY = this.props.radius * Math.sin(this.props.angle); return ( <Animated.View style={[ { opacity: this.props.anim, width: this.props.size, height: this.props.size, transform: [ { translateY: this.props.anim.interpolate({ inputRange: [0, 1], outputRange: [0, offsetY], }), }, { translateX: this.props.anim.interpolate({ inputRange: [0, 1], outputRange: [0, offsetX], }), }, { rotate: this.props.anim.interpolate({ inputRange: [0, 1], outputRange: [ `${this.props.startDegree}deg`, `${this.props.endDegree}deg`, ], }), }, { scale: this.props.anim.interpolate({ inputRange: [0, 1], outputRange: [0, 1], }), }, ], }, ]} > {this.props.children} </Animated.View> ); } } ActionButtonItem.propTypes = { angle: PropTypes.number, radius: PropTypes.number, buttonColor: PropTypes.string, onPress: PropTypes.func, children: PropTypes.node.isRequired, startDegree: PropTypes.number, endDegree: PropTypes.number, }; ActionButtonItem.defaultProps = { onPress: () => {}, startDegree: 0, endDegree: 720, }; const …
favorite count: 0
type: Question
tagged with: animation
has title: Need help creating react native animation
score: 0
tagged with: javascript
upvote count: 1
tagged with: react-native
answer count: 0
tagged with: css
downvote count: 1

http://stackoverflow.com/q/78941057
favorite count: 0
has comment: http://stackoverflow.com/comment/139184362
score: -1
tagged with: http://stackoverflow.com/tag/html
has title: Dynamic grid row structure
has answer: http://stackoverflow.com/a/78941500
type: Question
answer count: 1
type: AnsweredQuestion
has comment: http://stackoverflow.com/comment/139185016
accepted answer: http://stackoverflow.com/a/78941500
tagged with: css
has body: I'm trying to implement a css-grid with a dynamic structure. When an element in any row is clicked a dynamic full width row should be displayed. See the image below. Is this kind of behaviour even possible with css grid? Any suggestions that could take me in the right direction is highly appreciated!
tagged with: css-grid
upvote count: 0
downvote count: 1

http://stackoverflow.com/comment/139408201
has text: Welcome, happy to help. I recommend you should still [edit] your post to include a [mcve] of the code so future readers can more easily (1) identify the "question"/"issue" to match to their end and (2) relate to the solution you arrived at that resolved it.
type: QuestionComment
comment on: http://stackoverflow.com/q/79052206
type: Comment
score: 0

http://stackoverflow.com/a/78967934
has comment: http://stackoverflow.com/comment/139234160
answers question: http://stackoverflow.com/q/78967851
has body: clearfix is a add-on class with clear: both property to clear floating of an element. While clear: both itself a property to clear floating of both side of an element. Float was used when there were no flex or grid properties available. You can use flex or grid layout to achieve your design. Hope, this will help.
has comment: http://stackoverflow.com/comment/139233871
has comment: http://stackoverflow.com/comment/139234177
type: Answer
score: 0
has comment: http://stackoverflow.com/comment/139233943

http://stackoverflow.com/comment/139170517
type: AnswerComment
has text: Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer).
comment on: http://stackoverflow.com/a/78915849
score: 0
type: Comment

http://stackoverflow.com/a/78922478
type: Answer
has body: .casestart { height: 100vh; width: 100vw; position: relative; overflow: hidden; } .imageside { width: 52vw; height: 100vh; position: absolute; right: 0; background: #000; transition: transform 0.5s ease; } &lt;div class="casestart"&gt; &lt;div class="imageside"&gt; &lt;img id="hoverImage" src="12.webp" alt="" draggable="false" srcset=""&gt; &lt;/div&gt; &lt;/div&gt;
score: -1
downvote count: 1
answers question: http://stackoverflow.com/q/78922065
upvote count: 0

http://stackoverflow.com/q/78926526
has comment: http://stackoverflow.com/comment/139157801
answer count: 0
tagged with: css
has comment: http://stackoverflow.com/comment/139157798
tagged with: css-selectors
has comment: http://stackoverflow.com/comment/139157819
type: UnansweredQuestion
has title: CSS selector: value of table cell inside a row that contains another table cell with value
linked to: http://stackoverflow.com/q/1520429
type: Question
has body: Okay, so this is a bit convulted but bear with me.. If i have a DOM like this: date1start - date1end not interesting link <-- need this date2start - date2end ...similar cells... ...multiple rows... and i want to use CSS selector to get the A element inside a row that contains a TD with the text '- date1end' how would you go about it? I'm thinking that I can do TABLE#myId TD[Text$='- date1end'] to locate the cell inside correct row, but how do I navigate to the 2nd cell to the right?
has comment: http://stackoverflow.com/comment/139157773
duplicate of: http://stackoverflow.com/q/1520429
score: 0

http://stackoverflow.com/comment/139226971
type: QuestionComment
score: 0
comment on: http://stackoverflow.com/q/78963317
has text: Unable to reproduce the above issue
type: Comment

http://stackoverflow.com/comment/139372152
type: Comment
comment on: http://stackoverflow.com/a/79033371
score: 0
type: AnswerComment
has text: Ah ok - that helps me (basically moving it out of CSS into a typescript service I can call on init of my app component to add the fonts). If you can add that to your answer, that'd be great. I'll accept your answer.

http://stackoverflow.com/comment/139406856
type: QuestionComment
comment on: http://stackoverflow.com/q/79061543
has text: I added now `max-width: 500px` to the container. Currently it contains 3 buttons due to `grid-template-columns: repeat(auto-fit, minmax(130px, 1fr))`. I would want that the button content should force it to 2 columns or 1 if needed. I'm not sure this is possible with grid, and I wonder what are the alternative css-only solutions. Thanks.
type: Comment
score: 0

http://stackoverflow.com/comment/139413801
comment on: http://stackoverflow.com/q/79066138
type: QuestionComment
has text: Could you check your codepen which doesn't seem to have anything with id masked. Alternatively, and preferably, make your code into a runnable snippet and check that it really shows the problem - use <> in the editor here.
score: 1
type: Comment

html5-canvas
type: Tag
tags question: http://stackoverflow.com/q/79037325
tag name: html5-canvas
tags question: http://stackoverflow.com/q/79421063

http://stackoverflow.com/q/78942176
tagged with: css
upvote count: 0
favorite count: 0
has body: tl;dr - How to avoid background-color showing on text in front of images in css. Background The w3Schools site for displaying text over an image (link here) uses a relative-container, absolute-child setup. Under normal circumstances this works fine (see code and image below). Image Text How to place text over an image: Bottom Left Top Left Top Right Bottom Right Centered However, if your file has a background-color set, that background color will bleed through on the absolute positioned elements (see code image below). Image Text How to place text over an image: Bottom Left Top Left Top Right Bottom Right Centered Question How can one have text overlay an image without this "background color bleed through" issue coming up? The goal is to have the absolute positioned elements have no background color, or a transparent one (setting the absolute element's background-color to transparent doesn't seem to work). I'm aware that absolute positioning elements are treated differently than in-line elements, but I'm unclear on how to resolve this issue. The accepted solution for this post seems to work if trying to set the absolute element to have a specific color, but my goal is to have no background color so that only the text is shown in front of the image.
has answer: http://stackoverflow.com/a/78942210
has answer: http://stackoverflow.com/a/78942209
type: Question
score: -3
type: AnsweredQuestion
downvote count: 3
tagged with: http://stackoverflow.com/tag/html
has title: How to display text over image without background-color showing
has comment: http://stackoverflow.com/comment/139195631
answer count: 2
linked to: http://stackoverflow.com/q/32612220
accepted answer: http://stackoverflow.com/a/78942210
possible better answer: http://stackoverflow.com/a/78942209

http://stackoverflow.com/comment/139319666
comment on: http://stackoverflow.com/a/79013936
score: 0
type: AnswerComment
has text: `word-break: break-all` is not at all what I'm looking for.
type: Comment

http://stackoverflow.com/q/78988424
has title: How to create an infinite scroll with smooth transitions (React)
tagged with: reactjs
score: 0
has comment: http://stackoverflow.com/comment/139274013
tagged with: next.js
tagged with: css
answer count: 0
type: UnansweredQuestion
tagged with: css-transitions
type: Question
has body: Relevant code: import styled from "styled-components"; import { useGames } from "../providers/gamesProvider"; import Card from "./Card"; import { useEffect, useState } from "react"; const StyledScroller = styled.div` margin: 40px auto 0; max-width: 1400px; height: 600px; display: flex; justify-content: center; align-items: center; overflow: hidden; gap: 16px; position: relative; /* background: linear-gradient(to right, transparent, white, transparent); */ &:before { content: ""; position: absolute; z-index: 1; top: 0; left: 0; pointer-events: none; background-image: linear-gradient( to left, rgba(255, 255, 255, 0), rgba(15, 23, 42, 1) 90% ); width: 10%; height: 100%; } &:after { content: ""; position: absolute; z-index: 1; top: 0; right: 0; pointer-events: none; background-image: linear-gradient( to right, rgba(255, 255, 255, 0), rgba(15, 23, 42, 1) 90% ); width: 10%; height: 100%; } `; function Scroller() { const { activeIndex, setActiveIndex, gamesData } = useGames(); const [isPaused, setIsPaused] = useState(false); // Effect to handle the automatic looping of the activeIndex useEffect(() => { if (isPaused) return; // If paused, don't start the interval const interval = setInterval(() => { setActiveIndex((prevIndex) => (prevIndex + 1) % gamesData.length); }, 5000); return () => clearInterval(interval); }, [gamesData.length, setActiveIndex, isPaused]); // Calculate the previous and next indices based on the activeIndex const prevIndex = (activeIndex - 1 + gamesData.length) % gamesData.length; const nextIndex = (activeIndex + 1) % gamesData.length; // pause scroll functions const handleMouseEnter = () => { setIsPaused(true); }; const handleMouseLeave = () => { setIsPaused(false); }; const handleIncrementIndex = () => { setActiveIndex(nextIndex); }; const handleDecrementIndex = () => { setActiveIndex(prevIndex); }; return ( <Card index={prevIndex} gamesData={gamesData} smol={true} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} onClick={handleDecremen…

http://stackoverflow.com/comment/139153954
type: QuestionComment
comment on: http://stackoverflow.com/q/78922065
type: Comment
score: 0
has text: canvas doesn’t appear in the HTML you have provided, nor is there any info on how you are rendering the image onto a canvas so your question is currently not complete. As it stands object-fit will fit the img to its container, canvas doesn’t come into it.

http://stackoverflow.com/q/78966516
downvote count: 1
accepted answer: http://stackoverflow.com/a/78966573
score: 1
favorite count: 0
type: Question
answer count: 1
tagged with: http://stackoverflow.com/tag/html
type: AnsweredQuestion
has answer: http://stackoverflow.com/a/78966573
has title: Hide iframe in the absence of its stylesheet
tagged with: javascript
tagged with: css
has body: I have an iframe with the following element in its header The problem is that this style sheet takes more time to load than the iframe. Because of that, the iframe would show without styling for 2 seconds or so. What I want to do is to hide the iframe and only show it if this style sheet has fully loaded. How can I do this? Can I maybe listen to the url /web/assets/report.min.css and once it returns status code of 200 I can show the iframe?
upvote count: 2

overflow
tags question: http://stackoverflow.com/q/79059408
tags question: http://stackoverflow.com/q/78952516
tags question: http://stackoverflow.com/q/78966243
tags question: http://stackoverflow.com/q/78939673
tags question: http://stackoverflow.com/q/78979042
tags question: http://stackoverflow.com/q/78959027
tags question: http://stackoverflow.com/q/78936068
tag name: overflow
tags question: http://stackoverflow.com/q/78929444
tags question: http://stackoverflow.com/q/79010036
tags question: http://stackoverflow.com/q/79021456
tags question: http://stackoverflow.com/q/78955207
tags question: http://stackoverflow.com/q/78910404
type: Tag
tags question: http://stackoverflow.com/q/78962714
tags question: http://stackoverflow.com/q/78993557
tags question: http://stackoverflow.com/q/78979287
tags question: http://stackoverflow.com/q/79052180
tags question: http://stackoverflow.com/q/79050895
tags question: http://stackoverflow.com/q/79003457
tags question: http://stackoverflow.com/q/79050234
tags question: http://stackoverflow.com/q/79061496
tags question: http://stackoverflow.com/q/78955166
tags question: http://stackoverflow.com/q/79152697
tags question: http://stackoverflow.com/q/79107002
tags question: http://stackoverflow.com/q/79213157
tags question: http://stackoverflow.com/q/79122000
tags question: http://stackoverflow.com/q/79238303
tags question: http://stackoverflow.com/q/79165947
tags question: http://stackoverflow.com/q/79205238
tags question: http://stackoverflow.com/q/79083768
tags question: http://stackoverflow.com/q/79076212
tags question: http://stackoverflow.com/q/79374230
tags question: http://stackoverflow.com/q/79333866
tags question: http://stackoverflow.com/q/79357475
tags question: http://stackoverflow.com/q/79360714
tags question: http://stackoverflow.com/q/79250460
tags question: http://stackoverflow.com/q/79398125
tags question: http://stackoverflow.com/q/79360431
tags question: http://stackoverflow.com/q/79337722
tags question: http://stackoverflow.com/q/79304777
tags question: http://stackoverflow.com/q/79365729
tags question: http://stackoverflow.com/q/79482345
tags question: http://stackoverflow.com/q/79506964
tags question: http://stackoverflow.com/q/79529201
tags question: http://stackoverflow.com/q/79521235
tags question: http://stackoverflow.com/q/79472393
tags question: http://stackoverflow.com/q/79476386
tags question: http://stackoverflow.com/q/79537241
tags question: http://stackoverflow.com/q/79485045
tags question: http://stackoverflow.com/q/79543383
tags question: http://stackoverflow.com/q/79495713

http://stackoverflow.com/a/79011555
score: 0
upvote count: 1
has comment: http://stackoverflow.com/comment/139314787
has body: Add this CSS: .stars { display: inline-block; vertical-align: text-bottom; } vertical-align takes care of the alignment, but it only works for block and inline-block elements, therefore the display setting. .reviews { color: black; } .review-name { font-weight: 700; margin-bottom: 2px; margin-top: 40px; } .review-location { font-weight: 400; } .stars-container { vertical-align: center; } .stars { display: inline-block; vertical-align: text-bottom; } .review-date { font-weight: 400; } .review-content { font-size: .9rem; } Brian C. REVIEW LOCATION <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" /> <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" /> <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" /> <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" /> <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" /> Jul 10, 2019 REVIEW TEXT Yelp
has comment: http://stackoverflow.com/comment/139315744
downvote count: 1
has comment: http://stackoverflow.com/comment/139315374
answers question: http://stackoverflow.com/q/79010977
type: Answer
has comment: http://stackoverflow.com/comment/139316059
has comment: http://stackoverflow.com/comment/139314712

http://stackoverflow.com/comment/139147241
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78918097
has text: I couldn't help you to the end :( I'm so glad you solved it! If there's a similar issue, I'll try to apply it. Thank you for sharing. @Theo
type: Comment

http://stackoverflow.com/a/79058398
downvote count: 0
type: AcceptedAnswer
score: 2
upvote count: 2
has comment: http://stackoverflow.com/comment/139402541
type: Answer
answers question: http://stackoverflow.com/q/79052269
accepted answer of: http://stackoverflow.com/q/79052269
has body: I think it would be just as simple as splitting out the colour rule to just target > span (e.g. any span elements in the li that are a direct descendant), e.g. .filestab ul li:hover > span, .filestab ul li:hover > span a { color: #fff; } .filesubmenu { display: block; position: absolute; width: 164px; top: 0; left: 0; background-color: #bdbebd; border-top: 1px #dedfde solid; border-right: 1px #000 solid; border-bottom: 1px #000 solid; border-left: 1px #dedfde solid; outline: 1px #fff outset; outline-offset: -2px; } .filestab ul li { display: block; padding-right: 16px; padding-left: 5px; width: calc(100% - 1px); height: 20px; text-align: left; font-family: "Arial"; font-size: 12px; } .filestab ul li:hover { background-color: #00007b; } .filestab ul li:hover > span, .filestab ul li:hover > span a { color: #fff; } .filestab ul li a { color: #0000ff; } .filepop1, .filepop2 { display: block; position: absolute; outline: white 1px outset; outline-offset: -2px; border-right: 1px #000 solid; border-top: 1px #dedfde solid; border-left: 1px #dedfde solid; border-bottom: 1px #000 solid; background-color: #bdbebd; width: 164px; left: calc(100% - 3px); top: -1px; } I'm an example submenu! Example Example with link Example Example with link Example with link Example Example with link Example with link Example Example Example Example Example Example Example

http://stackoverflow.com/comment/139317338
score: 0
has text: @Guyb there are a bunch of example of usage shown on the official docs here https://air-datepicker.com/examples . The functionality to select a range of dates is given by `range:true` and you already did it (you will find it under _Range of dates_). While the chance to select the beginDate and endDate from two individual data-pickers (instead of an actual range on a single calendar) is under _Minimum and maximum dates_. By the way in my very humble opinion I find it very annoying. I think is much better to select a range on a single datepicker if you asked me.. but that's not the question
type: QuestionComment
comment on: http://stackoverflow.com/q/79013255
type: Comment

http://stackoverflow.com/comment/139252002
type: AnswerComment
comment on: http://stackoverflow.com/a/78977147
type: Comment
score: 0
has text: No, it is not possible. there are no such tools. You need to manually convert html to mjml. You can try using drag-and-drop tools such as [easy-email](https://github.com/zalify/easy-email-editor?tab=readme-ov-file) or [Grapejs](https://grapesjs.com/demo-mjml) to design the template and export it as MJML or HTML.

http://stackoverflow.com/comment/139270746
comment on: http://stackoverflow.com/a/78987871
has text: could you modify your answer based on the updated question? If possible, could you also include the explanation that bootstrap defines styles `--bs-table-bg`, ` --bs-table-bg-type` and `--bs-table-striped-bg`. The fact that `--bs-table-striped-bg`` is semi-transparent (alpha: 0.05) black, applies a bit of black tint on the red background color. Hopefully this explanation can help others facing the same issue. Thank you.
type: Comment
score: 0
type: AnswerComment

http://stackoverflow.com/a/79040450
score: 0
has comment: http://stackoverflow.com/comment/139367674
answers question: http://stackoverflow.com/q/79039982
has body: You can use display:none with opacity:0. Transitions are not applied to display but they apply to opacity. when user clicks on radio buttons first set display and then set opacity to 100. Hope this helps...
type: Answer

http://stackoverflow.com/q/78946626
has body: Edit: add full html code Document Hover Me I set css transiton as box { /* others */ transition: transform 0.85s linear( 0, 0.0346 2.07%, 0.1407 4.43%, 0.9383 16.72%, 1.0774 20.43%, 1.1493 24.31%, 1.1629 26.95%, 1.1536 29.93%, 1.0168 43.09%, 0.9766 51%, 1.0033 76.88%, 1 ); } then I get this in browser But when I set linear in one line, box { /* others */ transition: transform 0.85s linear(0, 0.0346 2.07%, 1.0033 76.88%, 1); } then I get this and it works. I couldn't use long value linear easing. To fix this I use emotion, which is CSS-in-JS library, so that I can handle it by setting as string. --spring-easing: ${`linear(0, 0.0025 1.75%, 0.004 2.29%, 0.0099 3.55%, 0.0197 4.92%, 0.0341 6.4%, 0.0533 7.84%, 0.0744 9.06%, 0.0738 9.06%, 0.1003 10.32%, 0.1281 11.41%, 0.1598 12.44%, 0.194 13.37%, 0.231 14.21%, 0.2714 14.97%, 0.3447 16.05%, 0.344 16.05%, 0.4768 17.47%, 0.5443 18.34%, 0.6069 19.39%, 0.6604 20.61%, 0.6897 21.46%, 0.7167 22.4%, 0.7419 23.44%, 0.7653 24.59%, 0.7876 25.87%, 0.8083 27.28%, 0.8272 28.79%, 0.8448 30.42%, 0.8649 32.63%, 0.8656 32.71%, 0.8645, 0.8656 32.72%, 0.8686 33.08%, 0.8833 35.06%, 0.8888 35.86%, 0.8876, 0.8888 35.87%, 0.9002 37.72%, 0.9009 37.83%, 0.9001 37.83%, 0.9039 38.37%, 0.9155 40.62%, 0.9295 43.79%, 0.9421 47.24%, 0.9533 50.97%, 0.9633 54.99%, 0.972 59.33%, 0.9795 64.01%, 0.9858 69.04%, 0.9909 74.43%, 0.9949 80.2%, 0.9977 86.37%, 1 );`}; Is there another way to fix it? Is this formatter bug?
has title: CSS linear-easing-function bug
score: 0
has comment: http://stackoverflow.com/comment/139194904
answer count: 0
tagged with: css
has comment: http://stackoverflow.com/comment/139194832
type: UnansweredQuestion
tagged with: css-in-js
type: Question
has comment: http://stackoverflow.com/comment/139194943
has comment: http://stackoverflow.com/comment/139194895
tagged with: emotion

http://stackoverflow.com/a/78933480
upvote count: 1
has comment: http://stackoverflow.com/comment/139171020
has body: Ideally you’d be able to take out all the animation from the JavaScipt and have the final values right in the CSS, but if you’re looking for a quick fix before shabbos, it looks like the transition is being set on the [pagelayer-id] selector. [pagelayer-id] { transition: none; } Assuming your authored CSS comes after the theme-provided CSS, that should work. If not, you may have to hack it with !important (unless you can refactor the whole thing with @layers).
has comment: http://stackoverflow.com/comment/139171014
answers question: http://stackoverflow.com/q/78933453
score: 1
accepted answer of: http://stackoverflow.com/q/78933453
has comment: http://stackoverflow.com/comment/139170663
has comment: http://stackoverflow.com/comment/139171001
type: AcceptedAnswer
type: Answer
downvote count: 0

http://stackoverflow.com/comment/139169943
type: AnswerComment
type: Comment
comment on: http://stackoverflow.com/a/78916304
has text: I've changed my mind and marked your answer as the best because although it's more confusing in terms of calculations, it has less problems on different browsers.
score: 0

sticky
tag name: sticky
type: Tag
tags question: http://stackoverflow.com/q/79048038
tags question: http://stackoverflow.com/q/78915026
tags question: http://stackoverflow.com/q/78993924
tags question: http://stackoverflow.com/q/78984963
tags question: http://stackoverflow.com/q/78912016
tags question: http://stackoverflow.com/q/79035901
tags question: http://stackoverflow.com/q/79127309
tags question: http://stackoverflow.com/q/79089728
tags question: http://stackoverflow.com/q/79119957
tags question: http://stackoverflow.com/q/79139892
tags question: http://stackoverflow.com/q/79390073
tags question: http://stackoverflow.com/q/79279244
tags question: http://stackoverflow.com/q/79354278
tags question: http://stackoverflow.com/q/79331371
tags question: http://stackoverflow.com/q/79455640
tags question: http://stackoverflow.com/q/79517440
tags question: http://stackoverflow.com/q/79472978
tags question: http://stackoverflow.com/q/79533395
tags question: http://stackoverflow.com/q/79452703
tags question: http://stackoverflow.com/q/79470278

http://stackoverflow.com/a/78951589
type: Answer
has comment: http://stackoverflow.com/comment/139203609
has comment: http://stackoverflow.com/comment/139203601
has comment: http://stackoverflow.com/comment/139203624
score: -1
downvote count: 2
answers question: http://stackoverflow.com/q/78951532
has comment: http://stackoverflow.com/comment/139203617
upvote count: 1
has body: You should change the structure a bit and use semantic tags. In your image, you have 3 columns that you can align next to each other with Flexbox. The semantic correct approach would be to use aside as containers for the image and the date and read more columns. The main column with your blog post would be an article. You can let the article column span the whole available width by using flex-grow: 1. To let the date and read more columns reach your intended layout you have to use flexbox with flex-direction: column. That way you can add margin-top: auto on the "read more" link to push it to the very bottom. PS: You should not sue margins to spread columns apart within flexbox. Use gap instead! section.blog-post { display: flex; gap: 1.25em; background-color: white; border: 1px solid #ddd; border-radius: 8px; padding: 20px; max-width: 1200px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; text-align: left; aside.blog-thumbnail img { width: 150px; height: 150px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); object-fit: cover; } article { flex-grow: 1; h2 { font-size: 1.2em; margin-bottom: 20px; color: #333; margin-top: 0; } p { font-size: 1em; color: #666; margin-bottom: 100px; } } aside.blog-date { display: flex; flex-direction: column; time { color: #666; } a { color: #1e7cd6; text-decoration: none; font-weight: bold; margin-top: auto; } } } How Drone Photography Can Elevate Your Real Estate Listings Unlock the Power of Aerial Views & Attract More Buyers to Your Listings August 30, 2024 Read more

http://stackoverflow.com/a/79007872
has body: It's very easy. I prove updated code. .radio-tabs .tab { display: flex; flex-flow: column; align-items: center; text-align: center; padding: 1em; color: #000; background-color: #EEEEEE; height: 60px; border-bottom: 1px solid #CCCCCC; } .radio-tabs .tab:hover { background-color: red; } /* Remove border-bottom of the last tab */ .radio-tabs .tabs .tab:last-child { border-bottom: none; }
answers question: http://stackoverflow.com/q/79007606
type: Answer
score: 0

http://stackoverflow.com/q/78962975
has body: let elem = document.querySelector(".e") let but1 = document.querySelector(".but1") let but2 = document.querySelector(".but2") but1.addEventListener("click", () => { elem.style.setProperty("--x", `300px`) }) but2.addEventListener("click", () => { elem.style.setProperty("--x", `500px`) }) .e { top: 50px; left: calc(var(--x)); width: 200px; height: 200px; position: absolute; background-color: black; transition: 2000ms ease-in-out; } 2 click me click me When I click but1, it sets the value of variable x and moves right to the distance as the value. But it doesn't play the transition animation. In subsequent clicks of button 1 and button 2 it does show the animation. Why?
has answer: http://stackoverflow.com/a/78963058
type: UnansweredQuestion
tagged with: css
type: Question
answer count: 1
score: 0
has title: Setting value of left var doesn't show in transition animation

http://stackoverflow.com/q/78989351
tagged with: css
has body: I am in the process of trying to upgrade from Angular version 15 to 16. After updating the necessary packages I am getting the error: HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js): Undefined variable. ╷ 117 │ @error 'The theme for #{map.get($map, 'name')} does not contain #{$key}'; │ ^^^^ ╵ node_modules\igniteui-theming\sass\themes_functions.scss 117:41 var-get() node_modules@infragistics\igniteui-angular\lib\core\styles\components\bottom-nav_bottom-nav-theme.scss 125:16 bottom-nav() node_modules@infragistics\igniteui-angular\lib\core\styles\themes\generators_base.scss 155:9 theme-internal() node_modules@infragistics\igniteui-angular\lib\core\styles\themes\generators_base.scss 42:5 theme() node_modules@infragistics\igniteui-angular\lib\core\styles\themes\generators_base.scss 667:5 light-theme() src\styles\rhi-light-theme.scss 6:3 @import src\styles.scss 23:9 root stylesheet My styles.scss is set as below: //rhi styles @import './styles/rhi'; // igx-color function has been renamed to color which is the same as the bootstrap function. Declare all infragistics colours before importing bootstrap. // Bootstrap @import "node_modules/bootstrap/scss/bootstrap"; // IMPORTANT: Make sure you always include igx-core first! @include core(); // Configure application fonts with igx-typography @include typography( $font-family: "'Montserrat', sans-serif", $type-scale: $rhi-type-scale ); // Initialise ignite ui themes @include theme($rhi-color-palette); //Import rhi themes @import './styles/rhi-light-theme'; @import './styles/rhi-dark-theme'; The issue seems to be specifically with: $rhi-color-palette in rhi.scss I have: // Import the IgniteUI themes library first @use '@infragistics/igniteui-angular/theming' as *; @forward '@infragistics/igniteui-angular/theming'; // CSS Reset, comment out if not required or using a different module @import 'node_modules/minireset.css/minireset'; // Import our defined palettes and schemas @import './igx-palette…
tagged with: angular
has answer: http://stackoverflow.com/a/78993208
type: Question
answer count: 1
type: AnsweredQuestion
has title: Angular 16 - 'The theme for #{map.get($map, 'name')} does not contain #{$key}';
score: 0
accepted answer: http://stackoverflow.com/a/78993208
tagged with: sass

http://stackoverflow.com/comment/139378247
score: 1
type: Comment
has text: @PeterPointer: thanks for that; I didn't yet know about code snippets on SO. Updated my post to use it instead of a codepen link. The picsum photos site is also nice! But in this case I need images which are partially transparent.
type: QuestionComment
comment on: http://stackoverflow.com/q/79044341

http://stackoverflow.com/comment/139213511
has text: @Tacoshy can you show me where you want it to be an inline-block element?
type: QuestionComment
type: Comment
comment on: http://stackoverflow.com/q/78956780
score: 0

http://stackoverflow.com/a/78909522
has comment: http://stackoverflow.com/comment/139126977
has body: this plugin add css class on body then you can try this in the custom css code of the theme : .pojo-a11y-high-contrast ::placeholder { opacity : 1; }
type: Answer
score: 0
answers question: http://stackoverflow.com/q/78909216
has comment: http://stackoverflow.com/comment/139127267

http://stackoverflow.com/q/78971306
score: 2
upvote count: 2
has comment: http://stackoverflow.com/comment/139243260
has comment: http://stackoverflow.com/comment/139250342
has title: Changing the font in different sections of a Quarto document (HTML and PDF)
linked to: http://stackoverflow.com/q/74026514
tagged with: pandoc
downvote count: 0
tagged with: css
has body: I need to create a document where different blocks of text have different fonts and font size. So for example something like. --- title: "My Document" mainfont: Latin Modern Roman --- This section is in the normal Latin Modern Roman font. ::: {.special_font_1} This text is in a Gentium font ::: Some more in the regular font ::: {.special_font_2} Yet more text, but in an Arial font. ::: Final text in normal Latin font. Now I was wondering if I can do this kinda thing using CSS, or if this would not work. I don't really want callouts, though I am using the callout syntax in the example above. Or is it better to use some HTML tag or something? I want to make sure that the output in HTML and PDF will use the same formatting and fonts. I am also not clear on how to setup the CSS settings to set the font in quarto. Would I do something as above, like .special_font_1 { font-family: Gentium }, or is something more required.
answer count: 0
has comment: http://stackoverflow.com/comment/139248670
tagged with: quarto
type: UnansweredQuestion
tagged with: http://stackoverflow.com/tag/pdf
favorite count: 0
tagged with: http://stackoverflow.com/tag/html
type: Question

http://stackoverflow.com/comment/139404856
has text: Try using left in `percentage` or `vw` so that it will changes according to screen size but best solution would be using `flexbox`.
score: 0
comment on: http://stackoverflow.com/q/79061170
type: Comment
type: QuestionComment

http://stackoverflow.com/a/78997843
downvote count: 2
answers question: http://stackoverflow.com/q/78997824
type: Answer
has body: use border-radius to create circular or oval shapes by rounding the corners of the button. after that Pseudo-elements (::before,::after), adding extra shapes to the button by creating additional layers that can be styled separately from the main element. Then Use borders to create triangles or other custom shapes by setting specific borders to transparent and one side to a solid color. You can combine these to create shapes without clip-path.
upvote count: 0
score: -2

http://stackoverflow.com/comment/139230001
type: QuestionComment
comment on: http://stackoverflow.com/q/78948123
has text: @HeikoTheißen Do you mean in the response headers? No. But if of interest: `vary: Origin, Access-Control-Request-Headers, Access-Control-Request-Method`
type: Comment
score: 0

http://stackoverflow.com/q/79000174
downvote count: 0
tagged with: css
has comment: http://stackoverflow.com/comment/139293350
tagged with: width
has title: Set element width based on a string that is not in the element
has comment: http://stackoverflow.com/comment/139293359
possible better answer: http://stackoverflow.com/a/79000204
has body: I have a React component that can render one string or another. const MyComponent = (props: { readonly textA: string; readonly textB: string; readonly renderB: boolean; }) =&gt; { return &lt;&gt;{props.renderB ? props.textB : props.textA}&lt;/&gt;; }; The problem is when I use this and I toggle renderB on and off, the width of the component can change based on which string is rendered. I want the component width to fit the longer of the two strings. How can I take the max length of textA and textB and use that to determine the width of my component? For example, it could look something like this: const MyComponent = (props: { readonly textA: string; readonly textB: string; readonly renderB: boolean; }) =&gt; { const widthA = /* compute the width of props.textA */; const widthB = /* compute the width of props.textB */; return ( &lt;div style={{ width: `${Math.max(widthA, widthB)}px` }}&gt; {props.renderB ? props.textB : props.textA} &lt;/div&gt; ); };
favorite count: 0
type: Question
tagged with: http://stackoverflow.com/tag/html
score: 2
has answer: http://stackoverflow.com/a/79000252
upvote count: 2
type: AnsweredQuestion
accepted answer: http://stackoverflow.com/a/79000252
tagged with: javascript
tagged with: reactjs
has comment: http://stackoverflow.com/comment/139293355
has answer: http://stackoverflow.com/a/79000204
answer count: 2

http://stackoverflow.com/a/78948325
has body: You can use the ::before pseudo element to achieve this. Here is an example: div { width: 200px; text-align:center; padding:10px; border-radius: 20px; background: green; font-weight: bold; font-family: sans-serif; color: white; padding-top: 30px; position: relative; } div::before { content: 'Test 123'; display: block; width: 100px; height: 20px; background: #FFF; position: aboslute; border-radius: 20px; margin-top: -37px; margin-left: calc(50% - 50px); } &lt;div&gt; &lt;br /&gt; Doloribus est architecto laboriosam minus a dolorem labore. Repudiandae natus voluptates tempora dignissimos eos explicabo. Quibusdam fuga et quo impedit excepturi a voluptates optio. Temporibus laborum rem aut illo ea a. &lt;/div&gt;
type: Answer
answers question: http://stackoverflow.com/q/78948289
downvote count: 3
score: -2
upvote count: 1

http://stackoverflow.com/comment/139322149
has text: No it's not, let me just see if i can get it working.
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/79015820
type: Comment

http://stackoverflow.com/comment/139200674
has text: Using `vh` works for me when I change the viewport height. Are you looking to respond to the viewport width with `vw` instead? Maybe you want to use `rem` units? It's not entirely clear to me what isn't working.
type: QuestionComment
comment on: http://stackoverflow.com/q/78950094
score: 2
type: Comment

http://stackoverflow.com/comment/139395919
comment on: http://stackoverflow.com/a/79051989
type: Comment
has text: Reader Mode on browsers strips away any styles applied using CSS. So the width needs to be directly applied to the HTML element without CSS.
score: 0
type: AnswerComment

http://stackoverflow.com/comment/139137931
score: 0
comment on: http://stackoverflow.com/a/78916029
type: AnswerComment
has text: @shirshamay It is because `background` is shorthand for all background style properties. You were using `background-image` and yet setting multiple background properties for it, as shown in @foysal-kabir-shimul's answer.
type: Comment

http://stackoverflow.com/comment/139385899
comment on: http://stackoverflow.com/q/79050854
type: QuestionComment
has text: `.banner` should work, assuming the `a` elements don't already have styling to override that. If so, try `.banner > a`
score: 6
type: Comment

http://stackoverflow.com/comment/139310887
type: Comment
score: 0
type: AnswerComment
has text: It is now uploaded, and so the problem is fixed.
comment on: http://stackoverflow.com/a/79009889

http://stackoverflow.com/q/79058959
tagged with: css-grid
has answer: http://stackoverflow.com/a/79059236
has title: CSS Grid BarChart - Force new items onto a new row without specifying grid-row-start
accepted answer: http://stackoverflow.com/a/79059236
has body: I am trying to create a configurable BarChart using only HTML/CSS... I started with a tutorial from Josh Collingsworth: https://joshcollinsworth.com/blog/css-grid-bar-charts It uses a CSS GRID to auto-size based on the provided column-spans. The problem I have (and he also explains in his example but doesnt give clearly a solution) is that if one of the items is large, the natural behaviour of GRID is to put the other items together on the next row(s) because there is enough space. As I am trying to create a simple bar-chart, I want to force each item on a new row. section { width: 100%; max-width: 30rem; padding: 1.5rem 1.5rem 2rem; border: 2px solid #a7a8aa; border-radius: 0.5rem; margin: auto; box-sizing: border-box; } .chart { display: grid; grid-template-columns: auto; grid-auto-columns: 1fr; gap: 0.1em 0; align-items: center; margin: 0; padding: 0; list-style-type: none; border-left: 3px solid grey; } li { background: gold; display: inline-flex; align-items: center; justify-content: space-between; padding: 0.3rem 0.5rem; border-radius: 0 0.5em 0.5em 0; } Players per sports team Baseball: 11 Football: 4 Basketball: 3 Basketball: 3 As my data will be dynamic, I am looking for a simple way through CSS to force each ListItem to start on a separate row. I found that if I specify the row explicitly with each item it works, but it feels like I am missing something simple from the CSS which would accomplish the same thing ?? I also tried to force each ListItem to begin at column1 using grid-column-start:1 in the ListItem CSS but this doesnt work.
tagged with: http://stackoverflow.com/tag/html
type: Question
answer count: 1
type: AnsweredQuestion
score: 0
tagged with: css

react-aria
tag name: react-aria
type: Tag
tags question: http://stackoverflow.com/q/79030341

http://stackoverflow.com/a/78986203
upvote count: 1
score: 1
has body: You don't need to worry about IntersectionObserver. It's widely supported across majoroty (95.89%) of browsers at the moment since 2016. Just use it if you like it! Vanilla in programming typically refers to a default or standard configuration. Like vanilla ice cream without any mixing flavors. So if you use IntersectionObserver it will mean vanilla. I decided not to provide a variation of the code from the previous post. I think it will help you. Good Luck with you project! ;-)
downvote count: 0
type: Answer
answers question: http://stackoverflow.com/q/78984963

http://stackoverflow.com/comment/139183919
type: Comment
has text: No. You copied OP's code and so did I, but my first div in the header is white as I would expect and neither yours not OPs is . Very strange
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78940190

http://stackoverflow.com/comment/139314716
has text: Why not just disable the button until an item in the parent select is selected and validation is complete?
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/79011753
type: Comment

http://stackoverflow.com/comment/139167604
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78931907
has text: Hi could you please post code that does the required thing in the image
type: Comment

http://stackoverflow.com/comment/139158176
score: 0
comment on: http://stackoverflow.com/a/78925479
type: Comment
type: AnswerComment
has text: You can add these to the `.Counter`rule: `display: inline-flex; justify-content: center; align-items: center;`(display: inline-flex;` replaces `display: inline-block` in that case)

http://stackoverflow.com/q/78948277
tagged with: css
has title: Reduce trailing whitespace with flex-wrap and dynamic width children
has body: On my site I have a list of tags that I'd like to display in a masonry-style layout, with clearly defined rows but no defined columns. This can be pretty easily achieved by: flex-wrap: wrap alone, as shown here: body { background-color: red; } .wrapper { display: flex; flex-wrap: wrap; gap: 1rem; padding: .25rem; width: 12rem; background-color: lime; } .wrapper > div { color: white; background-color: black; padding: .25rem; border-radius: .25rem; } Lorem ipsum dolor sit amet consectetur adipiscing elit Duis lobortis tempor mauris vitae ornare The problem that I'm running into is that there tends to be a gutter on the right margin, from where the row failed to fill. This would be fine for a row or two, but tends to be pretty consistent, with 1 row in a dozen being "full". Excuse the awful drawing, but here's my quick attempt at illustrating this: As you can imagine, if you duplicate this image a couple times vertically, there's a really obvious gutter on the right side which creates an imbalance with the content that hugs the left margin, in contrast. If I understand correctly, this is somewhat of a known issue, and something the CSS Masonry spec, if it ever progresses, will attempt to address, but is there any solution at the moment? Justifying per-row in some way, or an auto margin? Not sure, somewhat grasping at straws. Happy to switch to other methods if there's a better way than flex-wrap for achieving this, but everything I've seen of grid seems to be about well-defined columns and rows, which is precisely what I do not what.
has answer: http://stackoverflow.com/a/78948659
type: Question
accepted answer: http://stackoverflow.com/a/78948659
answer count: 1
type: AnsweredQuestion
score: 0

http://stackoverflow.com/a/79041195
has comment: http://stackoverflow.com/comment/139369287
upvote count: 4
answers question: http://stackoverflow.com/q/79021330
type: Answer
score: 4
downvote count: 0
has comment: http://stackoverflow.com/comment/139443280
has comment: http://stackoverflow.com/comment/139368712
has body: This is not a full answer,but I put the info here in case it can lead someone to a complete explanation and solution. In the given codepen if I change the iframe CSS in the initial stylesheet to: iframe { opacity: 0; z-index: 1; position: absolute; } and then where the play arrow gets changed to the pause icon I change the display property of the iframe to 'none' the player works. player.on('play', () =&gt; { playBtn.innerHTML = '&amp;#10074;&amp;#10074;'; // Pause icon document.getElementById('bunny-stream-embed').style.display = 'none'; }); or at least, gives the appearance of working, because of course the first click was direct on the iframe rather than one specific spot on the control panel.
has comment: http://stackoverflow.com/comment/139403400

http://stackoverflow.com/q/79058417
tagged with: java
type: Question
has answer: http://stackoverflow.com/a/79068048
has answer: http://stackoverflow.com/a/79203044
tagged with: tailwind-css
has body: I am experimenting with the new JTE template and even though it works fine to display values through my HTML, I'm struggling to get the Tailwind CSS styles to show up. I have a Tailwind autogenerated main.css file inside src/main/resources/static/main.css. I am trying to apply it to the below index.jte file, which lives inside src/main/jte. The Tailwind configurations and package.json file are inside src/main/frontend. @import com.francislainy.jtetailwind.Page @param String name @param Page page ${page.title()} Hello ${name}! But even though i run these scripts which are in my package.json file: "build": "tailwindcss -i ./styles.css -o ../resources/static/main.css --minify", "watch": "tailwindcss -i ./styles.css -o ../resources/static/main.css --watch", I don't see the Tailwind style, despite being able to see the html page with the JTE retrieved values. I am also able to access the styles under http://localhost:8080/main.css This is my Tailwind configuration: /** @type {import('tailwindcss').Config} */ module.exports = { content: [ './src/main/jte/**/*.jte', // Ensure Tailwind scans your JTE files './src/main/resources/static/**/*.css', // Optionally include other static resources if needed ], theme: { extend: {}, }, plugins: [], } I have this in my pom file: gg.jte jte 3.1.12 gg.jte jte-spring-boot-starter-3 3.1.12 com.github.eirslett frontend-maven-plugin 1.15.0 install node and npm install-node-and-npm generate-resources ${node.version} ${npm.version} npm install npm generate-resources install npm build npm generate-resources run build src/main/frontend target The whole project can be found here: https://github.com/francislainy/jteTemplate-poc Thank you very much. UPDATE Screenshot with project structure and IntelliJ warning when trying to point the css to ./main.css
type: AnsweredQuestion
tagged with: spring-boot
score: 0
tagged with: jte
upvote count: 1
answer count: 2
tagged with: css
accepted answer: http://stackoverflow.com/a/79068048
possible better answer: http://stackoverflow.com/a/79203044
downvote count: 1
has title: How to apply Tailwind CSS style to a JTE template using Java Spring Boot?
favorite count: 0

http://stackoverflow.com/comment/139375713
comment on: http://stackoverflow.com/q/79045030
has text: Wow. Yes, I need it to be exactly as in FF. Switching to FF is not a solution though. I'm having it in a chrome extension. Once chrome blocks adblockers for good with its deceptive mv3 changes, I will certainly switch to FF and move my extension to FF too, but before that, I wouldn't mind a solution for Chrome.
type: Comment
score: 0
type: QuestionComment

build
tag name: build
tags question: http://stackoverflow.com/q/79064314
type: Tag
tags question: http://stackoverflow.com/q/78947941
tags question: http://stackoverflow.com/q/79164223
tags question: http://stackoverflow.com/q/79330924

http://stackoverflow.com/comment/139361726
type: AnswerComment
comment on: http://stackoverflow.com/a/79029558
has text: Thanks for explanation
type: Comment
score: 0

http://stackoverflow.com/a/79056061
has comment: http://stackoverflow.com/comment/139511323
upvote count: 2
has comment: http://stackoverflow.com/comment/139399603
type: Answer
downvote count: 1
answers question: http://stackoverflow.com/q/79056012
has comment: http://stackoverflow.com/comment/139395159
has comment: http://stackoverflow.com/comment/139401483
has body: Based on what you wrote and provided information in your question, I have to say that remember -webkit-line-clamp only works in conjunction with display: -webkit-box; and -webkit-box-orient: vertical;. Without these, the line-clamp property won’t function correctly. So, it seems to me by updating your CSS as follow your problem will be solved: .elementor-132 .elementor-element.elementor-element-5aa83db4 .elementor-widget-container { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; /* Change this to 6 or none as per your needs */ overflow: hidden; } Please check the live example: .line-clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; } Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget orci sit amet dui sollicitudin mollis. Duis cursus eros dui, id iaculis leo faucibus id. Duis vitae facilisis augue. Aenean viverra varius sem, vitae condimentum nisi mollis a. Duis vulputate ante vehicula enim congue tempus sit amet ac ante. Donec non libero sit amet massa porttitor rutrum at quis ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla eleifend tempus orci, at dictum augue. Nunc ut sapien vitae nisi commodo vehicula. Nunc et tristique ipsum, et luctus ante. Maecenas tincidunt mi libero, vel fermentum mauris eleifend vitae. In dapibus a ex vitae placerat. Mauris ante dolor, facilisis quis enim eget, convallis aliquam erat. I guess it is related to your selector, in case you are using elementor, use advanced -> custom CSS and use these lines: selector .class-of-paragraph { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; } If it is not working, please provide more information. Then, I will be able to help you and update your question.
score: 1

http://stackoverflow.com/a/79003656
type: AcceptedAnswer
type: Answer
downvote count: 0
has body: Alongside the slotProps route. You could try using the renderOption. This route could give you more ability to choose exactly what goes into each list item as you can now use any MUI component inside of it. MUI Autocomplete renderOption Example Doing this allows you to click even outside of the box but in the same row and still trigger a select. slotProps does also allow for that but it requires more CSS into it. And if you wanted the user to have to select inside the box but not the row, you could just move the {...params} from the box to the Typography and it should work only when the user clicks inside the box.
upvote count: 1
answers question: http://stackoverflow.com/q/79002937
score: 1
accepted answer of: http://stackoverflow.com/q/79002937

http://stackoverflow.com/comment/139288386
type: QuestionComment
score: 1
comment on: http://stackoverflow.com/q/78997521
type: Comment
has text: Please note that primarily asking for a generator is asking for an external resource and that would be off-topic. I removed that sentence so that your question remains on-topic. Please ad more details what you exactly you tried and how it was not working providing the code of your attempt as a [repro].

http://stackoverflow.com/q/78915823
score: 0
tagged with: javascript
tagged with: css
has comment: http://stackoverflow.com/comment/139137884
has answer: http://stackoverflow.com/a/78915863
accepted answer: http://stackoverflow.com/a/78915863
type: Question
has body: I have tabs setup correctly i.e tab headings and the content is displaying correctly. However I want to also display a separate DIV just beneath the tabs based on which tabs is active. So far I have gotten the correct extra div to display on initial page load but clicking on the other tab headings is not changing the displayed div. document.addEventListener("DOMContentLoaded", function() { const tabs = document.querySelectorAll(".accomodation-tabs .sppb-tab-content .sppb-tab-pane"); const galleryModules = { "standard-twin": ".twin-room-gallery", "standard-double": ".standard-double-gallery", "luxury-suites": ".luxury-suites-gallery" }; // Hide all modules within the common container const allModules = document.querySelectorAll(".accomodation-gallery .sppb-addon"); allModules.forEach((module) => { module.style.display = "none"; }); // Show the first gallery module (Twin Room Gallery) on page load const twinRoomModule = document.querySelector(".twin-room-gallery"); twinRoomModule.style.display = "block"; // Add event listener to tab container const tabContainer = document.querySelector(".accomodation-tabs .sppb-tab-content"); tabContainer.addEventListener("click", function(event) { const clickedTab = event.target.closest(".sppb-tab-pane"); if (!clickedTab) return; // Ignore clicks outside tabs // Hide all gallery modules Object.values(galleryModules).forEach((moduleClass) => { document.querySelector(moduleClass).style.display = "none"; }); // Show the corresponding gallery module based on the clicked tab const tabClass = clickedTab.classList[1]; const moduleToShow = galleryModules[tabClass]; document.querySelector(moduleToShow).style.display = "block"; }); });
tagged with: http://stackoverflow.com/tag/html
has title: Display or hide a div based on a clicked tabs' class
answer count: 1
type: AnsweredQuestion

http://stackoverflow.com/comment/139260057
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78981553
type: QuestionComment
has text: the code here doesn't happen to me, and looks fine. Safari on Mac

clip
tags question: http://stackoverflow.com/q/79039436
tag name: clip
type: Tag
tags question: http://stackoverflow.com/q/79461882

http://stackoverflow.com/comment/139198488
comment on: http://stackoverflow.com/q/78948750
score: 1
type: Comment
has text: If there are no criteria, such as setting the maximum height to viewport-height, the child will also continue to grow.
type: QuestionComment

http://stackoverflow.com/q/78998005
favorite count: 0
type: Question
has comment: http://stackoverflow.com/comment/139289158
tagged with: http://stackoverflow.com/tag/html
has body: I have a some data loaded into an HTML table. Each column of the table has a table header with text in it. I want each column to have a minimum width equal to length of that text (so that it doesn't overflow/wrap). How can I do this dynamically (preferably without JavaScript, just vanilla HTML/CSS)? I've tried setting the width, min-width and max-width of the &lt;th&gt; elements in the CSS, it doesn't do anything.
tagged with: html-table
has title: How do I dynamically size HTML table column widths to the text in the " " element?
score: 0
upvote count: 1
tagged with: tableheader
answer count: 0
has comment: http://stackoverflow.com/comment/139289152
tagged with: css
has comment: http://stackoverflow.com/comment/139289195
has comment: http://stackoverflow.com/comment/139296610
downvote count: 1
type: UnansweredQuestion

http://stackoverflow.com/a/79063912
upvote count: 1
has body: Say the container's width is always 100% (or rather 100vw), in that case stripedWidth = 25vw // but... would suffice. But, since the container's width is limited to a max-width (of 1080px), keeping the striped element width at 25vw would make it too large - as we incremented the viewport width. Therefore the question is: "By how much do we need to subtract from 25vw (stripes width)"? Setting the striped element's width to 25vw and slowly resizing the viewport the answer would become immediately visible and obvious: we need to reduce that 25vw by exactly one margin's width (that one space between the container edge and the viewport's edge). margin = (viewport.width - container.width) / 2 Solution: .striped { width: calc(25vw - (100vw - 100%) / 2); } Example: * { margin: 0; box-sizing: border-box; } body { background: linear-gradient(90deg, #ddd 75%, #ccc 75%); overflow: auto; resize: both; margin: auto; } .container { margin: auto; max-width: 480px; /* DEMO ONLY, you use 1080px */ border: 2px solid green; } .striped { margin-left: auto; width: calc(25vw - (100vw - 100%) / 2); /* min-width: 50px; /* Uncomment if necessary */ min-height: 4rem; background: repeating-linear-gradient(160deg,#0000,#0000 10px,#f80 10px,#f80 15px); } Resize the viewport to test .striped width Tip: if you cannot use body but you have another parent which width does not match 100vw, then use container-type: size; on that element, and change vw units from the above code into cqw (container-query units) - and will work the same.
score: 1
answers question: http://stackoverflow.com/q/79063526
downvote count: 0
type: Answer

http://stackoverflow.com/comment/139149542
comment on: http://stackoverflow.com/a/78921243
type: Comment
score: 0
type: AnswerComment
has text: Would you mind to send me where can I learn more about this CSS And how did you know to do it * { margin: 0; padding: 0; font-family: "Roboto", sans-serif; color: #272727; } .register-form { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; flex-direction: column; } form { width: 30%; } .form-group { margin-top: 5px !important; }

http://stackoverflow.com/comment/139166674
type: Comment
comment on: http://stackoverflow.com/a/78931303
has text: Many thanks! I changed the path to the folder and I referred to the font in the body and it now works. In a previous project I used ```* { font-family: Nunito; }``` to apply the font to the entire webpage. I completely oversaw that in my current project.
score: 0
type: AnswerComment

http://stackoverflow.com/a/78906368
downvote count: 1
score: 2
answers question: http://stackoverflow.com/q/78906308
has body: In your code, you missed the closing of the button style by &quot;}&quot;. place is before the #btn1:hover line. And further improvement you can set transition to smooth change show. The correction code is. #btn1 { height: 150px; width: 220px; position: absolute; left: 550px; top: 400px; background-image: url(Images/portugal-flag.jpg); background-size: cover; cursor: pointer; transition: width 0.3s ease, height 0.3s ease; } #btn1:hover { height: 200px; width: 250px; }
accepted answer of: http://stackoverflow.com/q/78906308
has comment: http://stackoverflow.com/comment/139124995
upvote count: 3
type: AcceptedAnswer
type: Answer

http://stackoverflow.com/comment/139185262
type: Comment
score: 0
has text: I added `box-sizing: border-box` to everything but it didn't seem to help - could you clarify?
type: AnswerComment
comment on: http://stackoverflow.com/a/78941548

http://stackoverflow.com/a/79035459
score: -1
answers question: http://stackoverflow.com/q/79035449
downvote count: 1
has body: I added these clases here and with mt-auto in the profile container the div went down without ruining the distribution
upvote count: 0
type: Answer

http://stackoverflow.com/a/78953740
accepted answer of: http://stackoverflow.com/q/78950932
score: 0
answers question: http://stackoverflow.com/q/78950932
has body: I was able to fix by adding tag="span' to the draggable elements. <draggable tag="span" v-model="modules.contacts" group="contacts" handle=".handle" item-key="id">
type: AcceptedAnswer
type: Answer

http://stackoverflow.com/a/78976063
has body: tsconfig.json:3:25 - error TS6046: The argument to the '--moduleResolution' option must be: 'node', 'classic', 'node12', 'nodenext'. The error message tells you that bundler is not supported. tsconfig.json:21:5 - error TS5070: Option '--resolveJsonModule' cannot be specified without module resolution strategy 'node'. The third error message tells you to set your moduleResolution to node for it to work. Try changing your tsconfig.json to this: { "compilerOptions": { "moduleResolution": "node" // rest of config... } }
answers question: http://stackoverflow.com/q/78976041
type: Answer
score: 0

http://stackoverflow.com/a/79052221
type: Answer
answers question: http://stackoverflow.com/q/79052180
score: 0
upvote count: 1
downvote count: 1
has body: This specific answer is mostly focused on your question title, not related to zooming, but initially scrolling a parent element to center. Not sure if that's achievable using pure CSS (and i.e: scroll-snap), but a simple way with a line of JavaScript would be to use scrollIntoView with block and inline properties set to "center". Such will center the desired child element inside the overflow scroll parent — on page load. document.querySelector("#area").scrollIntoView({ block: 'center', inline: 'center', }); * { margin: 0; box-sizing: border-box; } #viewport { height: 100dvh; /* Any needed height */ overflow: scroll; position: relative; container-type: size; background: #232425; } #area { width: 180cqw; height: 180cqh; display: flex; } #canvas { margin: auto; width: 80cqw; aspect-ratio: 16 / 9; /* Or any user-defined ratio */ background: white; } Edit me! Then, regarding zooming from point, for a proper way to create such a UI like i.e: Photoshop or Canva does, you might be interested in: Create a zoomable area like photoshop

http://stackoverflow.com/q/78966497
type: Question
has answer: http://stackoverflow.com/a/78966712
has body: I'm trying to create a scrollable table in an HTML layout. The table should take up the remaining height of the container, and only the table should scroll vertically if the content exceeds the available space. The rest of the layout (header, sidebar) should remain fixed. Requirement: The table should automatically adjust its height to fill the remaining space inside the parent container. Only the table should scroll when the content is too large. No fixed height should be set manually. No Javascript Pure CSS, Flexbox or Tailwind What I've tried so far: I've used overflow-y: auto on the table container, but either the whole page scrolls or the table doesn't fill the available space properly. Here’s my current code: Learning Flexbox Menu 1 Menu 2 Menu 3 Title ID Name Description 1 John Doe Lorem ipsum dolor sit amet 2 Jane Smith Consectetur adipiscing elit 1 John Doe Lorem ipsum dolor sit amet 2 Jane Smith Consectetur adipiscing elit 3 Mike Jones Sed do eiusmod tempor incididunt 3 Mike Jones Sed do eiusmod tempor incididunt 3 Mike Jones Sed do eiusmod tempor incididunt 3 Mike Jones Sed do eiusmod tempor incididunt 3 Mike Jones Sed do eiusmod tempor incididunt 3 Mike Jones Sed do eiusmod tempor incididunt 3 Mike Jones Sed do eiusmod tempor incididunt 3 Mike Jones Sed do eiusmod tempor incididunt 3 Mike Jones Sed do eiusmod tempor incididunt 3 Mike Jones Sed do eiusmod tempor incididunt 3 Mike Jones Sed do eiusmod tempor incididunt 3 Mike Jones Sed do eiusmod tempor incididunt 3 Mike Jones Sed do eiusmod tempor incididunt 3 Mike Jones Sed do eiusmod tempor incididunt 3 Mike Jones Sed do eiusmod tempor incididunt 3 Mike Jones Sed do eiusmod tempor incididunt 3 Mike Jones Sed do eiusmod tempor incididunt 3 Mike Jones Sed do eiusmod tempor incididunt 3 Mike Jones Sed do eiusmod tempor incididunt 3 Mike Jones Sed do eiusmod tempor incididunt 3 Mike Jones Sed do eiusmod tempor incididunt 3 Mike Jones Sed do eiusmod tempor incididunt 3 Mike Jones Sed do eiusmod tempor incidi…
answer count: 1
tagged with: tailwind-css
score: 0
tagged with: css
tagged with: flexbox
has title: How to create a scrollable HTML table that takes up the remaining height of its container without JS
type: UnansweredQuestion

http://stackoverflow.com/comment/139393441
type: AnswerComment
has text: This looks (about to implement it) to be exactly it - thank you. Can you please explain what is happening here? TIA
type: Comment
comment on: http://stackoverflow.com/a/79055029
score: 0

http://stackoverflow.com/a/79059508
answers question: http://stackoverflow.com/q/79058917
type: Answer
score: 0
accepted answer of: http://stackoverflow.com/q/79058917
has body: The 'inserimento' card is too tall and causes vertical overflow, showing vertical scroll bar. That's why when you delete some elements in that card, the problem seem to be "solved". You can try fixing this without deleting card content by adding overflow-y: scroll; to body. This make the vertical scroll bar to always be shown, ugly, I know, but it won't push things around anymore. Benvenuto Ricerca Inserimento Postazione: Seleziona... Tutte Da: A: Cerca Postazione: Seleziona... Data: Ora: Tipo di verbale: Seleziona... Set: Seleziona... Flash: Seleziona... Protocollo: Scatti da: a: SCARICO DATI Data cartelle da: Data cartelle a: Numero Cartelle: Data Scarico: Ora Scarico: VERBALIZZANTI E NOTE Agente 1: Seleziona... Agente 2: Note: Inserisci
has comment: http://stackoverflow.com/comment/139406429
type: AcceptedAnswer

http://stackoverflow.com/comment/139153526
type: Comment
comment on: http://stackoverflow.com/q/78924192
type: QuestionComment
has text: @TemaniAfif Wait, I think it finally hit me... the normal composition is adding the luminance?! I thought layering worked like layering background gradients... ugh.
score: 1

http://stackoverflow.com/a/79033371
answers question: http://stackoverflow.com/q/79032804
has comment: http://stackoverflow.com/comment/139364321
score: 1
accepted answer of: http://stackoverflow.com/q/79032804
has comment: http://stackoverflow.com/comment/139365643
has body: No, This can not be done by DI. DI(Depedency Injection) is a run-time behavior, when Angular initiate a component after application runs, the DI system will create and injecting the depedencies for that component. CSS Preprocessor such as Sass/Scss/Less will be compiled to pure css files (Since browser only accepts css, not Sass/Scss/Less) and all variables in style files must be evaluated after build. which means you css code has no dynamic behavior at run-time. The only way to achive your requirement is to use JavaScript to operate styles and set the font path at run-time. EDIT by OP: See comments and Is it possible to dynamically change font to a custom typeface with javascript?
has comment: http://stackoverflow.com/comment/139372152
type: AcceptedAnswer
downvote count: 0
type: Answer
upvote count: 1

http://stackoverflow.com/comment/139337293
comment on: http://stackoverflow.com/q/79024254
type: QuestionComment
has text: Edit your example to use the rendered HTML, not the PHP please
type: Comment
score: 3

http://stackoverflow.com/a/79030744
type: Answer
score: 2
downvote count: 0
has comment: http://stackoverflow.com/comment/139348794
has body: You can pass the background image url to CSS using a CSS variable:
upvote count: 2
answers question: http://stackoverflow.com/q/79030620
accepted answer of: http://stackoverflow.com/q/79030620
type: AcceptedAnswer

http://stackoverflow.com/comment/139137865
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78915797
has text: This answer could be improved by removing all of the extra code and explanation that is not related to the core question, which is about the placement of the menu icon.
type: Comment

http://stackoverflow.com/comment/139401504
type: Comment
score: 0
has text: Yes, a screen recording would be nice. Still not sure what the exact problem is. I'm using Windows 11 as well, and don't see any particular problem when making the browser window wider or narrower by dragging its left or right edge with the mouse. Tried Firefox and Chrome.
comment on: http://stackoverflow.com/q/79059286
type: QuestionComment

http://stackoverflow.com/q/78955287
has answer: http://stackoverflow.com/a/78955304
accepted answer: http://stackoverflow.com/a/78955304
tagged with: responsive-design
has title: HTML body does not obey the width or height
tagged with: css
tagged with: width
type: Question
tagged with: http://stackoverflow.com/tag/html
answer count: 1
type: AnsweredQuestion
has body: I am doing my own portfolio site using HTML and CSS, so far so good. All the other pages are responsive and looking good, but there is one page that for some reason the HTML body does not obey the width of the present screen, specifically cellphones with lower width. After testing I realised that for some unknown reason from 940px and below, the width LOCKS and doesn’t change according to the screen. html { scroll-behavior: smooth; } body { display: flex; flex-direction: column; align-items: center; background-color: rgba(210, 208, 208, 0.633); overflow-x: hidden; height: auto; width: auto; } .conteudo { display: flex; flex-direction: column; align-items: center; width: 45svb; height: auto; margin: 30px 30px; } .botao_voltar { display: flex; flex-direction: inherit; position: fixed; z-index: 30; align-items: flex-start; height: 60px; justify-content: center; width: 45vmax; padding: 20px 20px; margin-top: 30px; background: rgba(172, 170, 170, 0.452); border-radius: 80px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.37); backdrop-filter: blur(17.5px); } .botao_voltar button { border: 0; border-radius: 35px; background-color: #FF5F1F; color: white; font-family: 'Poppins', sans-serif; width: 110px; height: 60px; font-weight: 700; font-size: 30px; /* Cria uma responsividade legal*/ padding: 10px 10px; transition: all .7s ease; } .botao_voltar button:hover { transform: translate3D(0,-1px,0) scale(1.20); /* move up slightly and zoom in */ box-shadow: 8px 28px 50px rgba(39,44,49,.07), 1px 6px 12px rgba(39,44,49,.04); transition: all .7s ease; /* zoom in */ cursor: pointer; } .corpo { display: flex; position: relative; flex-direction: column; width: 40vmax; padding: 50px 50px; margin-top: 120px; background: #FF5F1F; border-radius: 80px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.37); backdrop-filter: blur(17.5px); } .corpo h1 { text-align: start; font-family: monospace; font-size: 60px; font-weight: 700; color: rgb(252, 248, 248); text-wrap: balance; } .corpo img { margin-top: 50px; w…
score: 0

http://stackoverflow.com/a/79033588
upvote count: 3
score: 3
answers question: http://stackoverflow.com/q/79033436
downvote count: 0
type: Answer
has body: Below is complete solution of your problem $(document).ready(function () { $("#add-item").click(function() { var itemName = $("#item-name").val().trim(); var itemPrice = $("#item-price").val(); if (!validateInputs(itemName, itemPrice)) { return; } if (isDuplicate(itemName)) { alert("Item already exists!"); return; } var newRow = $(" "); newRow.append($(" ").text(itemName)); newRow.append($(" ").text(itemPrice)); $("#item-table tbody").append(newRow); $("#item-name").val(""); $("#item-price").val(""); }); function validateInputs(itemName, itemPrice) { var isValid = true; $(".error").removeClass("error"); if (!itemName) { $("#item-name").addClass("error"); isValid = false; } if (!itemPrice || itemPrice <= 0) { $("#item-price").addClass("error"); isValid = false; } return isValid; } function isDuplicate(itemName) { let exists = false; $("#item-table tbody tr").each(function () { if ($(this).find("td").first().text() === itemName) { exists = true; } }); return exists; } $("#item-name, #item-price").on("input", function () { var itemName = $("#item-name").val().trim(); var itemPrice = $("#item-price").val(); if (itemName && itemPrice > 0) { $("#item-table tbody tr").each(function () { if ($(this).find("td").first().text() === itemName) { $(this).find("td").last().text(itemPrice); } }); } }); }); input.error { border: 2px solid red; } Add Item Item Price

http://stackoverflow.com/comment/139416097
comment on: http://stackoverflow.com/a/79065783
type: AnswerComment
type: Comment
score: 0
has text: This definitely is the solution I was looking for. Thx! However I don't really understand your explanation as for why the layout is broken without the position absolute/relative stuff. Whats the CSS mechanism that causes an additional layer of sizing to be created? Why is this layer not being created, if I switch out the SVG for a DIV element? If all elements use height: 100%, how does this sizing layer cause elements to be bigger than 100%? I dont expect you to answer all these questions, but perhaps you could point me to some reading material, which can shine some light into this.

mix-blend-mode
tags question: http://stackoverflow.com/q/79048038
tag name: mix-blend-mode
type: Tag
tags question: http://stackoverflow.com/q/79044341
tags question: http://stackoverflow.com/q/78997146
tags question: http://stackoverflow.com/q/79044377
tags question: http://stackoverflow.com/q/79177406
tags question: http://stackoverflow.com/q/79174022
tags question: http://stackoverflow.com/q/79124924
tags question: http://stackoverflow.com/q/79082974
tags question: http://stackoverflow.com/q/79263411
tags question: http://stackoverflow.com/q/79297718
tags question: http://stackoverflow.com/q/79536138

http://stackoverflow.com/comment/139322183
score: 2
type: Comment
comment on: http://stackoverflow.com/q/79012295
type: QuestionComment
has text: One thing I'd strongly recommend avoiding is setting CSS values directly in JavaScript, and whenever possible, add/remove/toggle CSS classes (or other attributes) instead. This can make debugging a lot easier.

http://stackoverflow.com/q/79017553
has body: I have 3 card in a row. Each card has 2 sections and contains dynamic texts. It looks like this: .card { display: flex: flex-direction:column; flex: 1 } .card__wrapper { display: flex: flex-direction:column; } .bundle-top { flex: 1; } .data { flex: 1; } Lorem ipsum Lorem ipsum 299 Start Trial Lorem ipsum Lorem ipsum I would like to have the same height of all cards (as the highest) but I would also like .bundle-top to have the same height on all cards, it sholud take the height of the highest as well. I would like this for .data element too. I would like it to look like this: I use flex, and have added flex:1 to the elements that I would like to have the same height but it dosnt work. The only thing thats working is that all cards have the same height. This is the css that I have so far: Actually I have tried a lot of different things but I dont have that css any more
has comment: http://stackoverflow.com/comment/139325384
type: Question
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139325529
has comment: http://stackoverflow.com/comment/139325143
linked to: http://stackoverflow.com/q/56711501
score: 0
has title: 2 flex containers inside a flexbox, equal height issue
answer count: 0
tagged with: css
duplicate of: http://stackoverflow.com/q/56711501
has comment: http://stackoverflow.com/comment/139325116
tagged with: flexbox
has comment: http://stackoverflow.com/comment/139325512
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139325453

aspect-ratio
tag name: aspect-ratio
tags question: http://stackoverflow.com/q/78929318
tags question: http://stackoverflow.com/q/78938496
type: Tag
tags question: http://stackoverflow.com/q/79239510
tags question: http://stackoverflow.com/q/79105441
tags question: http://stackoverflow.com/q/79256557
tags question: http://stackoverflow.com/q/79271888
tags question: http://stackoverflow.com/q/79341243
tags question: http://stackoverflow.com/q/79326775
tags question: http://stackoverflow.com/q/79381307
tags question: http://stackoverflow.com/q/79359268
tags question: http://stackoverflow.com/q/79257517
tags question: http://stackoverflow.com/q/79525521

autolink
tag name: autolink
type: Tag
tags question: http://stackoverflow.com/q/79002715

http://stackoverflow.com/comment/139348180
score: 1
has text: Can you put a [minimal reproducible code snippet](https://stackoverflow.com/help/minimal-reproducible-example) into your question. A link to your github repo wont help much. Nobody wants to crawl through tons of code just to find the error.
type: Comment
comment on: http://stackoverflow.com/q/79030341
type: QuestionComment

http://stackoverflow.com/q/78938572
has body: When I drag-drop an image to Chrome or Firefox, the browser nicely sizes the image (if needed) and places it on the center of the screen. E.g. https://fastly.picsum.photos/id/382/200/300.jpg?hmac=ql7Jj1WJu3zhhAn2p18Oxdn-JE1qZBR-lDF-MOVXCUA (link of a random image from picsum.photos - this simulates the drag drop to the browser window, as the browser applies the styles etc.) A screenshot of the Chrome Devtools below (notice the top and bottom margins on the image) However, when I try to use the exact same layout styles on my own html page to show the very same image, the image is not getting vertically center aligned. (View on Full page after running code snippet) E.g. &lt;html style="height: 100%;"&gt; &lt;head&gt; &lt;meta name="viewport" content="width=device-width, minimum-scale=0.1"&gt; &lt;style&gt; body { margin: 0px; height: 100%; /* background-color: rgb(14,14,14); */ } img { display: block; margin: auto; user-select: none; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;img src="https://fastly.picsum.photos/id/382/200/300.jpg?hmac=ql7Jj1WJu3zhhAn2p18Oxdn-JE1qZBR-lDF-MOVXCUA" alt=""&gt; &lt;/body&gt; &lt;/html&gt; (I purposely left the background white to distinguish my page vs browser page) I checked and re-checked that I had all the appropriate layout styles, but still not able to get the image aligned vertically. Any pointers? Thanks!
tagged with: css
has answer: http://stackoverflow.com/a/78938706
type: Question
answer count: 1
linked to: http://stackoverflow.com/q/2005954
type: AnsweredQuestion
score: 0
accepted answer: http://stackoverflow.com/a/78938706
tagged with: http://stackoverflow.com/tag/html
has title: Simulating browser default of image positioning at the center
tagged with: alignment

http://stackoverflow.com/a/78916977
score: 0
has comment: http://stackoverflow.com/comment/139141022
answers question: http://stackoverflow.com/q/78916890
has body: Add height: 0; or min-height: 0; to main, and it works. As for the reason why height: 100% doesn't work, you can check this Github issue. (Code was updated for sticky footer) * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100vh; } body { display: flex; flex-direction: column; } header { flex: 0 0 auto; background-color: aqua; } main { flex: 1 0 auto; /* Enable flex grow */ height: 0; background-color: blanchedalmond; } footer { flex: 0 0 auto; background-color: brown; } div#this_should_fill_main { width: 100%; height: 100%; /*This doesn't work！*/ background-color: cornflowerblue; overflow: scroll; } Document This is a header This is main content This is a footer
has comment: http://stackoverflow.com/comment/139140802
type: Answer

http://stackoverflow.com/q/79067649
tagged with: css
has title: Issues with default properties when using custom properties Tailwind
type: UnansweredQuestion
tagged with: tailwind-ui
type: Question
answer count: 1
tagged with: tailwind-css
tagged with: tailwind-in-js
has answer: http://stackoverflow.com/a/79068882
has comment: http://stackoverflow.com/comment/140278773
score: 0
tagged with: reactjs
has body: I am using Tailwind on the project and I have encountered a problem when writing custom properties. The problem is when using rounded-lg, rounded-xl, rounded-2xl and ext. If I use the basic configuration there are no problems. If I add at least one configuration to borderRadius. I will get an error. Base config /** @type {import('tailwindcss').Config} */ export default { content: [ "./index.html", "./src/**/*.{js,ts,jsx,tsx}", ], theme: {}, plugins: [], } Custom config /** @type {import('tailwindcss').Config} */ export default { content: [ "./index.html", "./src/**/*.{js,ts,jsx,tsx}", ], theme: { borderRadius: { 'sm-6-vw': '7.5vw', }, }, plugins: [], } Error Using in App.css @tailwind base; @tailwind components; @tailwind utilities; @layer utilities { .gor-scroll { @apply rounded-2xl } } import main file import './App.css' If you don't use in @apply then the main error will go away. And if you then write rounded-2xl in the component itself then the class will not be applied.

http://stackoverflow.com/comment/139229676
type: QuestionComment
score: 1
type: Comment
has text: It would be helpful if you could make your code into a runnable snippet (use <> in the editor) and make sure there's an image we can use. I am a bit confused about why you want the image to scale differently from everything else - what effect are you looking for (in the text you say 'expand (along with all elements it contains)' but the img seems to be different.
comment on: http://stackoverflow.com/q/78965578

http://stackoverflow.com/comment/139401062
has text: the first four images are in item div, and two of them are red in sandbox, the vertically arranged gigantic images are outside div and they get no styling,so they are big. I cant make the html code again, if you face problems,fork my codesandbox,change html,and share link
comment on: http://stackoverflow.com/a/79058981
type: Comment
score: 0
type: AnswerComment

http://stackoverflow.com/comment/139315331
type: Comment
score: 0
type: AnswerComment
has text: You may accept the answer if it solved your problem, so others would not spend time to work on it. Best.
comment on: http://stackoverflow.com/a/79011686

http://stackoverflow.com/a/79062162
has comment: http://stackoverflow.com/comment/139422826
has comment: http://stackoverflow.com/comment/139417770
score: 0
type: AcceptedAnswer
type: Answer
has body: Ionic provides css utilities. https://ionicframework.com/docs/layout/css-utilities#flex-properties. try using : ion-justify-content-center or ion-align-items-center
has comment: http://stackoverflow.com/comment/139425115
answers question: http://stackoverflow.com/q/79035255
accepted answer of: http://stackoverflow.com/q/79035255

http://stackoverflow.com/a/78967999
score: 1
answers question: http://stackoverflow.com/q/78967875
has comment: http://stackoverflow.com/comment/139241281
has comment: http://stackoverflow.com/comment/139238790
type: Answer
has body: You need to remove e.preventDefault() from handleForm function to change background color on first click. function Task() { const [formData, setformData] = React.useState({ uName: "", uGender: "", uMedals: 0, }); const handleForm = (e) => { let { name, value } = e.target; if (name === "uMedals") { value = parseInt(value); if (value <= 0) value = 0; if (value > 20) value = formData.uMedals; } setformData((formData) => ({ ...formData, [name]: value, })); }; return ( Name {/* Name input */} Gender Female Male Add ); } ReactDOM.render(<Task />, document.getElementById("root")); .custom-input input[type=radio] { display: none; } .custom-input label { display: block; padding: 6px 8px; color: #fff; font-weight: bold; text-align: center; transition: all 0.4s ease; cursor: pointer; border-radius: 4px; background-color: #717762; } .custom-input input[type='radio']:checked + label { background-color: #f5f5f5; color: #000; }
downvote count: 0
has comment: http://stackoverflow.com/comment/139239237
upvote count: 1

http://stackoverflow.com/comment/139147668
has text: So, has the current question been solved...? It's the first time I've experienced a user who registers a single question by dividing it into several. @braxton
type: AnswerComment
comment on: http://stackoverflow.com/a/78920877
type: Comment
score: 0

http://stackoverflow.com/q/78940428
has body: I have a problem with &lt;img&gt;s inside flexbox in Safari browser (only). I want to create a horizontal list of same height but various width images. I can't set exact height for each image as it comes from proportion to the page width (33.333vw) for whole slider. So I use flexbox and set height: 100% for img elemeents. Here is the fiddle: https://jsfiddle.net/norin89/h9q8dtbe/ In Chrome it looks fine: But in Safari images itself seems to have correct size and proportions but wrapper element (li) is too wide - it's stretched to original width of the image (600px) rather than to the actual image size. I've beed struggling with the styles but couldn't find a solution. It looks like a Safari bug for me. Any ideas for the solution to force Safari behave like other browsers? Update: One solutions could be setting height directly on img - https://jsfiddle.net/norin89/h9q8dtbe/8/. It works in this simplify example but in real project whole div has to be positioned absolutely so it would require setting height on img and div itself. I'm looking for a solution where I can set the height only once and adjust img height automatically with height: 100%.
type: UnansweredQuestion
type: Question
tagged with: css
tagged with: flexbox
score: 0
tagged with: safari
answer count: 1
has answer: http://stackoverflow.com/a/78943063
has title: ` `s in flexbox loses proportions in Safari

http://stackoverflow.com/a/78914075
downvote count: 0
type: Answer
accepted answer of: http://stackoverflow.com/q/78913676
has body: You can play around with order: Third Second First
upvote count: 1
answers question: http://stackoverflow.com/q/78913676
score: 1
type: AcceptedAnswer

http://stackoverflow.com/comment/139197911
comment on: http://stackoverflow.com/q/78948544
type: QuestionComment
score: 2
type: Comment
has text: For starters, you did not eliminate the 8px default margin body gets from the user agent stylesheet. If it still doesn't look like you want after that - then maybe you need to modify your gradient.

selector
tags question: http://stackoverflow.com/q/78913738
tags question: http://stackoverflow.com/q/78962819
type: Tag
tag name: selector
tags question: http://stackoverflow.com/q/79278544

http://stackoverflow.com/q/78980184
accepted answer: http://stackoverflow.com/a/78980538
has comment: http://stackoverflow.com/comment/139257091
type: Question
has comment: http://stackoverflow.com/comment/139256668
answer count: 1
has title: React MUI Avatar div height defaults to static value (40px)
type: AnsweredQuestion
has answer: http://stackoverflow.com/a/78980538
score: 0
tagged with: reactjs
has body: I have a MUI Avatar element on my page: <Avatar sx={{ width: 180, height: "auto", maxHeight: 180, margin: 2 }} variant="square" alt={""} src={ global.config.baseUrl + "/image/logo" + this.state.user.userId + ".jpg" } /> this generates the following DOM: with the following css class: .css-eqjmj4 { position: relative; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; flex-shrink: 0; height: 40px; font-family: Roboto, Helvetica, Arial, sans-serif; font-size: 1.25rem; line-height: 1; border-radius: 0px; overflow: hidden; user-select: none; width: 180px; max-height: 180px; margin: 16px; } I want the width set to exactly 180px, with the height to scale proportionately (up to a maxHeight of 180px) For some reason the css class hard-codes the height to height: 40px; How can I override that?
tagged with: material-ui
tagged with: css

count
tags question: http://stackoverflow.com/q/79018085
type: Tag
tag name: count

http://stackoverflow.com/comment/139202109
comment on: http://stackoverflow.com/a/78950845
type: AnswerComment
has text: Yeah, I was thinking the first date you choose is start, second is end, and third, if it is after start, becomes new end date, otherwise clears the calendars and selects the last clicked date as start?
type: Comment
score: 0

http://stackoverflow.com/q/79051834
has answer: http://stackoverflow.com/a/79051880
tagged with: css
has body: I'm trying to make a simple responsive CSS design with 3 columns. When the screen resolution is less then "X" it has to add a line break and the first column (menu) has to became a row. For now what I made it's (snippet with code inside): * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } .A { background-color: #333333; } .B { background-color: #777777; } .C { background-color: #999999; } :root { --A: 214px; --C: 214px; --B: calc(100vw - var(--A) - var(--C)); } .flex-row { width: 100%; display: flex; flex-direction: row; } .line_break_for_mobile { flex-basis: 100%; height: 2px; background-color: red; } .A { display: block; width: 100%; } @media only screen and (min-width: 600px) { .line_break_for_mobile { display: none !important; } .A { display: flex; flex-direction: column; width: var(--A); flex: 0 0 var(--A); } .C { display: flex; flex-direction: column; width: var(--C); flex: 0 0 var(--C); } .B { display: flex; flex-direction: column; width: var(--B); } } 1 2 3 Something 1 2 3 It works good for desktop screen, but I'm not very good with flex divs and the line break does not break so well (it has to take all the screen width). It has to send div B and C to the next line. What I'm trying to write it's that the layout should become like the one in this photo for small screen resolution: Layout for mobile So, how to do it?
downvote count: 1
favorite count: 0
accepted answer: http://stackoverflow.com/a/79051880
type: Question
tagged with: http://stackoverflow.com/tag/html
has title: How to make a responsive design 3 column with the first colum that becomes row
answer count: 1
type: AnsweredQuestion
score: 0
upvote count: 1

http://stackoverflow.com/q/79012520
has comment: http://stackoverflow.com/comment/139315799
type: UnansweredQuestion
favorite count: 0
type: Question
score: 2
downvote count: 0
answer count: 0
tagged with: css
has body: I have been scouring the internet to find ways to implement this animation feature on my portfolio website. The animation-timeline works as I intended in development, but when I run deploy (using Github Pages) it does not work on my production site. Also like to note that the Chrome devtools shows a slash through the animation-timeline attribute. Here is the code I am using: /* ------ SCROLL ANIMATIONS ------- */ .outer-shroud { animation: autoShowAnimation both; animation-timeline: view(100% 5%); } @keyframes autoShowAnimation { from { opacity: 0; transform: translateY(100px) scale(0.3); box-shadow: 0 0 1000px rgba(160, 158, 255, 0.944); } to { opacity: 1; transform: translateY(0) scale(1); } } Riddym July '24 — A familiar rhythm game, reimagined.
upvote count: 2
has title: Why would animation-timeline: view() not be working in production?

http://stackoverflow.com/q/79006304
favorite count: 0
has title: how to make the text in the items to float above the image in SwipeJS?
accepted answer: http://stackoverflow.com/a/79006366
type: Question
answer count: 1
tagged with: http://stackoverflow.com/tag/html
downvote count: 0
type: AnsweredQuestion
tagged with: javascript
upvote count: 1
has body: I'm trying to duplicate this effect from the SwipeJS demo page, where the text floats on the bottom part, but not outside of, the image in each slide. I've tried using slide-content like I see in the devtools and I also tried using title and subtitle classes like it says in the docs (in the parallax part). but they all fails, as in showing the texts below the image, instead of over the image. what am I doing wrong? any help is appreciated. this is my code: var swiper = new Swiper(".mySwiper", { effect: "coverflow", grabCursor: true, centeredSlides: true, slidesPerView: "auto", coverflowEffect: { rotate: 50, stretch: 0, depth: 100, modifier: 1, slideShadows: true, }, pagination: { el: ".swiper-pagination", }, }); html, body { position: relative; height: 100%; } body { background: #eee; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; color: #000; margin: 0; padding: 0; } .swiper { width: 100%; padding-top: 50px; padding-bottom: 50px; } .swiper-slide { background-position: center; background-size: cover; width: 300px; height: 300px; } .swiper-slide img { display: block; width: 100%; } .swiper-slide .card-img-text { translatey: (-50%); mix-blend-mode: exclusion; } .swiper-slide .card-img-text * { } Swiper demo Slide 1 Title Slide 1 Description
tagged with: carousel
score: 1
has answer: http://stackoverflow.com/a/79006366
tagged with: css
tagged with: swipe

http://stackoverflow.com/comment/139181507
type: QuestionComment
comment on: http://stackoverflow.com/q/78939256
type: Comment
score: 0
has text: @makkusu Could you please post code which does what you are suggesting

http://stackoverflow.com/comment/139200214
type: Comment
score: 0
type: QuestionComment
has text: The characters are there when you set overflow visible only they are white so not seen against the 'normal' white background. Try setting their color to black and you will see them.
comment on: http://stackoverflow.com/q/78949570

http://stackoverflow.com/q/78970177
has comment: http://stackoverflow.com/comment/139251978
has comment: http://stackoverflow.com/comment/139252515
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139237990
type: Question
has comment: http://stackoverflow.com/comment/139251449
tagged with: whitespace
score: 0
linked to: http://stackoverflow.com/q/37406353
tagged with: word-wrap
has title: CSS Wrapping Issue: Prevent Words from Expanding to Fill Row on Wrap
answer count: 0
has comment: http://stackoverflow.com/comment/139251965
tagged with: css
tagged with: flexbox
has body: I'm struggling with a Flexbox layout issue where I want a specific wrapping behavior for words inside a classed as keep-together. The requirement is for the words to stay together on the same line as much as possible, wrapping to a new line only when the container is too narrow to fit them side by side. Here is the CSS I'm currently using for the .keep-together: .keep-together { display: inline-flex; flex-flow: row wrap; background-color: #ffd700; /* visual aid to see the span */ overflow-wrap: anywhere; } Responsive Text Wrapping with Container Queries Watch how word1 word2 word3 wrap based on container size. Desired Behavior: The words within the keep-together should stay on the same line under normal conditions, even when that means moving all words together to a new line. Only if the container's width is so small that all words cannot fit on a single line at all, should they break into separate lines. Each word should only take up as much width as necessary when wrapped onto separate lines, and their container should not expand to fill the entire avaialble space. Current Issue: Currently, when the container's width forces the words to wrap, the container stretches to occupy the full width of the available space, which is not desired. I need the words to wrap together to a new line however follow up content should also appear on the same line as the wrapped word and not on a separate line. Attempts to Resolve: I have also tried using display: inline-block. Both attempts, however, have led to the words expanding to fill the full container width upon wrapping, which is not the desired outcome. I am looking for a pure CSS solution that can facilitate this nuanced wrapping behavior. Does anyone have suggestions or insights on how to adjust CSS Flexbox or other properties to achieve this behavior? Thank you in advance for your help and insights!
type: UnansweredQuestion

http://stackoverflow.com/a/78979888
upvote count: 1
has body: Examples of styling checkboxes are in modena.css. You need to have the CSS style rule apply to the check box, not the cell, for non-inherited CSS styles like -fx-text-fill, e.g. .logfile-created &gt; .check-box { -fx-text-fill: yellow; } Only the CSS file should need to change, I think your Java code should be OK. The asker confirmed in comments, that this approach worked.
score: 1
answers question: http://stackoverflow.com/q/78975917
type: Answer
downvote count: 0

http://stackoverflow.com/comment/139389384
type: Comment
comment on: http://stackoverflow.com/a/79047783
has text: Thank you so much! This makes a lot of sense and I'll definitely continue using this method. <3
score: 0
type: AnswerComment

http://stackoverflow.com/comment/139364099
type: QuestionComment
comment on: http://stackoverflow.com/q/79038945
score: 1
type: Comment
has text: include some codes!

http://stackoverflow.com/comment/139427461
has text: Can you provide an website example or video
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/79063036

http://stackoverflow.com/comment/139203197
score: 2
type: Comment
type: QuestionComment
comment on: http://stackoverflow.com/q/78951420
has text: Please [edit] your question to include a [mre] so that readers can run your code to answer your question.

http://stackoverflow.com/comment/139331931
comment on: http://stackoverflow.com/q/79021330
type: Comment
type: QuestionComment
has text: @KIKOSoftware I don't think it has anything do to with it. I think it has to do with: `iframe { display: none; }`
score: 1

wicket
tag name: wicket
type: Tag
tags question: http://stackoverflow.com/q/78979126
tags question: http://stackoverflow.com/q/79257818

http://stackoverflow.com/q/78995721
answer count: 2
upvote count: 1
has body: I'm trying to resize an image within a circle, but I can only change the size of the image and the circle together. I'm assuming this is because of border-radius, but I'm not sure else to do it. I'm trying to turn this: Into this: .Nova { width: 400px; height: 400px; border-radius: 50%; overflow: hidden; object-position: 0px 0px; } &lt;img src="https://i.sstatic.net/xFBKyZNi.png" class="Nova" /&gt;
tagged with: css
tagged with: object-fit
has comment: http://stackoverflow.com/comment/139285306
downvote count: 1
tagged with: image
has comment: http://stackoverflow.com/comment/139285174
has answer: http://stackoverflow.com/a/79040323
has title: Is there a way to resize an image within a circle, without changing the size of the circle?
type: UnansweredQuestion
favorite count: 0
type: Question
tagged with: http://stackoverflow.com/tag/html
has answer: http://stackoverflow.com/a/79039970
has comment: http://stackoverflow.com/comment/139285491
score: 0

http://stackoverflow.com/comment/139235838
has text: Works like a charm! Thanks!
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78968701
type: Comment

http://stackoverflow.com/comment/139135157
score: 0
has text: You should add these details *inside* your answer for future readers
type: AnswerComment
comment on: http://stackoverflow.com/a/78914370
type: Comment

http://stackoverflow.com/a/78912348
upvote count: 0
score: -2
downvote count: 2
has comment: http://stackoverflow.com/comment/139131644
answers question: http://stackoverflow.com/q/78912066
type: Answer
has body: openMenu.addEventListener("click", function () { navbar.classList.add("open"); openMenu.style.display = "none"; closeMenu.style.display = "inline-block"; }) closeMenu.addEventListener("click", function () { navbar.classList.remove("open"); openMenu.style.display = "inline-block"; closeMenu.style.display = "none"; })

http://stackoverflow.com/q/78908209
duplicate of: http://stackoverflow.com/q/18749276
upvote count: 0
score: -1
tagged with: css
tagged with: css-selectors
has answer: http://stackoverflow.com/a/78908435
downvote count: 1
duplicate of: http://stackoverflow.com/q/4502633
type: UnansweredQuestion
has title: Making a textarea visible when a is hovered
tagged with: textarea
favorite count: 0
tagged with: pseudo-element
has body: I want the to appear when I hover over Would you like to give feedback? . In other words, I want the and How can we imporve the page? to have their display set to 'block' when I hover over that p element. Heres what I tried: Sign up Sign up =) Would you like to give feedback? How can we imporve the page? textarea, #Feedback p{ display: none; } #Feedback p:nth-child(1) { /*What this does is it looks in the div with the id Feedback and its p elements and selects the first child i.e. the p that comes first*/ display: block; margin: 15px; } #Feedback p:nth-child(1):hover{ display: block; }
type: Question
linked to: http://stackoverflow.com/q/4502633
answer count: 1
tagged with: http://stackoverflow.com/tag/html

http://stackoverflow.com/comment/139136944
has text: You added some CSS selectors - please add some examples of the related HTML. And in particular indicate how the relevant li is chosen - does it have a specific class for example?
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78913738
type: QuestionComment

http://stackoverflow.com/q/78932524
has answer: http://stackoverflow.com/a/78932544
type: UnansweredQuestion
score: 1
favorite count: 0
has answer: http://stackoverflow.com/a/78932578
tagged with: http://stackoverflow.com/tag/html
type: Question
downvote count: 0
has title: css property - initial-value overwrites setting from outside
has body: I'm working on a angular-project. I have the following component class: export class ReservationTableComponent implements OnInit { @Input({ required: true }) table!: Table; @Input() set colMinWidth(value: string) { this.renderer.setStyle(this.el.nativeElement, "--grid-column-min-width", value); } @Input() set colMaxWidth(value: string) { this.renderer.setStyle(this.el.nativeElement, "--grid-column-max-width", value); } @Input() set rowGap(value: string) { this.renderer.setStyle(this.el.nativeElement, "--grid-row-gap", value); } @Input() set colGap(value: string) { this.renderer.setStyle(this.el.nativeElement, "--grid-col-gap", value); } @Input() selectedCells: Cell[] = []; @Output() onSingleCellClicked: EventEmitter<Cell> = new EventEmitter(); constructor(private el: ElementRef, private renderer: Renderer2) { } ngOnInit(): void { this.renderer.setStyle(this.el.nativeElement, "--grid-flow", this.table.direction === LineDirection.ROW ? "row" : "column"); this.renderer.setStyle(this.el.nativeElement, "--grid-columns", this.table.longestCol); this.renderer.setStyle(this.el.nativeElement, "--grid-rows", this.table.longestRow); } And the css for the component: @property --grid-flow { syntax: "row | column"; inherits: false; initial-value: column; } @property --grid-columns { syntax: "<integer>"; inherits: false; } @property --grid-rows { syntax: "<integer>"; inherits: false; } @property --grid-column-max-width { syntax: "<length> | max-content | min-content | fit-content(<length-percentage>)"; inherits: false; } @property --grid-row-gap { syntax: "<length>"; inherits: false; } @property --grid-col-gap { syntax: "<length>"; inherits: false; } .table-container { display: grid; grid-template-columns: repeat( var(--grid-columns, 1), minmax(min-content, var(--grid-column-max-width, max-content)) ); grid-template-rows: repeat(var(--grid-rows), auto); grid-auto-flow: var(--grid-flow, column); box-sizing: border-box; width: 100%; row-gap: var(--grid-row-gap, 0px); column-gap: var…
answer count: 2
upvote count: 1
tagged with: sass
tagged with: css
tagged with: angular

http://stackoverflow.com/a/79064223
has comment: http://stackoverflow.com/comment/139520220
answers question: http://stackoverflow.com/q/79064146
has body: you can use encodeURIComponent()... the full process: (remove the comments ; <!--!Font Awesome ..... ) const svgTxt = ` <path d="M575.8 255.5c0 18-15 32.1-32 32.1l-32 0 .7 160.2c0 2.7-.2 5.4-.5 8.1l0 16.2c0 22.1-17.9 40-40 40l-16 0c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1L416 512l-24 0c-22.1 0-40-17.9-40-40l0-24 0-64c0-17.7-14.3-32-32-32l-64 0c-17.7 0-32 14.3-32 32l0 64 0 24c0 22.1-17.9 40-40 40l-24 0-31.9 0c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2l-16 0c-22.1 0-40-17.9-40-40l0-112c0-.9 0-1.9 .1-2.8l0-69.7-32 0c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z"/> ` document.querySelector('pre') .textContent = encodeURIComponent(svgTxt); svg { width : 5em; fill: orange; } div { width : 5em; height : 5em; background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20576%20512%22%3E%3Cpath%20d%3D%22M575.8%20255.5c0%2018-15%2032.1-32%2032.1l-32%200%20.7%20160.2c0%202.7-.2%205.4-.5%208.1l0%2016.2c0%2022.1-17.9%2040-40%2040l-16%200c-1.1%200-2.2%200-3.3-.1c-1.4%20.1-2.8%20.1-4.2%20.1L416%20512l-24%200c-22.1%200-40-17.9-40-40l0-24%200-64c0-17.7-14.3-32-32-32l-64%200c-17.7%200-32%2014.3-32%2032l0%2064%200%2024c0%2022.1-17.9%2040-40%2040l-24%200-31.9%200c-1.5%200-3-.1-4.5-.2c-1.2%20.1-2.4%20.2-3.6%20.2l-16%200c-22.1%200-40-17.9-40-40l0-112c0-.9%200-1.9%20.1-2.8l0-69.7-32%200c-18%200-32-14-32-32.1c0-9%203-17%2010-24L266.4%208c7-7%2015-8%2022-8s15%202%2021%207L564.8%20231.5c8%207%2012%2015%2011%2024z%22%2F%3E%3C%2Fsvg%3E'); background-repeat: no-repeat; } initial svg : <path d="M575.8 255.5c0 18-15 32.1-32 32.1l-32 0 .7 160.2 c0 2.7-.2 5.4-.5 8.1l0 16.2c0 22.1-17.9 40-40 40l-16 0 c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1L416 512l-24 0 c-22.1 0-40-17.9-40-40l0-24 0-64c0-17.7-14.3-32-32-32l-64 0 c-17.7 0-32 14.3-32 32l0 64 0 24c0 22.1-17.9 40-40 40l-24 0-31.9 0 c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2l-16 0c-22.1 0-40-17.9-40-40 l0-112c0-.9 0-1.9 .1-2.8l0-6…
score: 1
has comment: http://stackoverflow.com/comment/139524271
downvote count: 0
type: Answer
upvote count: 1

http://stackoverflow.com/q/78994871
type: Question
answer count: 1
has title: Using CSS selectors, is it possible to find an element after another element that is not a sibling?
type: AnsweredQuestion
score: 0
accepted answer: http://stackoverflow.com/a/78994907
upvote count: 1
has body: Suppose you have an element after another element, but it is not an adjacent sibling. For example: Section 1 Section 2 Is there a way in CSS to select the h3 after the element with id A?
linked to: http://stackoverflow.com/q/1014861
tagged with: css
downvote count: 1
duplicate of: http://stackoverflow.com/q/1014861
has answer: http://stackoverflow.com/a/78994907
favorite count: 0

http://stackoverflow.com/a/78957494
upvote count: 1
score: 1
has body: Since you were looking to style exactly the second column of the given table, I think it would be more readable if you defined such feature in stylings instead of using the convoluted javascript code you engaged in your own demo. Here I just switched to border-collapse: separate to keep showing the cells right and left borders as styled and used an explicit css rule so that the whole table when having the class thick-border will be styled as that. That way you just need to toggle the class on the table alone instead of each single cell of the target column. function toggleBorders() { document.getElementById('table').classList.toggle('thick-border'); } table { border-collapse: separate; border-spacing: 0; } th, td { border-width: 0 3px; border-style: solid; border-color: transparent; } table.thick-border tbody tr td:nth-child(2){ border-color: coral; } h1 h2 h3 h4 11 12 13 14 21 22 23 24 Click Me!
type: Answer
answers question: http://stackoverflow.com/q/78957424
downvote count: 0

http://stackoverflow.com/comment/139135541
has text: Apply the selector I suggested, and add `div.red::after { content: ""; position: absolute; inset: 50% 0 0 50%; background: rgba(255, 0, 0, .5); }` - that should do the trick. (background-color only added to easily see where the pseudo element is positioned, you can remove that, once you figured out the exact correct positioning.)
type: Comment
type: QuestionComment
score: 1
comment on: http://stackoverflow.com/q/78914275

http://stackoverflow.com/q/78987305
downvote count: 1
tagged with: darkmode
has comment: http://stackoverflow.com/comment/139269325
has comment: http://stackoverflow.com/comment/139269317
answer count: 4
type: UnansweredQuestion
has answer: http://stackoverflow.com/a/79009265
has title: JS function for Darkmode / Lightmode with value checking via Local Storage gives me a quick color change when going on subpages
upvote count: 1
tagged with: lightmode
favorite count: 0
has body: I would like to add a button for switching to darkmode and lightmode on my website. I use var()'s in my css to control the color of my elements. This is my code: function loadMode() { const mode = localStorage.getItem('mode'); if (mode === 'dark') { setDarkMode(); } } // set darkmode function setDarkMode() { document.documentElement.style.setProperty('--textColor', '#eaeaea'); document.documentElement.style.setProperty('--backgroundColor', '#333333'); document.getElementById('toggleMode').textContent = 'Wechsel zu Lightmode'; localStorage.setItem('mode', 'dark'); } // set lightmode function setLightMode() { document.documentElement.style.setProperty('--textColor', '#313131'); document.documentElement.style.setProperty('--backgroundColor', '#e0e0e0'); document.getElementById('toggleMode').textContent = 'Wechsel zu Darkmode'; localStorage.setItem('mode', 'light'); } // toggle the color mode function toggleMode() { const isDarkMode = localStorage.getItem('mode') === 'dark'; if (isDarkMode) { setLightMode(); } else { setDarkMode(); } } // event listener for button document.getElementById('toggleMode').addEventListener('click', toggleMode); // load mode on site load loadMode(); This script is loaded on the end of the webpage (this is the problem, I know, but how can I fix it?) Now I have the problem that every time I go to a subpage the website is being loaded with the Light Colors and then switched to the dark colors which results in a quick, but very annoying color flicker effect. How can I prevent this form happening? My website is build with php so sessions could work? Or cookies? Thank you for helping! I tried to put the function in the header but then the body element cant receive the color change because I think its not loaded yes(?)
has answer: http://stackoverflow.com/a/79009174
type: Question
has comment: http://stackoverflow.com/comment/139269434
has answer: http://stackoverflow.com/a/78987389
score: 0
tagged with: javascript
has comment: http://stackoverflow.com/comment/139269321
tagged with: css
has answer: http://stackoverflow.com/a/78988203

http://stackoverflow.com/comment/139410190
type: QuestionComment
comment on: http://stackoverflow.com/q/79064015
has text: For example, the header is in bold. On the other side, there are graphs that display the percentages, and it would be great to have a background as well. is it possible?
type: Comment
score: 0

http://stackoverflow.com/comment/139420264
has text: Unfortunately is the height of `nav` unknown at front.
type: Comment
score: 0
comment on: http://stackoverflow.com/a/79067779
type: AnswerComment

http://stackoverflow.com/comment/139219737
type: QuestionComment
has text: The ```equiv-submenu``` is embedded into other divs of the page, but I set the position to fixed. Could that be a possible reason for the script to not execute?
comment on: http://stackoverflow.com/q/78960206
type: Comment
score: 0

http://stackoverflow.com/q/78937465
has body: I have set the mouse movement monitoring event, which will change the 'transform origin'. I will use 'transform: scale' to control the zoom of the image. When 'transform: scale (1,1)' is like this, there is no problem, but when 'transform: scale (1.5,1.5)' or 'transform: scale (0.5, 0.5)' is like this, moving the mouse to change the 'transform origin' will cause the image to move along with it var multiple = 1 var max_multiple = 10 var min_multiple = 0.5 function f1() { const c = document.getElementById('img') c.onmousewheel = function (event) { event.preventDefault() if (event.wheelDelta > 0) { if (multiple < max_multiple) { multiple += 0.5 } c.style.transform = 'scale(' + multiple + ',' + multiple + ')' } else { if (multiple > min_multiple) { multiple -= 0.5 } c.style.transform = 'scale(' + multiple + ',' + multiple + ')' } } } function f2() { const c = document.getElementById('img') c.onmousemove = function (event) { c.style.transformOrigin = event.offsetX + 'px' + ' ' + event.offsetY + 'px' } } f1() f2() These are my code snippets enter image description here This is the effect of scaling to 'transform: scale (1,1)' enter image description here This is the effect of scaling to 'transform: scale (1.5,1.5)' You can see that my image has shifted in position due to the "transform origin". I know it's because "transform: scale" changed the scaling factor, but I want to use "transform: scale" to change the scaling factor, and I hope this bug won't happen again May I ask if everyone has a good solution
answer count: 0
tagged with: css
has title: Bug of scaling images after changing the transform origin property in CSS
type: UnansweredQuestion
type: Question
tagged with: http://stackoverflow.com/tag/html
score: 0
tagged with: javascript

http://stackoverflow.com/comment/139260262
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78982161
has text: do not use flex or grid on the parent and aspect-ratio can be applied . the grid layouts do resize content to fit the cells if not centered, if centered, the content gives it a size. Aside, give it a max-height and max-width of 100% to keep inside its parent.

http://stackoverflow.com/q/78989496
accepted answer: http://stackoverflow.com/a/78991510
favorite count: 0
has body: I have a MudBlazor app and have often noticed that percentage heights and widths are often ignored. In my current example I have a MudTab in which I want to display a MudTreeView which is scrollable and under the TreeView a button. But I want to scale the TreeView as a percentage of the MudMainContent so something like "do not get bigger than 50%" and if it does, I want the treeview to be scrollable. However, this Style="max-height: 50%;" on the MudItem seems to be completely ignored and I wonder why? For example, if I set Style="max-height: 200px;" the scrolling works, but I would have to do without the dynamic height and the resposiveness is lost Here is a TryMudBlazor example Here is the code: <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@(e => DrawerToggle())"/> @for (int i = 0; i < 50; i++) { <MudTreeViewItem Text="@($"Treeview Item {i}")"/> } Primary @code { bool _drawerOpen = true; private IReadOnlyCollection<string> SelectedTreeItems { get; set; } = []; void DrawerToggle() { _drawerOpen = !_drawerOpen; } }
tagged with: http://stackoverflow.com/tag/html
type: Question
downvote count: 0
tagged with: blazor
answer count: 1
type: AnsweredQuestion
tagged with: razor
tagged with: mudblazor
upvote count: 1
has answer: http://stackoverflow.com/a/78991510
score: 1
tagged with: css
has title: MudBlazor max height ignored
has comment: http://stackoverflow.com/comment/139275583

http://stackoverflow.com/comment/139361269
type: Comment
score: 0
type: AnswerComment
has text: @kay This would mean a change in the organization of the grid elements, with a calculation formula for their repositioning... Really complicated, and it becomes a completely different question than the one initially asked here; which goes against the rules of this site. You must ask this as a new question.
comment on: http://stackoverflow.com/a/79035237

http://stackoverflow.com/a/78950019
has body: By default, the overflow of elements is set to visible. When you use overflow: hidden; the element disappears from view but is not removed. However, when you use the float property, you may encounter many problems because float itself changes the element’s height, width, and display properties to move the element across the container. Therefore, you should avoid using the float property. If you do use it, remember to set display: flex; (or display: table;) on the parent element &lt;ul&gt;. I highly recommend that you stop using float and switch to Flexbox instead.
answers question: http://stackoverflow.com/q/78949570
has comment: http://stackoverflow.com/comment/139201173
downvote count: 1
type: Answer
has comment: http://stackoverflow.com/comment/139201807
upvote count: 0
score: -1
has comment: http://stackoverflow.com/comment/139200506
has comment: http://stackoverflow.com/comment/139200859
has comment: http://stackoverflow.com/comment/139232544

http://stackoverflow.com/comment/139130870
has text: No need to rate a comment! Glad it's sorted for you.
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78911856

http://stackoverflow.com/comment/139132841
comment on: http://stackoverflow.com/a/78908435
type: AnswerComment
has text: Oh so even if I dont write that part, when I hover over p, the text area will appear but as soon as I move my cursor, it will disappear right?
score: 0
type: Comment

http://stackoverflow.com/q/78923418
has comment: http://stackoverflow.com/comment/139152379
accepted answer: http://stackoverflow.com/a/78925260
has title: Where is the white background coming from when using mix-blend-mode?
tagged with: css
type: Question
possible better answer: http://stackoverflow.com/a/78924436
has comment: http://stackoverflow.com/comment/139152887
type: AnsweredQuestion
score: 0
has comment: http://stackoverflow.com/comment/139153262
has comment: http://stackoverflow.com/comment/139153009
has body: body { background: #060f11; } &lt;div style="position:relative;z-index:0"&gt; &lt;div style="background:#060f11"&gt; &lt;div style="background:linear-gradient(0deg, rgba(0,0,0,1), rgba(0,0,0,0) 50%), linear-gradient(90deg, rgba(0,0,0,1), rgba(0,0,0,0) 50%), linear-gradient(180deg, rgba(0,0,0,1), rgba(0,0,0,0) 50%), linear-gradient(270deg, rgba(0,0,0,1), rgba(0,0,0,0) 50%), url(&amp;quot;data:image/svg+xml,%3Csvg viewBox='0 0 500 500' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E&amp;quot;);filter:contrast(200%) brightness(1000%) invert(100%);height:200px;mix-blend-mode:multiply;position:relative;transform:rotateZ(45deg);width:200px"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; I don't understand where the white edges are coming from and how to get rid off them? Appears to be caused by z-index on the parent, but why?
answer count: 2
has answer: http://stackoverflow.com/a/78925260
has answer: http://stackoverflow.com/a/78924436

http://stackoverflow.com/comment/139267755
type: QuestionComment
has text: Please give me a moment. Some new data just came, and I will update the question!
comment on: http://stackoverflow.com/q/78986368
type: Comment
score: 0

http://stackoverflow.com/q/78961939
tagged with: http://stackoverflow.com/tag/html
tagged with: tailwind-css
score: 0
tagged with: next.js
answer count: 0
tagged with: css
has body: I am working on displaying Shad CN cards with the same height and width in my Next.js application, but text overflow is preventing this. How can I control the text overflow in the CardTitle and CardDescription components to ensure they fit within the card dimensions? import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "@/components/ui/card" export function MyCard({ obj }) { return ( <p > {obj.title} <p > {obj.desc} Cancel Deploy ) } I didn't add any classes directly to the CardTitle and CardDescription components and instead used a tag within them, I am still experiencing issues with text overflow. I have also installed the tailwindcss/line-clamp plugin and included it in my tailwind.config.js file.
type: UnansweredQuestion
tagged with: shadcnui
has comment: http://stackoverflow.com/comment/139222648
has title: The line-clamp Tailwind CSS class not functioning correctly at all in my Next.js application
type: Question

http://stackoverflow.com/comment/139277142
comment on: http://stackoverflow.com/q/78987974
has text: Thank You for reply. No one works on the app except me. In the git (git = github; standard configuration from VS 2024 for git; windows 10 installed on June) I haven't any changes. I was cleaning, reabuilding application many times, without any result. I even deleted it by hand all obj, bin (folders) and user.proj files. All files are correctly named. I was looking in the Internet for solution, but I didn't found it. App is Blazor Web App. Link is named projectName.styles.css
type: QuestionComment
type: Comment
score: 0

http://stackoverflow.com/q/79013624
tagged with: javascript
has title: How would I correctly position elements based of their y position?
tagged with: game-development
answer count: 0
tagged with: css
has comment: http://stackoverflow.com/comment/139320842
type: UnansweredQuestion
type: Question
tagged with: http://stackoverflow.com/tag/html
has body: I'm creating a HTML/JS browser based game, and I'm trying to have any element that has a higher Y on the page to have a lower Z Index, making it appear behind elements with a lower Y, the code I've written seems to be doing just that, by setting the Z Index to the elements top positioning, but visually it doesn't The code for placing elements: async start(xx, yy, p, sxx, syy) { document.getElementById("htmlIcon").href = `/media/misc/${p}/icon.png`; new Promise(async (resolve) => { const x = xx; const y = yy || xx; const sx = sxx || (x * 50) / 2; const sy = syy || (y * 50) / 2; this.mx = x; this.my = y; this.inventory.update(); this.map.style.width = `${x * 50}px`; this.map.style.height = `${y * 50}px`; this.map.style.overflow = "hidden"; document.body.style.width = `${x * 50}px`; document.body.style.height = `${y * 50}px`; this.map.innerHTML = ""; this.rawMap = []; this.layerHandler(); for (let i = 0; i < y; i++) { for (let j = 0; j < x; j++) { // Grass const tile = document.createElement("img"); tile.src = this.data.tiles.grass.image[ Math.floor(Math.random() * this.data.tiles.grass.image.length) ]; tile.classList.add("tile"); tile.style.left = `${i * 50}px`; tile.style.top = `${j * 50}px`; tile.style.width = `${this.vars(this.data.tiles.grass.size)}px`; tile.style.zIndex = 1; this.map.appendChild(tile); } } for (let i = 0; i < y; i++) { let layer = ""; for (let j = 0; j < x; j++) { const tile = Math.floor(Math.random() * 100); if (tile <= 50) { // Air layer += "null/"; } if (tile <= 75 && tile > 50) { // Flowers const div = document.createElement("img"); div.src = this.data.tiles.flower.image[ Math.floor(Math.random() * this.data.tiles.flower.image.length) ]; div.classList.add("tile"); div.classList.add("breakable"); div.classList.add("layers"); const offsetX = this.vars(this.data.tiles.flower.offsetX) * 1; const offsetY = this.vars(this.data.tiles.flower.offsetY) * 1; div.style.left = `${i * 50 + offsetX}px`; div.style.top = `${j * 50 + offsetY}px`; div.style.wid…
has comment: http://stackoverflow.com/comment/139317726
score: 0

http://stackoverflow.com/comment/139392244
type: QuestionComment
comment on: http://stackoverflow.com/q/79054198
type: Comment
score: 0
has text: This sound more like flex. Is there a specific reason for using grid?

blazor-webassembly
type: Tag
tag name: blazor-webassembly
tags question: http://stackoverflow.com/q/78987974
tags question: http://stackoverflow.com/q/79116921
tags question: http://stackoverflow.com/q/79173982
tags question: http://stackoverflow.com/q/79500322

http://stackoverflow.com/comment/139285863
type: QuestionComment
has text: What exactly do you want to achieve here? If the issue is the size of the image then, you should just pass the `w-96` instead of `max-w-96`
comment on: http://stackoverflow.com/q/78996058
type: Comment
score: 0

http://stackoverflow.com/q/79044235
has answer: http://stackoverflow.com/a/79048670
has comment: http://stackoverflow.com/comment/139381939
tagged with: http://stackoverflow.com/tag/html
tagged with: javascript
has comment: http://stackoverflow.com/comment/139374452
has comment: http://stackoverflow.com/comment/139380710
tagged with: jquery
type: Question
tagged with: css
accepted answer: http://stackoverflow.com/a/79048670
has title: Bootstrap 5 mega menu disappears quickly
answer count: 1
has comment: http://stackoverflow.com/comment/139388146
type: AnsweredQuestion
has comment: http://stackoverflow.com/comment/139380521
tagged with: bootstrap-5
has comment: http://stackoverflow.com/comment/139374223
score: 0
has comment: http://stackoverflow.com/comment/139381156
has body: I have this Bootstrap 5 mega dropdown, I have an issue with it as it disappears quickly when I try to select the contents. I believe I have CSS affecting this but just can't figure it out. I have tried increasing the transition time and increase the z-index value but to no avail. I can't figure what CSS property I need to add to enable the hover effect stay up. .header { min-height: 70pt; } #alaid-header .logo h1 { font-size: 38px; margin: 0; line-height: 0; font-weight: 600; letter-spacing: 1px; } #alaid-header .logo h1 a, #alaid-header .logo h1 a:hover { color: #3c4133; text-decoration: none; } #alaid-header .logo img { padding: 5px; margin: 0; max-height: 78px; } .navbar { padding: 0; } .navbar ul { margin: 0; padding: 0; display: flex; list-style: none; align-items: center; } .navbar li { position: relative; } .navbar a { color: #026a3f !important; } .navbar a, .navbar a:focus { display: flex; align-items: center; justify-content: space-between; padding: 10px 0 10px 30px; font-family: "Roboto", sans-serif; font-size: 14px; font-weight: 600; text-transform: uppercase; white-space: nowrap; transition: 0.3s; } .navbar a i, .navbar a:focus i { font-size: 12px; line-height: 0; margin-left: 5px; } .navbar a:hover, .navbar .active, .navbar .active:focus, .navbar li:hover>a { color: #c57b0d !important; } .navbar a i { color: #c57b0d !important; } /* dropdown 2 */ .dropdown-menu { width: 980px; position: absolute; top: 100%; left: 50%; transform: translate(-50%, 15px); /* z-index: 99; */ opacity: 0; visibility: hidden; padding: 20px; /* background-color: #fff; */ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); transition: all 5s ease; } .dropdown-hover:hover>.dropdown-menu { display: block; opacity: 1; visibility: visible; z-index: 250; } .dropdown-hover>.dropdown-toggle:active { /*Without this, clicking will make it sticky*/ pointer-events: none; } .dropdown .dropdown-menu a { font-size: 13px !important; margin-left: -29px; } .nav-item { padding: 0.5rem 0xp; } Home Lorem ipsu…
has comment: http://stackoverflow.com/comment/139380274

http://stackoverflow.com/q/79045280
has body: I'm trying to code my own website for the first time and I'm running into some trouble. I'm following this tutorial in order to have a spotlight follow my mouse. Here's the code. But I'd like to have a rainbow gradient across my entire homepage and have my spotlight show color as it's moving across the page while keeping the other parts of the screen dark, more similar to how the original website, that the youtube tutorial is replicating, has shifting colors for the mouse as it moves across the screen. My idea was to have different layers: the dark background, the "blob", the gradient, then a blur like the tutorial. The gradient wouldn't show up against the dark background but when a white blob was beneath the gradient, then the colors would show up is my line of thinking. I'm currently at a point where it is simply the white blob and dark background. I'm wondering if this is even possible as I am thinking the issue is with the gradient's blend modes interfering (although I don't know if this is even the issue). I'm also having issues having with safari. On chrome, I can get the smooth blob that tracks my mouse with a blur, however on safari, the blob either doesn't appear or the tracking is off or the blob restarts it's position every time I move my mouse. I know that different browsers require different things, but I was wondering if there are easier ways to make sure that both browsers can handle the site. Also if you know another way of just having shifting colors for my blob while keeping the linear gradient that would be helpful too! Here is my html, css, and javascript code. Thank you! const blob = document.getElementById("blob"); window.onpointermove = event => { const { clientX, clientY } = event; blob.animate({ left: `${clientX}px`, top: `${clientY}px` }, { duration: 2500, fill: "forwards" }); }; body { background-color: #222020; height: 100vh; margin: 0; overflow: hidden; position: relative; } #gradient-color { position: absolute; top: 0; left: 0; width: …
has answer: http://stackoverflow.com/a/79051465
answer count: 2
tagged with: css
downvote count: 1
score: 2
has title: Is there a way to have a dark background and "reveal" color using my mouse?
possible better answer: http://stackoverflow.com/a/79047783
upvote count: 3
accepted answer: http://stackoverflow.com/a/79051465
favorite count: 0
type: Question
tagged with: http://stackoverflow.com/tag/html
type: AnsweredQuestion
has answer: http://stackoverflow.com/a/79047783
tagged with: javascript

http://stackoverflow.com/q/78911856
answer count: 1
type: AnsweredQuestion
has comment: http://stackoverflow.com/comment/139130829
tagged with: 3d
favorite count: 0
tagged with: cube
has body: I'm trying to create a 3D cube using CSS but not all sides of the cube appear as they should the left , right and top sides of my cube doesn't display at all only the front , bottom and backward of the 3D cube. I tried to change the size of the cube, and I tried to change the transform properties and to play with the angles however it didn't work any help would be amazing. here is my CSS code, I'm sorry for its length .container { width: 400px; height: 400px; border: 2px solid white; border-radius: 4px; display: flex; justify-content: center; align-items: center; perspective: 800px; perspective-origin: top right; } .cube { position: relative; width: 200px; height: 200px; transform-style: preserve-3d; border: 2px solid white; animation: cubeRotate 5s linear infinite; } .face { position: absolute; width: 200px; height: 200px; opacity: 0.9; line-height: 100px; text-align: center; font-size: 1.4rem; } .front { background-color: lightblue; transform: translateZ(100px); } .backward { background-color: lightgreen; transform: translateZ(-100px); } .left { background-color: peru; transform: rotateY('-90deg') translateZ(-100px); } .right { background-color: blueviolet; transform: rotateY('90deg') translateZ(100px) ; } .top { background-color: brown; transform: rotateX('90deg') translateZ(100px); } .bottom { background-color: aqua; transform: translateZ(100px) rotateX('-90deg'); } @keyframes cubeRotate { from { transform: rotateY(0deg) } to { transform: rotateY(360deg) } } Document Front Left Right Backward Top Bottom
accepted answer: http://stackoverflow.com/a/78911968
has title: Not all the sides of the 3D cube display
has comment: http://stackoverflow.com/comment/139130857
has comment: http://stackoverflow.com/comment/139130805
has comment: http://stackoverflow.com/comment/139130836
has comment: http://stackoverflow.com/comment/139130890
has comment: http://stackoverflow.com/comment/139130862
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139130803
downvote count: 0
has comment: http://stackoverflow.com/comment/139130870
has comment: http://stackoverflow.com/comment/139130784
upvote count: 1
score: 1
has answer: http://stackoverflow.com/a/78911968
type: Question
has comment: http://stackoverflow.com/comment/139130824
tagged with: css
has comment: http://stackoverflow.com/comment/139130827

http://stackoverflow.com/comment/139313086
has text: Try `svg{margin-bottom:.2em}`. Also as a debugging method you can add an outline or a background to the svg elements. Additionally: in svg you can reuse the code for the star with <use> Please read about the [<use>](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use) element in SVG. This would simplify your code.
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/79010977

http://stackoverflow.com/a/79034650
type: Answer
has body: Whoever edited my original question: I find it unhelpful - to the community - to remove my best suggestion, as it could be useful for others, and it certainly had flaws so wasn't a 'true' solution, but was a effective hack or kludge, a quick fix. So for other's use, another approach is to create a similar item to the 'absolutely positioned' image but put the absolute one at a higher Z-index. 2 lines & pretty clean, works regardless of your current theme, it's just inelegant: I am hidden behind the absolute img, but ensure that doesn't hide any more content to follow!
score: -2
upvote count: 0
downvote count: 2
answers question: http://stackoverflow.com/q/79032875

http://stackoverflow.com/comment/139331642
has text: Please [edit] your question to include a [mre] so that readers can run your code to answer your question.
score: 2
type: Comment
type: QuestionComment
comment on: http://stackoverflow.com/q/79021002

crow
tag name: crow
tags question: http://stackoverflow.com/q/79033854
type: Tag

http://stackoverflow.com/comment/139165765
score: 0
type: QuestionComment
has text: The red area is an important element, not a background. The representation is not accurate. But I posted it in the answer because I can meet the conditions you mentioned.
type: Comment
comment on: http://stackoverflow.com/q/78930649

http://stackoverflow.com/q/79028695
type: UnansweredQuestion
favorite count: 0
tagged with: gradient
has answer: http://stackoverflow.com/a/79029338
tagged with: http://stackoverflow.com/tag/html
type: Question
tagged with: tailwind-css
has body: I can give a div this gradient and make it absolute and place it at the right position, but how do I make it semi-circle? Adding tailwind class rounded-full does not help.
downvote count: 0
has answer: http://stackoverflow.com/a/79028786
has title: How do I give gradient and make it a semicircle?
answer count: 2
tagged with: css
tagged with: frontend
upvote count: 2
score: 2

http://stackoverflow.com/comment/139310426
type: QuestionComment
has text: Note that the file is not html but xhtml5, and is served as such. The relevant CSS block is referenced by #id. Search the CSS in welcome.css for buidheag if you get lost.
type: Comment
comment on: http://stackoverflow.com/q/79009569
score: 0

http://stackoverflow.com/a/78999464
answers question: http://stackoverflow.com/q/78995150
has comment: http://stackoverflow.com/comment/139302363
has comment: http://stackoverflow.com/comment/139302381
type: AcceptedAnswer
has body: Unfortunately, inconsistent alignment problems are not uncommon, especially when using vertical text and different alphabets. A possible workaround could be to wrap each language in a separate element and tweak the baseline position via ascent-override. /* javanese */ @font-face { font-family: 'Noto Sans Javanese'; font-style: normal; font-weight: 400 700; src: url(https://fonts.gstatic.com/s/notosansjavanese/v23/2V0AKJkDAIA6Hp4zoSScDjV0Y-eoHAH507U9dp0.woff2) format('woff2'); unicode-range: U+200C-200D, U+25CC, U+A980-A9DF; ascent-override: 190%; } /* latin */ @font-face { font-family: 'Noto Sans Javanese'; font-style: normal; font-weight: 400 700; src: url(https://fonts.gstatic.com/s/notosansjavanese/v23/2V0AKJkDAIA6Hp4zoSScDjV0Y-eoHAH59bU9.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } body { font-family: "Noto Sans Javanese", sans-serif; } .vt { writing-mode: vertical-lr; height: max-content; } 結 ꦲꦂꦠꦤ꧀ꦠ In the above example I'm setting a custom ascent value only for the Javanese unicode range @font-face { font-family: 'Noto Sans Javanese'; font-style: normal; font-weight: 400 700; src: url(https://fonts.gstatic.com/s/notosansjavanese/v23/2V0AKJkDAIA6Hp4zoSScDjV0Y-eoHAH507U9dp0.woff2) format('woff2'); unicode-range: U+200C-200D, U+25CC, U+A980-A9DF; ascent-override: 190%; } Text directions for "non-western" alphabets/writing-systems Whether we like it or not – most text-rendering engines are foremost optimized for "latin" "left-to-right" rendering. While modern browsers and OS' have implemented quite a few unicode-based auto-detections for e.g right-to-left or top-to-bottom writing-systems maybe also including regional deviations or contextual ligatures – it's safe to say, there are still a lot of issues. If you discover language specific issues in a browser please file a bug-report! You're mi…
accepted answer of: http://stackoverflow.com/q/78995150
type: Answer
has comment: http://stackoverflow.com/comment/139302207
score: 0

http://stackoverflow.com/q/78967875
score: 0
tagged with: javascript
tagged with: reactjs
has title: Radio Button Background Not Changing on First Click in React Component
tagged with: css
answer count: 3
has answer: http://stackoverflow.com/a/78973816
has answer: http://stackoverflow.com/a/78967999
tagged with: radio-button
has body: I'm working on a React form where I'm trying to change the background color of a label when a radio button is selected, but when I click/check the button it first update the state and on second click it shows me the background color. I'm using a combination of onChange and checked attributes to manage the radio button state. I have go through the Chat-GPT but it is still not answering me correctly Below is the code for the Task component and CSS. import React, { useState } from 'react'; export default function Task() { let [formData, setformData] = useState({ uName: '', uGender: '', uMedals: 0, }); let handleForm = (e) => { let { name, value } = e.target; e.preventDefault(); if (name === 'uMedals') { value = parseInt(value); if (value <= 0) value = 0; if (value > 20) value = formData.uMedals; } setformData((formData) => ({ ...formData, [name]: value, })); }; return ( Name {/* Name input */} Gender Female Male Add ); } The below is the CSS code of above Task component .custom-input input[type=radio] { display: none; } .custom-input label { display: block; padding: 6px 8px; color: #fff; font-weight: bold; text-align: center; transition: all 0.4s ease; cursor: pointer; border-radius: 4px; background-color: #717762; } .custom-input input[type='radio']:checked + label { background-color: #f5f5f5; color: #000; }
type: UnansweredQuestion
has answer: http://stackoverflow.com/a/78967953
type: Question
tagged with: http://stackoverflow.com/tag/html

http://stackoverflow.com/comment/139327894
type: QuestionComment
type: Comment
has text: @user2305558, thank you for your responses! I supplied two Codepen links, so I'm not certain which you are working with. My personal recommendation and preference is the second one which doesn't "push" anything, but instead uses a native HTML5 ` ` element which, when activated via `showModal()`, will have both visual and accessible focus. Personally, I find that when the underlying content moves ("pushes") in response to the menu opening it is distracting, and with recent CSS changes we can finally animate hidden things with the `allow-discrete` attribute.
score: 0
comment on: http://stackoverflow.com/q/79012295

http://stackoverflow.com/comment/139265059
has text: It is working for normal tables. But with bootstrap table its not working.
comment on: http://stackoverflow.com/a/78984479
type: Comment
score: 0
type: AnswerComment

http://stackoverflow.com/comment/139297812
score: 0
type: QuestionComment
has text: yes, this is just part of the code because i am not sure where to start adding watermark
type: Comment
comment on: http://stackoverflow.com/q/79002259

http://stackoverflow.com/a/79008359
type: Answer
has comment: http://stackoverflow.com/comment/139315076
has comment: http://stackoverflow.com/comment/139322683
has body: In this situation, you don't need to deploy CSS presentational effects. Instead you can: use .split('') to build a letter-by-letter array of the highlighted text manipulate that array replace the highlighted text in the paragraph with the contents of the manipulated array Working Example: const toggleButton = document.querySelector('.toggleButton'); const mark = document.querySelector('mark'); const markedText = mark.textContent; let markedTextArray = markedText.split(''); const toggleHighlight = (e) => { if (markedTextArray.length === 0) { for (let i = 0; i < markedText.length; i++) { setTimeout(() => { markedTextArray.push(markedText[i]); mark.textContent = markedTextArray.join(''); }, (20 * i)); } } else { for (let i = (markedText.length - 1); (i + 1) > 0; i--) { setTimeout(() => { markedTextArray.pop(); mark.textContent = markedTextArray.join(''); }, (20 * i)); } } } toggleButton.addEventListener('click', toggleHighlight); section { display: block; width: 500px; height: 210px; } .paragraph { padding: 12px; line-height: 1.5; background-color: rgb(223, 223, 223); } Toggle Highlight Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
answers question: http://stackoverflow.com/q/79006880
has comment: http://stackoverflow.com/comment/139318811
downvote count: 0
upvote count: 1
score: 1

http://stackoverflow.com/comment/139137517
comment on: http://stackoverflow.com/a/78915704
has text: @m00nbugs You're welcome! And I gave you a trivial CSS solution as well. Perfect for basic coding assignments.
type: Comment
score: 0
type: AnswerComment

http://stackoverflow.com/q/78950959
type: UnansweredQuestion
has title: How can I make text appear on hover?
type: Question
tagged with: http://stackoverflow.com/tag/html
has answer: http://stackoverflow.com/a/78950976
answer count: 1
has comment: http://stackoverflow.com/comment/139202258
score: 0
linked to: http://stackoverflow.com/q/78951292
has body: I want several text links that when they are hovered over a text is displayed below in a DIV. For example if text called Ice cream is hovered upon with mouse then below in DIV a text is displayed about Ice cream. Another text near the Ice cream is Bananas, and if it is however the same DIV instead displays text about Bananas. I need to be able to make several of those. And the link text and the DIV with result text has to be on different areas of the page, meaning they shouldn't need to be placed on same DIV. Something close to this: .hide { display: none; border: solid #ff8900 2px; border-radius: 20px; padding: 20px; } .outro:hover .hide { display: block; color: #474747; } Know more This is the big text block I am trying to copy Only this has link and resulting DIV all inside, they should be separate, and need to be able to have several links with several preset texts that show up on hover. Preferably all in CSS without JS. Thanks. Code I find is nested, need separate, with many options of preset text.
tagged with: css
has comment: http://stackoverflow.com/comment/139204042

http://stackoverflow.com/a/78957395
answers question: http://stackoverflow.com/q/78957279
type: Answer
score: 0
has body: Remove the height: 100%; from the content div and allow it to take its natural height based on the content. The browser will automatically handle the content's extension across multiple pages.

http://stackoverflow.com/comment/139153194
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78923710
type: QuestionComment
has text: "After some playing, I'm sure that my browser treats Helvetica entry as if it was Arial" says there is guess work involved, so take the guess work out of debugging. I wasn't trying to answer your post (you already have an answer), but pointing out to not just you, but all future visitors who find this post, that there is a way to simply check.

http://stackoverflow.com/a/78968425
downvote count: 0
answers question: http://stackoverflow.com/q/78967831
score: 1
upvote count: 1
accepted answer of: http://stackoverflow.com/q/78967831
type: AcceptedAnswer
has body: Solution I can think of is to manually rotate the 중 ot use text-orientation: sideways .vertical { writing-mode: vertical-rl; text-orientation: mixed; } .vertical span.rotate { display: inline-block; transform: rotate(90deg); } .vertical1 { writing-mode: vertical-rl; text-orientation: sideways; } A중385 A중385
type: Answer
has comment: http://stackoverflow.com/comment/139234815

http://stackoverflow.com/a/78951025
answers question: http://stackoverflow.com/q/78951014
has body: See Inspect CSS grid layouts - Grid overlays Enable overlay views of multiple grids You can enable overlay views of multiple grids Toggle the checkboxes assigned to each grid layout element to enable / disable the overlay. There is also a similar control for Flexbox overlays.
accepted answer of: http://stackoverflow.com/q/78951014
type: AcceptedAnswer
type: Answer
downvote count: 0
upvote count: 1
score: 1

http://stackoverflow.com/q/79001690
has comment: http://stackoverflow.com/comment/139296173
tagged with: webflow
answer count: 0
has title: How to add images in the embed code feature on Webflow?
tagged with: css
has comment: http://stackoverflow.com/comment/139296155
type: UnansweredQuestion
has body: I am trying to add a carousel to my website on webflow and I have used to embed code feature. I have added the HTML, CSS and JavaScript all together because I'm not sure how to do that on seperate files in Webflow. I have also added 3 images to the carousel but when i publish the website and view it, the functionality of the carousel works but does not show the images. I have put down the path as: images/image1.jpg as that is what is used for other images. I have put down the path as: /images/image1.jpg as that is what is used for other images. &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt; &lt;title&gt;Simple Image Carousel&lt;/title&gt; &lt;style&gt; .carousel { position: relative; width: 600px; margin: auto; overflow: hidden; border: 1px solid #ddd; } .carousel-inner { display: flex; transition: transform 0.5s ease-in-out; } .carousel-item { min-width: 100%; box-sizing: border-box; } .carousel-item img { width: 100%; display: block; } .carousel-control { position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(0,0,0,0.5); border: none; color: white; font-size: 2em; padding: 5px 10px; cursor: pointer; user-select: none; } .carousel-control.prev { left: 10px; } .carousel-control.next { right: 10px; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div class=&quot;carousel&quot;&gt; &lt;div class=&quot;carousel-inner&quot;&gt; &lt;div class=&quot;carousel-item active&quot;&gt; &lt;img src=&quot;/images/image1.jpg&quot; alt=&quot;Slide 1&quot;&gt; &lt;/div&gt; &lt;div class=&quot;carousel-item&quot;&gt; &lt;img src=&quot;/images/image2.jpg&quot; alt=&quot;Slide 2&quot;&gt; &lt;/div&gt; &lt;div class=&quot;carousel-item&quot;&gt; &lt;img src=&quot;/images/image3.jpg&quot; alt=&quot;Slide 3&quot;&gt; &lt;/div&gt; &lt;/div&gt; &lt;button class=&quot;carousel-control prev&quot; onclick=&quot;prevSlide()&quot;&gt;&amp;#10094;&lt;/button&gt; &lt;button class=&quot;carousel-control next&quot; onclick=&quot;nextSlide()&quot;&gt;&amp;#10095;&lt;/bu…
type: Question
tagged with: http://stackoverflow.com/tag/html
score: 0
tagged with: javascript

http://stackoverflow.com/comment/139171932
type: Comment
comment on: http://stackoverflow.com/a/78928402
type: AnswerComment
has text: @7star thanks for the response - I'll go see if this works or not.
score: 1

http://stackoverflow.com/q/79015656
type: Question
has title: How to force MudBlazor Pagination to always be visible despite the size of the Window?
score: 0
tagged with: mudblazor
has body: How can I fill the Window with the MudDatagrid but also always show Pagination at the bottom of the screen. You can recreate my screenshot below by adjusting the size of the TryMud Window. Stack is asking me to provide more text. Thank you for your help. TryMud
answer count: 0
tagged with: css
tagged with: flexbox
type: UnansweredQuestion

http://stackoverflow.com/comment/139401826
type: Comment
type: QuestionComment
comment on: http://stackoverflow.com/q/79059752
score: 1
has text: Welcome to Stack Overflow! Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/) using the `<>` icon. See [**How to create a Minimal, Reproducible Example**](http://stackoverflow.com/help/reprex)

http://stackoverflow.com/comment/139342950
type: QuestionComment
has text: Do you know what ancestor means?
comment on: http://stackoverflow.com/q/79025744
type: Comment
score: 0

http://stackoverflow.com/comment/139385358
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/79044811
type: Comment
has text: Yes, I would like the center to change text but not cause any dulling of the sectors when hovered over. I only want dulling when a sector is hovered over.

http://stackoverflow.com/comment/139280501
score: 0
comment on: http://stackoverflow.com/q/78992567
type: QuestionComment
has text: @JJaun I agree. But the code is not ready yet. Will update it soon.
type: Comment

game-development
tag name: game-development
type: Tag
tags question: http://stackoverflow.com/q/79013624
tags question: http://stackoverflow.com/q/79129815

http://stackoverflow.com/a/78984558
upvote count: 2
has comment: http://stackoverflow.com/comment/139288941
has body: The reason for this result is that div#content is actually overflowing. Although you specified h-full, it didn’t prevent the overflow. Its child elements will exceed the height limit, and the overflow-y-auto you set on the child element won’t work. To solve this issue, you just need to add overflow-hidden to div#content: Grid overflow In your case, there's no need to use any JavaScript. Additionally, using flex will be more convenient than grid. Without changing the page structure, the simplest method I can think of is as follows:
answers question: http://stackoverflow.com/q/78979042
type: AcceptedAnswer
score: 2
downvote count: 0
type: Answer
accepted answer of: http://stackoverflow.com/q/78979042

http://stackoverflow.com/comment/139214223
has text: @DBS I hope there is a way to do this using shadows gradients or smth without changing real border widths
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78957424
type: Comment

http://stackoverflow.com/comment/139302207
score: 0
comment on: http://stackoverflow.com/a/78999464
type: Comment
type: AnswerComment
has text: Using this workaround works as expected on my end. Marking this workaround as answer until an actual 'fix' is implemented.

http://stackoverflow.com/comment/139119018
comment on: http://stackoverflow.com/q/78905493
type: Comment
score: 0
type: QuestionComment
has text: `semantically correct` should about using a ` ` element (with .showModal() method)

http://stackoverflow.com/a/78956336
score: 0
answers question: http://stackoverflow.com/q/78954897
has body: There are many ways to add loader but this works best for me. Its also responsive for all screen sizes. .th-loader { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; background-color: white; display: flex; align-items: center; justify-content: center; z-index: 100; } I have used position: absolute with width: 100% and height: 100vh which covers entire screen then used flexbox to center the spinner vertically and horizontally both. Finally used z-index: 100 so that it is above any other UI element. Below is working example. body { margin: 0; padding: 0; } .mainDiv { color: white; width: 100%; height: 100vh; background-color: #1e1e1e; display: flex; align-items: center; justify-content: center; } .th-loader { .progress { top: calc(50% - (var(--loading-indicator-border)/2)); left: calc(50% - (var(--loading-indicator-border)/2)); width: var(--loading-indicator-border); aspect-ratio: 1; background: #006edb; border-radius: 50%; transform: rotate(0deg) translateY(calc((var(--loading-indicator-size) * -0.5) + (var(--loading-indicator-border) * 0.5))); animation: spin 1s infinite linear; &.mini { --loading-indicator-size: 24px; --loading-indicator-border: 4px; } } @keyframes spin { to { transform: rotate(360deg) translateY(calc((var(--loading-indicator-size) * -0.5) + (var(--loading-indicator-border) * 0.5))) } } .progress:after { position: absolute; content: ''; width: var(--loading-indicator-size); aspect-ratio: 1; top: 0%; left: 50%; translate: -50% 0; background: conic-gradient(transparent 10%, #006edb); border-radius: 50%; mask: radial-gradient(transparent calc(((var(--loading-indicator-size) * 0.5) - var(--loading-indicator-border)) - 1px), #006edb calc((var(--loading-indicator-size) * 0.5) - var(--loading-indicator-border))); } } .th-loader { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; background-color: white; display: flex; align-items: center; justify-content: center; z-index: 100; } Click Me
type: Answer

http://stackoverflow.com/comment/139202888
comment on: http://stackoverflow.com/a/78951310
score: 0
type: AnswerComment
has text: I'll look at the w3 ref, thx, but your code right now that you posted does not work and it shows only 1 of the variants in the div.
type: Comment

http://stackoverflow.com/q/78924175
has answer: http://stackoverflow.com/a/78924322
has answer: http://stackoverflow.com/a/78925649
accepted answer: http://stackoverflow.com/a/78924322
tagged with: css
answer count: 3
has title: How to color a table column with a specific class in its header using CSS?
has answer: http://stackoverflow.com/a/78924208
possible better answer: http://stackoverflow.com/a/78924208
type: Question
tagged with: http://stackoverflow.com/tag/html
type: AnsweredQuestion
has body: table, th, td { padding: 10px; border: 1px solid black; border-collapse: collapse; } th.red { background-color: red; } q w e r t y q1 w1 e1 r1 t1 y1 q2 w2 e2 r2 t2 y2 Is there a way to color a table column whose header has a certain class using CSS? For example, in this table, to color the second column.
score: 0

http://stackoverflow.com/a/79294894
answers question: http://stackoverflow.com/q/78929034
type: Answer
upvote count: 0
score: -1
has body: That was probably a bug. The latest version should work now.
downvote count: 1

http://stackoverflow.com/q/79035820
tagged with: css
has comment: http://stackoverflow.com/comment/139358669
has title: Make element pop out & change background color without shifting text css
has answer: http://stackoverflow.com/a/79121645
has comment: http://stackoverflow.com/comment/139358803
answer count: 5
downvote count: 1
type: UnansweredQuestion
has answer: http://stackoverflow.com/a/79036135
has comment: http://stackoverflow.com/comment/139502406
favorite count: 0
type: Question
has comment: http://stackoverflow.com/comment/139359570
has answer: http://stackoverflow.com/a/79036382
has answer: http://stackoverflow.com/a/79035967
linked to: http://stackoverflow.com/q/30693928
has comment: http://stackoverflow.com/comment/139501427
has answer: http://stackoverflow.com/a/79036586
has comment: http://stackoverflow.com/comment/139358658
has comment: http://stackoverflow.com/comment/139358561
has body: The main idea is that the class .pop-out transforms the code to change background, pop up off the screen a bit (scale &amp; shadow), etc. The only problem is, there is no padding on my original element to the left and right, so it would look very weird when I pop it out without adding more padding as part of the transition. When I do add padding, it shifts the text as there is now a different amount of horizontal space. I cannot add padding before hand, or the text will be misaligned. How can I fix this? I currently have the following code: * { box-sizing: border-box; } .pop-out { position: relative; transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out, border-radius 0.2s ease-in-out; &amp;:hover { cursor: pointer; background-color: white !important; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); transform: scale(1.1); border-radius: 10px; padding-left: 1rem; padding-right: 1rem; } } #wrapper { margin-left: 50px; display: flex; justify-content: center; } #my-element { background-color: gray; width: 200px; flex: 0 0 auto; } &lt;div id="wrapper"&gt; &lt;div class="pop-out" id="my-element"&gt; My element. lipsumlipsum &lt;/div&gt; &lt;/div&gt;
score: 0
has comment: http://stackoverflow.com/comment/139358677
has comment: http://stackoverflow.com/comment/139512953
upvote count: 1
has comment: http://stackoverflow.com/comment/139512950
has comment: http://stackoverflow.com/comment/139358660
has comment: http://stackoverflow.com/comment/139358294
has comment: http://stackoverflow.com/comment/139504183
has comment: http://stackoverflow.com/comment/139358907

http://stackoverflow.com/comment/139406215
type: Comment
score: 0
comment on: http://stackoverflow.com/q/79061543
has text: The item width should expand and effect the total column amount.
type: QuestionComment

http://stackoverflow.com/comment/139185942
type: Comment
score: 0
type: AnswerComment
has text: thanks, this fixed it, after you said it could be inheriting a rule I realized the search bar is part of the header which has a horizontal style, so adding the < display: block > fixed it
comment on: http://stackoverflow.com/a/78939019

http://stackoverflow.com/a/78917605
has comment: http://stackoverflow.com/comment/139143180
has body: Considering your applied code: div.elementor-4471 { padding:2rem; } This would apply the padding to the element (as long as the selector div.elementor-4471 matches). However, if you were to apply e.g. display: block instead of padding: 2rem, the display: flex rule below would overwrite it. This is due to CSS specificity. Knowing this, you need to apply your desired styling with a higher specificity than the code below. .elementor-4471 .elementor-element.elementor-element-26d69811{ --display:flex; --flex-direction:row; --container-widget-width:initial; --container-widget-height:100%; --container-widget-flex-grow:1; --container-widget-align-self:stretch; --flex-wrap-mobile:wrap; --background-transition:0.3s; } Looking at the link provided, you need to apply justify-content: center to center the form. You can use this selector: .elementor-element-324307b9.e-flex .e-con-inner { justify-content: center; } You need a selector like this due to specificity - as this element has this styling below applied, so you need to overwrite it (although "initial" is set as a CSS variable, the value of that variable is "initial"). .e-con.e-flex>.e-con-inner { justify-content: initial; } but also because you need a unique identifier (.elementor-element-324307b9), so your CSS doesn't interfere with anything else on the page. You can apply the styling the same place you placed your current custom CSS.
type: AcceptedAnswer
type: Answer
answers question: http://stackoverflow.com/q/78917311
accepted answer of: http://stackoverflow.com/q/78917311
has comment: http://stackoverflow.com/comment/139144149
score: 4
upvote count: 4
downvote count: 0

http://stackoverflow.com/comment/139195806
comment on: http://stackoverflow.com/a/78946752
score: 0
type: AnswerComment
has text: @Rob OP mentioned that he wanted space between image at left and text at right. I have added space between them using `gap: 10px`. If I have got anything wrong then please do share.
type: Comment

http://stackoverflow.com/a/79024620
downvote count: 0
type: Answer
upvote count: 1
answers question: http://stackoverflow.com/q/79024470
score: 1
has body: I don't know if I understand the question, but this pop into mind. A script that calculates the scrollbar width. Does it help you further? The scrollbar width is set on the body or the element that contains the scrolling area. (() =&gt; { let scroller = (document.scrollingElement || document.body); // Force scrollbars to display scroller.style.setProperty('overflow', 'scroll'); // Wait for next from so scrollbars appear requestAnimationFrame(()=&gt;{ // True width of the viewport, minus scrollbars scroller.style .setProperty( '--vw', scroller.clientWidth ); // Width of the scrollbar scroller.style .setProperty( '--scrollbar-width', `${window.innerWidth - scroller.clientWidth}px` ); // Reset overflow scroller.style .setProperty( 'overflow', '' ); }); })();
has comment: http://stackoverflow.com/comment/139338036

http://stackoverflow.com/comment/139146675
has text: when i put margin-left: 50% on the canvas, it moves it over 50% of the width.
type: QuestionComment
type: Comment
comment on: http://stackoverflow.com/q/78920605
score: 0

http://stackoverflow.com/comment/139118121
type: Comment
score: 0
has text: The image is not showing. To match the image with the background, we need to check what image it is. and the image has `position: absolute;` but the parent does not have `position: relative`
type: QuestionComment
comment on: http://stackoverflow.com/q/78904561

http://stackoverflow.com/comment/139123126
comment on: http://stackoverflow.com/q/78906838
type: QuestionComment
type: Comment
score: 0
has text: Duplicate (unanswered) question [How to focus on applications behind the JavaFX window when clicking on transparent areas?](https://stackoverflow.com/questions/25650491/how-to-focus-on-applications-behind-the-javafx-window-when-clicking-on-transpare)

http://stackoverflow.com/a/78977848
score: 0
has body: Your .container should have position: relative so the .spinner will be relative to the .container .container { position: relative; border: 1px solid green; } .spinner { position: relative; top: 0; left: 0; border: 1px solid red; } .spinner:before { position: absolute; content: "Why this text is not inside green"; font-size: 24px; left: 80px; color:#FFBC00; border: 2px solid blue; } &lt;div class="container"&gt; container &lt;div class="spinner"&gt; spinner &lt;/div&gt; &lt;/div&gt; &lt;div&gt; Why this text is not below another text? &lt;/div&gt;
has comment: http://stackoverflow.com/comment/139252461
answers question: http://stackoverflow.com/q/78977782
type: Answer

http://stackoverflow.com/comment/139355954
type: QuestionComment
has text: Noleli, thanks for suggesting the "breakout" term, it describes my goal nicely and is well covered elsewhere, like !(here)[https://smolcss.dev/#smol-breakout-grid]. HOWEVER, after looking at about 25 pages describing all this, learning about clamp, gutter, and also Haolt's great answer, it appeared they all assume I know the main column width, or can change the entire layout to remove all the parent containers or move to CSS grid. A theme redesign is out of scope for me, unfortunately.
type: Comment
score: 0
comment on: http://stackoverflow.com/q/79032875

http://stackoverflow.com/comment/139176351
comment on: http://stackoverflow.com/q/78936472
type: Comment
score: 0
has text: Please remove the spurious text from your question and instead use the extra space to give more detail. In this case a picture of the resultant 'bad' layout would be helpful, as would paring your code down to make a simple reproduciable example as a runnable snippet which we could debug. See https://stackoverflow.com/help/minimal-reproducible-example
type: QuestionComment

text
tag name: text
tags question: http://stackoverflow.com/q/78921611
tags question: http://stackoverflow.com/q/78936068
type: Tag
tags question: http://stackoverflow.com/q/79125057
tags question: http://stackoverflow.com/q/79077959
tags question: http://stackoverflow.com/q/79249056
tags question: http://stackoverflow.com/q/79469370
tags question: http://stackoverflow.com/q/79507940

http://stackoverflow.com/q/79042220
answer count: 2
score: -1
has answer: http://stackoverflow.com/a/79043503
tagged with: css
has answer: http://stackoverflow.com/a/79043405
tagged with: twitter-bootstrap
duplicate of: http://stackoverflow.com/q/13916326
has body: I have a test website with a navbar and slidebar. I'm trying to get the sidebar to stack over the navbar or resize the navbar. The footer is fine, I think, because it’s position is fixed. I would like the navbar to nest under the slidebar or resize. I am using is bootstrap 3 and JS. Here is the code function openNav() { document.getElementById("Sidebar").style.width = "300px"; document.getElementById("main").style.marginLeft = "0px"; } function closeNav() { document.getElementById("Sidebar").style.width = "0"; document.getElementById("main").style.marginLeft = "0"; } html { font-size: 100%; } body { font-size: 15px; font-size: 0.9375rem; font-family: "Open sans", Helvetica, Arial, sans-serif; color: #666666; padding: 0; background-color: #cccccc; } .topspace { margin-top: 40px; } .navbar { border-width: 1px 0; -webkit-border-radius: 0; -webkit-background-clip: padding-box; -moz-border-radius: 0; -moz-background-clip: padding; border-radius: 0; background-clip: padding-box; width: 100%; margin-top: 20%; } .navbar.stick { position: fixed; top: 0; left: 0; opacity: .85; } .navbar-collapse { -webkit-border-radius: 0; -webkit-background-clip: padding-box; -moz-border-radius: 0; -moz-background-clip: padding; border-radius: 0; background-clip: padding-box; font-family: "Open sans", Helvetica, Arial, sans-serif; font-weight: 300; text-transform: uppercase; } .navbar-collapse .navbar-nav { float: none; margin: 0 auto; text-align: center; } .navbar-collapse .navbar-nav>li { float: none; display: inline-block; } .navbar-collapse .navbar-nav>li>a { padding: 20px 30px; } .dropdown ul.dropdown-menu { top: 85%; text-align: left; } .dropdown ul.dropdown-menu>li>a { padding: 5px 30px; } .navbar-default { background-color: #ffffff; border-color: #cccccc; } .navbar-default .navbar-nav>li>a { color: #454545; } .navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus { color: #000000; background-color: #ffffff; } .navbar-default .navbar-nav>.active>a, .navbar-defa…
type: UnansweredQuestion
favorite count: 0
type: Question
downvote count: 1
tagged with: http://stackoverflow.com/tag/html
linked to: http://stackoverflow.com/q/13916326
upvote count: 0
has title: Navbar overlapping with Slidebar
tagged with: javascript

http://stackoverflow.com/q/78981553
tagged with: css
type: Question
has comment: http://stackoverflow.com/comment/139259203
tagged with: fonts
has comment: http://stackoverflow.com/comment/139259364
favorite count: 0
has comment: http://stackoverflow.com/comment/139259097
has title: Issue with Text Positioning and Custom Font "Angel Wish"
has comment: http://stackoverflow.com/comment/139260057
tagged with: http://stackoverflow.com/tag/html
downvote count: 0
has comment: http://stackoverflow.com/comment/139259693
answer count: 0
has comment: http://stackoverflow.com/comment/139278407
type: UnansweredQuestion
score: 1
has body: I'm encountering an issue with text positioning when using the custom font "Angel Wish." Even without applying any CSS, the text is positioned below the page. When I switch to a standard font like Arial, the problem does not occur. I've also tried adding an image with just HTML and CSS, but the issue persists. Issues Encountered Even without CSS, the text is positioned below the page. The problem disappears when switching to standard fonts like Arial. I have also tried adding an image with just HTML and CSS, but the issue persists. Steps Taken Verified that the "Angel Wish" font is being loaded correctly. Tested with standard fonts, and the issue does not occur. Used browser developer tools to check applied styles. Added an image using only HTML and CSS, but the issue is still present. Request How can I resolve the text positioning issue with the "Angel Wish" font? Any suggestions? p { font-family: 'Angel Wish', sans-serif; display: block; font-size: 40px; } You need to scroll down: test
upvote count: 1
has comment: http://stackoverflow.com/comment/139259026

http://stackoverflow.com/comment/139164903
type: Comment
score: 0
comment on: http://stackoverflow.com/a/78927325
type: AnswerComment
has text: @Fantasterei Your provided css in question is also going to be large css as you have to add images to card somehow, either with css or html or js. You seems more unclear about what you want then us but still if you have lot images then solution from "Haworth" with js will be best for flexibility and you are right this isn't that flexible without auto-generating a big css file with hundreds of images.

http://stackoverflow.com/comment/139361096
has text: Consider checking the `content` file globs in the Tailwind configuration sufficiently cover the `contacts.html` file.
type: Comment
score: 0
comment on: http://stackoverflow.com/q/79037371
type: QuestionComment

http://stackoverflow.com/comment/139180857
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78937309
type: QuestionComment
has text: Please provide enough code so others can better understand or reproduce the problem.

http://stackoverflow.com/comment/139299806
comment on: http://stackoverflow.com/q/79003079
has text: @RobertLongson As I've found, this was affected by setting `focusin`/`focusout` event handlers. After removing them the element stops being tabbable.
type: Comment
score: 0
type: QuestionComment

http://stackoverflow.com/q/78996044
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139286643
answer count: 1
type: AnsweredQuestion
has answer: http://stackoverflow.com/a/78996913
downvote count: 0
has body: I’m working on a Django project where I have a table displaying tasks, and I need to customize the background color of priority cells based on their status (high, medium, low). I’m using Bootstrap for styling, which includes the table-hover class. However, when I hover over a row, the background color of the priority cells changes to the default hover color of the table instead of keeping the custom color I’ve set. Here’s the relevant HTML: Priority {{ task.get_priority_display }} And here’s the CSS I’m using: .table .high-priority { background-color: hsl(5, 39%, 30%) !important; } .table .medium-priority { background-color: hsl(27, 64%, 40%) !important; } .table .low-priority { background-color: hsl(146, 34%, 25%) !important; } .table .task-row:hover .high-priority, .table .task-row:hover .medium-priority, .table .task-row:hover .low-priority { background-color: inherit !important; } Issue: Despite these styles, the background color of the priority cells still changes when I hover over the row. I want the priority cells to maintain their assigned colors even when the row is hovered. Question: How can I prevent the background color of the priority cells from changing when I hover over the row, while still using the Bootstrap table-hover class? A screenshot showing the issue while hovering over the table. What I’ve Tried: • Using !important on my background colors. • Setting background-color: inherit for the hover state of the priority cells.
upvote count: 1
tagged with: css
accepted answer: http://stackoverflow.com/a/78996913
tagged with: bootstrap-5
score: 1
favorite count: 0
type: Question
has title: Prevent Bootstrap table-hover Class from Changing Background Color of Cells in a Table

http://stackoverflow.com/comment/139144811
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78917155
type: Comment
has text: @Alex Nikolsky: I just discovered iOS safari can't use CSS data url filters. So I recommend to append the SVG to your body. See updated example

http://stackoverflow.com/comment/139367682
score: 0
comment on: http://stackoverflow.com/q/79039982
has text: i want the text to appear after like 1s , not as soon as i press one of the category , or i want the text to appear like it came from the left side
type: Comment
type: QuestionComment

http://stackoverflow.com/comment/139132394
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78912790
has text: As you mentioned , foreignObject below path tag in svg tag

http://stackoverflow.com/comment/139344273
type: QuestionComment
has text: "what I want to do is that no matter how much we have scrolled, I want panel to be shown always in visible screen area of `.content` element" What you want is `sticky`, not `absolute`
type: Comment
comment on: http://stackoverflow.com/q/78967040
score: 0

http://stackoverflow.com/q/79013011
type: Question
has comment: http://stackoverflow.com/comment/139317781
tagged with: legend
score: 0
has body: I'm using ngx-slider, and say I have two legends on the first and last values, like so: sliderOptionsTP1 { floor: 0, ceil: 10, showTicks: true, stepsArray: [ { value: 0, legend: 'No electrical safety round/check conducted' }, { value: 1 }, { value: 2 }, { value: 3 }, { value: 4 }, { value: 5 }, { value: 6 }, { value: 7 }, { value: 8 }, { value: 9 }, { value: 10, legend: 'Electrical safety round/check are conducted at EACH office and other manned buildings at least once a month' } ] }; And this is the HTML code: The issue is that the legend text on the right overflows into the div next to it. Is there a way to transform only the rightmost legend using CSS, so that I can move it more to the left and prevent overflow? Thank you.
answer count: 0
tagged with: css
has title: Positioning specific ngx-slider legends in different positions
tagged with: angular
type: UnansweredQuestion

http://stackoverflow.com/q/78920900
type: Question
has comment: http://stackoverflow.com/comment/139147340
tagged with: http://stackoverflow.com/tag/html
score: 0
answer count: 2
has body: Im trying to build a registration form and right now the spacing/positioning is kinda whack. How should I fix them to be in the same line/row? symmetrical. I added the code, and a photo of how it looks like. First name: Lastname: E-mail: City of residence: By checking this box you agree to the user agreement If you click the "Register" button, the form-data will be sent to the owner of the website. Already have an account? Sign In enter image description here I want it to be in the same line/row symmetrical sorry for grammar mistakes.
tagged with: css
has answer: http://stackoverflow.com/a/78921243
has title: How do I fix the placholders positioning in bootstrap5
has answer: http://stackoverflow.com/a/78933495
tagged with: bootstrap-5
type: UnansweredQuestion

http://stackoverflow.com/comment/139358669
type: QuestionComment
type: Comment
comment on: http://stackoverflow.com/q/79035820
score: 0
has text: OK, so although the text gets bigger, the left hand side of the leftmost character must remain in the same position. Have I got that right?

http://stackoverflow.com/q/78929748
tagged with: flexbox
has comment: http://stackoverflow.com/comment/139165722
tagged with: css-grid
tagged with: layout
score: 1
favorite count: 0
type: Question
has body: I have a layout where I want to display multiple "cards." Each card will consist of 3 sections laid out vertically. The top section will contain text that will be different lengths for different cards, and could end up being long enough to wrap to 3 lines. The middle section will contain a div that can contain various other elements that will be different heights for each card. And the bottom section will either be empty or have a single line of text. If none of the cards on a row have text in the bottom section, I don't want any space to be taken up by them. I want the cards to be responsive, so that if they don't all fit side-by-side, it will wrap down and put them in a grid pattern, and if the screen is small enough, the cards will all just be displayed in a single column, top to bottom. The part I'm struggling with is that I want all of the cards that are on the same row to have the same height as the tallest card on that row, and I want the top and bottom of each section of each card on the same row to be aligned. This is essentially what I want it to look like on a larger screen: And on a smaller screen: My first thought was that a CSS grid would work. I could put the top part of each card on the first row and the middle part on the second row, and the bottom part on the third row. That will make it easy to get the heights the same and keep everything aligned. But I can't figure out how to make that responsive the way I want. Using auto-fit is going to wrap a single cell at a time, which is only part of a card. .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(133px, 1fr)); gap: 30px 5px; align-items: end; border: 1px solid grey; margin-bottom: 20px; } .middle { align-self: start; background-color: lightblue; } .a2 { height: 50px; } .b2 { height: 30px; } .c2 { height: 15px; } .optional { font-size: .6rem; } .pseudo-screen-large { width: 500px; } .pseudo-screen-medium { width: 300px; } .pseudo-screen-small { width: 150px; } On a large s…
answer count: 1
type: AnsweredQuestion
downvote count: 0
linked to: http://stackoverflow.com/q/56711501
has comment: http://stackoverflow.com/comment/139164065
upvote count: 1
tagged with: css
has answer: http://stackoverflow.com/a/78931772
accepted answer: http://stackoverflow.com/a/78931772
has title: How can I make a responsive CSS layout with cards, keeping the top and bottom sections of the cards the same height as the tallest in the row

http://stackoverflow.com/q/78976041
tagged with: tailwind-css
tagged with: typescript
has body: I'm creating a vite react.js web application using typescript and tailwind CSS. I run tsc --watch on my command line and I'm getting the following errors: tsconfig.json:3:25 - error TS6046: The argument to the '--moduleResolution' option must be: 'node', 'classic', 'node12', 'nodenext'. tsconfig.json:8:5 - error TS5023: Unknown compiler option 'allowImportingTsExtensions'. tsconfig.json:21:5 - error TS5070: Option '--resolveJsonModule' cannot be specified without module resolution strategy 'node'. My typescript version is: 5.6.2 Node: 20.13.0 My tsconfig.json looks like this: { "compilerOptions": { "moduleResolution": "bundler", "module": "es2020", "composite": true, "target": "ES2020", "jsx": "react-jsx", "allowImportingTsExtensions": true, "skipLibCheck": true, "lib": [ "DOM", "ESNext", "ES2020", "DOM.Iterable" ], "types": [ "vite/client", "jest" ], /* Bundler mode */ "resolveJsonModule": true, "isolatedModules": true, "noEmit": true }, "exclude": [ "node_modules", "./dist" ], "include": [ "./src/**/*.ts", "./src/**/*.tsx", "./src/__tests__/**/*.ts", "./src/__tests__/**/*.tsx" ] } npm install typescript@latest; Delete the node_modules folder and package-lock.json, followed by npm install
tagged with: reactjs
has answer: http://stackoverflow.com/a/78976063
has title: FatalError: error TS6046: Argument for option '-moduleResolution' must be: 'node', 'classic', 'node16', 'nodenext'
tagged with: css
type: UnansweredQuestion
score: 0
tagged with: node.js
type: Question
answer count: 1

http://stackoverflow.com/a/78928265
type: Answer
score: 0
has body: It might help, it's derived with the help of z-index, you can adjust the rest of the boxes. .section5{ width:100%; background-color:#f5f5f5; height:550px; position: relative; z-index:0; } .square1{ width:255px; height:193px; background-color:#969696; position: relative; z-index:1; } .base{ background:#e2e2e2; width:1020px; height:350px; position: absolute; top: 100px; left:130px; z-index: -1; } &lt;div class="section5"&gt; &lt;div class="base"&gt;&lt;/div&gt; &lt;div class="square1"&gt;&lt;/div&gt; &lt;/div&gt;
answers question: http://stackoverflow.com/q/78928087

http://stackoverflow.com/q/78977782
has title: Simple html & css - div doesn't cover the inner div
has comment: http://stackoverflow.com/comment/139252092
tagged with: css
has comment: http://stackoverflow.com/comment/139252103
has answer: http://stackoverflow.com/a/78977848
has body: Is there a way to modify the container class with css so that spinner looks inside the container (the container has the dynamic height to be more or equal the spinner height)? .container { border: 1px solid green; } .spinner { display: flex; position: absolute; right: 30%; border: 1px solid red; } .spinner::before { content: "Why this text is not inside green"; font-size: 24px; } &lt;div class="container"&gt; &lt;div class="spinner"&gt; &lt;/div&gt; &lt;/div&gt; &lt;div&gt; Why this text is not below another text? &lt;/div&gt;
answer count: 4
upvote count: 0
type: UnansweredQuestion
favorite count: 0
score: -2
has answer: http://stackoverflow.com/a/78977982
has answer: http://stackoverflow.com/a/78977794
downvote count: 2
tagged with: http://stackoverflow.com/tag/html
has answer: http://stackoverflow.com/a/78977854
type: Question

http://stackoverflow.com/a/78968404
answers question: http://stackoverflow.com/q/78963024
accepted answer of: http://stackoverflow.com/q/78963024
type: AcceptedAnswer
has body: I found a solution by removing line-clamp and making max-height = 2*line-height import { useEffect, useRef, useState } from "react"; import "./styles.css"; export default function App() { const inputRef = useRef(null); const currentWordRef = useRef(null); const [wordList, setWordList] = useState([]); useEffect(() => { import("./english.json").then((words) => setWordList(words.default)); }); return ( {wordList.map((word, wordIndex) => { return ( {word.split("").map((char, charIndex) => { let charColor = "#fff"; return ( {char} ); })}{" "} ); })} ); } .test { display: flex; flex-direction: column; justify-content: center; height: 62vh; padding-left: 20px; padding-right: 20px; gap: 10px; max-width: 58rem; width: 58rem; } .box { padding-left: 1.5rem; padding-right: 1.5rem; border-radius: 10px; height: 8.5em; user-select: none; overflow: hidden; /* Hide overflow */ } .box .word { overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; white-space: normal; /* Ensure words wrap correctly */ line-height: 1.5em; max-height: 3em; /* Limit to 2 lines */ overflow: hidden; /* Hide overflow beyond the second line */ } .box .word { display: inline-block; } Here is the demo
type: Answer
score: 0

http://stackoverflow.com/comment/139401214
type: Comment
score: 0
has text: https://github.com/yvantot/chroxt if you'd like to try my code, it's in here. If no hope, I'll rewrite my code for the 3rd time.
type: QuestionComment
comment on: http://stackoverflow.com/q/79059469

http://stackoverflow.com/q/79031849
has answer: http://stackoverflow.com/a/79032852
type: UnansweredQuestion
favorite count: 0
type: Question
has body: I wrote the following code using TailwindCSS and jQuery, but I found that the scroll functionality doesn’t work properly. However, when I open the browser’s console, the page height decreases, and at that point, my code works as expected. I’m not sure what’s causing this issue or how to properly fix it. Here is the related demo GIF. https://imgur.com/gfqyIQM (The use of external images is due to the ongoing upload failures.) I tried modifying parts of the code, but it didn’t help. It only works when the console is open (perhaps because the height decreases?). I’m hoping to achieve horizontal scrolling with the mouse wheel under normal conditions. $('#imageContainer').on('wheel', function(event) { event.preventDefault(); $(this).scrollLeft($(this).scrollLeft() + event.originalEvent.deltaY); }); .mx-6 { margin-left: 1.5rem; margin-right: 1.5rem; } .mt-6 { margin-top: 1.5rem; } .flex { display: flex; } .h-\[60dvh\] { height: 60dvh; } .w-\[35dvh\] { width: 35dvh; } .w-fit { width: fit-content; } .snap-x { scroll-snap-type: x var(--tw-scroll-snap-strictness); } .snap-mandatory { --tw-scroll-snap-strictness: mandatory; } .snap-start { scroll-snap-align: start; } .overflow-x-scroll { overflow-x: scroll; } .scroll-smooth { scroll-behavior: smooth; } .bg-white { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="imageContainer" class="image-container w-[35dvh] h-[60dvh] bg-white mx-6 mt-6 overflow-x-scroll flex snap-x snap-mandatory scroll-smooth"&gt; &lt;img src="https://via.placeholder.com/400x600/ff7f7f/333333?text=Image+1" alt="" class="snap-start"&gt; &lt;img src="https://via.placeholder.com/400x600/7f7fff/333333?text=Image+2" alt="" class="snap-start"&gt; &lt;img src="https://via.placeholder.com/400x600/7f…
tagged with: http://stackoverflow.com/tag/html
score: 2
upvote count: 2
tagged with: scroll
tagged with: javascript
has title: How to solve this strange scroll problem?
answer count: 2
downvote count: 0
tagged with: css
has answer: http://stackoverflow.com/a/79033381

http://stackoverflow.com/q/79040807
type: Question
downvote count: 0
tagged with: reactjs
tagged with: html-to-pdf
answer count: 0
tagged with: css
score: 2
upvote count: 2
type: UnansweredQuestion
tagged with: react-to-pdf
favorite count: 0
has body: I am using the react-to-pdf library to export a specific div element as a PDF. However, when the content spans multiple pages, some elements are being split between pages (e.g., half of the element appears on one page and the other half on the next page). Is there a way to avoid this, so that if an element would be split, it automatically moves to the next page instead? I'm looking for a solution to keep the content intact across pages. Any help would be appreciated! What I tried: I tried adjusting CSS properties like page-break-inside: avoid; on the elements inside the div, hoping this would prevent them from being split across pages. However, this didn't seem to have any effect when exporting to PDF using the react-to-pdf library. What I expected: I was expecting the react-to-pdf library to automatically handle page breaks or for CSS properties like page-break-inside to prevent elements from being split across pages. Ideally, if an element doesn't fit completely on one page, it should be moved to the next page without splitting.
has title: How to prevent an element from being split between pages when exporting to PDF using react-to-pdf?
tagged with: http://stackoverflow.com/tag/pdf

http://stackoverflow.com/comment/139267970
type: Comment
has text: @user2804429 It's an improvement (no scrollbars!), but the main drawback is that the actual dimensions of the img will be unknown, and can vary from smaller than the available space (in which case it shouldn't enlarge) to very large (in which case it should shrink to exactly fit). I haven't read up on background images yet, but if they need to be applied through CSS, I think that would be a problem. A CGI script on the server generates the html and chooses a random photo for the tag. I will update my q to make this clear.
score: 0
comment on: http://stackoverflow.com/a/78986353
type: AnswerComment

http://stackoverflow.com/q/79048771
accepted answer: http://stackoverflow.com/a/79049248
favorite count: 0
tagged with: http://stackoverflow.com/tag/html
type: Question
answer count: 1
score: 2
downvote count: 0
type: AnsweredQuestion
has answer: http://stackoverflow.com/a/79049248
has title: How to apply custom list styles only to specific lists?
tagged with: css
upvote count: 2
has body: I'm knitting a Quarto document that includes a .css styling file and getting the bullet along with line feeds in my table of contents and my references. The bulleted lists appear correct. It has something to do with the .css file I'm using. My company's style includes a red slash for bulleted lists, which is what I'm going for. I don't want it in the TOC nor the references. How do I make the bullets in the TOC and references go away, as well as the line feed?: Here is my code: --- title: "Line Feed No Bueno" execute: echo: false warning: false format: html: css: mystyle.css toc: true --- ```{r} library(knitr) library(rmarkdown) ``` * List item A * List item B # References This document was generated using the R[^1] software environment and employs rmarkdown[^2] for formatting. [^1]: R Core Team (2024). _R: A Language and Environment for Statistical Computing_. R Foundation for Statistical Computing, Vienna, Austria. URL <https://www.R-project.org/>. [^2]: JJ Allaire, et al (2024). _rmarkdown: Dynamic Documents for R_. R package version 2.27. <https://github.com/rstudio/rmarkdown>. and here is my mystyle.css file... ul { list-style: none; /* Remove list bullets */ padding: 0; margin: 0; padding-bottom: 0px; font-size: 11pt; font-family: 'Aktiv Grotesk'; } li { padding-left: 0px; padding-bottom: 0px; padding-top: 0px; font-size: 11pt; font-family: 'Aktiv Grotesk'; } li::before { content: "/"; /* Insert content that looks like bullets */ padding-right: 8px; padding-top: 0px; padding-bottom: 0px; color: red; /* Or a color you prefer */ }
has comment: http://stackoverflow.com/comment/139382634
tagged with: quarto

http://stackoverflow.com/a/78952913
answers question: http://stackoverflow.com/q/78952690
type: Answer
score: 0
has comment: http://stackoverflow.com/comment/139235657
has body: Perhaps the Angular material implementation of the stepper will help. Elements can be skipped without the element in between being displayed. https://material.angular.io/components/stepper/overview

http://stackoverflow.com/comment/139130288
has text: what are the chances that the question and answer made the same mistake in markdown usage
score: 2
type: Comment
comment on: http://stackoverflow.com/q/78911557
type: QuestionComment

http://stackoverflow.com/comment/139315002
type: AnswerComment
comment on: http://stackoverflow.com/a/79011332
has text: I've upvoted your question. This is a good answer to the question asked.
type: Comment
score: 1

http://stackoverflow.com/comment/139367270
type: Comment
score: 0
comment on: http://stackoverflow.com/a/79037267
type: AnswerComment
has text: As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer).

http://stackoverflow.com/comment/139524271
has text: @Kaiido oh... thanks! ;) updated my answer with `encodeURIComponent()` results
type: Comment
score: 0
comment on: http://stackoverflow.com/a/79064223
type: AnswerComment

http://stackoverflow.com/comment/139134201
has text: @deceze Think like this: `nav>$>ul>li>$>ul>li>$>ul` $ = 'anything that is not ul in any number including nothing at all'
type: QuestionComment
comment on: http://stackoverflow.com/q/78913738
type: Comment
score: 0

http://stackoverflow.com/comment/139346514
type: Comment
has text: So, you don't want a linear gradient that has a transparent value, you want the image itself to become transparent in a gradient toward the edge of it's width?
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/79029341

http://stackoverflow.com/comment/139358658
has text: @yogi No, the problem is not that the padding isn't being animated. It's that because you're adding any padding at all, the text inside shifts.
comment on: http://stackoverflow.com/q/79035820
type: Comment
score: 0
type: QuestionComment

http://stackoverflow.com/comment/139317355
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/79004507
has text: You absolutely could add a 20px spacing without overflowing the page @JasonKelly. I would add another wrapper for `.season_tabs` that then has padding as my first choice of solution, if you just want spacing. If you want to force some margin, you could always use `calc(100dvh - 2 * 20px)` as your height and just add the `20px` margin. I find this css less readable though. If you need a written example, let me know and I can edit my answer.

http://stackoverflow.com/comment/139243083
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78971122
has text: By "dynamic" do you mean client side fetching? Is your dynamic content rendered on the server or client?
type: Comment

http://stackoverflow.com/comment/139146147
type: AnswerComment
has text: Thank you, @Sean. Will be taking that into account for future answers.
comment on: http://stackoverflow.com/a/78915335
type: Comment
score: 0

http://stackoverflow.com/a/78986609
score: 1
downvote count: 0
has body: CSS-Grid with grid-auto-flow: column seems to do the trick .item { background: #ffecb3; border: 3px solid #ffcc80; border-radius: 5px; padding: 8px; align-self: start; } .container { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: column; gap: 5px; background-color: #bbdefb; padding: 15px; } .item:nth-child(2) { grid-column: 2; height:40px; } .container > .item:nth-child(n + 3) { grid-column: 3; height: 60px; } Item 1 Item 2 Item 3 Item 4 Item 5
type: Answer
has comment: http://stackoverflow.com/comment/139268829
has comment: http://stackoverflow.com/comment/139268138
upvote count: 1
answers question: http://stackoverflow.com/q/78986368

http://stackoverflow.com/comment/139149869
type: Comment
comment on: http://stackoverflow.com/q/78922197
score: 0
has text: Column 1 contains an image (which keeps its ratio), columns 2 and 3 contain text so the height will increase. On a wide screen the texts in columns 2 and 3 are approximately the height of the image, on less wide screens these texts are much higher. So I want the text in column 3 to go below columns 1 and 2 with a width of 100%.
type: QuestionComment

http://stackoverflow.com/comment/139294443
type: Comment
type: AnswerComment
has text: @Chap, there is nothing in the source that prevents you from narrowing the window to 1px... I think it's actually a browser self implied limitation. Chrome does the same on Windows as well, yet you can simulate narrower sizes with the devtools.
score: 0
comment on: http://stackoverflow.com/a/78986353

timer
tag name: timer
type: Tag
tags question: http://stackoverflow.com/q/79018085
tags question: http://stackoverflow.com/q/79217566

isolation
tag name: isolation
tags question: http://stackoverflow.com/q/78997146
type: Tag

http://stackoverflow.com/q/79016625
tagged with: python
answer count: 0
tagged with: css
tagged with: ag-grid
type: UnansweredQuestion
has body: Background I previously had streamlit-aggrid 0.3.4.post3 installed and my code worked as expected. The columns would autosize to fit the table container. Problem I updated my library to streamlit-aggrid 1.0.5, and now it no longer works, When the table first loads, I catch a glimpse of the columns correctly fitting the container, but then streamlit refreshes immediately, and the table columns autofits to their contents, not to the container. What I've tried I've removed my custom_css, I've played around with the below two lines; commenting them out &amp; trying different options (NO_AUTOSIZE, FIT_CONTENTS, FIT_CONTAINER, etc). but no luck. gb.configure_default_column(autoSizeColumns=True, resizable=True) columns_auto_size_mode=ColumnsAutoSizeMode.FIT_ALL_COLUMNS_TO_VIEW, My guess is that there is nothing wrong with my code (given it works perfectly fine when I revert back to 0.3.4.post3). I suspect that in v1.0.5 there is another process somewhere that is overwriting the formatting. Help requested Anyone else experience this issue. anyone else find a way to resolve it? code # Format DF df = format_column_headers(df) # Unique Key u_key = id + '_grid' # Define Grid Options gb = GridOptionsBuilder.from_dataframe(df) gb.configure_selection('single', use_checkbox=True) gb.configure_pagination(enabled=False) # gb.configure_default_column(autoSizeColumns=True, resizable=True) grid_options = gb.build() # Apply a custom header class for col_def in grid_options['columnDefs']: col_def['headerClass'] = 'custom-header' # Apply a custom header class grid_response = AgGrid( df, gridOptions=grid_options, height=min(600, (3 + len(df.index)) * 30), width='100%', enable_enterprise_modules=False, key=u_key, theme='streamlit', custom_css=get_aggrid_css(), columns_auto_size_mode=ColumnsAutoSizeMode.FIT_ALL_COLUMNS_TO_VIEW, )
type: Question
tagged with: streamlit
has title: Streamlit Aggrid Autofit to container not working
score: 0

http://stackoverflow.com/a/78913342
score: 0
answers question: http://stackoverflow.com/q/78913099
has body: You are mixing "Web modular API" with "Web namespace API". Firebase provides two API surfaces for Web apps: JavaScript - namespaced. This is the JavaScript interface that Firebase maintained for many years and is familiar to Web developers with older Firebase apps. Because the namespaced API does not benefit from ongoing new feature support, most new apps should instead adopt the modular API. JavaScript - modular. This SDK is based on a modular approach that provides reduced SDK size and greater efficiency with modern JavaScript build tools such as webpack or Rollup. You can read more at Understand Firebase for Web Now the issue in you firebase.jsm file is that you are importing modular API, but using namespace API properties in the file. Make the following changes(going through with modular API as it is the better choice): import { initializeApp } from "firebase/app"; import { getFirestore, collection } from "firebase/firestore" const firebaseConfig = { //firebaseconfig } const collectionName = "blogs" const app = initializeApp(firebaseConfig); export const db = getFirestore(app) export const blogsCollection = collection(db,collectionName) Now you can use the blogsCollection instance to interact with the collection. You can visit the following link, to learn how to interact with the modular API: Get started with Cloud Firestore.
type: Answer

http://stackoverflow.com/comment/139234363
has text: Yes I tried `console.log("Tested!");`. And it appears in the console that means the event handler is running. `alert('touched')` is also working, as it displays the message box stating `touched`. Tried using `click` same results. Making input field visual allows the keyboard to popup. But I think the mobile browsers key board works differently. To catch the keys accurately on mobile device browsers I need to make major changes to the code itself. Normally for now if I press any key on mobile keyboard it displays the `key` as `unidentified`.
type: QuestionComment
comment on: http://stackoverflow.com/q/78960221
type: Comment
score: 0

http://stackoverflow.com/comment/139325116
type: Comment
score: 0
type: QuestionComment
has text: Could you provide us with your used CSS too? [mininmal reproducible code](https://stackoverflow.com/help/minimal-reproducible-example)
comment on: http://stackoverflow.com/q/79017553

http://stackoverflow.com/comment/139405444
type: QuestionComment
comment on: http://stackoverflow.com/q/79061543
type: Comment
score: 0
has text: If you have fixed `max-height` what result do you expect with third button?

http://stackoverflow.com/comment/139136852
type: QuestionComment
comment on: http://stackoverflow.com/q/78915026
type: Comment
score: 0
has text: Could you please elaborate on "breaking the basic layout"? Adding sticky to both first row and column works for me (with `z-index` adjustment for the top left cell.)

http://stackoverflow.com/comment/139378661
type: Comment
score: 0
comment on: http://stackoverflow.com/a/79046701
type: AnswerComment
has text: Is this the recommended way. Like if I am writing a production code. That' where I am confused. In the documentation only 2 ways are specified either use sx or styled API

http://stackoverflow.com/comment/139315903
type: QuestionComment
has text: Same error happens.
comment on: http://stackoverflow.com/q/79012618
type: Comment
score: 0

http://stackoverflow.com/comment/139318771
type: Comment
type: QuestionComment
score: 0
has text: I've corrected this, but still no luck. Thanks for correcting this.
comment on: http://stackoverflow.com/q/79012295

http://stackoverflow.com/comment/139381431
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/79029341
has text: Yeah I realize this is an unsolvable problem. Would need the browser to add some sort of `mask-element: #my-image-scroller` sort of CSS mask _anchor_ thingy, so it only masked against a certain element. It masks against the whole coalesced DOM node stack under the `paginate-left`, etc.. So it fades to black :/

http://stackoverflow.com/a/78953858
has body: This applies the green color to .custom-class only when it's the child of a that is the :last-child in its container. .custom-class { div:last-child > & { color: green; } } Result Here is the compiled CSS with the accompanying HTML in a snippet: div:last-child > .custom-class { color: green; } Whatever Whatever Thing I want to select
type: AcceptedAnswer
score: 2
downvote count: 0
type: Answer
answers question: http://stackoverflow.com/q/78953739
accepted answer of: http://stackoverflow.com/q/78953739
upvote count: 2

http://stackoverflow.com/comment/139213056
comment on: http://stackoverflow.com/q/78956711
type: Comment
score: 0
type: QuestionComment
has text: // counting the amount of each hardware type amongst users $rhwcount=mysqli_query($dbc,$qhwcount); echo mysqli_num_rows($rhwcount) . ' '; } echo ' ';

http://stackoverflow.com/a/79025663
type: Answer
has body: Because element.style refers to the inline style of the element, not computed style. To get around this, either assign all images with an initial inline opacity, or check their live style instead. // --- Option 1: Check for inline style --- function lootDarken(x) { image = document.getElementById(x); if (image.style.opacity === "1") { image.style.opacity = "0.5"; } else { image.style.opacity = "1"; } } // --- Option 2: Check for computed style --- function lootDarken2(x) { const image = document.getElementById(x); const style = window.getComputedStyle(image); if (style.opacity === "1") { image.style.opacity = "0.5"; } else { image.style.opacity = "1"; } } // --- Option 1.2: You can also set inline style programmatically --- document.addEventListener("DOMContentLoaded", () => { document.querySelectorAll('img[id^="Loot"]').forEach((img) => { img.style.opacity = "1"; }); });
upvote count: 4
downvote count: 0
answers question: http://stackoverflow.com/q/79025615
score: 4

http://stackoverflow.com/comment/139327857
type: Comment
score: 0
has text: And post code and errors as text, so that it can be found.
type: QuestionComment
comment on: http://stackoverflow.com/q/79018918

http://stackoverflow.com/comment/139150622
has text: Not sure if this will actually work. When background-position is given in percent, that percentage value is not only applied on the container's dimensions, but the image dimension as well. https://developer.mozilla.org/en-US/docs/Web/CSS/background-position#regarding_percentages
score: 0
comment on: http://stackoverflow.com/q/78919901
type: QuestionComment
type: Comment

http://stackoverflow.com/comment/139383536
type: Comment
comment on: http://stackoverflow.com/q/79048767
score: 0
has text: I think it might help home in on the problem if you could create a minimal reproducible example. There's quite a bit in your code which may create new stacking contexts and so on.. We need to find the relevant bits. See https://stackoverflow.com/help/minimal-reproducible-example
type: QuestionComment

http://stackoverflow.com/a/78920180
has comment: http://stackoverflow.com/comment/139149959
type: Answer
downvote count: 0
upvote count: 1
has body: Try updating your import statement in App.jsx from: import team from "./pages/Team"; To: import Team from "./pages/Team"; Note the capitalization of the “T” in “Team” may be creating the issue you are experiencing.
answers question: http://stackoverflow.com/q/78920045
score: 1

http://stackoverflow.com/comment/139251937
type: QuestionComment
comment on: http://stackoverflow.com/q/78977012
type: Comment
score: 0
has text: Vuetify has flex order classes that can change the order of elements. You need to figure though when that order change should happen. Not sure if it can be done with vuetify's breakpoints somehow. Maybe adding css tag will help get more attention? Are you using v-rows with v-cols or something different?

http://stackoverflow.com/comment/139182538
comment on: http://stackoverflow.com/a/78935948
type: Comment
has text: Thank you. I think I may be able to work with this
score: 0
type: AnswerComment

http://stackoverflow.com/q/79044507
score: 0
has comment: http://stackoverflow.com/comment/139374618
answer count: 0
has body: Please tell me how to solve this problem: the block has a nested block in the upper left corner. I need the space between the nested block and the main block to be transparent, and all the corners of the main block to be rounded. only css solutions. Maybe someone has encountered this problem and is there a solution? Thank you!
has title: Transparent background and rounded corners css
linked to: http://stackoverflow.com/q/78916038
type: UnansweredQuestion
tagged with: css
tagged with: rounded-corners
type: Question
duplicate of: http://stackoverflow.com/q/78916038

http://stackoverflow.com/comment/139212858
type: Comment
comment on: http://stackoverflow.com/q/78956711
has text: Just as an aside to the issue, you should fix the quality of the HTML. Your table is invalid because it has additional unnecessary ` ` tags, it also contains ` ` and` ` which should not be there, and the `input` elements should not be witihn `small` tags. Finally, `font` tags and the `bgcolor` attribute were deprecated almost 20 years ago, use CSS instead. Similarly, don't use `onclick` attributes - bind your event handlers in JS, not HTML - however even even then you're using `button` element to redirect the page with JS, just use an `a` element and remove the need for JS at all
type: QuestionComment
score: 2

http://stackoverflow.com/q/78956922
type: UnansweredQuestion
linked to: http://stackoverflow.com/q/78690412
has answer: http://stackoverflow.com/a/78957031
type: Question
answer count: 1
tagged with: http://stackoverflow.com/tag/html
has title: Why are some of my paragraphs are formatted differently than others when site is viewed on my phone
score: 0
has comment: http://stackoverflow.com/comment/139213305
has body: I have a very weird thing and have no idea what could be causing it. Everything is fine on my PC but on my phone (Samsung) few, seemingly random paragraphs in the same div have a larger font size then others. Anybody has a clue what could be causing that? Tested on Firefox, Chrome and chromes views for portable devices. It looks fine there. I deleted browsing data on my phone multiple times so it's not stuff left behind from previous "versions" There is no other formatting for tags anywhere else in my styling nor in html file. p { font-family: "Crimson Text", "serif"; text-align: center; font-size: 4vw; color: rgba(0, 0, 0, 0.8); text-shadow: rgba(161, 231, 161, 0.5) 0 0 1px; } @media screen and (min-width: 800px) { p { font-size: 2vw; } } @media screen and (min-width: 1400px) { p { font-size: 1vw; } } Below: The long paragraph starting with "Listed" has a noticeably larger font on my phone then the other paragraphs. -A WALK TO THE SEA SIDE- Listed as the number one beach resort in Poland, situated at the Baltic Coast: Welcome to Sopot! We would love to bring our guests to where we had one of our first dates in Poland; Located just a 10 minute walk away from Hotel Rezydent, the Sopot Pier. 11:00 Meet-up at Hotel Rezydent 11:20-12:20 Strolling by the Pier Attire: Casual
has comment: http://stackoverflow.com/comment/139213398
tagged with: css
duplicate of: http://stackoverflow.com/q/78690412

http://stackoverflow.com/comment/139358628
comment on: http://stackoverflow.com/q/79035574
score: 0
has text: @dalelandry ive been dreading that...
type: Comment
type: QuestionComment

http://stackoverflow.com/q/78934033
has answer: http://stackoverflow.com/a/78934162
favorite count: 0
possible better answer: http://stackoverflow.com/a/78934162
type: Question
tagged with: http://stackoverflow.com/tag/html
upvote count: 2
type: AnsweredQuestion
tagged with: html-table
has answer: http://stackoverflow.com/a/78934131
accepted answer: http://stackoverflow.com/a/78934131
answer count: 2
tagged with: css
has title: Html table with header colpans doesn't render as expected
downvote count: 1
has body: I got this generated colspanish table scrolling inside a div on horizontal. Where the Auto 2 aggregated header column gets properly sized while Auto 1 doesn't. How do I force Auto 1 to look as Auto 2? Is this a html table bug? Note that it looks the same with or without the Radzen css styles injected everywhere. Thanks Art. Descrição dos Trabalhos Un Qtd P.Un P.Total Faturado Saldo Auto 1 Auto 2 Qtd Valor % Qtd Valor % No items.
score: 1

http://stackoverflow.com/q/78951136
upvote count: 0
type: UnansweredQuestion
favorite count: 0
has title: Tailwind styles don't load well when working on a React project for a long time
type: Question
tagged with: tailwind-css
tagged with: reactjs
has answer: http://stackoverflow.com/a/78955355
has body: I'm working on a React application, using Tailwind for styling. This issue happens when I've been developing for a while. For example, I add a container with hover:bg-red-900, and it works at first, but for some reason, that specific style stops working. Then if I change it from 900 to 800, it works fine, but if I switch back to 900, it gets 'stuck' in the error. I'm not sure if the problem is related to caching, memory, or something else. But it's frustrating, and it doesn't let me continue comfortably. To fix the error, I have to use inline styles or create a .css file... When it really shouldn't be necessary.
tagged with: styles
answer count: 2
score: -1
has comment: http://stackoverflow.com/comment/139203010
has answer: http://stackoverflow.com/a/78951645
tagged with: css
has comment: http://stackoverflow.com/comment/139202905
downvote count: 1

antd
type: Tag
tags question: http://stackoverflow.com/q/79048153
tags question: http://stackoverflow.com/q/78973373
tag name: antd
tags question: http://stackoverflow.com/q/79115133
tags question: http://stackoverflow.com/q/79270966
tags question: http://stackoverflow.com/q/79353477
tags question: http://stackoverflow.com/q/79399450
tags question: http://stackoverflow.com/q/79391702
tags question: http://stackoverflow.com/q/79540706

http://stackoverflow.com/q/79012481
type: UnansweredQuestion
favorite count: 0
type: Question
has title: React CSS Modules not applying active class to navbar menu
tagged with: http://stackoverflow.com/tag/html
score: 0
upvote count: 1
has comment: http://stackoverflow.com/comment/139317168
tagged with: reactjs
has comment: http://stackoverflow.com/comment/139315837
has body: I'm trying to toggle an active class on my navbar menu in a React component using CSS Modules, but the class isn't being applied as expected. The menu should slide in when I click on a hamburger button, but the active class does not seem to work. Here is the setup: import { useState } from "react"; import styles from './Navbar.module.css'; export function Navbar() { const [isActive, setIsActive] = useState(false); const toggleActiveClass = () => { setIsActive(!isActive); console.log('isActive:', isActive); // Check if the state is toggling console.log('styles:', styles); // Check if the styles are correctly imported }; const removeActive = () => { setIsActive(false); }; return ( Dev. Home Catalog All products Contact ); } Here is the css .navbar { display: flex; justify-content: space-between; align-items: center; background-color: #333; padding: 10px; } .logo { color: white; text-decoration: none; } .navMenu { list-style: none; display: flex; flex-direction: row; gap: 20px; position: absolute; top: 70px; left: -100%; transition: 0.7s ease-in-out; background-color: aliceblue; width: 100%; padding: 10px; } .active { left: 0; /* Make sure this is applied when active */ } .navLink { text-decoration: none; color: black; } .hamburger { display: none; flex-direction: column; cursor: pointer; } .bar { width: 25px; height: 3px; background-color: #fff; margin: 4px 0; transition: 0.4s; } @media (max-width: 768px) { .hamburger { display: flex; } .navMenu { flex-direction: column; left: -100%; /* Initially off-screen */ position: absolute; } .navMenu.active { left: 0; /* Slide in when active */ } } What I've Tried: I checked the state using console.log(isActive) and verified that the state is toggling correctly. I checked the imported CSS classes using console.log(styles) and confirmed that the active class is imported. I ensured that the active class is being applied conditionally in JSX with ${isActive ? styles.active : ''}. Expected Behavior: When I click on the hamburger me…
answer count: 0
tagged with: css
downvote count: 1

http://stackoverflow.com/q/79024929
tagged with: http://stackoverflow.com/tag/html
tagged with: typescript
score: 0
tagged with: sass
has title: Angular, Calculate width, center and offset for a div according to other divs
has comment: http://stackoverflow.com/comment/139345184
answer count: 0
tagged with: css
tagged with: angular
has comment: http://stackoverflow.com/comment/139339281
type: UnansweredQuestion
has body: I'm working on an Angular 13 app which has an option to see an org chart Here's the expected result The problem is that I have no Idea how to create those curvy lines that connects the parent node with its children. I think chatGPT doesn't have any idea neither because all the solutions didn't work Here's the code that I have right now. The component is called stakeholders-map-node and YES, it renders itself in the ng-container {{ node.name }} <path *ngIf="i < centerIndex" d="M 600,0 C 600,100 0,0 0,75" stroke="#71CAAE" stroke-width="5" fill="none" vector-effect="non-scaling-stroke"> centerIndex" d="M 0,0 C 0,100 600,0 600,75" stroke="#71CAAE" stroke-width="5" fill="none" vector-effect="non-scaling-stroke"> Note that I added an SVG with the correct curvy line for each node and updated the path according if the children is before the center or after it. the function is this get centerIndex() { if (!this.node) { return 0 } const length = this.node.childrenCount(); if (length % 2 === 0) { const lowerHalf = (length / 2) - 1; const upperHalf = lowerHalf + 1; return (lowerHalf + upperHalf) / 2; } return Math.floor(length / 2); } All the svgs reacts according to the width of the container. The thing is that I need to calculate the Div's width from the center of the card childrend to the center of the #nodeLinesContainer then create it and add the offset. The thing is that the child node can be expanded with its own children and the whole div will change its width, the curvy needs to react to this change. In less words, I want to create divs in this way Note that the green divs are the ones with the class .line and should be displayed in the way that the image says. Also note that the childs will not have the same width, it depends if the child is expanded or not. The div needs to react to the width change.
type: Question

http://stackoverflow.com/a/79069277
answers question: http://stackoverflow.com/q/79064314
score: 0
has body: Answering the question from above, (next js build tool works directly out of the box without an external build tool) creating a separate webpack configuration file, instead modify the existing next.config.mjs in the project A or the project where you want to install the project B as a dependency. I am using Next.JS version 14.2.12. Here, is the script for next.config.mjs: import path from 'path'; import MiniCssExtractPlugin from 'mini-css-extract-plugin'; /** @type {import('next').NextConfig} */ const nextConfig = ({ webpack: (config) =&gt; { // Add custom loader for .tsx files config.module.rules.push({ test: /\.tsx?$/, // For .ts and .tsx files use: [ { loader: 'babel-loader', options: { presets: ['next/babel'], // Use Next.js Babel preset }, }, ], }); // Add custom loader for .scss files config.module.rules.push({ test: /\.css$/, use: [ MiniCssExtractPlugin.loader, { loader: 'css-loader', options: { publicPath: (resourcePath, context) =&gt; { return path.relative(path.dirname(resourcePath), context) + &quot;/&quot;; }, }, options: { modules: { namedExport: false, localIdentName: &quot;[name]__[contenthash]__[local]&quot;, }, importLoaders: 1, }, }, ], include: /\.module\.css$/, }); config.module.rules.push({ test: /\.css$/, use: [ MiniCssExtractPlugin.loader, 'css-loader', ], exclude: /\.module\.css$/, }); config.module.rules.push({ test: /\.scss$/, use: [ MiniCssExtractPlugin.loader, { loader: 'css-loader', options: { publicPath: (resourcePath, context) =&gt; { return path.relative(path.dirname(resourcePath), context) + &quot;/&quot;; }, }, options: { modules: { namedExport: false, localIdentName: &quot;[name]__[contenthash]__[local]&quot;, }, importLoaders: 1, }, }, 'sass-loader' ], include: /\.module\.scss$/, }); config.module.rules.push({ test: /\.scss$/, use: [ MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader' ], exclude: /\.module\.scss$/, }); // Add MiniCssExtractPlugin to the Webpack plugins array config.plugins.push( new MiniCssExtractPlugin({ fil…
type: Answer

http://stackoverflow.com/q/79030517
tagged with: css
type: Question
tagged with: twitter-bootstrap
has body: I have a Bootstrap progress bar. I’d like the last div, which has the classes bar bar-warning to occupy everything that isn’t already occupied by the other inner divs without me having to do calculations. i’d like to get something like width: everything-else, however obviously that isn’t valid css. i’ve tried different solutions, such as making the width auto, 100%, -100% etc, but none of these work sadly. An alternative solution would be to just put the text into that area and center it relative to the non-filled area. However, I couldn’t do that either.
has comment: http://stackoverflow.com/comment/139349866
favorite count: 0
has answer: http://stackoverflow.com/a/79050777
answer count: 2
downvote count: 0
has comment: http://stackoverflow.com/comment/139350930
has answer: http://stackoverflow.com/a/79050825
has title: How can I automatically fill remaining space in a Bootstrap 2 progress bar?
type: UnansweredQuestion
score: 1
upvote count: 1
tagged with: twitter-bootstrap-2

http://stackoverflow.com/q/79016813
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139323963
has title: How do I make a multiline paragraph element dynamically shrink horizontally to remove white space?
type: Question
tagged with: paragraph
answer count: 1
tagged with: http://stackoverflow.com/tag/html
tagged with: line-breaks
has answer: http://stackoverflow.com/a/79017177
duplicate of: http://stackoverflow.com/q/37406353
linked to: http://stackoverflow.com/q/79016707
score: 0
has body: Let me explain... I'm building out a representation of a SMS chain in html. Here is what I've got: @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"); body { background-color: black; margin: 0; font-family: "Roboto", sans-serif; font-size: 2rem; } section { margin: 0 auto; background-color: white; max-width: 1080px; display: flex; flex-direction: column; padding: 20px; } article { display: inline-block; padding: 10px 20px; border-radius: 30px; width: fit-content; max-width: 75%; } article p { margin: 0; word-wrap: break-word; } article.them { color: black; background-color: lightgray; align-self: flex-start; } article.me { color: white; background-color: darkblue; align-self: flex-end; } /* Smaller margin between consecutive messages from the same sender */ article.me + article.me, article.them + article.them { margin-top: 3px; } /* Standard margin between different senders */ article.me + article.them, article.them + article.me { margin-top: 20px; } Lorem ipsum, dolor sit amet. Lorem ipsum. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nostrum tempore excepturi dolore nam? Odio architecto tempora maiores corrupti nihil autem necessitatibus natus consequuntur adipisci hic nisi quaerat voluptate, incidunt beatae? Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat officia delectus sequi quo quas! When the text bubble has only a few words, it shrinks to the appropriate width. This is because the article is set to shrink to the width of the content with both display: inline-block; and width: fit-content;. But with the multi-line text bubbles, the bubble will always be the maximum width (75% of the section width). This is because the paragraph will take up the full allowed width, despite the fact the line broke early to keep words together. This leaves some white space off to the right of the multiline text bubbles, depending on your scree…
linked to: http://stackoverflow.com/q/37406353
tagged with: css
has comment: http://stackoverflow.com/comment/139323923
has comment: http://stackoverflow.com/comment/139323947

http://stackoverflow.com/q/78937437
has title: Expanding and Reducing only width image size velo framework
type: UnansweredQuestion
has answer: http://stackoverflow.com/a/78939223
type: Question
answer count: 1
score: 0
tagged with: velo
has body: I am currently using Wix studio with the velo framework. I have an image I would like to smoothly expand by 70% when it is hovered over, and reduce by 50% when it is not being hovered over. I am encountering issues with the image.style.width not being available to produce this type of animation .
tagged with: css

http://stackoverflow.com/comment/139250219
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78976656
has text: If you modify the .Shell's grid-template-rows property, you'll find that the border position of .Box does not meet expectations. @Siguza

http://stackoverflow.com/comment/139324759
has text: "Just to be clear, are you trying to "push" the content to the side and have the menu appear, while keeping the header and footer in their same positions?" Yes, such that the content becomes wider, and the menu disappears. Everything then fits when the menu button is pressed.
type: Comment
score: 0
comment on: http://stackoverflow.com/q/79012295
type: QuestionComment

http://stackoverflow.com/comment/139267805
type: Comment
score: 0
type: AnswerComment
has text: Perhaps actually show an image to make this a better answer
comment on: http://stackoverflow.com/a/78986353

http://stackoverflow.com/comment/139280783
score: 0
has text: Add in another container that is 100vh?
type: QuestionComment
comment on: http://stackoverflow.com/q/78993016
type: Comment

http://stackoverflow.com/q/79029522
tagged with: css
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139347942
score: 1
has comment: http://stackoverflow.com/comment/139347177
favorite count: 0
tagged with: javafx
has title: Button Text Insets in JavaFX
type: Question
tagged with: scenebuilder
answer count: 1
has comment: http://stackoverflow.com/comment/139346850
has body: I feel like this is probably a problem with a simple fix, or I'm missing something obvious. I'm rusty (getting back in to some casual programming after years away) and I can't for the life of me figure it out. I have a bunch of buttons that I want to keep smallish, but the text always truncates because of the insets between the border of the button and the text itself. How would I go about reducing those insets so the text is closer to the borders of the button? I'm using SceneBuilder and it doesn't have an option to change them, the only one I've found that might do it is greyed out. The Button Brigade I've been scouring the web for an answer but can't find one, since insets and buttons have a lot of relationships. Any help would be greatly appreciated!~ EDIT: So this will make a button that truncates the text even though that text would fit in the button if not for the insets within the button. I hope that clarifies things, sorry, pretty new to the site.~ <?xml version="1.0" encoding="UTF-8"?> <?import javafx.scene.control.Button?> <?import javafx.scene.layout.Pane?>
downvote count: 0
tagged with: button
has answer: http://stackoverflow.com/a/79033166
has comment: http://stackoverflow.com/comment/139350636
linked to: http://stackoverflow.com/q/26850828
upvote count: 1

theming
tag name: theming
tags question: http://stackoverflow.com/q/78985003
type: Tag
tags question: http://stackoverflow.com/q/79176267
tags question: http://stackoverflow.com/q/79523158

http://stackoverflow.com/comment/139174266
type: AnswerComment
has text: Oh I see, that does make sense, thank you so much for such a detailed reply! I guess I'll just try to use the exact values then.
comment on: http://stackoverflow.com/a/78933172
type: Comment
score: 0

http://stackoverflow.com/comment/139181414
comment on: http://stackoverflow.com/q/78939256
has text: @RUMBIDZAIMUKUNGUNUGWA I made a live snippet of your own code ... the header is already fixed and remains on top while scrolling the content.. so it's not clear which expectations aren't met
type: Comment
score: 1
type: QuestionComment

http://stackoverflow.com/a/78932346
score: 1
type: AcceptedAnswer
answers question: http://stackoverflow.com/q/78932299
type: Answer
has body: Derived from sol answer. You can wrap this on a class and style the slider. We can style the thumb using ::-webkit-slider-thumb, where we use the bootstrap variable --bs-warning. SCSS: .custom-slider { /* Add application styles & imports to this file! */ input[type='range'] { -webkit-appearance: none; } input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; background: var(--bs-warning); height: 20px; width: 20px; margin-top: -8px; } } HTML: Zoom Stackblitz Demo
downvote count: 0
upvote count: 1
accepted answer of: http://stackoverflow.com/q/78932299

http://stackoverflow.com/comment/139409979
type: QuestionComment
comment on: http://stackoverflow.com/q/79064015
type: Comment
has text: What does "*enhance it by using HTML etc.*" mean? What exactly do you wish to accomplish? Please clarify your question to ask about a specific problem.
score: 3

http://stackoverflow.com/a/78951310
score: 0
has comment: http://stackoverflow.com/comment/139202918
answers question: http://stackoverflow.com/q/78951292
has body: References : https://www.w3schools.com/cssref/sel_gen_sibling.php https://www.w3schools.com/cssref/sel_element_pluss.php You need to use ~ selector. NOTE: You forgot to change second span tag class name. .hide { display: none; min-height: 200px; } .hide2 { display: none; border: solid #ff8900 2px; border-radius: 20px; padding: 20px; min-height: 200px; } .myLINK:hover ~ div.hide { display: block; color: gray; } .myLINK2:hover ~ div.hide2 { display: block; color: gray; } Display an Element on Hover Hover over me 1. | Hover over me 2. I am shown when someone hovers over the div above. I am shown when someone hovers over the div above2.
upvote count: 2
has comment: http://stackoverflow.com/comment/139202888
downvote count: 2
type: Answer

http://stackoverflow.com/comment/139173715
score: 0
type: QuestionComment
type: Comment
has text: Please have a look at your question and reinstate the elements I think you were telling us about - they are interpreted as HTML and so we can't see the text - e.g. . Use the {} in the editor to insert code text.
comment on: http://stackoverflow.com/q/78935245

http://stackoverflow.com/comment/139233906
has text: If you need the floated element's parent to grow to contain the float, then you need clearfix. Otherwise you can just use the simple method.
score: 1
comment on: http://stackoverflow.com/a/78967957
type: Comment
type: AnswerComment

http://stackoverflow.com/comment/139253913
comment on: http://stackoverflow.com/a/78978797
type: Comment
has text: @mykaf this is a feature of Vue SFCs, not the same as the HTML standard. I've added a link to the answer so this is more clear.
type: AnswerComment
score: 1

http://stackoverflow.com/comment/139402473
type: Comment
score: 0
comment on: http://stackoverflow.com/q/79060035
type: QuestionComment
has text: Screenshot? [check](https://hackernoon.com/how-to-take-screenshots-in-the-browser-using-javascript-l92k3xq7)

http://stackoverflow.com/comment/139390484
comment on: http://stackoverflow.com/a/79028670
has text: This worked. I ended up revamping the individual letter svgs, normalize them to a decent scale that I can more easily work off with. Now facing other related issues. progress... yay!
type: Comment
score: 0
type: AnswerComment

http://stackoverflow.com/q/78991117
has comment: http://stackoverflow.com/comment/139276568
score: 0
has body: Update: After playing around with the code a little, the top line of the CSS is causing the issue, specifically the margin:0; If I remove it, the logo moves to the left. Otherwise the logo begins at the end of the top menu. So, the whole time it looked like it was centered, it's actually just being pushed over by the top menu. Original post: I have a logo in my header with a navigation bar above and below. The logo always is centered. How do I get this to align left. I have updated from the original post to add some code that was missing. * { margin:0; padding: 0; outline: 0; } body, html { height: 100%;} footer, header, menu, nav, section { display: block; } .shell { width: 100%; margin: 0 auto; } .container { background: #fff; } #header { height: 82px; float: left; } #logo { height: 80px; display: block; border: 2px solid silver; } #navigation, #topnav { height: 37px; font-weight: 600; background-color: #1B2A47; } #navigation ul, #topnav ul { list-style: none; list-style-position: outside; } #navigation ul li, #topnav ul li { float: left; padding-right: 2px; line-height: 40px; font-size: 13px; } #navigation ul li a, #topnav ul li a { display: block; padding: 0 22px 0 22px; color: #FFFFFF; text-decoration: none; } #navigation ul li a:hover, #topnav ul li a:hover { color: #7DC33A; text-decoration: none; } #navigation ul li.first a, #topnav ul li.first a { padding-left: 30px; } #navigation a.nav-btn { display: none; } Link Link Link Menu Link Link Link
has title: Align Header Logo to the left
answer count: 2
has answer: http://stackoverflow.com/a/78992641
tagged with: http://stackoverflow.com/tag/html
has answer: http://stackoverflow.com/a/78991158
type: UnansweredQuestion
type: Question
tagged with: css
has comment: http://stackoverflow.com/comment/139279129

http://stackoverflow.com/comment/139296893
score: 1
type: Comment
has text: Because layers work on the actual element, not on classes (or ids).
comment on: http://stackoverflow.com/a/79000845
type: AnswerComment

http://stackoverflow.com/a/79066212
answers question: http://stackoverflow.com/q/79066173
downvote count: 0
type: Answer
upvote count: 1
has body: float shouldn't be used in that situation. Instead, you can apply display: flex to your .container to place the children of that element side by side. One of the default settings for flex is justify-content: flex-start, which (judging from your description) is most likely what you want. Otherwise you could add that parameter and change its setting. Also align-items is a setting you might wat to change from its default normal to baseline or center (just try that to see the effects). Additionally, you might want to add some margin-left to .pfmr-info to create a little distance between the image and the name. (see my example below) html { width: 100%; height: 100%; } body { width: 100%; height: 100%; font-family: 'Noto Sans', sans-serif; background-color: #1b1b1b; } .container { background-color: #313131; width: auto; height: calc(100%-30%); padding: 20px; display: flex; } .img-wrapper { width: 144px; height: 216px; } img { width: 100%; height: 100%; } .pfmr-info { margin-left: 10px; } Cherie Deville
score: 1

http://stackoverflow.com/a/78943063
answers question: http://stackoverflow.com/q/78940428
type: Answer
score: 0
has body: One solution would be adding a div:

http://stackoverflow.com/a/78963199
answers question: http://stackoverflow.com/q/78963024
has comment: http://stackoverflow.com/comment/139230986
type: Answer
score: 2
downvote count: 0
has comment: http://stackoverflow.com/comment/139228965
has comment: http://stackoverflow.com/comment/139232679
has comment: http://stackoverflow.com/comment/139228578
has comment: http://stackoverflow.com/comment/139228781
upvote count: 2
has body: You can simply set the block height to 2lh and overflow:hidden. Showed the difference in the example: div { width: 248px; margin-bottom: 12px; outline: solid; overflow: hidden; &:nth-child(1) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } &:nth-child(2) { height: 2lh; } } Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, commodi! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, commodi!
has comment: http://stackoverflow.com/comment/139227937

http://stackoverflow.com/comment/139153185
type: QuestionComment
type: Comment
has text: @Mike'Pomax'Kamermans, I wasn't asking *what* font is applied but rather *why* certain font is applied
comment on: http://stackoverflow.com/q/78923710
score: 0

http://stackoverflow.com/comment/139261313
comment on: http://stackoverflow.com/a/78982748
type: Comment
score: 0
type: AnswerComment
has text: Added code snippet to your answer. Thats not working.

http://stackoverflow.com/a/78960225
answers question: http://stackoverflow.com/q/78960206
upvote count: 1
has comment: http://stackoverflow.com/comment/139219692
has comment: http://stackoverflow.com/comment/139219713
downvote count: 1
type: Answer
score: 0
has body: You can solve your problem by replacing the code below with your javascript code: document.getElementById('equiv').addEventListener('click', () =&gt; { var v = document.getElementById('equiv-submenu'); v.style.display = (v.style.display === 'none' || v.style.display === '') ? 'block' : 'none'; });
has comment: http://stackoverflow.com/comment/139219686
has comment: http://stackoverflow.com/comment/139219710

http://stackoverflow.com/q/78983131
tagged with: css-selectors
has title: applying the same selectors on sibling have a slightly different behaviour
score: 0
tagged with: styled-components
accepted answer: http://stackoverflow.com/a/78983721
type: Question
has body: In my app, I have a component in which there are only two cards and I want to animate them when they are hovered and clicked. I noticed that when one of them is currently active (clicked) the other one still can be hovered so I wrote this: // apply the hover styles based on this condition => my data-active="true" AND I don't have any sibling AFTER-ME(~) AND BEFORE-ME(+) which has data-activ="true" &[data-active="true"], &:hover:not(:has(+ [data-active="true"])), &:hover:not(:has(~ [data-active="true"])){ flex: 2 auto; } but this has a bug, which is when the first card in the DOM is active=true and the latter in the DOM is active=false, this latter STILL can be hovered but not vice-versa, the result is actually satisfying but not as perfect as I want it, what I care about the most now is to know why the latter/second card behaves differently?! What I tried: 1- I tried to separate the conditions to ensure they were not conflicting with each other but got the same behaviour. 2- I thought there was a missing condition that may the one caused this bug but none of what I came up with solved it. maybe I still missing something, I don't know. 3- tried to make each card a element so that I could make use of the disabled but couldn't change it from disabled=false to true and vice-versa from JavaScript. here is a video to give a clearer idea of how the behaviour is different, the active card has a pink background: The Full Code: Card component (the onClick function is to handle the dataset.active): <OfferCard onClick={handleClick} heading="Front-End Services"/> <OfferCard onClick={handleClick} heading="Back-End Services"/> OfferCard component: const Card = styled(motion.button)` max-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; backdrop-filter: blur(2.5rem) saturate(0%); -webkit-backdrop-filter: blur(2.5rem) saturate(0%); background-color: rgba(176, 123, 255, 0.63); border-radius: var(--md-radius); box-shadow: 0px 0px 0.5rem…
answer count: 1
type: AnsweredQuestion
tagged with: reactjs
tagged with: pseudo-class
has answer: http://stackoverflow.com/a/78983721
tagged with: css

http://stackoverflow.com/a/78950828
has body: Here's a better solution: use perspective on the parent of the three children set transform-origin bottom on the first child set transform-origin top on the third child use CSS rotate to i.e: 45deg on the X axis with values 1 (first child) and -1 (third child) .words { font-size: 2rem; perspective: 1000px; /* add perspective to the parent */ width: max-content; margin: auto; > div { text-align: center; padding: 1rem; background: #ddd; outline: 2px solid red; &:nth-child(1) { transform-origin: bottom; rotate: 1 0 0 45deg; /* x y z angle */ } &:nth-child(3) { transform-origin: top; rotate: -1 0 0 45deg; } } } Turn this into something No need to create extra useless wrapping DIVs.
downvote count: 0
type: Answer
answers question: http://stackoverflow.com/q/78950245
upvote count: 1
score: 1

http://stackoverflow.com/q/78924442
has body: I have a problem with z-index. I have a navigation bar and when I hover over a text, a dropdown menu appears. Menu and everything works as expected. The problem is when the menu is created, it won't go "above" the hero section elements. You can see both rendered; dropdown menu AND the heroes section and the elements in it. Here is the code snippets for both navbar element and hero section respectively: import React, { useState } from "react"; import { AnimatePresence, motion } from "framer-motion"; import { DownOutlined } from "@ant-design/icons"; import { Link } from "react-router-dom"; interface NavbarProps { children: React.ReactNode; href: string; FlyoutContent?: React.FC; }; const Example = () => { return ( Projects <DownOutlined className="py-auto" /> ); }; const FlyoutLink: React.FC<NavbarProps> = ({ children, href, FlyoutContent }) => { const [open, setOpen] = useState(true); const showFlyout = FlyoutContent && open; return ( setOpen(true)} onMouseLeave={() => setOpen(false)} className="relative w-fit h-fit !z-50" > {children} {showFlyout && ( <motion.div initial={{ opacity: 0, y: 15 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: 15 }} transition={{ duration: 0.3, ease: "easeOut" }} className="absolute left-1/2 top-12 !-translate-x-1/2 w-[calc(100vw-17px)] !z-50" > <FlyoutContent /> </motion.div> )} ); }; const ProjectTypes = () => { return ( /01 GitHub Projects /02 School Projects /02 School Projects /02 School Projects ); }; export default Example; import { Button } from "antd"; import { Link } from "react-router-dom"; const HeroSection = () => { return ( Hi! I'm Patrik Bajzík I am a full stack programmer and software developer based in Trnava, Slovakia. Contact Me ); }; export default HeroSection; Of course, these elements are going in App.tsx right after like this: <> <Navbar /> <HeroSection /> </> I tried several things, but this is what doesn't work at all: z-indexing every div tag and even giving them !important tag for those tags, that were…
tagged with: padding
tagged with: css
tagged with: z-index
has title: Z-index for dropdown menu using ReactTS and TailwindCSS not working
has answer: http://stackoverflow.com/a/78924846
score: 0
type: Question
tagged with: http://stackoverflow.com/tag/html
answer count: 1
type: AnsweredQuestion
tagged with: tailwind-css
accepted answer: http://stackoverflow.com/a/78924846

http://stackoverflow.com/comment/139377194
comment on: http://stackoverflow.com/q/79045866
has text: Did you check out the `only` value? [documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme#only) - "*Forbids the user agent from overriding the color scheme for the element.*"
type: Comment
score: 0
type: QuestionComment

http://stackoverflow.com/a/79012781
type: Answer
score: 0
has body: So, as of today, I don't think there is a clean way to work around this. Ths is not really an answer, but on my side, so far, the only thing I was able to do is detect when we are in that messed up mode. In React, you can do something like this: const [simulatedDarkMode, setSimulatedDarkMode] = useState(false); useEffect( () => { const img = new Image(); img.onload = function checkMode() { const canvas = document.createElement('canvas'); canvas.width = 1; canvas.height = 1; const ctx = canvas.getContext('2d'); ctx.drawImage(img, 0, 0); const [r] = ctx.getImageData(0, 0, 1, 1).data; // Test if that white image got turned into grey by a dark mode module setSimulatedDarkMode(r < 200); }; img.src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9IndoaXRlIi8+PC9zdmc+'; }, [], ); This is based on this answer. But even when you know that samsung Internet is in dark mode, there is no easy thing you can do. Even if you adopt a dark themed palette, that browser still comes in and messes it up, making things unreadable. I guess that if you have text only content, their algorithm works ok, but if you have graphics, colored svg, colors gradients, etc. and your palette does not match their line of thoughts, you're out of luck for now :-( The worst thing being that they could disable this "feature" if they wanted to. Just go to Settings > Labs > Use website dark theme, and you'll see they are thinking about it. But for now, you can either: ask your users to activate this lab setting when you detect the "feature" is on (lol) or mess up your color palette until you find one that Samsung doesn't completely kill Quite sad to see how deaf Samsung is to this issue. Edit: So I ended up working around this "feature" as much as possible by: detecting this mode changing all my light colors with dark colors when in this mode fine tuning the colors using Chrome debugger on a PC When playing …
answers question: http://stackoverflow.com/q/78989459

http://stackoverflow.com/comment/139400215
type: AnswerComment
has text: I've marked this as answering the question, but I'd still like to hear if anyone has any ideas about sanitizing CSS in general....
comment on: http://stackoverflow.com/a/79057991
type: Comment
score: 0

http://stackoverflow.com/comment/139198443
has text: @NINE What do you mean by standard?
type: QuestionComment
type: Comment
comment on: http://stackoverflow.com/q/78948750
score: 0

http://stackoverflow.com/comment/139293669
comment on: http://stackoverflow.com/q/78998815
score: 1
type: Comment
has text: Please edit your post to include a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example), preferably as a [stack snippet](https://meta.stackoverflow.com/q/358992/2518285).
type: QuestionComment

http://stackoverflow.com/q/78993853
tagged with: css
has comment: http://stackoverflow.com/comment/139287114
type: Question
has comment: http://stackoverflow.com/comment/139286925
has body: I'm currently working on a frontend application using Next.js and would like to utilize global SCSS files instead of the default module.scss approach to avoid class name collisions. Everything works fine in development, but when I push to production, a lot of my CSS styling breaks. From what I understand, Next.js compiles all CSS into a single file during the build process, which might be causing some issues with rule precedence. My question: How can I configure Next.js to respect my SCSS rules and ensure that certain SCSS styles are applied only to specific subclasses (without resorting to CSS modules)? I found this snippet in the Next.js documentation that suggests adding the following to next.config.js: const path = require('path') module.exports = { sassOptions: { includePaths: [path.join(__dirname, 'styles')], }, } However, when I try this, I get the following error: referenceerror: require is not defined in ES module scope, you can use import instead Has anyone encountered this issue before, or do you have any advice on how to resolve it? Note: I’m close to finishing the project, so switching back to CSS modules isn't an option. Thanks in advance for your help! PS: I am also currently using tailwind, I do not know if that may be an issue
score: 0
answer count: 0
has title: Next.js: SCSS not working properly in production, how to avoid CSS collisions?
tagged with: sass
type: UnansweredQuestion
tagged with: next.js

http://stackoverflow.com/comment/139403976
type: QuestionComment
has text: A linear gradient as background, maybe? https://stackoverflow.com/a/61361501/1427878
comment on: http://stackoverflow.com/q/79060854
type: Comment
score: 0

http://stackoverflow.com/comment/139214111
type: Comment
score: 0
type: AnswerComment
has text: @tosalet thing is, that's _not_ the easiest option :-). Cos you have to adapt it - you can't put a CSS _selector_ into there (there's no need if you think about it, because it's being applied only to the element the style attribute belongs to), you just put the attribute(s) you want, e.g.: `style="color: red;"` . But that's a nasty way to do it because it makes your disaprate styles harder to find and review and debug later, and of course if you want to apply the same thing to several elements, it makes it impossible without lots of repetition. So that's why it's generally only a last resort
comment on: http://stackoverflow.com/a/78956442

http://stackoverflow.com/q/78967040
has title: How to set absolute element inside display grid correctly?
downvote count: 1
accepted answer: http://stackoverflow.com/a/79029558
tagged with: grid
has body: I have below code snippet, what I want to achieve is that .child which is panel should not be shown, to the top of .content class, however, .child is setting at top of .data class. I don't understand why this is happening. According to my understanding, absolute element takes boundary of nearest relative element, which is .content in my case. Still my .child element is taking top value from .data class. I don't understand why. Is there something I am doing wrong here, if yes how can I achieve below case, what I want to do is that no matter how much we have scrolled, I want panel to be shown always in visible screen area of .content element. .main { display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto minmax(0, 100%); grid-template-areas: "header" "menu" "content"; height: 75vh; } .header { grid-area: header; } .menu { grid-area: menu; } .content { grid-area: content; overflow-y: auto; background-color: #f5f5f5; position: relative; } .child { position: absolute; top: 0; right: 0; width: 40%; background-color: aqua; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; grid-template-areas: "head" "body" "footer"; height: 100%; } .child .head { grid-area: head; background-color: red; } .child .body { grid-area: body; overflow-y: scroll; } .child .footer { grid-area: footer; background-color: red; } .data { position: relative; margin-bottom: 15px; display: flex; flex-wrap: wrap; gap: 15px; } .btn { display: block; margin-block: 15px; } HTML + CSS This is header This is menu showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel showPanel s…
favorite count: 0
type: Question
tagged with: http://stackoverflow.com/tag/html
has answer: http://stackoverflow.com/a/79029558
answer count: 1
type: AnsweredQuestion
has comment: http://stackoverflow.com/comment/139344273
score: 0
has comment: http://stackoverflow.com/comment/139344470
tagged with: css-position
upvote count: 1
has comment: http://stackoverflow.com/comment/139346876
tagged with: css

http://stackoverflow.com/q/79049418
answer count: 0
tagged with: css
has body: I have custom margin property it name container. .m-container, .p-container, .-m-container Also I have a variable like this: --space-container: clamp(1rem, 3vw, 3rem); I've set it in tailwind like this: export default { padding: { container: ["1rem", "var(--space-container)"] }, margin: { container: ["1rem", "var(--space-container)"] }, } You see above, I have set 1rem fallback for were browsers are doesn't support clamp feature. It was works well on the p-container and m-container, you can see output css below; .pr-container { padding-right: 1rem; padding-right: var(--space-container); } .ml-container { margin-left: 1rem; margin-left: var(--space-container); } But negative margin doesn't compile well to css: .-ml-container { margin-left: calc(1rem, var(--space-container)* -1); } Without forgetting: Above CSS code is incorrect. Expected behavior is: .-ml-container { margin-left: -1rem; margin-left: calc(var(--space-container)* -1); } It's a bug or I have a wrong?
type: UnansweredQuestion
has title: Tailwind theme extending fallback bug on "negative margins"
type: Question
tagged with: tailwind-css
score: 0

http://stackoverflow.com/q/78918002
type: Question
has comment: http://stackoverflow.com/comment/139141492
has body: I want to create a table with min-height: 90vh, so it don't get smaller than that particular height but when I do that the columns height gets increased and occupy space as per table height and that's issue. I don't want each column height exceed more then 30px. Also I have footer at bottom which should be at bottom of the table and columns need to align at top. So there should be white space between columns and footer. Below image represents expected result. And this is what I have tried till now. Also please share why height applied on th & td is not working. body, html { background-color: white; margin: 0; padding: 0; height: 100%; } table { width: 80%; min-height: 90vh; border-collapse: collapse; table-layout: fixed; } th, td { border: 1px solid black; text-align: center; height: 30px; font-size: 14px; line-height: 30px; } th { background-color: #f2f2f2; } .subject-column { width: 50%; } .marks-column { width: 30%; } Document Sr no Date Subject Marks 1. 26-8-24 Maths B2 ( 60-70 Percentage ) 1. 26-8-24 Maths B2 ( 60-70 Percentage ) 1. 26-8-24 Maths B2 ( 60-70 Percentage ) 1. 26-8-24 Maths B2 ( 60-70 Percentage ) Total B2 Thank You in advance.
answer count: 1
type: AnsweredQuestion
tagged with: http://stackoverflow.com/tag/html
accepted answer: http://stackoverflow.com/a/78918300
tagged with: html-table
score: 0
has title: Create a table with empty space at bottom
tagged with: css
has answer: http://stackoverflow.com/a/78918300

http://stackoverflow.com/a/79010927
has body: Logically you should have to use the ariaPosInSet property with the help of CSS ::before, + a thin non-breaking space to hold the aria together with its text on text-align:justify; in the display. (use '\0000A0' for a simple non-breaking space) p.Body-Text { -epub-text-align-last : left; font-size : 1em; font-style : normal; font-variant : normal; font-weight : normal; margin-bottom : 0.5em; margin-top : 0.5em; orphans : 1; text-align : justify; text-indent : 1.5em; line-height : 1.2; } span[aria-posinset]::before { content : attr(aria-posinset) '\00202F'; /* non-breaking thin space */ vertical-align : super; /* make superscript */ font-size : .8em; color : #7f7f7f; } Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
has comment: http://stackoverflow.com/comment/139313074
has comment: http://stackoverflow.com/comment/139314483
has comment: http://stackoverflow.com/comment/139314742
type: Answer
score: 0
answers question: http://stackoverflow.com/q/79010665

http://stackoverflow.com/comment/139348877
type: AnswerComment
has text: I said also that I can not use pseudo-elements because of the inline-style neccessary. I know that pseudoelements are the correct solution but can not be used in inline styles. Sorry, if i did not explained it better, but in occasions, which i have no saying in, the inlinestyles are mandatory. I hate it myself. And I wrote ths comment, because I like to flag an answer as solution and want to tell, why I can not flag it as solution. Sorry if I offended you.
score: 2
type: Comment
comment on: http://stackoverflow.com/a/79030730

http://stackoverflow.com/comment/139322165
comment on: http://stackoverflow.com/q/79012295
type: QuestionComment
has text: Just to be clear, are you trying to "push" the content to the side and have the menu appear, while keeping the header and footer in their same positions? If so, you might want to look at `translate` instead of margins. https://codepen.io/cjhaas/pen/poMoWmj. Alternatively, if you just want something to appear "nearer" to the user, you might want to consider a modern modal, which is represented by the `dialog` tag: https://codepen.io/cjhaas/pen/gOVOGQB
type: Comment
score: 0

http://stackoverflow.com/a/78920325
type: Answer
score: 0
answers question: http://stackoverflow.com/q/78920209
accepted answer of: http://stackoverflow.com/q/78920209
has body: Consider applying a vertical flex layout, so that the container for the cards and map can grow/shrink in the space left by the remainder of the navigation bar. my navbar Card Card Card Card Card Card Card Card Card map I'll assume you are using Tailwind v3 (instead of v1 in your snippet), as implied by the arbitrary value classes used.
type: AcceptedAnswer

http://stackoverflow.com/comment/139148973
type: Comment
has text: As for your question: You seem to have multiple sets of the same images in your code, all with the same ID. Your javascript only manipulates the first set, which apparently is shown when the viewport width is less than 992 pixels and hidden when the viewport gets wider. Remember ID's have to be unique, only a CLASS can be reused multiple times.
comment on: http://stackoverflow.com/q/78921718
score: 4
type: QuestionComment

http://stackoverflow.com/comment/139178596
has text: Yes! now it is working thankyou...
score: 0
type: Comment
type: AnswerComment
comment on: http://stackoverflow.com/a/78937609

hybrid
tags question: http://stackoverflow.com/q/78966785
type: Tag
tag name: hybrid

http://stackoverflow.com/comment/139340246
type: QuestionComment
score: 1
comment on: http://stackoverflow.com/q/79023183
type: Comment
has text: select2 can both use the ` ` already populating the ` ` you are binding or just use an external data source when you initialize it. Here there's a full guide on that https://select2.org/data-sources .. and here in particular https://select2.org/data-sources/arrays .. by the way if you ask another question focusing on what you have done so far with select2 and what you are missing, you'll easily receive a better feedback. You may also find already existing answer on that matter here on SO

http://stackoverflow.com/a/78984974
has body: It would've been nice if you provided an example of what you tried yourself. Anyway, here's an (js) idea: console.log(`wait a sec...`); setTimeout(disableAllAndMonitor, 2000); // use a monitoring function to periodically // check the 'disabled' state of the checkboxes function monitorDisabledCBs() { const disabledCheckboxes = document .querySelectorAll(`.filter-form__group input[type="checkbox"]:not(:disabled)`); if (disabledCheckboxes.length < 1) { console.clear(); console.log(`There you have it, div.filter-form__group is hidden`); return document.querySelector(`.filter-form__group`).style.display = `none`; } return setTimeout(monitorDisabledCBs, 500); } function disableAllAndMonitor() { document.querySelectorAll(`input[type="checkbox"]`) .forEach(cb => cb.disabled = `disabled`); monitorDisabledCBs(); } But I think you'd better use Roko C. Buljan's answer
type: Answer
answers question: http://stackoverflow.com/q/78980450
score: 0

http://stackoverflow.com/comment/139322239
has text: I have just fixed it, i forgot to close the when making my example for StackOverflow, also if it still only shows one image, try to expand your fiddle
type: Comment
score: 0
comment on: http://stackoverflow.com/q/79015820
type: QuestionComment

http://stackoverflow.com/q/79039117
has comment: http://stackoverflow.com/comment/139366217
tagged with: css
upvote count: 2
has comment: http://stackoverflow.com/comment/139366200
tagged with: flexbox
tagged with: css-grid
has comment: http://stackoverflow.com/comment/139364382
has title: How can I create such a block using flex or grid?
has answer: http://stackoverflow.com/a/79039619
has comment: http://stackoverflow.com/comment/139364374
favorite count: 0
downvote count: 2
type: Question
answer count: 1
type: AnsweredQuestion
has body: I want to create a block that contains 3 main elements: a header, a list, and a chart. When the screen width drops below a certain value, I want the order of the elements to change. Here's how it should look: Here are the requirements: .chart should have a minimum height. .chart__datasets can have any height depending on the number of items. .chart__canvas should always maintain a 1:1 aspect ratio (only on large screens). .chart__datasets and .chart__canvas should always be horizontally centered within the block. .chart__datasets should take up 70% of .chart width, and the .chart__canvas 30%. There should be at least a 20px gap between the .chart__header and the .chart__datasets. I have created a basic layout. I used flex for everything. The header has position: absolute, and I wrapped the list and the chart in a div with the class chart__body and centered them relative to each other within it. But there's an issue: if the list (dataset) has a large height, it starts overlapping with the header, and I don't know how to fix this yet. html, body, .page { height: 100%; } body { margin: 0; } .page { display: flex; align-items: center; justify-content: center; background: #ecf0f1; } .chart { width: 450px; padding: 15px 15px; min-height: 200px; display: flex; flex-direction: column; position: relative; background: #fff; border: 1px solid #7f8c8d; } .chart__title { position: absolute; top: 0; left: 15px; background: #3498db; width: 50%; height: 25px; } .chart__body { width: 100%; height: 100%; display: flex; align-items: center; flex-grow: 1; column-gap: 15px; } .chart__datasets { width: 70%; height: 50px; background: #f1c40f; } .chart__canvas { background: #2ecc71; width: 100px; height: 100px; } @media (max-width: 600px) { .chart__body { margin-top: 60px; flex-direction: column-reverse; align-items: normal; row-gap: 15px; } .chart__datasets { width: 100%; flex-grow: 1; } .chart__canvas { width: 100%; height: 50px; } }
score: 0
accepted answer: http://stackoverflow.com/a/79039619

http://stackoverflow.com/q/78956780
has title: CSS make an absolute positioned container´s width fit-content of its insides
type: Question
type: AnsweredQuestion
has comment: http://stackoverflow.com/comment/139212986
has comment: http://stackoverflow.com/comment/139213511
score: 0
answer count: 2
has body: I want to position a div with dynamic text and dynamic position inside a container. Placing the div is not a problem, but I expected it to adjust its width to its content and its size according to the parent container. How can I make the green box auto fit its width to the length of the text inside of it? (Size of the green box shall by dynamic based on the size of the outer box and the font size in the green box shall be dynamic based on the height of that green box.) I made a jsfiddle for it here: https://jsfiddle.net/pdrasyoj/ dynamic button text
has answer: http://stackoverflow.com/a/78956881
possible better answer: http://stackoverflow.com/a/78956881
tagged with: css
has answer: http://stackoverflow.com/a/78957149
accepted answer: http://stackoverflow.com/a/78957149

http://stackoverflow.com/comment/139304583
comment on: http://stackoverflow.com/a/78998631
type: Comment
score: 0
has text: This changes the text as well, which is not what the OP wants (look at the image in the question).
type: AnswerComment

http://stackoverflow.com/q/78993557
linked to: http://stackoverflow.com/q/36130760
duplicate of: http://stackoverflow.com/q/33454533
type: UnansweredQuestion
has body: The item-outer-container element has a smaller width than its child div, so why doesn't a horizontal scrollbar appear? https://jsfiddle.net/v32h5ko7/ #container { position: absolute; top: 50%; right: 50%; transform: translateY(-50%) translateX(50%); padding: 20px; border: solid 1px; border-radius: 100px; width: 90%; display: flex; align-items: center; &>* { width: calc(100%/3); } } span { height: 40px; border-radius: 20px; } #blu-button-container { flex-shrink: 1; span { display: block; width: 150px; background-color: blue; } } #title { min-width: 200px; text-align: center; font-weight: bold; } #item-outer-container { overflow: auto; height: 50px; flex-shrink: 1; display: flex; align-items: center; justify-content: end; div { display: flex; flex-wrap: nowrap; align-items: center; justify-content: end; gap: 5px; span { width: 40px; background-color: red; } } } TITLE
has title: Why is this overflow not detected?
duplicate of: http://stackoverflow.com/q/36130760
type: Question
tagged with: http://stackoverflow.com/tag/html
has answer: http://stackoverflow.com/a/78993644
score: 0
tagged with: scroll
has answer: http://stackoverflow.com/a/78993718
linked to: http://stackoverflow.com/q/33454533
answer count: 2
tagged with: overflow
tagged with: css

http://stackoverflow.com/q/79029787
type: UnansweredQuestion
type: Question
answer count: 1
tagged with: wordpress
has comment: http://stackoverflow.com/comment/139347855
has comment: http://stackoverflow.com/comment/139351178
has answer: http://stackoverflow.com/a/79056626
has title: Unable to load admin styles in a WordPress block plugin
score: 0
tagged with: css
tagged with: wordpress-gutenberg
has body: I am using this code to enqueue my WordPress admin specific stylesheet. function enqueue_neatwp_admin_styles() { wp_enqueue_style( 'plugin-admin-style', plugin_dir_url( __FILE__ ) . 'build/styles/admin.css', array(), '1.0.0' ); } add_action( 'admin_enqueue_scripts', 'enqueue_plugin_admin_styles' ); This works if there is already a CSS file in the build/styles directory. However, the npm run start command will not copy the CSS file in the src/styles directory to the build/styles directory. I cannot use the src/styles directory link because I am guessing the plugin will only ship with the contents of the build directory. How do I ensure that my admin CSS is included and loaded? Thanks.

http://stackoverflow.com/a/78940173
type: Answer
answers question: http://stackoverflow.com/q/78938496
score: 0
has body: As per @AHaworth’s comment, the key here is width: 100vmin, and I would use a grid to implement the rows and columns. body, html { height: 100%; } body, .column { display: flex; justify-content: center; align-items: center; } body { margin: 0; background-color: gray; color: white; font-weight: bold; font-size: 3vw; } #grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; border: 3px solid black; width: 100vmin; aspect-ratio: 1; box-sizing: border-box; } .row { display: contents; } .darkGray .column { background: #333; } .lightGray .column { background: silver; } .red { color: red; border: 2vw solid red; } .yellow { color: gold; border: 2vw solid gold; } .green { color: green; border: 2vw solid green; } .blue { color: blue; border: 2vw solid blue; } Red Yellow Green Blue After running this snippet, use the full page link to test the responsive behaviour.

http://stackoverflow.com/comment/139248662
type: QuestionComment
comment on: http://stackoverflow.com/q/78975340
has text: In what way does this question differ from https://stackoverflow.com/questions/78967894/why-is-my-order-of-transformation-applied-affecting-the-way-my-code-behaves apart from the fact that it appears there is a different typo now. Are you using your browser devtools to see exactly what CSS is being applied and what is not, plus any JS errors?
type: Comment
score: 0

http://stackoverflow.com/q/79000303
score: 0
has body: It's evident that solid demarkation of yellow is not properly faded How to make it decently fade when I add an offset? html::before { content: &quot;&quot;; display: block; position: sticky; top: 0; border-top: 50px solid yellow; border-image: linear-gradient(to bottom, yellow 40%, transparent) 120; }
has title: CSS - How to make linear-gradient more uniform when there is offset
tagged with: css
has comment: http://stackoverflow.com/comment/139294735
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139293746
has answer: http://stackoverflow.com/a/79000441
type: Question
answer count: 1

http://stackoverflow.com/q/78949149
type: UnansweredQuestion
has title: Why are the objects overlapping footer when the height is smaller? CSS issue
type: Question
has comment: http://stackoverflow.com/comment/139203047
tagged with: http://stackoverflow.com/tag/html
score: 0
has body: I'm having a problem with div elements in HTML and CSS and it's a problem relating to the responsiveness of the code on smaller screens. The page has the main content that is fixed to the top (all okay with it), it has a place where icons of some programming knowledge are, a place where projects cases/link for modals are (about six, which are structured to be aligned 3/3 or 2/2/2 or 1/1/1/1/1/1 as the screen demands) and the footer. The issue is that everything aligns well in screens with smaller heights, but the project cases always overlap the footer. There is a screenshot attached to this question showing what I'm trying to explain. I will show the code in html and after the css for it: Here are the divs in html: body { margin: 0; padding: 0; height: 420vh; background-color: rgb(15, 16, 43); /* Background color */ overflow: hidden; font-family: 'Poppins', sans-serif; color: white; display: flex; align-items: center; justify-content: center; flex-direction: column; box-sizing: border-box; font-size: 27px; font-weight: 700; overflow-x: hidden; overflow-y: auto; position: relative; } /* PROJECT DIV FOR WIDTH =&gt;768px WORKS WELL*/ .skills-projects { margin: 0 auto; /* Centraliza a div */ padding: 40px 20px; /* Ajuste o padding lateral para 20px */ width: 100vw; max-width: 1200px; /* Define uma largura máxima */ margin: 0; /* Remove margens */ background-color: white; /* Fundo branco para a seção */ padding: 40px 40px; /* Espaçamento interno */ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra para profundidade */ border-radius: 8px; /* Cantos arredondados */ } .portfolio-container { display: flex; /* Layout flexível */ flex-wrap: wrap; /* Permite quebra de linha */ justify-content: center; /* Centraliza os projetos */ gap: 15px; /* Espaço entre os projetos */ margin-bottom: 300px; /* Espaço abaixo da seção de projetos */ } .title-portfolio-container { font-size: 40px; margin-top: 130px; color: #2c3e50; text-align: center; /* Center align the portfolio title */ ma…
tagged with: css
answer count: 0
tagged with: iphone

http://stackoverflow.com/a/79007678
has body: It worked after putting flex container after tab.
answers question: http://stackoverflow.com/q/79006007
type: Answer
score: 0

http://stackoverflow.com/comment/139405296
score: 1
type: Comment
type: QuestionComment
has text: @MartinBean I fully agree, but the question is a good and interesting question without it telling us exactly why this is needed. The word "should", in your first comment, implies there's something actually wrong with the placement. I don't think there is. It is a deviation from the convention, or what you perceive as such, no more.
comment on: http://stackoverflow.com/q/79060918

http://stackoverflow.com/q/79043896
answer count: 2
tagged with: css
has title: Tailwind flex item adjust to max width
has answer: http://stackoverflow.com/a/79051720
type: UnansweredQuestion
type: Question
has body: Got this flex component on Tailwind and want to ensure the item inside always use the full with even if the content is not enough widht, basically cover all the red box area. Leslie Alexander leslie.alexander@example.com Co-Founder / CEO Last seen 3h ago If for example the text of the email is long enough it extend the item width but want to have it always.
tagged with: tailwind-css
has answer: http://stackoverflow.com/a/79043940
score: 0

http://stackoverflow.com/comment/139205003
type: Comment
comment on: http://stackoverflow.com/q/78952516
score: 3
type: QuestionComment
has text: Can you please provide the HTML and CSS code which produces the issue. Also the image seems to be showing the actual problem..?

http://stackoverflow.com/comment/139351448
type: Comment
score: 0
has text: Somehow I was just hoping there existed a solution that just somehow uses native scrollbars and doesn't require to hide them, put custom html elements and hook them up with js .... already had to go that way with other elements like sliders to make them work as desired, but probably in the end I will have to go this route. Thanks - I'll definitely check the library out.
type: QuestionComment
comment on: http://stackoverflow.com/q/79029100

http://stackoverflow.com/q/79052168
score: 0
accepted answer: http://stackoverflow.com/a/79052238
favorite count: 0
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139388347
tagged with: bootstrap-4
tagged with: javascript
has title: CSS content aligns incorrectly when only one line of text
upvote count: 1
has answer: http://stackoverflow.com/a/79052238
has comment: http://stackoverflow.com/comment/139388360
tagged with: css
has comment: http://stackoverflow.com/comment/139388378
type: Question
has body: I've got the below code. Everything is working pretty great except when the browser is wide enough that the text is only one line, the "posts" get misaligned. Example: I've messed with all the CSS I can think of and I can't get it to align correctly. Thanks in advance for your help! Link to jsfiddle: https://jsfiddle.net/BHolm/n68r5xst/167/ /*Feed*/ .feed-row { padding-bottom: 40px; padding-right: 20px; } .feed-mt .post-submitted-info { font-weight: 700; text-align: center; line-height: 1; position: relative; } .post-submitted-info { column-width: 55px; margin-left: 10px; } .submitted-date { border-right: 1px solid #c2c2c2; } .submitted-date { margin-top: 12px; } .post-submitted-info .year { padding-bottom: 8px } .post-submitted-info .month, .post-submitted-info .year { font-size: 14px; text-transform: uppercase; } .feed-mt .post-submitted-info .day { font-size: 29px; font-weight: 900; padding-bottom: 2px; } .feed-main-content { padding-left: 75px; margin-top: -75px; } .field-item{ font-weight: normal; border-bottom: 1px solid #acacac; } .feed-main-content .header { }
answer count: 1
downvote count: 1
type: AnsweredQuestion

http://stackoverflow.com/comment/139135151
type: Comment
has text: @imhvost thanks for the link, it solved my issue, once again thanks a lot
comment on: http://stackoverflow.com/q/78911526
type: QuestionComment
score: 1

http://stackoverflow.com/comment/139214172
score: 5
type: QuestionComment
comment on: http://stackoverflow.com/q/78957424
type: Comment
has text: You could add transparent borders to begin with, and then only change the border-color.

http://stackoverflow.com/comment/139406276
type: QuestionComment
type: Comment
score: 0
comment on: http://stackoverflow.com/q/79061543
has text: So are you saying that button 3 should get as wide as it needs to to show the content, regardless of e.g. the width available in the viewport?

http://stackoverflow.com/q/79046794
has body: I'm using Angular 18 and PrimeNG. I have a PrimeNG dropdown that is visually being clipped by a PrimeNG table footer. I've tried to apply a higher z-index on a variety of p-dropdown css classes, but with no success. Has anybody had any success showing all of a dropdown? The following is an example: StackBlitz Dropdown-Demo
type: Question
answer count: 1
type: AnsweredQuestion
accepted answer: http://stackoverflow.com/a/79051643
tagged with: typescript
linked to: http://stackoverflow.com/q/50566274
score: 0
has title: How to apply z-index on PrimeNG dropdown
tagged with: css
has comment: http://stackoverflow.com/comment/139378814
has comment: http://stackoverflow.com/comment/139378737
has answer: http://stackoverflow.com/a/79051643
has comment: http://stackoverflow.com/comment/139386493
tagged with: primeng
has comment: http://stackoverflow.com/comment/139387378
tagged with: angular

http://stackoverflow.com/q/78905381
score: 0
tagged with: safari
has body: I created Table with react-table package but I have one problem, connected with safari height recognizing. it shows that safari reads the height in inspect, but it does not react to it. when I enlarge it for example to 100px, it does not give any reaction. how to fix ? It works pretty fine in google chrome, microsoft edge but safari gives some problems. any solutions for this ? I tried to change thead to div, but it collapsed my full table, and I expect it to have 43 height in safari.
has title: Safari not recognizing table thead's height with tailwind css
tagged with: tailwind-css
tagged with: reactjs
tagged with: javascript
has answer: http://stackoverflow.com/a/78905851
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139118949
tagged with: css
type: Question
answer count: 1

http://stackoverflow.com/q/78932133
type: UnansweredQuestion
score: 0
has body: I'm recently using the Blockify Theme for Wordpress and am using Woocommerce. I would like to show 2 columns for the related products on mobile. Here's an example URL: https://superveggie.es/producto/tofu-mercadona/ The products at the bottom should show 2 columns in mobile. By modifying this line of code and adding a "display:flex" to it I manage for the products to not stack up, instead they display one beside the other in a row: @media (max-width: 600px) { .wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid { grid-template-columns: 1fr; **display:flex;** } } The next step I guess would be to assign a 50% width to each product column but this is where I get stuck. I have also checked this post here but the solution provided is not working for me: woocommerce related products 2 column issues for mobile Does someone know how I could fix this? Any help would be greatly appreciated! Thanks!
type: Question
has comment: http://stackoverflow.com/comment/139168185
linked to: http://stackoverflow.com/q/62100325
tagged with: wordpress
has comment: http://stackoverflow.com/comment/139171128
answer count: 0
tagged with: css
has title: Woocommerce: show 2 columns on mobile for related products
tagged with: woocommerce
tagged with: flexbox
tagged with: mobile

http://stackoverflow.com/comment/139194964
comment on: http://stackoverflow.com/a/78946594
has text: The text shadow is also a nice idea, but it looks a bit blurry and if I reduce the blurriness, it looks like a double-up of the text (I guess that's how a "text-shadow" is supposed to look like ;-)).
type: Comment
score: 0
type: AnswerComment

http://stackoverflow.com/q/78919901
downvote count: 0
has comment: http://stackoverflow.com/comment/139146394
tagged with: background-position
has comment: http://stackoverflow.com/comment/139145218
upvote count: 1
has comment: http://stackoverflow.com/comment/139146600
has comment: http://stackoverflow.com/comment/139145144
has comment: http://stackoverflow.com/comment/139145338
has comment: http://stackoverflow.com/comment/139165439
has comment: http://stackoverflow.com/comment/139158067
has comment: http://stackoverflow.com/comment/139150622
answer count: 0
tagged with: background-size
tagged with: css
has comment: http://stackoverflow.com/comment/139145989
has title: How to make background-position and background-size responsive by using percentages in css?
has body: I want to avoid hardcoding values for background-position and background-size with pixels and I'm trying to set both using percentages. However, if I make it work on one viewport size, say desktop, things work unexpected on tablet/mobile viewport size - that is, I need to use different values for the y-coordinate of background-position for different viewport width in order to retain the same position (otherwise image disappears as the viewport gets narrow). In the below code I use percentages for the green card only, the rest are just for demo purposes. How can I have a single value for the y-part of background-position for all screen sizes without writing media queries with some magic values and maintain the same background image position? Please run the snippet in full page mode and resize the window to reproduce. Expected behaviour on smaller screen sizes (background-position-y is 132% on the screenshot, whereas I use 200% in the example): .section { padding-block: 5rem } .container { --padding: 2rem; --max-width: 70rem; margin-inline: auto; width: min(100% - var(--padding), var(--max-width)) } .flow>:where(:not(:first-child)) { margin-top: var(--flow-spacer, 1rem) } .bg-brand-accent-100 { background-color: #9ffeeb } .bg-yellow-300 { background-color: #ffe2b8 } .bg-pink-300 { background-color: #f7b5cb } .bg-cyan-300 { background-color: #9fe8fe } .card { border-radius: 1rem; box-shadow: none; display: grid; gap: .5rem; line-height: 1.7; padding: 1.5rem } .card, .card__heading { color: #404040; font-family: system-ui } .card__heading { font-size: 2rem; font-weight: 700; letter-spacing: 0; line-height: 1.1; text-transform: none } .offset-grid { display: grid; gap: 1.5rem } @media screen and (min-width:45em) { .offset-grid { grid-template-columns: repeat(3, 1fr) } .offset-grid>:nth-child(4n+2), .offset-grid>:nth-child(4n+3) { grid-column: span 2 } } .offset-grid p { max-width: 32ch } .offset-grid a { text-decoration: underline } .feature-cards>:first-of-type { backgr…
has comment: http://stackoverflow.com/comment/139145890
type: UnansweredQuestion
score: 1
favorite count: 0
type: Question
has comment: http://stackoverflow.com/comment/139150205
has comment: http://stackoverflow.com/comment/139150138

http://stackoverflow.com/q/78989748
tagged with: vb.net
tagged with: asp.net-mvc
type: UnansweredQuestion
score: 1
has title: ASP.Net MVC - TypeError $(...)camera is not a function
favorite count: 0
type: Question
downvote count: 0
tagged with: javascript
upvote count: 1
has body: I am trying to get Camera slideshow to work in an ASP.Net MVC view. I have successfully got it working in a normal HTML environment. It is called 'camera wrap'. I am using version 5.2.9.0 of MVC in Visual Studio 2022. I've been working with VB.Net for a long time but I am relatively new to the use of HTML, CSS and Javascript. I understand their interaction and what they do. I particularly want to use MVC (VB.Net). I literally copied a working HTML doc into my MVC view. I have added the relevant css, javascript and images to the solution. The HTML includes the relative references to the scripts and css file. I have also tried loading them all using the 'bundles' option. I have also changed the $ sign for 'jQuery' in the function call. The script for this is... &lt;script&gt; jQuery(function () { jQuery('#camera_wrap_1').camera({ thumbnails: true }); jQuery('#camera_wrap_2').camera({ height: '400px', loader: 'bar', pagination: false, thumbnails: true }); }); &lt;/script&gt; I get the following error... TyepError with this stack trace error. stacktrace I'm hoping this is something that is due to my lack of MVC knowledge, I have tried unsuccessfully to search for this issue in various locations. This is the HTML I copied... &lt;!DOCTYPE html&gt; &lt;!-- Camera is a Pixedelic free jQuery slideshow | Manuel Masia (designer and developer) --&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot; &gt; &lt;title&gt;Camera | a free jQuery slideshow by Pixedelic&lt;/title&gt; &lt;meta name=&quot;description&quot; content=&quot;Camera a free jQuery slideshow with many effects, transitions, adaptive layout, easy to customize, using canvas and mobile ready&quot;&gt; &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt; &lt;!--/////////////////////////////////////////////////////////////////////////////////////////////////// // // Styles // ////////////////////////////////////…
linked to: http://stackoverflow.com/q/38497347
answer count: 0
tagged with: css
has comment: http://stackoverflow.com/comment/139274048

http://stackoverflow.com/q/79002937
tagged with: reactjs
score: 0
answer count: 2
linked to: http://stackoverflow.com/q/71942822
tagged with: material-ui
tagged with: css
has answer: http://stackoverflow.com/a/79003656
accepted answer: http://stackoverflow.com/a/79003656
has body: I need to center the options from a MUI autocomplete but I tried many ways but still a failure. Also I need to wrap each option in a border. I tried to add it to inputProps and in a style paper component but it didn't work this is my code so far: const PlacementCell = ({ value, placements, notAvailable = false, readOnly = false }: PlacementCellProps): ReactElement => { const { palette, spacing } = useTheme(); const [selectedPlacement, setSelectedPlacement] = useState<Placement | undefined>(value || placements[0]); const handlePlacementChange = (event: React.SyntheticEvent, newValue: Placement | null) => { if (newValue !== null) { setSelectedPlacement(newValue); } }; const CustomListbox = styled('ul')({ [`& .${autocompleteClasses.option}`]: { display: 'flex', justifyContent: 'center', }, }); return ( <Autocomplete options={placements} getOptionLabel={(option) => option.placementName} renderInput={(params) => ( <TextField placeholder="Select" {...params} InputProps={{ ...params.InputProps, disableUnderline: true, }} inputProps={{ ...params.inputProps, style: { textAlign: 'center' }, }} sx={{ [`& .${autocompleteClasses.inputRoot} .MuiInput-input`]: { padding: '12px', }, variant: 'bodySmall.default', [`& .${autocompleteClasses.popupIndicator}`]: { right: 12, ['&:hover']: { backgroundColor: 'transparent', }, }, }} /> )} // PaperComponent={CustomPaper} fullWidth disableClearable onChange={handlePlacementChange} /> ); }; Here is an image of what I have to display Thanks for any suggestion!
type: Question
has title: How can I center the options from a MUI autocomplete and to wrap them in a border?
has answer: http://stackoverflow.com/a/79003625
type: AnsweredQuestion
possible better answer: http://stackoverflow.com/a/79003625

http://stackoverflow.com/q/78966886
type: UnansweredQuestion
type: Question
has title: Neumorphism Transition Animation
score: 0
has comment: http://stackoverflow.com/comment/139232109
answer count: 0
has body: I'm trying to animate my button when its hovered, but the transition animation is not working. Idle State Hovered State Here is the CSS: body { background-color: #292D32; } #btn { cursor: pointer; font-size: 2em; text-align: center; border:none; background-color: #292D32; color: #BEC6BE; display: flex; justify-content: center; align-items: center; width: 400px; padding: 10px; border-radius: 50px; margin-top: 100px; margin-left: 100px; box-shadow: 10px 10px 15px #1C1E20, -10px -10px 15px #3A3E42; transition: box-shadow 0.2s ease; } #btn:hover { box-shadow: inset 10px 10px 15px #1C1E20, inset -10px -10px 15px #3A3E42; } I tried using transition as described above but it didn't work; I was expecting a smooth animation where the button as shown in the second picture
tagged with: css
has comment: http://stackoverflow.com/comment/139231998

http://stackoverflow.com/comment/139378702
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/79046701
has text: In v4 we could do this using mui styles easily by just adding a class for each element. But if the hierarchy is too long, it can be a little complex.
type: Comment

http://stackoverflow.com/comment/139400402
type: QuestionComment
comment on: http://stackoverflow.com/q/79058968
type: Comment
score: 0
has text: Is the items class on the img itself or is img nested within an items class?

http://stackoverflow.com/a/78947295
has comment: http://stackoverflow.com/comment/139196091
type: Answer
has body: You could use grid to create the two 'halves' of the layout and then position the elements within their appropriate areas. This snippet simply replaces the flex on the parent with a two column grid and then centers the image within its area. You can of course move the text within its area if you want more spacing but the result looks fairly like the desired picture you gave. Who We Are With more than a decade of experience, we are a trusted team of business and financial planners to help you start your business or retirement in Bali, Indonesia and other islands For narrow viewports I imagine you'll want to include some media query which perhaps goes to a single column grid so the text doesn't get too squished. [Note I haven't tried to mend the HTML - use something like the W3C validator to iron out problems.]
score: 0
has comment: http://stackoverflow.com/comment/139210522
has comment: http://stackoverflow.com/comment/139195942
answers question: http://stackoverflow.com/q/78946665
has comment: http://stackoverflow.com/comment/139210449

http://stackoverflow.com/comment/139215276
score: 1
type: Comment
comment on: http://stackoverflow.com/q/78957954
type: QuestionComment
has text: you need to use javascript for this, basically check for focus out events on the cells and when that happen do X calculations, and if the cell is empty, then do nothing. You need to check other stuff aswell, like replace undefined values to 0, and validate that the user can only put numbers...

http://stackoverflow.com/comment/139322997
type: QuestionComment
has text: That's not the point I was trying to make. You're asking us for a bit of code for a platform which you tell us virtually nothing about. All we know is it doesn't support Javascript. When asking a question here, sharing as much information as possible is the idea. Are you using some PDF rendering engine? Which one? Perhaps there is an alternative method we can suggest if you share enough information. This kind of problem is often called an [XY-problem](https://xyproblem.info/). It happens a lot here.
type: Comment
score: 0
comment on: http://stackoverflow.com/q/79016277

http://stackoverflow.com/comment/139136531
type: QuestionComment
comment on: http://stackoverflow.com/q/78915126
has text: Roboto is a google font, why not use that way?
type: Comment
score: 0

http://stackoverflow.com/comment/139408235
type: AnswerComment
comment on: http://stackoverflow.com/a/79044672
type: Comment
score: 0
has text: I can't seem to achieve the results with viewport units. So far the js solution is working, but there is a **flicks** when you navigate, as the script executes. I feel like a CSS only solution would work better, but it seems a body.zoom value is more compatible.

http://stackoverflow.com/q/79064419
score: 0
tagged with: css
upvote count: 2
has body: I tried making a Navbar where the menu items should be on the right and the logo on the left. But it seems impossible. No matter what I try, the elements don't move in the direction that I want. What's wrong with my code? Can someone please help me? I make it with float: right that doesn't work. If I try to fix it with "display: flex", the items stay on the bottom of the header. The same applies for the logo. The Logo should be more on the right side, but it doesn't want to move. Is there something wrong with my HTML? :root { --background: #D9E4EF; --header: #62ABF5; --header2: #1062B3; } * { box-sizing: border-box; margin: 0; padding: 0; font-family: "Arimo", sans-serif; } body { background-color: var(--background); height: 100vh; } header { width: 100%; position: fixed; top: 0; left: 0; padding: 20px 10%; z-index: 100; background: var(--header); } .menu-nav { color: var(--background); display: flex; justify-content: end; align-items: center; text-decoration: none; } .menu-nav_item { text-decoration: none; margin-left: 35px; } a { text-decoration: none; } li:hover { color: var(--header2); } .logo { width: 70px; margin: 0; } Home Duyurlar Projeler Iletisim
has answer: http://stackoverflow.com/a/79064531
tagged with: navbar
duplicate of: http://stackoverflow.com/q/32551291
type: UnansweredQuestion
downvote count: 2
favorite count: 0
has comment: http://stackoverflow.com/comment/139410698
tagged with: http://stackoverflow.com/tag/html
type: Question
linked to: http://stackoverflow.com/q/32551291
has title: The navbar doesn't want to be on the left side
answer count: 1

list
type: Tag
tags question: http://stackoverflow.com/q/79059469
tag name: list
tags question: http://stackoverflow.com/q/79292983

http://stackoverflow.com/comment/139219077
has text: @Rewind Yes, updated the CSS, please check. Now only the labels with `btn-label` class will be hidden and will be shown on hower.
comment on: http://stackoverflow.com/a/78959685
score: 1
type: Comment
type: AnswerComment

http://stackoverflow.com/comment/139165775
has text: @Meet It's two kilobytes, against hundreds of image-paths and keyframes. I know exactly what I want and for my solution, there is no problem with limiting to a few childrens. No one was able to address the bug itself.
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78927325

http://stackoverflow.com/q/78917299
tagged with: css
answer count: 0
type: UnansweredQuestion
has body: I am getting the error: Refused to apply style from ‘...’ because its MIME type (‘text/html’) is not a supported stylesheet MIME type, and strict MIME checking is enabled. I believe this error occurs because I have a line in my html which looks like: Here is the beginning of the HTML: .... It seems there is an error with linking 98.css. I have already looked at many solutions, but they are well beyond my expertise, which solution would you recommend in this case?
has title: Stylesheet not loaded because of MIME type when linking external CSS
tagged with: http://stackoverflow.com/tag/html
type: Question
has comment: http://stackoverflow.com/comment/139140253
has comment: http://stackoverflow.com/comment/139140265
score: 0
has comment: http://stackoverflow.com/comment/139140245

http://stackoverflow.com/q/78932299
type: Question
has body: I am trying to re-color the thumb slider for a Bootstrap 5 range control, but I can't seem to find the magic combination. Here is a stackblitz: https://stackblitz.com/edit/stackblitz-starters-3vywax?file=src%2Fmain.ts The BS5 docs provide sass variable, but I can't eem to get the code to pickup my overrides.
downvote count: 0
type: AnsweredQuestion
accepted answer: http://stackoverflow.com/a/78932346
tagged with: sass
has answer: http://stackoverflow.com/a/78932472
upvote count: 1
answer count: 2
tagged with: css
has title: Styling input["range"] in Bootstrap 5 and Angular
tagged with: angular
has answer: http://stackoverflow.com/a/78932346
linked to: http://stackoverflow.com/q/41609481
tagged with: bootstrap-5
score: 1
tagged with: slider
favorite count: 0
possible better answer: http://stackoverflow.com/a/78932472

http://stackoverflow.com/a/78961536
type: Answer
answers question: http://stackoverflow.com/q/78959027
score: 0
accepted answer of: http://stackoverflow.com/q/78959027
has body: I ended up giving in and going with a js solution. I placed a tool tip element outside of the scrollable element and use js to rip/fix emote URLs and add names to the tooltip and reposition it above the emote on event mouseover. // add event listener to emote elements on hover const emoteElements = document.querySelectorAll('.emote'); const chatTooltip = document.querySelector('.chat-tooltip'); emoteElements.forEach((emoteElement) => { emoteElement.addEventListener('mouseover', (e) => { chatTooltip.innerHTML = ''; let service; let chatTooltipHtml = ''; let emoteNamesHtml = ''; const imgExists = emoteElement.querySelector('img') chatTooltipHtml += ' '; if (imgExists) { let imgs = emoteElement.querySelectorAll('img'); let url = ''; imgs.forEach((img) => { url = img.getAttribute('src'); let emoteName = img.getAttribute('alt'); if (url.includes('static-cdn.jtvnw.net')) { url = url.replace('/1.0', '/4.0'); service = ' '; } if (url.includes('cdn.betterttv.net')) { url = url.replace('/1x', '/3x'); service = ' <path d="M161.388 70.076c-10.662 0-19.42 7.866-19.42 17.67 0 9.803 8.758 17.67 19.42 17.67 10.662 0 19.42-7.867 19.42-17.67 0-9.804-8.758-17.67-19.42-17.67zm45.346 24.554-.02.022-.004.002c-5.402 2.771-11.53 6.895-18.224 11.978l-.002.002-.004.002c-25.943 19.766-60.027 54.218-80.344 80.33h-.072l-1.352 1.768c-5.114 6.69-9.267 12.762-12.098 18.006l-.082.082.022.021v.002l.004.002.174.176.052-.053.102.053-.07.072c30.826 30.537 81.213 30.431 111.918-.273 30.783-30.784 30.8-81.352.04-112.152l-.005-.004zM87.837 142.216c-9.803 0-17.67 8.758-17.67 19.42 0 10.662 7.867 19.42 17.67 19.42 9.804 0 17.67-8.758 17.67-19.42 0-10.662-7.866-19.42-17.67-19.42z"> '; } if (url.includes('cdn.frankerfacez.com')) { url = url.replace('/1', '/4'); service = ' <path d="M40.0716 67.9018C33.7085 68.5686 28.834 65.7635 24.3565 61.822C23.9566 61.4691 23.1627 61.4811 22.5614 61.514C22.1644 61.5349 21.7996 61.9266 21.3968 62.1001C19.6805 62.8388 18.8194 62.5038 17.5526 61.2209C16.2917 59.9439 14.8177 5…
type: AcceptedAnswer

http://stackoverflow.com/comment/139228715
has text: I belive this element that displays on hover on the right hand side of the player - is the issue.. I think its the hover state of the volume slider. https://codepen.io/shahednasser/pen/YzQXdwR
comment on: http://stackoverflow.com/q/78964809
type: Comment
score: 0
type: QuestionComment

http://stackoverflow.com/comment/139207993
score: 0
type: QuestionComment
has text: Does the duplicate question help? It seems to have nothing to do with the user color choice rectangle.
comment on: http://stackoverflow.com/q/78953804
type: Comment

http://stackoverflow.com/comment/139382826
type: AnswerComment
has text: Fantastic answer thanks a lot. According to the Wikipedia article, the render blocking behaviour came about in 2016 with Chrome 50.
type: Comment
comment on: http://stackoverflow.com/a/79022317
score: 0

http://stackoverflow.com/q/79030620
has answer: http://stackoverflow.com/a/79030744
tagged with: css
tagged with: sveltekit
type: Question
upvote count: 2
score: 2
type: AnsweredQuestion
has comment: http://stackoverflow.com/comment/139348693
accepted answer: http://stackoverflow.com/a/79030744
favorite count: 0
has title: How to use media queries in Svelte?
tagged with: svelte
downvote count: 0
answer count: 1
has body: I'm using svelte-kit and I'm quite new to it. On my +page.svelte file, I got: where I'm using data to display a hero image. and I want to have different placement of gradient for the mobile screens, let say: but as inline background-image overwrites the styles, I could not find a way to make it work. So, question would be, how is it possible in Svelte to use media queries for different screens with dynamic image URL?

http://stackoverflow.com/comment/139157798
has text: Currently you need Javascript to find the element containing a specific text string.
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78926526

iphone
tags question: http://stackoverflow.com/q/79042462
tags question: http://stackoverflow.com/q/79030241
tags question: http://stackoverflow.com/q/78999725
tags question: http://stackoverflow.com/q/79009524
tags question: http://stackoverflow.com/q/78994787
type: Tag
tags question: http://stackoverflow.com/q/78949149
tag name: iphone
tags question: http://stackoverflow.com/q/79514990

http://stackoverflow.com/comment/139305260
comment on: http://stackoverflow.com/q/79006902
score: 1
type: Comment
type: QuestionComment
has text: Both `getMonth` and `getDay` return an integer. And month are counted starting at zero, so today, September 20th, gets you `8-20`. Still surprised that you don't find any of these elements ...?

http://stackoverflow.com/q/79023183
tagged with: css
answer count: 0
has body: I want to use ShuffleJS (see https://vestride.github.io/Shuffle) to filter out items on a list by typing my search keyword on the 's input text area and the items in the dropdown to be filtered out dynamically as I type. Unfortunately I have not managed this. And so, I followed the idea in How to add shufflejs for select tag which suggests creating a DIY of some sorts which then ShuffleJS seems to handle OK. So, instead of using a : I create a to type my search. It will act the same as the textarea of a , I stored all items (to be filtered out) as elements inside a , I let ShuffleJS know where these are located. I have one complication which I think I handled well: My option items form a very long list and I have two or more of those search-and-select elements in my form with the exact same option items. For example they can be From/To locations in a map, train stops, etc. And so I decided to use only 1 list of option items (the train stops) to be shared among many From/To/etc. search text areas in the same page/form. This works mostly OK but there are a few problems that I need help with: The most important problem is with the logic of closing the "dropdown" containing the items to be filtered/selected when the user has made a selection by clicking on an option item in the "dropdown" or user has not made a selection by clicking elsewhere in the form. (By "dropdown" I mean the thing that pops up when I click on the search text area and contains, initially, all the option items, later to be filtered out as I type in that area.). I detect that the user has clicked on somewhere outside the search text area by the onblur event. In which case I close the "dropdown" and clear the search area with no selection by the user. This works fine. However, when the user clicks on an item on the "dropdown" with the intention to select an option item, this is still considered an onblur event for the search textarea and it is handled first, i.e. no selection, text area is cleared. By…
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139336474
has comment: http://stackoverflow.com/comment/139346462
has title: I have implemented a ShuffleJS select dropdown but there are a few glitches
type: Question
has comment: http://stackoverflow.com/comment/139335332
tagged with: http://stackoverflow.com/tag/html
linked to: http://stackoverflow.com/q/62748638
has comment: http://stackoverflow.com/comment/139340246
has comment: http://stackoverflow.com/comment/139338675
score: 0
tagged with: javascript
has comment: http://stackoverflow.com/comment/139340266

http://stackoverflow.com/q/79065314
answer count: 0
tagged with: css
tagged with: angular
has body: I am trying to create a drag, resize and rotate feature in angular using custom javascript functions. My resize is not working as expected. When I am trying to resize the element from corners or from center dots, position of other corners is not fixed. Also when element is rotated to a particular deg let's assume 20 degree and then trying to resize, then position is not stable. Demo Url: https://stackblitz.com/edit/angular-empty-project-emm12p?file=app%2Fapp.component.ts
has title: Trying to create drag, resize and rotate feature in Angular 17. When I am trying to resize the element, it is not working as expected
type: UnansweredQuestion
score: 1
favorite count: 0
type: Question
downvote count: 0
tagged with: javascript
upvote count: 1

http://stackoverflow.com/comment/139404316
type: QuestionComment
has text: Not with flex, but you can do something with grid if you know the maximum number of items you'll have.
type: Comment
score: 0
comment on: http://stackoverflow.com/q/79060548

http://stackoverflow.com/comment/139211180
type: QuestionComment
score: 1
comment on: http://stackoverflow.com/q/78947221
type: Comment
has text: Yeah, thank you, using ```sticky``` instead of ```fixed``` make the next section visible. Thank you

http://stackoverflow.com/q/78946665
answer count: 2
has comment: http://stackoverflow.com/comment/139194819
upvote count: 1
tagged with: css
has comment: http://stackoverflow.com/comment/139195740
tagged with: flexbox
downvote count: 1
has answer: http://stackoverflow.com/a/78947295
type: UnansweredQuestion
favorite count: 0
has body: I am trying to align an image closer to its right container border while also trying to align a text closer to the left of its own container border but still give spacing between the two elements between both containers so that the two elements within each containers don't stick too close to one another with a bit of a gap in between like my canva design in the first image below. I got the second image beneath that as my result intended design result Beneath is the specific HTML for the element I am trying to fix Who We Are With more than a decade of experience, we are a trusted team of business and financial planners to help you start your business or retirement in Bali, Indonesia and other islands Below is the specific CSS for this particular element .about-us-image { display: flex; justify-content: flex-end; align-items: center; width: 50%; gap: 45; } .about-image { height: 500px; width: 400px; box-sizing: border-box; } .about-us-text { text-align: left; padding: 100px; width: 50%; box-sizing: border-box; align-self: start; padding: 80px 50px 0 0; padding-left:none; padding-top: 0%; padding-right: 25px; If you want to view my full code it's on JSfiddle: full code I have tried asking other forums on possible solutions but none has worked. I have also tried asking this exact same question before on Stackoverflow but my questions keep being declined on the basis of faulty spelling errors in my code and code being too aligned to the left when in fact all of my codes are already indented. I have also moved my CSS for this web page into the HTML where before the CSS was an internal file.
type: Question
has title: Proper alignment of images and text within individual containers
tagged with: http://stackoverflow.com/tag/html
has answer: http://stackoverflow.com/a/78946752
score: 0

http://stackoverflow.com/a/79008614
accepted answer of: http://stackoverflow.com/q/79008567
score: 3
has body: .knap{ width: 250px; height: 50px; border-radius: 200px; align-content: center; background-color: #161a20; border: none; color: white; background: linear-gradient(to bottom left, #008cff, #e100ff); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 17px; position: relative; z-index: 1; /* display: flex; */ /* justify-content: center; */ /* align-items: center; */ } .knap::before{ content: ''; position: absolute; /* height: 105%; width: 105%; */ left: 3px; right: 3px; top: 3px; bottom: 3px; border-radius: 200px; background: black; z-index: -1; } .knap::after { content: attr(data); /* background: linear-gradient(to left, #00FFA3, #DC1FFF);*/ -webkit-background-clip: text; color: transparent; } .wrap{ display: flex; justify-content: center; align-items: center; } About me You nearly had it, I think maybe the display: flex and the height and width of the .knap::before at 105% were throwing you off. The main .knap class didn't have any positive z-index on it, which helped. Here you go, I changed some values but commented out yours :)
upvote count: 3
has comment: http://stackoverflow.com/comment/139310893
type: AcceptedAnswer
type: Answer
downvote count: 0
answers question: http://stackoverflow.com/q/79008567

http://stackoverflow.com/q/79060854
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139403976
has title: CSS Custom Highlight API with underlined text on Safari
favorite count: 0
tagged with: pseudo-element
tagged with: highlight
has comment: http://stackoverflow.com/comment/139410066
type: Question
linked to: http://stackoverflow.com/q/26002057
tagged with: safari
downvote count: 2
has comment: http://stackoverflow.com/comment/139404020
has body: I'm working on a project where users can highlight content by selecting text and choosing a highlight style. I'm using the CSS Custom Highlight API, which is relatively new in terms of browser support. For my purposes, I only need to support recent versions of Safari and Chrome. In the highlight API, highlights are created in JavaScript based on a range, then registered in CSS. They can then be styled using the ::highlight() pseudo-element. This is much easier than other methods of drawing highlights in HTML (such as hard-coding spans, programmatically traversing text nodes and inserting spans, or drawing absolutely-positioned rectangles behind the text) – especially when the highlight needs to continue through formatting tags and other elements. When styling a highlight, the available set of CSS properties is limited. One option is underlining text with text-decoration and its related properties. This works great in Chrome, but I'm unable to get text-underline-offset and text-decoration-thickness to work with highlights in Safari. This makes the underline hard to see. Those properties work great when directly styling a span, but not when styling a highlight. const span1 = document.getElementById('span-1'); range = document.createRange(); range.selectNodeContents(span1); let h = new Highlight(range); CSS.highlights.set('my-highlight', h); body { font-size: 1.5em; line-height: 1.3em; } ::highlight(my-highlight) { text-decoration: underline; text-decoration-color: yellowgreen; text-decoration-skip-ink: none; text-underline-offset: 0.1em; text-decoration-thickness: 0.2em; } #span-2 { text-decoration: underline; text-decoration-color: yellowgreen; text-decoration-skip-ink: none; text-underline-offset: 0.1em; text-decoration-thickness: 0.2em; } This is a paragraph with many text nodes, which is easy to highlight in an underline style thanks to the Highlight API. This is another paragraph with directly underlined text to compare. Chrome version 129 (what I want): Safari v…
has comment: http://stackoverflow.com/comment/139404330
has comment: http://stackoverflow.com/comment/139734815
score: 0
tagged with: javascript
answer count: 0
tagged with: css
upvote count: 2
has comment: http://stackoverflow.com/comment/139404031

http://stackoverflow.com/comment/139128536
has text: How are you compiling Sass? For VS Code, in the settings for [Live Sass Compiler](https://github.com/glenn2223/vscode-live-sass-compiler/blob/HEAD/docs/settings.md#livesasscompilesettingsautoprefix), there is a setting `"liveSassCompile.settings.autoprefix":` that can be set to true.
type: QuestionComment
score: 1
comment on: http://stackoverflow.com/q/78910515
type: Comment

http://stackoverflow.com/comment/139173235
type: QuestionComment
has text: Can you create a sandbox for this? It would be easier to debug...
comment on: http://stackoverflow.com/q/78934113
type: Comment
score: 0

http://stackoverflow.com/comment/139197268
type: QuestionComment
comment on: http://stackoverflow.com/q/78948123
type: Comment
has text: From where you are loading image from. Is it present in your django project?
score: 0

http://stackoverflow.com/comment/139164551
type: Comment
score: 1
type: QuestionComment
has text: The `exo.inc` page looks the same to me after I rip-out the main ` ` element, btw (EDIT: Oh, I see, they've got other ` ` elements, rendered with `three.js` - hmmm)
comment on: http://stackoverflow.com/q/78930122

http://stackoverflow.com/comment/139170945
has text: You're a saint. I don't know how I missed that completely. I put the navbar into a different div class and now it works. Thank you, cheers mate.
type: Comment
score: 0
comment on: http://stackoverflow.com/a/78933614
type: AnswerComment

http://stackoverflow.com/comment/139349094
has text: When you say inline may be used, can you say on what elements? Is it really going to be used on the td? If so, to what effect?
type: QuestionComment
comment on: http://stackoverflow.com/q/79030490
type: Comment
score: 0

http://stackoverflow.com/q/78975917
type: UnansweredQuestion
score: 1
linked to: http://stackoverflow.com/q/25746720
favorite count: 0
tagged with: javafx
has body: I have a CheckBoxTreeView that shows a log folder directory tree and allows the user to select which of these are shown in a TableView. The log files/folders are actively being created/updated while the program is running so I'm listening for updates and showing these to the user but so far I can only address the CheckBoxTreeCell. What I'd like to do is change the TreeCell checkbox border and/or background to indicate item updates. Based on this question and solution: update CheckBoxTreeCell styles from outside process I am just adding and removing styles to the CheckBoxTreeCell: private void updateCell(CheckBoxTreeCell<LogFile> cell) { cell.getStyleClass().removeAll(Arrays.asList("logfile-created", "logfile-deleted", "logfile-updated", "logfile-nochange")); LogFile logfile = cell.getItem(); if (logfile != null) { LogStateEnum state = logfile.getState(); // Update style class switch (state) { case CREATED: cell.getStyleClass().add("logfile-created"); break; case DELETED: cell.getStyleClass().add("logfile-deleted"); break; case UPDATED: cell.getStyleClass().add("logfile-updated"); Services.getLogService().debug(THIS_CLASS, MARKER, "styles - [" + Arrays.toString(cell.getStyleClass().toArray()) + "]"); break; default: cell.getStyleClass().add("logfile-nochange"); Services.getLogService().debug(THIS_CLASS, MARKER, logfile + " has styles - [" + Arrays.toString(cell.getStyleClass().toArray()) + "]"); } } } And the CSS: .root { -default-text-color: rgb(204,204,204); -default-text-entry-color: rgb(105,105,105); -default-window-color: rgb(0,0,0); } .tree-cell { -fx-background-color: -default-window-color; -fx-text-fill: -default-text-color; } .tree-cell:selected { -fx-background-color: -default-text-entry-color; -fx-text-fill: -default-window-color; } .tree-cell:filled:hover { -fx-background-color: -default-text-entry-color; -fx-text-fill: -default-window-color; } .logfile-updated { -fx-text-fill: green ; } .logfile-deleted { -fx-text-fill: red ; } .logfile-created { -fx-tex…
type: Question
has title: JavaFX 17: Change checkbox style of specific CheckBoxTreeCell instances
answer count: 1
has answer: http://stackoverflow.com/a/78979888
downvote count: 0
has comment: http://stackoverflow.com/comment/139253415
has comment: http://stackoverflow.com/comment/139248958
upvote count: 1
tagged with: css
has comment: http://stackoverflow.com/comment/139255888

crash
tags question: http://stackoverflow.com/q/79019992
tag name: crash
type: Tag

http://stackoverflow.com/comment/139153412
type: QuestionComment
type: Comment
has text: btw, I don't think mask-mode is useful when working with gradient. If you can achieve something with the alpha mode, you will need the exact same configuration with luminance. It's like converting "rgba" to "hsl" where the "a" will map to the "l"
score: 0
comment on: http://stackoverflow.com/q/78924192

http://stackoverflow.com/comment/139152791
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78923868
type: QuestionComment
has text: Yes that's exactly what i want, with perhaps a slight pause as it reaches either end so it can be readable

http://stackoverflow.com/a/78913126
upvote count: 0
has body: Please try the below code:enter code here Shobana: Programming makes sence setModal(s => !s)} style={{background: 'none', border: 'none'}} aria-label="Open options"> <circle cx="3" cy="3" r="3" fill="#EDEFEE"/> <circle cx="15" cy="3" r="3" fill="#EDEFEE"/> <circle cx="27" cy="3" r="3" fill="#EDEFEE"/>
has comment: http://stackoverflow.com/comment/139153938
type: Answer
score: -1
answers question: http://stackoverflow.com/q/78905493
downvote count: 1

http://stackoverflow.com/q/78998686
has comment: http://stackoverflow.com/comment/139291119
has comment: http://stackoverflow.com/comment/139290510
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139294920
has comment: http://stackoverflow.com/comment/139290540
has comment: http://stackoverflow.com/comment/139294621
type: Question
has comment: http://stackoverflow.com/comment/139290721
has comment: http://stackoverflow.com/comment/139290692
duplicate of: http://stackoverflow.com/q/52634849
tagged with: http://stackoverflow.com/tag/html
has body: Sample Text Sample Text Sample Text How exactly vertical-align in the image block works? To what point exactly is it aligned? In particular, I am asking about top, bottom, and middle alignment of the image, and how the text block responds to that. Images can express my confusion with alignment better than I can with words, so here they are: 1. Default alignment - image and text aligned to the text baseline 2.1. EXPECTATION - Middle alignment - Image midpoint is aligned to the baseline (photoshopped) 2.2. REALITY - Middle alignment - Image midpoint aligned to what? How does this even work? 3.1. EXPECTATION - Top alignment - Image's top is aligned to the text box top 3.2. REALITY - Top alignment - Text is one pixel lower than expected, but it's close enough, I guess? Or am I doing something wrong? 4.1. EXPECTATION - Bottom alignment - Image bottom is perfectly alignet with the text box bottom 4.2. REALITY - Bottom alignment - Again, there is one pixel difference, like in Top alignment. Why is this happening?
has comment: http://stackoverflow.com/comment/139295763
tagged with: vertical-alignment
score: 0
has comment: http://stackoverflow.com/comment/139290828
has comment: http://stackoverflow.com/comment/139295198
tagged with: alignment
linked to: http://stackoverflow.com/q/52634849
duplicate of: http://stackoverflow.com/q/54190225
has title: How exactly vertical-align works in a case of image + text? Why is it not precise?
has comment: http://stackoverflow.com/comment/139291058
has comment: http://stackoverflow.com/comment/139295614
has comment: http://stackoverflow.com/comment/139295328
answer count: 0
tagged with: css
has comment: http://stackoverflow.com/comment/139294375
has comment: http://stackoverflow.com/comment/139293788
duplicate of: http://stackoverflow.com/q/59008729

parallax
type: Tag
tags question: http://stackoverflow.com/q/78938279
tag name: parallax
tags question: http://stackoverflow.com/q/79505263
tags question: http://stackoverflow.com/q/79489637

http://stackoverflow.com/comment/139157655
type: AnswerComment
comment on: http://stackoverflow.com/a/78920877
has text: I edited my answer. This would have been a sufficient answer to your question. @braxton
type: Comment
score: 0

http://stackoverflow.com/a/79369673
answers question: http://stackoverflow.com/q/79023748
type: Answer
score: -1
downvote count: 1
upvote count: 0
has comment: http://stackoverflow.com/comment/139968293
has body: look this sample: https://support.google.com/adsense/answer/10762946?hl=en&ref_topic=9183242&sjid=8011425263000445431-NA#:~:text=Hiding%20unfilled%20ad-,units,-using%20CSS CSS: ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }

http://stackoverflow.com/a/79035456
upvote count: 0
has body: It seems that ionic-framework set the default margins for h1 You can override this default marigns in your app.component.css file, the following code set the h1 to margin top/bottom: 16px, margin left/right: 0px which will vertically center text 12345. ion-col &gt; ion-title &gt; h1 { margin: 16px 0; }
type: Answer
score: -1
answers question: http://stackoverflow.com/q/79035255
downvote count: 1

http://stackoverflow.com/comment/139138362
score: 0
comment on: http://stackoverflow.com/a/78912102
type: AnswerComment
has text: @SenkyaAndy Check updated code, please. If now will not be working then for sure is something wrong in rest of your css.
type: Comment

http://stackoverflow.com/comment/139258400
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78980629
type: QuestionComment
has text: maybe you should share the html you are using... I say it because you have the css rule targeting the `.main-section` that looks like an item of the masonry layout.. set like that it's behaving as expected where each column of the layout has 300px width. Any "weird" white space remaining before the end of the viewport should be something <300px... and if you resize the viewport below the width of the column width, it will just overflow.

http://stackoverflow.com/q/79042214
has title: NullInjectorError: No provider for hr in Angular app
tagged with: css
tagged with: angularjs
answer count: 0
has comment: http://stackoverflow.com/comment/139370038
type: UnansweredQuestion
tagged with: http://stackoverflow.com/tag/html
type: Question
tagged with: typescript
has body: I'm encountering a NullInjectorError in my Angular application when I click on the login button. The error message in the console reads: main.js:23 ERROR NullInjectorError: R3InjectorError(n)[n -&gt; hr -&gt; hr]: NullInjectorError: No provider for hr! I have recently set up a login feature in my application. The app compiles successfully without any errors. However, upon clicking the login button, the screen disappears, and the above error is thrown in the Chrome console. Steps to reproduce: Click on the login button on the login screen. Observe that the screen goes blank, and the error appears in the console. What I've tried: I ensured that all necessary modules are imported in my app.module.ts. I checked the providers array for any missing services but couldn't find anything related to hr. I looked into the component's constructor for any missing dependencies.
score: 0
tagged with: javascript

http://stackoverflow.com/comment/139295198
type: QuestionComment
comment on: http://stackoverflow.com/q/78998686
score: 1
type: Comment
has text: Let's take the Arial font on Windows. From the font metrics we get that the x-height is 1062 / 2048 of 1em. So half the x-height is 531 / 2048 of 1em. If 1em is 16px, then the x-height is 4.1484375px, or between 4px and 5px. Other fonts will have different values, but are likely to be similar.

http://stackoverflow.com/comment/139130980
comment on: http://stackoverflow.com/q/78911737
has text: Thanks, I've now managed to reproduce the problem.
type: QuestionComment
score: 2
type: Comment

http://stackoverflow.com/comment/139168997
has text: The fallback value of `var()` will never be used. That is not what the fallback of `var()` is for.
type: Comment
comment on: http://stackoverflow.com/a/78932578
type: AnswerComment
score: 1

http://stackoverflow.com/a/78978797
downvote count: 0
has comment: http://stackoverflow.com/comment/139253886
has comment: http://stackoverflow.com/comment/139253913
type: Answer
upvote count: 3
has body: You can isolate an element using scoped attribute within the with "initial" you reset the CSS property.
score: 3
answers question: http://stackoverflow.com/q/78978700

http://stackoverflow.com/comment/139137083
has text: Thank you for catching that. However, I changed it like you showed here, and the button still doesn't work.
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78915574
type: Comment

http://stackoverflow.com/comment/139166104
score: 0
type: AnswerComment
type: Comment
comment on: http://stackoverflow.com/a/78930971
has text: I did not want to paste the entire code because I'm sure you are not allowed to do that on her, otherwise someone may have spotted the issue from there. But for refernece I do have the cards inside of another container which is a scrollable container with more styling. Maybe something to do with the styling there. Not sure I can replicate the problem though. however the javascript method worked

http://stackoverflow.com/q/78912016
downvote count: 1
upvote count: 0
type: UnansweredQuestion
has answer: http://stackoverflow.com/a/78912102
has title: Sticky bar Issues I can't trace. I need guidance
favorite count: 0
tagged with: sticky
type: Question
has body: My sticky tabs wont stick. I have edited my CSS, adjusted it and checked all my code line after line but i dont seem to see the issue. All browsers wont show it but I am not sure what is prohibiting it from showing. See the code below Header content is here Why It Matters Resources Our Approach Our Policies Get Involved Subtitle Header content Resources subtitle title Subtitle title Side bar starts here and ends here too And below is part of my CSS Code that addresses the stick .sticky-tabs { position: -webkit-sticky; /* For Safari */ position: sticky; top: 0; /* Adjust this value to your needs */ z-index: 1000; /* Ensure it appears above other elements */ padding: 10px 0; /* Optional: Adjust padding */ } I have tried to troubleshoot by disabling my scripts but, that didnt work. Cant trace theproblem. If there is code i can use to bypass this problem from wherever it comes from that is not a plugin, that'd be very helpful I Have also tried to use the code in another browser but it doesnt work, however a page withour CSS from the main file sticks. Code is beyond the limited xters here.
answer count: 1
score: -1
tagged with: sticky-footer
tagged with: css

http://stackoverflow.com/comment/139180839
type: QuestionComment
has text: Please provide enough code so others can better understand or reproduce the problem.
comment on: http://stackoverflow.com/q/78938279
type: Comment
score: 0

http://stackoverflow.com/q/78995137
has body: I'm working on a personal website and something that is just irritating is the location to any of my subpages is adding two extra trailing slashes. For example I have a different folder for an about page subdomain but when opening it on a website it shows up as ..../About/abt (About being the folder name and abt being the actual html file). Is there any way to make it only show the first folder name instead of also having the subdomain for the abt.html file?
favorite count: 0
type: Question
tagged with: http://stackoverflow.com/tag/html
has answer: http://stackoverflow.com/a/78995154
answer count: 1
type: AnsweredQuestion
accepted answer: http://stackoverflow.com/a/78995154
upvote count: 0
score: -1
tagged with: css
has title: Trailing Slash on website requiring multiple trailing slashes
downvote count: 1

http://stackoverflow.com/comment/139351459
has text: `the carousel flows infinitely,`, if you have finite number of elements how you want to achieve infinite scroll without restarting:
type: QuestionComment
comment on: http://stackoverflow.com/q/79031961
type: Comment
score: 0

http://stackoverflow.com/q/78959933
has answer: http://stackoverflow.com/a/78976347
has answer: http://stackoverflow.com/a/78976585
tagged with: routes
type: UnansweredQuestion
score: 1
favorite count: 0
tagged with: nextjs14
has body: I'm currently working with Next.js 14 and its App Router paradigm to manage navigation within my application. I have implemented a background color transition on certain pages that is triggered when navigating between routes. However, I want this transition to occur only on route changes, not when the page is accessed directly by typing the URL into the browser. Problem: My layout includes a CSS transition effect for the background color that I only want to trigger when users navigate to specific pages from other parts of the app (not on initial page loads). Question: Is there a way in Next.js 14 to detect if a page load is the result of a navigation route change versus an initial direct access? I need this to conditionally apply the background color transition. Any guidance or suggestions on how to approach this would be greatly appreciated! I attempted to adjust my layout.tsx to make it a client component, thinking it might help differentiate between navigation changes and direct loads. However, this approach did not resolve the issue as it didn't logically fit the requirements.
has title: How to Differentiate Between Navigation Route Change and Initial Load in Next.js 14?
type: Question
downvote count: 0
tagged with: router
answer count: 2
tagged with: javascript
upvote count: 1
tagged with: css

http://stackoverflow.com/comment/139310428
type: Comment
score: 0
has text: sounds obvious, but double-check the spelling of the filename
type: QuestionComment
comment on: http://stackoverflow.com/q/79009569

http://stackoverflow.com/a/79011566
has body: There is a way to adjust the number and align it according to the width. Would you like to try? * { box-sizing: border-box; } body { display: flex; flex-direction: column; height: 100vh; margin: 0; padding: 0; align-items: center; } .header-container { display: flex; position: relative; margin: 2rem 1rem; justify-content: center; width: 100%; } .main-container { display: grid; justify-content: center; grid-template-columns: repeat(6, minmax(100px, 400px)); column-gap: 0; row-gap: 3rem; width: 100%; } .header-item { background-color: lightblue; padding: 1rem; flex-grow: 1; text-align: center; } .main-item { margin: 0; background-color: lightcoral; padding: 1rem; text-align: center; } Header Item Header Item Header Item Header Item Header Item Header Item Main item Main item Main item Main item Main item Main item Main item Main item
type: AcceptedAnswer
type: Answer
score: 0
answers question: http://stackoverflow.com/q/79011399
accepted answer of: http://stackoverflow.com/q/79011399

http://stackoverflow.com/comment/139136781
type: Comment
comment on: http://stackoverflow.com/q/78915487
score: 0
has text: Are there any errors in your dev console? Hint: check the documentation for [addEventListener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener).
type: QuestionComment

python
tags question: http://stackoverflow.com/q/79037371
tags question: http://stackoverflow.com/q/79049135
tags question: http://stackoverflow.com/q/79066590
tags question: http://stackoverflow.com/q/78918675
tags question: http://stackoverflow.com/q/79016625
tags question: http://stackoverflow.com/q/78957189
tags question: http://stackoverflow.com/q/78929068
tags question: http://stackoverflow.com/q/79010172
tags question: http://stackoverflow.com/q/78953680
tag name: python
type: Tag
tags question: http://stackoverflow.com/q/78954075
tags question: http://stackoverflow.com/q/78966048
tags question: http://stackoverflow.com/q/78908954
tags question: http://stackoverflow.com/q/79106642
tags question: http://stackoverflow.com/q/79084620
tags question: http://stackoverflow.com/q/79117922
tags question: http://stackoverflow.com/q/79195340
tags question: http://stackoverflow.com/q/79118686
tags question: http://stackoverflow.com/q/79243681
tags question: http://stackoverflow.com/q/79225416
tags question: http://stackoverflow.com/q/79120220
tags question: http://stackoverflow.com/q/79144538
tags question: http://stackoverflow.com/q/79235776
tags question: http://stackoverflow.com/q/79201509
tags question: http://stackoverflow.com/q/79081875
tags question: http://stackoverflow.com/q/79257984
tags question: http://stackoverflow.com/q/79291512
tags question: http://stackoverflow.com/q/79495112
tags question: http://stackoverflow.com/q/79422955
tags question: http://stackoverflow.com/q/79507985
tags question: http://stackoverflow.com/q/79449675
tags question: http://stackoverflow.com/q/79544253
tags question: http://stackoverflow.com/q/79441279
tags question: http://stackoverflow.com/q/79427820

http://stackoverflow.com/comment/139179704
type: Comment
score: 2
comment on: http://stackoverflow.com/q/78937138
type: QuestionComment
has text: @NorahJones Are you using CSS modules? See the answer given below if so. Otherwise, inspect upwards in the DOM the applied CSS rules under Inspect>Elements. Avoid using `!important` if you can.

http://stackoverflow.com/comment/139194434
type: QuestionComment
has text: mix-blend-mode of difference is one option
score: 0
type: Comment
comment on: http://stackoverflow.com/q/78946419

http://stackoverflow.com/comment/139311517
has text: Can you provide de structure you have for your django modules?
type: QuestionComment
comment on: http://stackoverflow.com/q/79010172
type: Comment
score: 0

http://stackoverflow.com/comment/139163440
has text: The problem with the CSS is having to have explicitly spelled out settings for each number of images - your code has (almost) gone to 9 images, but what if you wanted 20 - you'd have to add all those settings. With the JS you just add the images to the DOM and everything works OK, no calculations or extra CSS.
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78926909

animation
tags question: http://stackoverflow.com/q/78975874
tags question: http://stackoverflow.com/q/78957679
tags question: http://stackoverflow.com/q/79030241
tags question: http://stackoverflow.com/q/78912182
tags question: http://stackoverflow.com/q/78909882
tags question: http://stackoverflow.com/q/78977674
tags question: http://stackoverflow.com/q/78984279
type: Tag
tags question: http://stackoverflow.com/q/79040516
tag name: animation
tags question: http://stackoverflow.com/q/79039420
tags question: http://stackoverflow.com/q/79040690
tags question: http://stackoverflow.com/q/78914356
tags question: http://stackoverflow.com/q/79046636
tags question: http://stackoverflow.com/q/78929847
tags question: http://stackoverflow.com/q/79201399
tags question: http://stackoverflow.com/q/79080109
tags question: http://stackoverflow.com/q/79138580
tags question: http://stackoverflow.com/q/79115026
tags question: http://stackoverflow.com/q/79197805
tags question: http://stackoverflow.com/q/79183037
tags question: http://stackoverflow.com/q/79219803
tags question: http://stackoverflow.com/q/79072394
tags question: http://stackoverflow.com/q/79229848
tags question: http://stackoverflow.com/q/79087721
tags question: http://stackoverflow.com/q/79084821
tags question: http://stackoverflow.com/q/79112975
tags question: http://stackoverflow.com/q/79242855
tags question: http://stackoverflow.com/q/79118984
tags question: http://stackoverflow.com/q/79128563
tags question: http://stackoverflow.com/q/79172004
tags question: http://stackoverflow.com/q/79301712
tags question: http://stackoverflow.com/q/79371805
tags question: http://stackoverflow.com/q/79331433
tags question: http://stackoverflow.com/q/79406619
tags question: http://stackoverflow.com/q/79339409
tags question: http://stackoverflow.com/q/79257667
tags question: http://stackoverflow.com/q/79352463
tags question: http://stackoverflow.com/q/79269836
tags question: http://stackoverflow.com/q/79399118
tags question: http://stackoverflow.com/q/79314220
tags question: http://stackoverflow.com/q/79276163
tags question: http://stackoverflow.com/q/79490951
tags question: http://stackoverflow.com/q/79536466
tags question: http://stackoverflow.com/q/79480608
tags question: http://stackoverflow.com/q/79466482
tags question: http://stackoverflow.com/q/79491823
tags question: http://stackoverflow.com/q/79445583
tags question: http://stackoverflow.com/q/79461882
tags question: http://stackoverflow.com/q/79544619
tags question: http://stackoverflow.com/q/79519121
tags question: http://stackoverflow.com/q/79531637
tags question: http://stackoverflow.com/q/79505138
tags question: http://stackoverflow.com/q/79439761

http://stackoverflow.com/comment/139203540
type: AnswerComment
has text: It works but breaks the expected layout. That is fine for accordéon layout but not a tab layout. Grid would help here so divs can span the entire row
comment on: http://stackoverflow.com/a/78951324
type: Comment
score: 0

http://stackoverflow.com/comment/139401245
score: 0
type: QuestionComment
has text: Welcome to SO! What happens when debugging?
comment on: http://stackoverflow.com/q/79059469
type: Comment

http://stackoverflow.com/a/79040587
has body: Got it. My idea was to replicate the top line to the bottom, only with a +1 offset for the y's. This proved wrong as it was being trimmed after 1 so I replicated top line with an offset +0.95 for the y's. The y's are the second numbers in each number pair x, y. As the path though is going clockwise, I had to make some detour through the middle (Like a figure 8) so I could reach point (0,0.95) from counterclockwise direction. body { background: #222; } #wavy-box { background-color: purple; height: 400px; width: 400px; clip-path: url(#wavy-border); display: flex; justify-content: center; align-items: center; margin: auto; font-size: 24px; border: none; color: #DC7633; text-align: center; padding: 20px; } &lt;body&gt; &lt;svg width="0" height="0"&gt; &lt;defs&gt; &lt;clipPath id="wavy-border" clipPathUnits="objectBoundingBox"&gt; &lt;path d=" M0,0 C0.05,0 0.2,0.03 0.25,0.02 C0.3,0.015 0.35,0.02 0.35,0.025 C0.355,0.0225 0.45,0.03 0.5,0.035 C0.53,0.035 0.58,0.02 0.6,0.02 C0.63,0.015 0.74,0.0275 0.75,0.03 C0.78,0.0325 0.925,0.0125 0.95,0.015 C0.97,0.0125 1,0.025 1,0.025 L1,0.5 L0,0.5 L0,0.95 C0.05,0.95 0.2,0.98 0.25,0.97 C0.3,0.965 0.35,0.97 0.35,0.975 C0.355,0.9725 0.45,0.98 0.5,0.985 C0.53,0.985 0.58,0.97 0.6,0.97 C0.63,0.965 0.74,0.9775 0.75,0.98 C0.78,0.9825 0.925,0.9625 0.95,0.965 C0.97,0.9625 1,0.975 1,0.975 L1,0.5 L0,0.5 Z" /&gt; &lt;/clipPath&gt; &lt;/defs&gt; &lt;/svg&gt; &lt;div id="wavy-box"&gt; Your content here &lt;/div&gt;
score: 1
downvote count: 0
answers question: http://stackoverflow.com/q/79039420
type: Answer
upvote count: 1

http://stackoverflow.com/q/78971849
tagged with: sass
answer count: 0
tagged with: css
tagged with: css-modules
has body: I have this SASS mixin: @mixin fadeIn($duration) { animation-duration: $duration; animation-fill-mode: both; &amp; :global { animation-name: keyframesFadeIn; } } I'm using :global for animation-name because I want to reuse the keyframes. However, this is causing deprecation warnings: [0] Module Warning (from ./node_modules/sass-loader/dist/cjs.js): [0] Deprecation Warning on line 155, column 2 of file:///foo.scss:155:2: [0] Sass's behavior for declarations that appear after nested [0] rules will be changing to match the behavior specified by CSS in an upcoming [0] version. To keep the existing behavior, move the declaration above the nested [0] rule. To opt into the new behavior, wrap the declaration in `&amp; {}`. [0] [0] More info: https://sass-lang.com/d/mixed-decls [0] [0] 155 | display: flex; This is because SASS thinks &amp; :global is a nested style. I also tried doing this: @mixin fadeIn($duration) { animation-duration: $duration; animation-fill-mode: both; animation-name: :global(keyframesFadeIn); } I think it should work, but Webpack is throwing errors: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js): Expected expression. ╷ 151 │ animation-name: :global(keyframesFadeIn); │ ^ Is there a way to reuse global keyframes while also avoiding the deprecation warning?
type: UnansweredQuestion
has title: Making :global() CSS Module work with sass-loader
tagged with: webpack
type: Question
score: 0

http://stackoverflow.com/comment/139345840
type: AnswerComment
has text: Thank you for the response. This pointed out to me that I forgot an important detail. I have since updated my question.
comment on: http://stackoverflow.com/a/79028919
type: Comment
score: 0

z-index
tags question: http://stackoverflow.com/q/78974025
tags question: http://stackoverflow.com/q/78924442
tags question: http://stackoverflow.com/q/79035901
tag name: z-index
type: Tag
tags question: http://stackoverflow.com/q/78941056
tags question: http://stackoverflow.com/q/78928087
tags question: http://stackoverflow.com/q/78934104
tags question: http://stackoverflow.com/q/79008567
tags question: http://stackoverflow.com/q/79115814
tags question: http://stackoverflow.com/q/79137836
tags question: http://stackoverflow.com/q/79086124
tags question: http://stackoverflow.com/q/79102938
tags question: http://stackoverflow.com/q/79315885
tags question: http://stackoverflow.com/q/79362110
tags question: http://stackoverflow.com/q/79323958
tags question: http://stackoverflow.com/q/79338933
tags question: http://stackoverflow.com/q/79503885
tags question: http://stackoverflow.com/q/79472829
tags question: http://stackoverflow.com/q/79479534
tags question: http://stackoverflow.com/q/79500819
tags question: http://stackoverflow.com/q/79467825

fluid-layout
tag name: fluid-layout
tags question: http://stackoverflow.com/q/79064518
type: Tag

http://stackoverflow.com/comment/139149067
type: AnswerComment
comment on: http://stackoverflow.com/a/78913998
has text: The ` ` is in your HTML and you are styling it by adding `body {...}` in CSS. Find that rule in your CSS file and add this extra line to it: `flex-direction: column;`. If you want to center the 3d pictures: add `margin: 0 auto;` to the `.box {...}` in CSS.
type: Comment
score: 0

http://stackoverflow.com/a/78963125
type: Answer
answers question: http://stackoverflow.com/q/78962822
score: 0
accepted answer of: http://stackoverflow.com/q/78962822
has comment: http://stackoverflow.com/comment/139225371
has body: A problem is that you are setting all a element descendants of .topnav with .topnav a which I think should be .topnav > a i.e. target only the direct children. #header { width: 100%; background-color: #1f7ac4; padding: 25px 0px 25px 0px; } .topnav>a { float: left; display: block; color: #f2f2f2; border: 1px solid #1f7ac4; text-align: center; padding: 14px 16px; margin: 0px 5px 0px 0px; text-decoration: none; font-size: 19px; line-height: 36px; /* Must be the same as font-size .topnav a.logo */ } .topnav a:hover { background-color: #2f8fde; border-top-left-radius: 12px; border-top-right-radius: 12px; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; border: 1px solid #1f7ac4; color: #f2f2f2; } .topnav a.active { border-top-left-radius: 12px; border-top-right-radius: 12px; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; border: 1px solid #f2f2f2; color: #f2f2f2; } .topnav a.logo { font-size: 36px; /* Must be the same as line-height .topnav a */ margin-left: -16px; } .topnav a.logo:hover { background-color: #1f7ac4; } .topnav { width: 70%; margin: 0px auto; overflow: hidden; } .dropdown { float: left; overflow: hidden; } .dropdown .dropbtn { display: block; background-color: #1f7ac4; color: #f2f2f2; border: 1px solid #1f7ac4; text-align: center; padding: 14px 16px; margin: 0px 0px 0px 0px; text-decoration: none; font-size: 19px; line-height: 36px; /* Must be the same as font-size .topnav a.logo */ } .dropdown .dropbtn:hover { background-color: #2f8fde; border-top-left-radius: 12px; border-top-right-radius: 12px; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; border: 1px solid #2f8fde; color: #f2f2f2; } .dropdown-content { display: none; position: absolute; background-color: #ffffff; border-top-left-radius: 12px; border-top-right-radius: 12px; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; border: 1px solid #d6d2d2; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); min-width: 160px; margin: 0px 0…
type: AcceptedAnswer

http://stackoverflow.com/comment/139345246
comment on: http://stackoverflow.com/q/79028709
type: QuestionComment
has text: Do you care which mouse cursor the user (link vs default) sees when hovering in the space between the button and the container?
type: Comment
score: 0

extjs6.5.1
tag name: extjs6.5.1
type: Tag
tags question: http://stackoverflow.com/q/78954173

http://stackoverflow.com/a/78981649
has body: Tailwind won't generate dynamic classnames In your case it comes from a function https://tailwindcss.com/docs/content-configuration#dynamic-class-names
downvote count: 0
type: Answer
answers question: http://stackoverflow.com/q/78981552
upvote count: 1
score: 1

http://stackoverflow.com/comment/139260438
type: QuestionComment
type: Comment
comment on: http://stackoverflow.com/q/78982161
score: 0
has text: You say you want to use JavaScript to change but perhaps show what you tired when doing that here so that we may assist you in fixing it. Especially since that is what your question appears to be all about here.

http://stackoverflow.com/comment/139219677
type: AnswerComment
has text: I've tried both options, adding the 'display' property inline and in css, both didn't work. The EventListener didn't succeeded too...
comment on: http://stackoverflow.com/a/78960213
type: Comment
score: 0

http://stackoverflow.com/q/79007402
type: UnansweredQuestion
favorite count: 0
has title: Can the child of mat-dialog-content have height: 100%?
score: 1
linked to: http://stackoverflow.com/q/7049875
type: Question
tagged with: angular-material
answer count: 1
has body: Here's a demo of the problem: https://stackblitz.com/edit/stackblitz-starters-tdxfuc?file=src%2Fapp%2Fapp.component.ts When the contents inside mat-dialog-content are too tall, I want to be able to control where the scrollbar will appear. In this picture, it scrolls the whole mat-dialog-content element, but I want it to scroll only inside the mat-tab contents, not outside the tab group. mat-dialog-content has max-width: 65vh, and that's fine. In this example, that's 629.85px However, this mat-tab-group, despite having width: 100%, will overflow mat-dialog-content (1553px) like the relative height doesn't matter. I have learned that relative height only works if the parent as a set height (here), but is that the problem here? And how can I circumvent it in this situation? Because the solution suggested in that answer (html { height: 100% }) doesn't apply here.
downvote count: 0
has answer: http://stackoverflow.com/a/79007763
tagged with: sass
upvote count: 1
tagged with: material-ui
tagged with: css
tagged with: scrollbar

http://stackoverflow.com/comment/139398861
comment on: http://stackoverflow.com/q/79057749
type: QuestionComment
has text: The second sentence in [.appendChild](https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild) documentation describes the behaviour.
type: Comment
score: 0

http://stackoverflow.com/a/78956881
has comment: http://stackoverflow.com/comment/139217134
upvote count: 1
answers question: http://stackoverflow.com/q/78956780
has comment: http://stackoverflow.com/comment/139213505
score: 1
downvote count: 0
has comment: http://stackoverflow.com/comment/139234109
type: Answer
has body: From the documentation on container-type: Size containment turns off the ability of an element to get size information from its contents, which is important for container queries to avoid infinite loops. Your code works fine without the container queries. .outerBox { width: 400px; height: 170px; border: 1px solid green; position: relative; } .highlightBox { border-radius: 4px; background-color: #32db01; box-shadow: 2px 2px 3px 0 #000; padding: 10px 20px; position: absolute; bottom: 10px; right: 10px; white-space: nowrap; } .dynamicText { font-weight: bold; font-size: 30px; line-height: 30px; } &lt;div class="outerBox"&gt; &lt;div class="highlightBox"&gt; &lt;span class="dynamicText"&gt; dynamic button text &lt;/span&gt; &lt;/div&gt; &lt;/div&gt;

http://stackoverflow.com/comment/139338650
has text: OK, going for your second approach probably means I don't need the sidebar any more?
type: QuestionComment
type: Comment
comment on: http://stackoverflow.com/q/79012295
score: 0

http://stackoverflow.com/a/79005805
type: AcceptedAnswer
type: Answer
score: 0
answers question: http://stackoverflow.com/q/79004878
accepted answer of: http://stackoverflow.com/q/79004878
has body: So the problem is basically after rounding the corners you left with white background behind those corners and according to me "Transparent corners" means the space behind those cornors should match with the color of screen rather than white color. Kindly add position :absolute and see if it solves your issue <Tab.Navigator screenOptions={{ headerShown: false, tabBarStyle:{ backgroundColor: "#990540", height: 63, borderTopEndRadius: 15, borderTopLeftRadius: 15, borderTopWidth: 0, position:'absolute', } }} > and sorry if I misunderstood you

http://stackoverflow.com/a/78975360
has body: It's probably because you're missing a closing parenthesis in rotateElement.
score: 0
has comment: http://stackoverflow.com/comment/139264894
has comment: http://stackoverflow.com/comment/139248487
answers question: http://stackoverflow.com/q/78975340
type: Answer
has comment: http://stackoverflow.com/comment/139248070

http://stackoverflow.com/comment/139195702
type: Comment
score: 0
comment on: http://stackoverflow.com/a/78945844
type: AnswerComment
has text: Thanks for your comment, but word-break: break-all is working fine when I render the html to browser but I want them in exported doc file. When I export the html to word doc file it is not working the same way. –

http://stackoverflow.com/comment/139384719
type: QuestionComment
score: 0
type: Comment
comment on: http://stackoverflow.com/q/79050057
has text: Are you now the authority on what goes in Stackoverflow and what doesn't?

http://stackoverflow.com/comment/139406309
comment on: http://stackoverflow.com/q/79061980
score: 2
type: Comment
type: QuestionComment
has text: The overflow issue you're experiencing is not coming from the ```.book-results-container``` class. That class is working accordingly. The issue is from the the parent container with the gradient background. You should be setting the ```max-height``` of the ```book-results-container``` class to the height of the gradient container and setting the gradient container with an ```overflow: hidden``` property.

http://stackoverflow.com/a/78951324
downvote count: 1
upvote count: 3
has comment: http://stackoverflow.com/comment/139225499
has comment: http://stackoverflow.com/comment/139203809
type: Answer
score: 2
has comment: http://stackoverflow.com/comment/139203540
answers question: http://stackoverflow.com/q/78951292
has comment: http://stackoverflow.com/comment/139203695
has body: You don't need to repeat the code for each hidden div, just wrap components under single div and apply the CSS .container { display: flex; gap: 1rem; } .myLink{ position: relative; } .hide { display: none; min-height: 200px; position: absolute; } .myLINK:hover + .hide { display: block; color: gray; } Display an Element on Hover Hover over me 1. I am shown when someone hovers over the div above. Hover over me 2. I am shown when someone hovers over the div above2. Hover over me 3. I am shown when someone hovers over the div above3.

http://stackoverflow.com/q/78974610
has comment: http://stackoverflow.com/comment/139250889
has comment: http://stackoverflow.com/comment/139250551
has comment: http://stackoverflow.com/comment/139246520
has comment: http://stackoverflow.com/comment/139247468
answer count: 0
downvote count: 0
tagged with: css
has comment: http://stackoverflow.com/comment/139253750
type: UnansweredQuestion
score: 1
favorite count: 0
upvote count: 1
has comment: http://stackoverflow.com/comment/139246444
has body: Lets say I have defined a set of floats that start out wide, become narrower as you go down the page, and then become wider again, creating a sort of hourglass shape (well, one half of an hour glass, split down the middle). Now if I add content to the container of these floats, I would expect that the content flows fully around all of the floated elements and fills the "valley" in the middle of hour glass. However, as you can see in this example, the content does not fully fill the "valley" and seems to stop at some seemingly arbitrary halfway point. Is this expected behavior (and is there any way to force the behavior I want?) Here is a demo of content not fully flowing to the furthest float: https://jsfiddle.net/nv9th230/2/ HTML: float float float float why doesnt content touch me float float float float This is the content. Why does the content not flow all the way to the left. Instead of going all the way to the left, it stops short. This is the content. Why does the content not flow all the way to the left. Instead of going all the way to the left, it stops short. This is the content. Why does the content not flow all the way to the left. Instead of going all the way to the left, it stops short. This is the content. Why does the content not flow all the way to the left. Instead of going all the way to the left, it stops short. This is the content. Why does the content not flow all the way to the left. Instead of going all the way to the left, it stops short. This is the content. Why does the content not flow all the way to the left. Instead of going all the way to the left, it stops short. This is the content. Why does the content not flow all the way to the left. Instead of going all the way to the left, it stops short. This is the content. Why does the content not flow all the way to the left. Instead of going all the way to the left, it stops short. This is the content. Why does the content not flow all the way to the left. Instead of going all the way to th…
has title: Content only partially flows around consecutive floats of varying widths
type: Question
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139246505

http://stackoverflow.com/comment/139394898
score: 0
has text: Replying to A Haworth : I followed instructions from here, www.smallurl.ca/s8T+nhq, to see what fonts are loaded, and I found this: Rendered Fonts Times New Roman. This page was first built in 2001, using vanilla html, Dreamweaver, and .eot fonts in IE. MS withdrawing display of .eot fonts has led to using @fontface. Sadly, upgrading to adequate understanding of and use of CSS is not coming quickly. Sorry. Replying to herrstrietzel: Thanks for your advice. I have ditched the woff. Sadly, I do not understand what I see in the dev tools network tab.
type: QuestionComment
comment on: http://stackoverflow.com/q/79048295
type: Comment

carousel
tags question: http://stackoverflow.com/q/78974044
tags question: http://stackoverflow.com/q/78993090
tags question: http://stackoverflow.com/q/79006304
tags question: http://stackoverflow.com/q/78961161
type: Tag
tag name: carousel
tags question: http://stackoverflow.com/q/78952690
tags question: http://stackoverflow.com/q/78952476
tags question: http://stackoverflow.com/q/79146120
tags question: http://stackoverflow.com/q/79076559
tags question: http://stackoverflow.com/q/79269941
tags question: http://stackoverflow.com/q/79293907
tags question: http://stackoverflow.com/q/79400358
tags question: http://stackoverflow.com/q/79377317
tags question: http://stackoverflow.com/q/79342105
tags question: http://stackoverflow.com/q/79315747
tags question: http://stackoverflow.com/q/79344842
tags question: http://stackoverflow.com/q/79399588
tags question: http://stackoverflow.com/q/79465003
tags question: http://stackoverflow.com/q/79452013
tags question: http://stackoverflow.com/q/79459345
tags question: http://stackoverflow.com/q/79527990

http://stackoverflow.com/comment/139249732
score: 0
comment on: http://stackoverflow.com/q/78975340
type: QuestionComment
has text: I did not find anything to correct. There are no errors, and I tried changing order, the code works, but not getting desired output when I change order since the object is scaling first and then rotating, which means it will keep the same visual axis, rather than the object's axis
type: Comment

http://stackoverflow.com/a/79015259
has comment: http://stackoverflow.com/comment/139322879
has body: Refactor the logic such that only one useOutsideClick hook is necessary. Since the header content, i.e. the children, appear to be same for both mobile and desk view, you can refactor to replace the wrapping div elements with a single div that conditionally applies the correct CSS className prop, and any other layout/UI differences between mobile and desk views. Example Implementation: const HeaderSearch = ({ screenWidth }) => { const ref = useOutsideClick(test); ... function checkInput(event) { if (event.keyCode !== 13) { setSearch(event.target.value); } } if (location.pathname !== "/") { return ( <FontAwesomeIcon className="search-icon" id="search-icon" icon={faSearch} onClick={() => toggleSearchInput()} /> checkInput(e)} onChange={(e) => setSearch(e.target.value)} // ref={searchInputRef} // onClick={() => searchReqClientSide()} placeholder="Search..." /> ); } else { return null; } };
has comment: http://stackoverflow.com/comment/139335144
upvote count: 2
has comment: http://stackoverflow.com/comment/139321297
has comment: http://stackoverflow.com/comment/139322939
has comment: http://stackoverflow.com/comment/139322799
answers question: http://stackoverflow.com/q/79014407
type: AcceptedAnswer
score: 2
accepted answer of: http://stackoverflow.com/q/79014407
downvote count: 0
type: Answer
has comment: http://stackoverflow.com/comment/139322864

http://stackoverflow.com/comment/139402130
type: Comment
score: 0
type: QuestionComment
has text: Welcome to Stack Overflow! Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/) using the `<>` icon. See [**How to create a Minimal, Reproducible Example**](http://stackoverflow.com/help/reprex)
comment on: http://stackoverflow.com/q/79059904

http://stackoverflow.com/comment/139405532
has text: The only question seems to be whether you want the content of the overflowing button to be available to the user or not. Assuming it's there for a reason, add overflow: auto so it can scroll when needed.
comment on: http://stackoverflow.com/q/79061543
type: Comment
score: 0
type: QuestionComment

http://stackoverflow.com/comment/139439457
score: 0
type: AnswerComment
has text: See this I have added the height and time to animation so you can see it is working try directly using this code then add what you want
comment on: http://stackoverflow.com/a/79063036
type: Comment

http://stackoverflow.com/a/79014051
type: AcceptedAnswer
type: Answer
downvote count: 0
score: 3
answers question: http://stackoverflow.com/q/79013991
has body: You are almost there, simply add the same transition to the child elements const circle = document.getElementById('circle'); let deg = 0; function rotate() { deg += 60; circle.style.cssText = `--rotation: ${deg}deg`; } .circle { border: 2px solid #ccc; border-radius: 50%; height: 300px; margin: 40px auto 0; transform: rotate(var(--rotation)); transition: transform 1000ms ease; position: relative; width: 300px; } .item { align-items: center; background: red; border: 2px solid #fff; border-radius: 50%; display: flex; height: 30px; justify-content: center; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%) rotate(calc(var(--i) * -60deg)) translateY(150px) rotate(calc(var(--i) * 60deg - var(--rotation))); transition: transform 1000ms ease; width: 30px; } .btn { align-items: center; background: lawngreen; display: flex; height: 30px; justify-content: center; width: 100px; } 1 2 3 4 5 6 rotate
upvote count: 3
accepted answer of: http://stackoverflow.com/q/79013991

http://stackoverflow.com/comment/139400684
type: AnswerComment
has text: is there any way i can do smooth straight line inplace of crisp edge
comment on: http://stackoverflow.com/a/79059131
type: Comment
score: 0

http://stackoverflow.com/comment/139281620
type: QuestionComment
score: 1
has text: but I insist that it would be so easy to just "dump" the html document once it's rendered in a working environment with chrome for example, save it to a simple html file and then test it where it's not supposed to work. If the conditions match what you experience in the full reactive application, you have your snippet to ask for help. If you just point people to a whole application they cannot browse it entirely until they found what you showed in the picture. People needs to see the dom ready to easily pinpoint the problem.
type: Comment
comment on: http://stackoverflow.com/q/78992567

maui-blazor
tags question: http://stackoverflow.com/q/78966785
type: Tag
tag name: maui-blazor

http://stackoverflow.com/comment/139393980
has text: @DavidHeadrick I updated my answer.
comment on: http://stackoverflow.com/a/79051990
type: Comment
score: 0
type: AnswerComment

http://stackoverflow.com/comment/139381277
has text: @dalelandry Good idea. but is there really no solution in css only? WIth gridbox,flexbox or classic css (float,display:inline-block)..... Furthermore with your idea if the user set a bigger font dimension in the browser after he opens the page the overflow will stay still there. Unfortunately the overflow event isn't standard
comment on: http://stackoverflow.com/q/79048027
type: Comment
score: 0
type: QuestionComment

http://stackoverflow.com/comment/139359021
has text: I think there's a confusion between 'stimulate' and 'simulate' - as @C3roe has pointed out, you shouldn't try to simulate interactivity (and actually, you can't in this case). It has to be a real user click on the right place in the iframe to get things started.
type: Comment
comment on: http://stackoverflow.com/q/79021330
score: 0
type: QuestionComment

http://stackoverflow.com/a/79049483
answers question: http://stackoverflow.com/q/79048208
type: AcceptedAnswer
accepted answer of: http://stackoverflow.com/q/79048208
downvote count: 0
type: Answer
has body: Your Groovy code is correct, if CSS Selector Extractor fails to locate the button - the saveButtonId variable will be null You don't need any "sleep" because according to JMeter test elements Execution Order the sequence will be the following: Sampler (it will return the result) CSS Selector Extractor JSR223 Assertion So I would suggest checking whether your CSS expression is correct and returns the button you're looking for. It can be done i.e. in Chrome Developer Tools For example if I use a Dummy Sampler with response data like this: Save the assertion passes and when I change the ID to something else: Save it fails. So please re-visit your CSS selector expression
upvote count: 1
has comment: http://stackoverflow.com/comment/139384163
score: 1

http://stackoverflow.com/comment/139181478
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78939256
type: QuestionComment
has text: @makkusu that is what I did. I added a spacer div with position relative inside the fixed div but it's not helping

http://stackoverflow.com/q/79007191
has title: Show partially visible scroll icons outside a horizontally scrollable container
has answer: http://stackoverflow.com/a/79008065
type: UnansweredQuestion
score: 1
favorite count: 0
tagged with: http://stackoverflow.com/tag/html
type: Question
downvote count: 0
answer count: 1
has body: I have a layout where the header and footer are fixed, and the middle section is scrollable. I’m using a flexbox layout and have set overflow-y: auto for the middle section. Within this middle section, I have a horizontally scrollable container. I want to display left and right scroll icons that are positioned such that they are partially visible (50%) outside the scrollable container. To achieve this, I’ve set the icons with position: absolute and applied the necessary CSS. However, the parts of the icons that should be visible outside the container are not showing up. Please click here to see the demo application on stackblitz. Header Card Card Card Card Click Me Card Card Footer body { margin: 0; } #root { margin: 0 auto; max-width: 100vw; display: flex; flex-direction: column; justify-content: space-between; align-items: center; height: 100vh; } * { box-sizing: border-box; } .home-container { display: flex; flex-direction: column; flex: 1 1; overflow-y: auto; max-width: calc(100% - 40%); } main { flex: 1 1; display: flex; flex-direction: column; width: 100%; margin-top: 2rem; } section { display: flex; flex-direction: column; position: relative; margin-top: 50px; background-color: gray; border: 1px solid #000; } .half-button { position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); padding: 10px 20px; background-color: coral; border: none; cursor: pointer; } .cards { display: flex; overflow-x: auto; flex: 1; } .card { flex: none; height: 200px; width: 200px; background-color: blanchedalmond; margin-right: 10px; display: flex; justify-content: center; align-items: center; } I am expecting to show the left and right button in the horizon scrollable container while keep the mid part scrollable
tagged with: reactjs
upvote count: 1
tagged with: css

http://stackoverflow.com/comment/139362180
type: Comment
score: 0
has text: are both templates in same view? if not you need to include tailwind in both templates.
type: QuestionComment
comment on: http://stackoverflow.com/q/79037371

caching
tag name: caching
tags question: http://stackoverflow.com/q/78965523
type: Tag

http://stackoverflow.com/comment/139375328
score: 0
has text: Couple of questions. 1) Can you share the full code? What's happening is that Outlook is re-rendering your code, due to the way emails work. (2) Is there a particular inbox (e.g. Gmail) that you need the forward to work for, or is it mostly Outlook to Outlook? (3) Is it only happening on dark mode?
comment on: http://stackoverflow.com/q/79043462
type: QuestionComment
type: Comment

http://stackoverflow.com/comment/139317942
comment on: http://stackoverflow.com/q/79013255
score: 0
has text: @DiegoD Yes this is why I have open the discussion here, very confusing. Thank you for the desire to help
type: Comment
type: QuestionComment

http://stackoverflow.com/comment/139356464
type: AnswerComment
has text: For pure tailwind classes, try: ` `
comment on: http://stackoverflow.com/a/79034736
type: Comment
score: 0

http://stackoverflow.com/q/78980674
has title: Nested Flexbox for navbar
tagged with: navbar
has body: I've been working on making a dropdown navbar using react, to resemble the image below - My code - NavBar.jsx import React, { useState } from 'react' import './NavBar.css' const NavBar = () => { const [openDropDown,setOpenDropDown] = useState(null) const toggleDropDown = (menu) =>{ setOpenDropDown(openDropDown === menu ? null : menu) } return ( <> toggleDropDown('features')} onMouseLeave={() => toggleDropDown()}> Features {openDropDown === 'features' && Todo List Calender Reminders Planning } toggleDropDown('company')} onMouseLeave={() => toggleDropDown()}> Company {openDropDown === 'company' && History Our Team Blog } Careers About Login Register </> ) } export default NavBar NavBar.css *{ box-sizing: border-box; margin: 0; padding : 0; } .navbar{ display : flex; align-items: center; gap: 30px; } .list-container{ display: flex; justify-content: space-around; } .left-list{ display: flex; } .right-list{ display: flex; } .navbar-items{ margin : 20px; } .logo{ margin-left: 50px; height: 20px; width: 50px; } I have a navbar class with an image(the logo) and a div(containing the two lists) inside it. I have applied flex to .navbar, which seems to be working as intended. I tried to apply flex to .list-container along with justify-content: space around, but the children elements stay in the same place. What should I change in the code to make it resemble the image above?
type: Question
answer count: 1
has comment: http://stackoverflow.com/comment/139257852
type: AnsweredQuestion
tagged with: reactjs
score: 0
has answer: http://stackoverflow.com/a/78981178
tagged with: css
accepted answer: http://stackoverflow.com/a/78981178
tagged with: flexbox

http://stackoverflow.com/q/78950799
type: UnansweredQuestion
score: 0
type: Question
tagged with: datepicker
answer count: 1
has title: Dual datepicker jQuery selection
has answer: http://stackoverflow.com/a/78950845
tagged with: javascript
tagged with: jquery
has body: I am building a date picker from scratch as a learning exercise. My date picker has two months side by side, and my question is, what does the jQuery look like for picking a start date and end date, allowing for the user to change their mind and have both dates on the same month, or on opposite months? My HTML 1 2 3 4 5 ... ... 1 2 3 4 5 ... ... Say the left month is August and the right month is September... they can choose start date August 5th and end date August 17th, or start date August 5th and end date September 22nd, or start date September 8th and end date September 12th, etc... there's three scenarios. Selecting the start date is obvious with a click event, and adding a selected class to that day. But how do I only allow two days to be selected at any given time across both calendars?
tagged with: css

http://stackoverflow.com/comment/139238939
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78970641
has text: What exactly is the problem?

http://stackoverflow.com/q/79030647
tagged with: visual-studio-code
has comment: http://stackoverflow.com/comment/139348696
has title: GitHub uploaded file output trouble
tagged with: css
tagged with: github
upvote count: 2
type: UnansweredQuestion
tagged with: bootstrap-5
favorite count: 0
downvote count: 2
type: Question
has body: After uploading my project file in GitHub the entire output has been getting bigger when it's compared to VS Code Go-Live server. My every project file has been output has been changing. Why this has been happening?
tagged with: http://stackoverflow.com/tag/html
has answer: http://stackoverflow.com/a/79035380
answer count: 1
score: 0

http://stackoverflow.com/comment/139387867
has text: Bugged for some screen resolutions. Try it. I think `order: -1;` for A it's not needed (A is anyway at top). No line break added. No fixed resolution at 214 for A and C. I think you're on the right track, but use the snippet as a starting point for next time. In any case it helped. However it works for both mobile and desktop screen resolution. I had skipped `flex-wrap: wrap;`. It's a topic I don't master and I should delve deeper into. Bye
score: 1
comment on: http://stackoverflow.com/a/79051880
type: Comment
type: AnswerComment

http://stackoverflow.com/a/78995258
upvote count: 0
has body: I finally managed to display a custom font from the system (in Chrome) What I was missing is that I needed to install the font in the system Here are the steps to do it (on Sonoma) : Open Font Book.app (you can find it on the Applications folder) Choose "File" then "Add Fonts to Current User" From there you will be able to add your font and install it in the system Here is the official installation link (on the top left, you can choose your OSX version) Install custom fonts on MacOSX To finish here is the working code Font test Font no jutsu! For information it works only on Chrome For Safari users, it does not work due to security reason, here is a post about it Hope it can help PS: if someone has a solution for Safari, I will be glad to hear it
type: Answer
answers question: http://stackoverflow.com/q/78993739
score: -1
downvote count: 1

http://stackoverflow.com/q/78982848
score: 0
tagged with: sass
linked to: http://stackoverflow.com/q/2889501
upvote count: 1
has comment: http://stackoverflow.com/comment/139261733
has comment: http://stackoverflow.com/comment/139261521
tagged with: css
linked to: http://stackoverflow.com/q/15077547
has body: I have a text "250" in figma with this props: Inner shadow: -4px 4px 8px #000(40%) Drop shadow: -1px 1px 2px #fff (80%) Gradient: from #212423 to #0D0D0D That renders this: But I have tried to reproduce it and I can't find any solution to combine text with a gradient as a background and an inner shadow. So, I just have a text with a gradient and a drop shadow to create the "light effect" but not the inner shadow. Inner shadow: -4px 4px 8px #000(40%) Current code 250 .text-3D { background: #212423; background: linear-gradient(to top, #0D0D0D 0%, #212423 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 80%; filter: drop-shadow(-1px 1px 1px #ffffff80); font-size: 200px; font-weight: 900; } I have seen this similar question: gradient text in css with text shadow But they work on a gradient text with a "drop shadow" and not an "inner shadow". Has anyone already succeeded in combining gradient text with an inner shadow?
has comment: http://stackoverflow.com/comment/139264116
downvote count: 1
has title: Inner text shadow + text with gradient background
has comment: http://stackoverflow.com/comment/139261503
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139261444
favorite count: 0
has comment: http://stackoverflow.com/comment/139261728
type: Question
answer count: 1
has answer: http://stackoverflow.com/a/78986571
tagged with: http://stackoverflow.com/tag/html

http://stackoverflow.com/comment/139318527
comment on: http://stackoverflow.com/a/79007174
has text: @Karol_Ch unfortunately this won't work. It's too specific to one text length as the `` uses a fixed width so isn't adaptable.
type: Comment
score: 0
type: AnswerComment

http://stackoverflow.com/comment/139317484
score: 0
has text: Fix with adding this code block var vids = document.querySelectorAll("video"); vids.forEach(vid => { var playPromise = vid.play(); if (playPromise !== undefined) { playPromise.then(_ => {}).catch(error => {}); }; }); Source: https://github.com/barbajs/barba/issues/596
type: QuestionComment
type: Comment
comment on: http://stackoverflow.com/q/79002604

http://stackoverflow.com/comment/139364602
has text: PS: `inset: 0` is a short form for `top: 0, right: 0; bottom: 0; left: 0;`. So you can remove the `top`, `width` and `height` properties.
comment on: http://stackoverflow.com/a/79038064
type: Comment
type: AnswerComment
score: 1

http://stackoverflow.com/comment/139170226
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78933059
has text: i was missing a -.... Thank you lol!
type: Comment

blur
tags question: http://stackoverflow.com/q/78911681
tag name: blur
tags question: http://stackoverflow.com/q/78948544
type: Tag
tags question: http://stackoverflow.com/q/78984786
tags question: http://stackoverflow.com/q/79018787

http://stackoverflow.com/comment/139211491
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78955242
has text: Thanks for sharing this interesting development in CSS spec.
type: Comment

http://stackoverflow.com/q/78906308
has answer: http://stackoverflow.com/a/78906365
score: -2
upvote count: 1
has title: How to expand a button using :hover in CSS?
favorite count: 0
has answer: http://stackoverflow.com/a/78906368
accepted answer: http://stackoverflow.com/a/78906368
tagged with: css-animations
type: Question
tagged with: hover
tagged with: http://stackoverflow.com/tag/html
possible better answer: http://stackoverflow.com/a/78906365
type: AnsweredQuestion
has body: I am trying to make a button that will expand when you hover over it with the mouse. However, i cannot seem to get the button to change sizes. I have tried to use animations but that also didn't work. i'm wondering if there is a problem with the code that will stop it from changing. here is the code that wont work: `HTML: Lisbon CSS: #btn1 { height: 150px; width: 220px; position: absolute; left: 550px; top: 400px; background-image: url(Images/portugal-flag.jpg); background-size: cover; cursor: pointer; #btn1:hover { max-height: 200px; max-width: 250px; }`
has answer: http://stackoverflow.com/a/78906483
tagged with: css
answer count: 3
downvote count: 3

http://stackoverflow.com/q/79025035
answer count: 0
tagged with: css
tagged with: css-selectors
linked to: http://stackoverflow.com/q/62052199
type: UnansweredQuestion
has body: I want to style a div but i want the div to have a border and I want the border to have two colors running from top left to bottom right. I tried using border-image, it worked but the border-radius won't work unless i remove the border-image. I wanted to know if there's anyway I can achieve this with any other method. If you check on the image, you'll see that it has a dashed border with two different colors and i will really appreciate if someone could help me with how to achieve that. .circle-border { width: 200px; height: 200px; border: 10px solid; border-radius: 50%; border-image: linear-gradient(to right, #C74AD6, #A5502F) 1; } &lt;div class="circle-border"&gt;&lt;/div&gt; This is the code I wrote.
linked to: http://stackoverflow.com/q/51496204
type: Question
score: 0
duplicate of: http://stackoverflow.com/q/51496204
has title: How does one use border-image to set a color gradient to an element and still give it a border-radius?

http://stackoverflow.com/q/79000934
answer count: 0
has title: Overwrite colors of bulma 1.0.X
tagged with: css
has comment: http://stackoverflow.com/comment/139295432
has body: I just begin to work on Bulma CSS 1.X, and after a lot of google search and pain, I'm unavailable to find a way of customing theme colors. Based on the documentation I successfully edit this : Title blabla Lire la suite Contacts @import "https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css"; :root { /* =============== BULMA ============ */ /* PRIMARY */ --bulma-primary-h: 280; --bulma-primary-s: 100%; --bulma-primary-l: 50%; /*!* TEXT MAIN *!*/ --bulma-text-h: 0; --bulma-text-s: 0%; --bulma-text-l: 0%; /* EXAMPLE OF NOT WORKING */ --bulma-button-color-l: 100%; } But this is just pain to do that. I am unable to just change button color text, I need to select .button to color: #fff. If I edit vars of color value of button, nothing happen. Is someone successful to custom primary color (I want to replace this green/blue). I saw generators but not working on recent version of Bulma.
type: UnansweredQuestion
score: 0
type: Question
has comment: http://stackoverflow.com/comment/139294953
tagged with: bulma
has comment: http://stackoverflow.com/comment/139299702

http://stackoverflow.com/comment/139126593
score: 0
type: QuestionComment
has text: @Paulie_D How? Wait until the ID changes and the site breaks? https://community.shopify.com/c/shopify-design/why-does-my-section-id-keep-changing-in-shopify/td-p/2406235
comment on: http://stackoverflow.com/q/78907243
type: Comment

http://stackoverflow.com/q/79036823
favorite count: 0
has comment: http://stackoverflow.com/comment/139361162
tagged with: css-animations
type: Question
has title: Stopping a @keyframes animation at specific keyframe
has comment: http://stackoverflow.com/comment/139360178
tagged with: http://stackoverflow.com/tag/html
downvote count: 2
has comment: http://stackoverflow.com/comment/139363669
answer count: 1
score: 0
has comment: http://stackoverflow.com/comment/139362531
tagged with: javascript
has comment: http://stackoverflow.com/comment/139360686
has comment: http://stackoverflow.com/comment/139362440
has answer: http://stackoverflow.com/a/79037252
tagged with: css
has body: I have a simple CSS keyframes animation (from https://codepen.io/hopefulcodegirl/pen/WNwmOQX) - I was wondering if there is a way to stop the animation at a specific keyframe (this would be based on data I get from backend) - so that the progress bar stops at some give percentage. The only way I can think of is generating CSS files on first website render with different keyframes defined inside, depending on the target percent value. But this hardly seems like an efficient method. Is my only option to just redo the animation in JS? .color-container { width: 100%; height: 200px; margin: 0; padding: 0; animation: background_load 5s infinite; display: flex; justify-content: center; align-items: center; } .container { position: relative; width: 50%; /*margin: 280px auto;*/ /*padding: 20px 40px;*/ border-radius: 4px; box-sizing: border-box; background: #fff; box-shadow: 0 10px 20px rgba(0, 0, 0, .5); } .Loading { position: relative; display: inline-block; width: 100%; height: 10px; background: #f1f1f1; box-shadow: inset 0 0 5px rgba(0, 0, 0, .2); border-radius: 4px; overflow: hidden; } .Loading:after { content: ''; position: absolute; left: 0; width: 0; height: 100%; border-radius: 4px; box-shadow: 0 0 5px rgba(0, 0, 0, .2); animation: load 5s forwards; } @keyframes load { 0.0% { width: 0.0%; background: #94e02d; } 2.04% { width: 2.04%; background: #96e02c; } 4.08% { width: 4.08%; background: #98e12b; } 6.12% { width: 6.12%; background: #9ae12a; } 8.16% { width: 8.16%; background: #9ce229; } 10.2% { width: 10.2%; background: #9ee328; } 12.24% { width: 12.24%; background: #a1e327; } 14.29% { width: 14.29%; background: #a3e426; } 16.33% { width: 16.33%; background: #a5e525; } 18.37% { width: 18.37%; background: #a7e524; } 20.41% { width: 20.41%; background: #a9e623; } 22.45% { width: 22.45%; background: #ace622; } 24.49% { width: 24.49%; background: #aee721; } 26.53% { width: 26.53%; background: #b0e821; } 28.57% { width: 28.57%; background: #b2e820; } 30.61% { width: 30.6…
upvote count: 2
type: UnansweredQuestion

http://stackoverflow.com/comment/139249357
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78975340
type: QuestionComment
has text: Have you corrected the typo and tried the code again?

http://stackoverflow.com/q/78943928
score: 0
has title: Download file Via web view
upvote count: 1
answer count: 0
tagged with: css
has body: hello i have a problem try to download files from webview app with this way private void startDownload(String url, String userAgent, String contentDisposition, String mimetype) { // Create a DownloadManager request DownloadManager.Request request = new DownloadManager.Request(Uri.parse(url)); request.setMimeType(mimetype); request.addRequestHeader("User-Agent", userAgent); request.setDescription("Downloading file..."); request.setTitle(URLUtil.guessFileName(url, contentDisposition, mimetype)); request.allowScanningByMediaScanner(); request.setNotificationVisibility( DownloadManager.Request.VISIBILITY_VISIBLE_NOTIFY_COMPLETED); request.setDestinationInExternalPublicDir( Environment.DIRECTORY_DOWNLOADS, URLUtil.guessFileName(url, contentDisposition, mimetype)); // Enqueue the download DownloadManager downloadManager = (DownloadManager) getSystemService(Context.DOWNLOAD_SERVICE); downloadManager.enqueue(request); Toast.makeText(getApplicationContext(), "Downloading File...", Toast.LENGTH_SHORT).show(); } and this is how backend site works to take url. After a lot of tries i just started the download from download manager but without success it fail at 0% i think doesn't take the url just take the name and add it to download manager because on source i have download file... app.get('/download/:filePath', (req, res) => { // Decode the file path const decodedPath = decodeURIComponent(req.params.filePath); // Construct the full path const fullPath = path.join('D:\\', decodedPath); // Log the full path console.log('Attempting to access file at:', fullPath); // Check if the file exists and has read permissions fs.access(fullPath, fs.constants.R_OK, (err) => { if (err) { console.error('File not found or access error:', err); if (!res.headersSent) { res.status(404).json({ error: 'File not found' }); } return; } res.download(fullPath, (downloadErr) => { if (downloadErr) { if (res.headersSent) { console.error('Error during file download:', downloadErr); return; } console.error('…
downvote count: 1
has comment: http://stackoverflow.com/comment/139213049
type: UnansweredQuestion
favorite count: 0
type: Question
tagged with: java
tagged with: android
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139213328

http://stackoverflow.com/comment/139390539
type: Comment
score: 0
type: QuestionComment
has text: The effect is more often called and referred-to as *Marquee*
comment on: http://stackoverflow.com/q/79052612

http://stackoverflow.com/comment/139149444
comment on: http://stackoverflow.com/a/78921933
type: Comment
score: 0
type: AnswerComment
has text: I tried it because I thought it would work, but it didn't work. `p:has(+ p:not(:has(button.print)))`... your solution works well. I learned it. Thank you :)

http://stackoverflow.com/comment/139234230
comment on: http://stackoverflow.com/q/78968063
type: Comment
score: 0
type: QuestionComment
has text: See https://caniuse.com/?search=nesting Safari IOS did not fully support nesting in CSS until 17.2 so de-nesting as @tacoshy recommends should help.

http://stackoverflow.com/comment/139169978
type: QuestionComment
has text: Ahh ok, I get it. This reminded me that I had a conversation with @Temani Afif on Mastodon a while back. I’ll answer below.
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78929318

http://stackoverflow.com/a/79025090
score: 0
has body: It turns out that whatever would be the best way to do this it would have actually made the website look worse - very skewed. It was a bad question of course. But at least I learned that, as it seems, all of the internet centres all the content relative to the space left after subtracting the scrollbar and relative not to the whole screen itself and it all looks fine.
type: Answer
answers question: http://stackoverflow.com/q/79024470

http://stackoverflow.com/comment/139265218
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78984479
has text: @ShubhamSinghChauhan i have used custom css to change the color of the rows (`.completed-row` and `.not-completed-row`) these classes are not part of bootstrap. if you want to use bootstrap's classes use: `const rowClass = itemData.completed ? "table-success" : "table-danger";`
type: Comment

http://stackoverflow.com/comment/139261198
type: Comment
score: 0
comment on: http://stackoverflow.com/a/78979928
type: AnswerComment
has text: Thank you for taking the time to answer, however this unfortunately didn't work for me when I tested it. In the end, I did manage to find a solution that worked for me, and I will post it here in case it helps others.

http://stackoverflow.com/a/78923806
answers question: http://stackoverflow.com/q/78923710
accepted answer of: http://stackoverflow.com/q/78923710
downvote count: 0
has body: Based on your reply to my comment on the question, you have some font substitution entries in the registry, and one of them is to substitute Arial for any request for Helvetica. This is described in this posting on Microsoft's Tech Community; essentially, there are entries in the registry under HKLM\SOFTWARE\Microsoft\Windows NT\CurrentVersion\FontSubstitutes to cause applications to use fonts that you do have when certain putatively similar fonts that you do not have are requested.
score: 1
upvote count: 1
type: AcceptedAnswer
type: Answer

http://stackoverflow.com/comment/139395916
type: Comment
comment on: http://stackoverflow.com/a/79049727
has text: Reader Mode on browsers strips away any styles applied using CSS. So the width needs to be directly applied to the HTML element without CSS.
score: 0
type: AnswerComment

http://stackoverflow.com/comment/139169055
type: Comment
has text: hmm cool to know. Not familair with Angular but in native CSS, custom property definitions should be cascaded into Shadow DOMs. I'm not sure if we are able to disallow this behavior. Maybe it relates to how Angular loads the CSS stylesheets?
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78932578

http://stackoverflow.com/q/79035136
has answer: http://stackoverflow.com/a/79035337
type: UnansweredQuestion
favorite count: 0
type: Question
has title: Without changing the html code, make blocks adaptive to the content. Only due to styles
tagged with: http://stackoverflow.com/tag/html
score: -3
has body: The blue block can use different heights, it may also not be in the document. Under the blue block, the news block... Without changing the html document. Is it possible, using styles, to make the blue block be the height of its content, and the news be pressed against the blue block or be at the level of the red one, in case the blue block is not in the html div { font-size: 20px; font-weight: bold; } .gl { display: grid; grid-template-columns: 500px 200px; gap: 20px; } .b_1 { aspect-ratio: 1; background: red; } .b_2 { background: blue; } .Content { background: #0caa27; padding: 10px; } Blok_1 Blok_2 Content News
answer count: 2
downvote count: 4
upvote count: 1
has answer: http://stackoverflow.com/a/79035266
tagged with: css

http://stackoverflow.com/comment/139199084
type: AnswerComment
has text: That font is wild yo!
type: Comment
score: 0
comment on: http://stackoverflow.com/a/78944871

http://stackoverflow.com/comment/139275304
score: 0
has text: Off (since you requested feedback): It's unnecessary to include the HTML ` ` and ` ` tags in the Code Snippet, as Stack Overflow won't interpret them and they only complicate the question's code unnecessarily. (Unless you have specific questions about these, but that's not the case here.) - In my answer, you'll see how much simpler the code is without them. This way, it will be easier for others to understand as well.
type: QuestionComment
comment on: http://stackoverflow.com/q/78990433
type: Comment

http://stackoverflow.com/comment/139259337
comment on: http://stackoverflow.com/q/78981277
type: QuestionComment
type: Comment
score: 0
has text: Try adding `preserveAspectRatio="none"` for the SVG and give the svg a size like width:50vw; height:70vh. The preserveAspectRatio="none" will force NONuniform scaling but I think this is what you want. **Alternatively** instead of you can use a css gradient

http://stackoverflow.com/q/78915933
upvote count: 0
has comment: http://stackoverflow.com/comment/139137778
favorite count: 0
possible better answer: http://stackoverflow.com/a/78915974
has comment: http://stackoverflow.com/comment/139137698
has comment: http://stackoverflow.com/comment/139137824
has answer: http://stackoverflow.com/a/78916035
type: Question
tagged with: background-image
has body: I am trying to make the background image display on .hero, which means the image will be at the center of the page, but the image doesn't display at all. In "devtools", it shows a warning sign next to the image. I tried to put the image on the body and eliminate the position absolute that I put in the CSS; however, it didn't affect the results. Please help. I thought the position absolute might push other elements like the .hero class, which has the background image. I also tried writing it in several ways with '' and with two dots and even with one dot. .hero { background-image: url("https://picsum.photos/100/100") center center/cover no-repeat; margin-top: 8rem; padding: 11.5rem 2rem 8rem; position: relative; overflow-x: hidden; } Create your own video courses dive deep into the world of creativity and learn to craft stunning videos that captivate your audience 29$ Get Course
type: AnsweredQuestion
accepted answer: http://stackoverflow.com/a/78916029
has answer: http://stackoverflow.com/a/78915974
has comment: http://stackoverflow.com/comment/139137754
score: -1
answer count: 3
tagged with: css
has title: Can't understand why my background image doesn't display
has answer: http://stackoverflow.com/a/78916029
downvote count: 1

http://stackoverflow.com/q/78978467
favorite count: 0
type: Question
tagged with: http://stackoverflow.com/tag/html
answer count: 1
tagged with: user-interface
type: AnsweredQuestion
accepted answer: http://stackoverflow.com/a/78978650
downvote count: 0
has comment: http://stackoverflow.com/comment/139253252
tagged with: django
tagged with: javascript
upvote count: 1
score: 1
has title: CSS/JS Issue: Grey Space Appears Between Navbar and Content on Page Load, Then Disappears on Interaction
has answer: http://stackoverflow.com/a/78978650
tagged with: css
has body: I'm working on a Django-based website and encountering an issue with a grey space appearing between my fixed navbar and the content on the home page. The grey space appears only on the initial page load, and once I interact with the page (like scrolling), the grey space disappears, and the layout corrects itself. Here's what happens: On initial load: A grey space appears between the navbar and the content. After any small interaction: The grey space disappears, and the page layout behaves as expected. What I've Tried: I’ve traced the issue to this JavaScript that adjusts the margin of the content based on the height of the navbar: document.addEventListener("DOMContentLoaded", function () { var navbar = document.getElementById("navbar"); var content = document.querySelector(".content"); function adjustContentMargin() { var navbarHeight = navbar.offsetHeight; content.style.marginTop = navbarHeight + "px"; } // Adjust margin on page load window.onload = function() { adjustContentMargin(); }; // Re-adjust on window resize window.addEventListener('resize', function () { adjustContentMargin(); }); }); Problem: When the JS is active, the page initially loads with the grey space between the navbar and the content. The margin-top gets applied, but it looks like it happens after the grey space appears. If I remove the JS, the page loads without the grey space initially, but when I interact with it, the content shifts up behind the navbar. What I Need: I want the content to never overlap with the navbar, but also avoid the grey space on initial load. I need to: Ensure the content stays correctly positioned under the navbar on initial load. Dynamically adjust the content’s margin based on the navbar’s height if the window is resized.
has comment: http://stackoverflow.com/comment/139253393

http://stackoverflow.com/comment/139318093
comment on: http://stackoverflow.com/q/79013255
score: 0
type: QuestionComment
has text: since it's unclear how to have it using air-datepicker without implementing it using a very custom logic, I would suggest you another library called flatpickr. I have an example achieving the exact scenario you asked for but using flatpickr. I didn't post the answer yet because you still didn't clarify if it's ok for you to change that requirement
type: Comment

http://stackoverflow.com/a/79016545
upvote count: 2
has comment: http://stackoverflow.com/comment/139329878
has body: You have created a "controlled component" by setting the value programatically. This prevents the value from being changed by the browser. You either need to add an onChange prop with a handler that updates the value being set on the value prop, or you need to remove the value prop. See "My text input doesn't update when I type into it" in the React docs for input.
answers question: http://stackoverflow.com/q/79016259
type: AcceptedAnswer
score: 2
downvote count: 0
type: Answer
accepted answer of: http://stackoverflow.com/q/79016259

http://stackoverflow.com/comment/139314712
has text: There's not much difference in the appearance between OP's snippet and yours.
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/79011555

highcharts
tags question: http://stackoverflow.com/q/79004380
type: Tag
tag name: highcharts
tags question: http://stackoverflow.com/q/79007335

http://stackoverflow.com/q/78957784
has comment: http://stackoverflow.com/comment/139214876
score: -1
has comment: http://stackoverflow.com/comment/139214902
downvote count: 2
has comment: http://stackoverflow.com/comment/139214938
has body: I am making a online booking website with WooCommerce Booking and the Storefront Theme. On my home page I made a banner with an image and a button as seen in the image below. However, I have not been able to get rid of that white space. I have added the following code in the custom CCS section of wordpress to remove the title Any idea how I can remove the space? I want the banner and the header to be touching My code: .page .entry-title { display: none; } Here is the link to the website: https://idm.beb.mybluehost.me/
tagged with: css
tagged with: woocommerce
has title: Remove Space Between Header and First Block
favorite count: 0
upvote count: 1
has comment: http://stackoverflow.com/comment/139214855
type: Question
has answer: http://stackoverflow.com/a/78957822
answer count: 1
accepted answer: http://stackoverflow.com/a/78957822
has comment: http://stackoverflow.com/comment/139214914
type: AnsweredQuestion
tagged with: wordpress

http://stackoverflow.com/comment/139197356
type: Comment
comment on: http://stackoverflow.com/q/78948175
type: QuestionComment
score: 1
has text: For your _current_ example above this would work: `.nav_menu>li:not(.button):not(:has(+ .button))` - the number of the li _before_ "the last one before the .button one" could be dynamic with this. But if there could be other "normal" `li` after the button, or any other structurally different situations, it's probably not going to work like you want.

http://stackoverflow.com/comment/139350575
type: QuestionComment
type: Comment
comment on: http://stackoverflow.com/q/79016921
score: 0
has text: Are you try this solution I have shared with pseudo element

http://stackoverflow.com/comment/139166132
score: 0
type: AnswerComment
has text: To expand on this, is there a way to make the hover effect snap back to the first card when not hovering on any cards?
comment on: http://stackoverflow.com/a/78931052
type: Comment

http://stackoverflow.com/q/79028680
favorite count: 0
has body: My question is if there is a way to access the content of HTML &lt;style&gt; element from jQuery. &lt;style&gt; .calendarNavbarLink { margin-left: 20px; } .today { background-color: lawngreen; } .weekend { background-color: lightsalmon; } &lt;/style&gt; For example: I would access the value of the property background-color of the rule .weekend. Is it possible do this from jQuery?
downvote count: 2
type: Question
has title: Access HTML tag rules
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139345091
duplicate of: http://stackoverflow.com/q/324486
linked to: http://stackoverflow.com/q/30519146
tagged with: javascript
linked to: http://stackoverflow.com/q/3730035
score: -1
upvote count: 1
has comment: http://stackoverflow.com/comment/139345104
tagged with: jquery
has answer: http://stackoverflow.com/a/79029867
answer count: 2
linked to: http://stackoverflow.com/q/324486
tagged with: css
has answer: http://stackoverflow.com/a/79029262
type: UnansweredQuestion

http://stackoverflow.com/comment/139158162
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78926760
type: QuestionComment
has text: Also, it may help you to use a pre-existing game engine to handle this for you. Something like Phaser or Babylon.

http://stackoverflow.com/a/79033166
score: 2
downvote count: 0
type: Answer
has body: This answer addresses what I think your main question is, which is how to adjust button padding. I'm sure you may have additional questions as this answer is unlikely to answer all of your related queries, but, if so, it may be better to ask them as new questions. Styling Button Padding using CSS Button padding can be modified via CSS. As noted by Slaw in comments: The default application-wide user agent stylesheet (modena.css) gives buttons padding. You can override this by setting the padding property to something else (perhaps zero?). With an inline style In code, you can write: unpaddedButton.setStyle("-fx-padding: 0px"); With an external stylesheet But better to apply a CSS stylesheet: .unpadded { -fx-padding: 0px; } Then you get in code: unpaddedButton.getStyleClass().add("unpadded"); Applying a style to all buttons Or, if you wanted to unpad all buttons in your app (unlikely), you could just have a stylesheet. .button { -fx-padding: 0px; } You can restrict this to some custom pane to style all buttons in the custom pane, by applying a style class of "custom-pane" (or any other name your want) to a layout pane containing all buttons you want styled. .custom-pane > .button { -fx-padding: 0px; } Using Scene Builder To apply your own stylesheet and style classes to your FXML with scene builder, you can associate your custom CSS stylesheet with the FXML in scene builder and then apply the style. This process of using CSS style sheets from scene builder is documented in the Oracle Scene Builder guide (the Oracle documentation is outdated, but still relevant in this regard). Setting padding using code In addition to styling via CSS, you can use the JavaFX API in Java code to set the padding, this will override any CSS definitions. unpaddedButton.setPadding(new Insets(0)); Example This basic example removes padding from a button using an inline style. import javafx.application.Application; import javafx.geometry.Insets; import javafx.scene.Scene; import javafx.scene.…
upvote count: 2
answers question: http://stackoverflow.com/q/79029522

css-paged-media
tag name: css-paged-media
tags question: http://stackoverflow.com/q/79042281
type: Tag
tags question: http://stackoverflow.com/q/79536126

mime-types
tag name: mime-types
type: Tag
tags question: http://stackoverflow.com/q/78910465
tags question: http://stackoverflow.com/q/79173906

http://stackoverflow.com/comment/139359383
has text: Amended the HTML, I deliberately didn't put it in there initially because you need **a lot** of lorem ipsum above and below the video to actually trigger the bug. I needed to short it down, so I hope it's still reproducible like this.
comment on: http://stackoverflow.com/q/79035901
type: Comment
score: 0
type: QuestionComment

http://stackoverflow.com/comment/139297157
type: QuestionComment
comment on: http://stackoverflow.com/q/78973058
has text: @Anita I'm still following the question, but did not hear from you yet.
type: Comment
score: 0

http://stackoverflow.com/comment/139325033
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/79016879
has text: I read about a clip-path solution and I see your code, but the "lightblue" segment is completely missing and the border is around the gray background and not the "lightblue segment". It should like like the second image I posted.
type: Comment

http://stackoverflow.com/comment/139270729
type: QuestionComment
comment on: http://stackoverflow.com/q/78987811
type: Comment
score: 0
has text: @AHaworth, I've modified the question using the example given in one of the answers... The problem can be demonstrated easily.

http://stackoverflow.com/comment/139208969
type: AnswerComment
has text: I'm glad I could help :)
type: Comment
comment on: http://stackoverflow.com/a/78948436
score: 0

http://stackoverflow.com/comment/139294629
type: AnswerComment
comment on: http://stackoverflow.com/a/79000845
has text: You claim that `:hover` is in the lower layer and therefore it does not overwrite `.item` in the upper layer - well, that's right, I do not define `:hover` in the upper layer, because I want to keep the old `:hover` styles. P.S. I understand how the cascade works and that the styles of the lower layers can be overwritten by the styles of the upper layers (in the order of their declaration, the later the higher the priority).
type: Comment
score: 0

wrapper
tag name: wrapper
tags question: http://stackoverflow.com/q/79001776
type: Tag

http://stackoverflow.com/q/79054258
tagged with: css
has answer: http://stackoverflow.com/a/79054520
has comment: http://stackoverflow.com/comment/139391916
has comment: http://stackoverflow.com/comment/139395996
downvote count: 1
tagged with: image
has comment: http://stackoverflow.com/comment/139399189
has body: I have an array of 6 objects which are 6 images. I have rendered those images in a HTML table through JS code. Now I would like to target and style only ONE of them. Width, height, and so on. How to do that in the most simple way as possible? I tried to write a style key in the object with CSS code. Did not work. I tried to getElementbyId on the specific img but it did not work either. I have checked on other topics but what I've read, so far was really for complicated for what I want to do. I just want to change the size of ONE image. const products = [{ "id": 1, "image": "https://via.placeholder.com/50", "name": "Orient Vita Pro 28\"", "price": "284.00", "inventory": 4, "productCode": "K203" }, { "id": 2, "image": "https://via.placeholder.com/50", "name": "Orient S-400 26\"", "price": "198.00", "inventory": 14, "productCode": "K433" }, { "id": 3, "image": "https://via.placeholder.com/50", "name": "Bullet Bora 20\"", "price": "350.00", "inventory": 7, "productCode": "K012" }, { "id": 4, "image": "https://via.placeholder.com/50", "name": "Feder handmade", "price": "790.00", "inventory": 5, "productCode": "G0127" }, { "id": 5, "image": "https://via.placeholder.com/50", "name": "Ibanez G120", "price": "430.00", "inventory": 2, "productCode": "G1233" }, { "id": 6, "image": "https://via.placeholder.com/50", "name": "Feder Blues edition", "width": "1000", "price": "650.00", "inventory": 6, "productCode": "G4478" } ]; const placeholder = document.querySelector("#data-output"); let out = ""; for (let product of products) { out += ` ${product.name} ${product.price} ${product.inventory} ${product.productCode} `; } placeholder.innerHTML = out; Image Product name Price inventory Product code
has comment: http://stackoverflow.com/comment/139393898
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139391921
favorite count: 0
has comment: http://stackoverflow.com/comment/139395987
type: Question
has comment: http://stackoverflow.com/comment/139392286
has comment: http://stackoverflow.com/comment/139398067
has comment: http://stackoverflow.com/comment/139392202
tagged with: object
has answer: http://stackoverflow.com/a/79058399
score: 0
answer count: 2
upvote count: 1
has title: How to target object image to style it with CSS?

http://stackoverflow.com/a/78946276
has body: I would use mask and background. I am using red and blue for the demo but you can easily change with the colors you want .line { height: 10px; /* adjust the 30px to control the size of the dash and the 50% to control the gap */ mask: linear-gradient(90deg,#000 50%,#0000 0) 0/30px; /* adjust the 70% to control the percentage of red */ background: linear-gradient(90deg,red 70%,blue 0); } &lt;div class="line"&gt;&lt;/div&gt;
upvote count: 2
answers question: http://stackoverflow.com/q/78946005
score: 2
has comment: http://stackoverflow.com/comment/139198992
downvote count: 0
type: Answer

http://stackoverflow.com/comment/139253867
type: QuestionComment
score: 1
type: Comment
has text: learn some backend language/configuration. What you are describing is not the purpose of CSS/HTML, you need something else to manage/generate the files
comment on: http://stackoverflow.com/q/78978707

http://stackoverflow.com/a/78940675
score: 0
has body: The component runs after the CSS variables have been applied or updated in the DOM. import React, { useState, useEffect } from 'react'; const ColorComponent = () => { const [accent7Color, setAccent7Color] = useState(''); const [accent8Color, setAccent8Color] = useState(''); useEffect(() => { setTimeout(() => { const rootStyles = getComputedStyle(document.documentElement); const accent7 = rootStyles.getPropertyValue('--accent-7').trim(); const accent8 = rootStyles.getPropertyValue('--accent-8').trim(); setAccent7Color(accent7); setAccent8Color(accent8); console.log('Accent 7 Color:', accent7); console.log('Accent 8 Color:', accent8); }, 100); }, []); return ( Accent 7 Color: {accent7Color} Accent 8 Color: {accent8Color} ); };
answers question: http://stackoverflow.com/q/78940137
has comment: http://stackoverflow.com/comment/139191008
type: Answer

http://stackoverflow.com/comment/139245651
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78974025
has text: This question is similar to: [Z-Index not working on Safari - fine on Firefox and Chrome](https://stackoverflow.com/questions/40895387/z-index-not-working-on-safari-fine-on-firefox-and-chrome). If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem.
type: Comment

http://stackoverflow.com/comment/139141055
score: 0
comment on: http://stackoverflow.com/q/78917706
type: QuestionComment
has text: No, there was no particular reason, @Dai
type: Comment

http://stackoverflow.com/comment/139185791
type: AnswerComment
has text: Hello. Thank you. I appreciate your time. Please check out the second version. I updated the original post. Why it doesn't happen in that? And I don't have any lowering?
comment on: http://stackoverflow.com/a/78941800
type: Comment
score: 0

http://stackoverflow.com/a/78953349
answers question: http://stackoverflow.com/q/78953159
accepted answer of: http://stackoverflow.com/q/78953159
has comment: http://stackoverflow.com/comment/139206521
type: AcceptedAnswer
has body: The .nice-select .list:hover .option:not(:hover) {background-color: transparent !important;} rule makes the problem. Try adding the overriding rule to the end of the document, like so: jQuery(document).ready(function() { jQuery('select').niceSelect(); }); .nice-select .option:hover, .nice-select .option.selected { color: #000 !important; background-color: #999 !important; } The quick brown fox jumps over a lazy dog Quizzical twins proved my hijack-bug fix Cozy sphinx waves quart jug of bad milk Fix problem quickly with galvanized jets Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp...
type: Answer
downvote count: 0
upvote count: 1
has comment: http://stackoverflow.com/comment/139206552
score: 1

http://stackoverflow.com/q/79038767
linked to: http://stackoverflow.com/q/50898676
score: 0
answer count: 0
tagged with: css
has comment: http://stackoverflow.com/comment/139365112
has comment: http://stackoverflow.com/comment/139363831
type: UnansweredQuestion
duplicate of: http://stackoverflow.com/q/50898676
has body: I see some code in a tutorial like this: ❤️ Like some random text .like-button { position:absolute; bottom: 0; } However, when I scroll the page (I've removed some long text for simplicity in the posted code), the like button doesn't scroll with the content. I know using position: fixed can solve the issue, but I still wonder: since the like button's position is relative to the viewport, and the viewport is changing when scrolling, why doesn't the button move accordingly?
has comment: http://stackoverflow.com/comment/139363847
type: Question
has title: Why absolute positoned elements don't scroll with the content?

http://stackoverflow.com/comment/139396487
type: QuestionComment
score: 1
has text: Have you considered using CSS grid? Demo: https://jsfiddle.net/davidThomas/khfm71sy/
type: Comment
comment on: http://stackoverflow.com/q/79056369

wkhtmltopdf
tags question: http://stackoverflow.com/q/79024535
tag name: wkhtmltopdf
type: Tag
tags question: http://stackoverflow.com/q/79169088
tags question: http://stackoverflow.com/q/79376772
tags question: http://stackoverflow.com/q/79503809

http://stackoverflow.com/comment/139228335
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78964813
type: QuestionComment
has text: Will you have any menu items with characters that have descenders? If so, a general solution will not work.

http://stackoverflow.com/comment/139307513
type: QuestionComment
comment on: http://stackoverflow.com/q/79007799
has text: Does this answer your question https://stackoverflow.com/questions/53730877/how-to-make-the-left-side-of-a-range-slider-a-different-color-than-the-right-sid
type: Comment
score: 0

http://stackoverflow.com/comment/139268829
type: Comment
comment on: http://stackoverflow.com/a/78986609
has text: Then what you want is probably not something that flexbox or CSS-Grid can do. Although old school I'd go with `float`.
score: 0
type: AnswerComment

http://stackoverflow.com/comment/139400209
type: AnswerComment
comment on: http://stackoverflow.com/a/79057991
has text: Aha, good idea. I can then store it in my DB with a custom data-color attribute, and then use JS to set the style the same way from any data-color attributes when I display it.
score: 0
type: Comment

http://stackoverflow.com/comment/139275525
type: Comment
comment on: http://stackoverflow.com/q/78990537
score: 0
type: QuestionComment
has text: Maybe give the bars different colours?

http://stackoverflow.com/comment/139331774
has text: Please post a [mcve]
type: QuestionComment
comment on: http://stackoverflow.com/q/79021145
type: Comment
score: 0

http://stackoverflow.com/a/79020307
score: 0
has body: To resolve this issue, if you have several UI frameworks, import components of this by using a prefix in import notations like this: import PButton from 'primevue/button'; import PDropdown from 'primevue/dropdown'; So in my case, it helped me to resolve conflict between BootstrapVueNext and PrmeVue button and dropdown components:)
has comment: http://stackoverflow.com/comment/139331996
answers question: http://stackoverflow.com/q/79017364
type: Answer

http://stackoverflow.com/comment/139334568
has text: pls use code snippet tools to create a working example.
type: Comment
comment on: http://stackoverflow.com/q/79022878
score: 1
type: QuestionComment

http://stackoverflow.com/q/78946419
type: AnsweredQuestion
has comment: http://stackoverflow.com/comment/139194649
favorite count: 0
has title: Dynamically change colours with CSS so background and text colour aren't clashing
answer count: 2
has body: I'm facing the problem that users can change background colours for HTML components which sometimes conflict with text colours they can't change (or more generally, background and text colour are visually too similar). As a result, the text may become invisible (or difficult to see) if those colours are visually close enough. See below where's there's a triangle (=text)... ...which only becomes more visible on hover. (the user could also have also opted for a grey background which would have made this even worse) I've tried to tinker with filters (e.g. filter: brightness(50%) contrast(150%); or filter: saturate(0) grayscale(1) brightness(.7) contrast(1000%) invert(1) as suggested here), but that's sensitive to the selected colours (i.e. may not work in all cases of background and text colour combinations). Is there a way (in CSS, without JS as shown here) that would change the text colour slightly (ideally, the "type of colour" itself is somewhat maintained), so that text on conflicting (too close) background and text colours becomes visible? I realise that this question is asking for 2 things (1. detecting the conflict and 2. resolving the conflict by applying some sort of filter (or others)). If some suggestions are made for how to resolve the conflicting colours (2.), I'd already be happy. Trying mix-blend-mode: difference Without mix-blend-mode: difference; With mix-blend-mode: difference;
tagged with: http://stackoverflow.com/tag/html
has answer: http://stackoverflow.com/a/78946594
downvote count: 0
tagged with: background-color
has answer: http://stackoverflow.com/a/78955242
has comment: http://stackoverflow.com/comment/139194458
score: 1
upvote count: 1
has comment: http://stackoverflow.com/comment/139194434
tagged with: colors
tagged with: css
linked to: http://stackoverflow.com/q/55772303
type: Question
possible better answer: http://stackoverflow.com/a/78955242
linked to: http://stackoverflow.com/q/35969656
accepted answer: http://stackoverflow.com/a/78946594

http://stackoverflow.com/comment/139315022
type: Comment
comment on: http://stackoverflow.com/q/79010172
type: QuestionComment
has text: its inside template/home/ the html loads properly, its just the css that of the base html that does not, i wondered if it's a common problem with Django or i did something wrong
score: 0

http://stackoverflow.com/comment/139242154
type: Comment
score: 0
has text: `.parent` won't grow to the height of `.content`, when the latter is absolute positioned. Why is that necessary to begin with? You said something in the comment to the already given answer, that parts of this are influenced by CSS you have no control over - can you clarify, which ones those are, please?
type: QuestionComment
comment on: http://stackoverflow.com/q/78970281

http://stackoverflow.com/comment/139135695
comment on: http://stackoverflow.com/q/78914728
type: Comment
score: 0
type: QuestionComment
has text: @AustinDuling had a good hunch with the CSS; I would look at the display:flex there.

http://stackoverflow.com/comment/139196216
has text: This shouldn't be linked to centering text in a div. For buttons with SVG you want to be able to set the size w/h on the button and padding:0, that is 3 lines of CSS for the button, and the SVG be 100% Which it is by default so no CSS on the SVG required when you set the ``inert`` attribute on the SVG https://jsfiddle.net/WebComponents/9143afeL/ (I don't know if Sarari does this different, should be a bug then) Size/pad the SVG with SVG, not with CSS
type: QuestionComment
score: 1
comment on: http://stackoverflow.com/q/78946570
type: Comment

http://stackoverflow.com/a/79215353
has body: To prevent the <image> element within an from receiving focus and displaying the focus outline when navigating through the page with the Tab button, you can add the tabindex="-1" attribute to the <image> element. This will remove it from the tab order and prevent it from being focused. Here’s an example of how to implement this: <image tabindex="-1" href="image-source.jpg" x="0" y="0" width="100" height="100" /> This will ensure that the <image> element inside the doesn't get focus when you use the Tab key to navigate through the page, avoiding the focus outline (focus ring). If you want to keep the focus ring for other elements but remove it specifically for this image, you can also apply a CSS rule: svg image:focus { outline: none; } This will remove the outline from the <image> when it gets focused without affecting other focusable elements.
answers question: http://stackoverflow.com/q/79003079
type: Answer
score: 0

http://stackoverflow.com/a/79072354
answers question: http://stackoverflow.com/q/79066590
type: Answer
score: 0
has body: solved, turning debug mode off fixes this. app.run_server(debug=False) kudos to @spriteware in the plotly community forum!

router
tags question: http://stackoverflow.com/q/78931612
tags question: http://stackoverflow.com/q/78959933
type: Tag
tag name: router

http://stackoverflow.com/comment/139128561
has text: Thanks for direction. After setting to true, it needed browsesrlist, so I copied ".browserslistrc" fist from bootstrap project "[link](https://github.com/twbs/bootstrap/blob/main/.browserslistrc)"
type: QuestionComment
score: 0
comment on: http://stackoverflow.com/q/78910515
type: Comment

http://stackoverflow.com/q/79055622
has body: I added Google translator widget to my site. When I select element, borders appear. I need to change their size. The following doesn't work: .goog-te-combo option:focus {outline-width: 0px !important; } widget
answer count: 1
type: AnsweredQuestion
has title: Change border size in Google Translate widget
score: 0
tagged with: css
tagged with: google-translate
has answer: http://stackoverflow.com/a/79055908
accepted answer: http://stackoverflow.com/a/79055908
type: Question

http://stackoverflow.com/q/78989831
type: UnansweredQuestion
has body: I was working on a simple project and added functionality that does the standard using a label linked to a checkbox, displaying none for both the label and checkbox on a standard view, and then displaying them in a media query of screen and max-width: 600px. For some reason though, when I would go to select the checkbox, the menu would not transition to the right. The linked SCSS file was navbar.module.scss. React File: import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import "./navbar.scss"; import { faBars } from "@fortawesome/free-solid-svg-icons"; export default function Navbar() { return ( Alex Wilson <FontAwesomeIcon icon={faBars} /> About Projects Contact Resume ) } SCSS File: @use "../../index.scss" as global; nav { color: global.$default-white; background-color: global.$default-black; display: flex; justify-content: space-between; padding: global.$extra-large-gap; align-items: center; letter-spacing: global.$default-letter-spacing; h1 { margin: 0; font-weight: normal; font-size: global.$large-font-size; } label { cursor: pointer; z-index: 1; } label, input[type="checkbox"] { display: none; } ul { list-style: none; margin: 0; padding: 0; display: flex; gap: global.$extra-large-gap; li { cursor: pointer; } } } @media screen and (max-width: 600px) { nav { position: fixed; top: 0; label { display: block; } ul { position: fixed; top: 5rem; width: 100%; left: -100%; height: 100dvh; flex-direction: column; justify-content: center; align-items: center; transition: left 0.3s ease-in-out; } #checkbox:checked~ul { left: 0; } } } I tried fixing it for a bit, and genuinely couldn't wrap my head around what was going on. Then just because I truly had no other guesses, I changed the SCSS file to navbar.scss. Then it worked just fine no issues. Can someone please explain how that makes sense? Is it something to do with the modularized class naming assigned to elements when you assign class names to a SCSS module? I'm truly lost on what the difference is.
has comment: http://stackoverflow.com/comment/139274429
type: Question
tagged with: reactjs
score: 0
tagged with: sass
has title: Checkbox option to display list only works in a non-module SCSS file?
answer count: 0
tagged with: css
has comment: http://stackoverflow.com/comment/139275072

http://stackoverflow.com/a/78940897
type: Answer
has comment: http://stackoverflow.com/comment/139184166
has body: To make it easy, the two versions are CSS2 and CSS2.x where the "x" doesn't really matter. The working group made big changes to the CSS2 spec to create a new one (the CSS2.1) then later they did more correction to have the CSS2.2. Basically, CSS2.1 and CSS2.2 are (almost) the same compared to CSS2. CSS 2.2 is the second revision of CSS level 2 [CSS2]. It corrects a few errors in CSS 2.1, the first revision of CSS level 2. ref
answers question: http://stackoverflow.com/q/78940746
accepted answer of: http://stackoverflow.com/q/78940746
has comment: http://stackoverflow.com/comment/139184210
score: 0
type: AcceptedAnswer

http://stackoverflow.com/q/78944574
has body: I am trying to achieve following styling: Pristine, valid input have default styling Dirty inputs have blue background, blue border, white text and white placeholder text ALL invalid inputs have red border It shall look like this: I use Angluar which provides the ng-dirty, ng-valid and ng-invalid classes So I created following SASS code: @mixin dirty-marking { background-color: $blue !important; color: $white !important; &.ng-valid { border-color: $blue !important; } } input.ng-dirty, input.ng-dirty::placeholder { @include dirty-marking; } input.ng-invalid { border: 1px solid $red !important; } I use the dirty-marking mixin also to style some custom checkboxes, dropdowns ... Using it like this the does not apply the blue border to the valid, dirty inputs. After checking the output of the SASS compiler it turned out, that this results in a CSS like this: input.ng-dirty, input.ng-dirty::placeholder { background-color: blue !important; color: white !important; } input.ng-dirty.ng-valid, input.ng-dirty::placeholder.ng-valid { border-color: blue !important; } The issue lies within input.ng-dirty::placeholder.ng-valid, after removing the trailing .ng-valid it started to work. Although I understand why it is like this I am unable to come up with proper solution EDIT: I was able to come up with a solution, which feels more like a workaround: @mixin dirty-marking($with-border-color: true) { background-color: $blue !important; color: $white !important; @if $with-border-color { &.ng-valid { border-color: $blue !important; } } } input.ng-dirty { @include dirty-marking; } input.ng-dirty::placeholder { @include dirty-marking($with-border-color: false); } input.ng-invalid { border: 1px solid $red !important; } This way I can prohibit the creation of the problematic input.ng-dirty::placeholder.ng-valid selector. I wonder whether there is a more elegant solution or if I can have something like @mixin dirty-marking { background-color: $blue !important; color: $white !important; @if "…
answer count: 0
tagged with: css
tagged with: angular
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139190742
type: Question
has title: Applying different styling to inputs which are dirty and valid and dirty invalid with sass
tagged with: input
score: 0
tagged with: scss-mixins
tagged with: sass

woocommerce
type: Tag
tags question: http://stackoverflow.com/q/78970096
tags question: http://stackoverflow.com/q/78932133
tag name: woocommerce
tags question: http://stackoverflow.com/q/79014805
tags question: http://stackoverflow.com/q/78957784
tags question: http://stackoverflow.com/q/79167216
tags question: http://stackoverflow.com/q/79148881
tags question: http://stackoverflow.com/q/79313983
tags question: http://stackoverflow.com/q/79423553
tags question: http://stackoverflow.com/q/79546758

http://stackoverflow.com/a/79005337
type: AcceptedAnswer
has comment: http://stackoverflow.com/comment/139306418
downvote count: 0
type: Answer
answers question: http://stackoverflow.com/q/79000488
has body: I think the underlying issues are: Specificity: some of your styled are being overwritten by the fluentui css styled. By adding !important you can force your styles to be used. The overlay, textOverlay and playButton should probably not be seperated into sibling div-elements, instead you can group them together. Here is my code (although the styling might not be exactly what you intended to do): import { makeStyles } from '@fluentui/react-components'; export const useVideoYoutubeCardStyles = makeStyles({ card: { width: '300px', border: '1px solid #ccc', borderRadius: '8px', overflow: 'hidden', position: 'relative', cursor: 'pointer', transition: 'transform 0.3s, box-shadow 0.3s', '&:hover': { transform: 'scale(1.05)', boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)', }, }, overlay: { position: 'absolute', top: '0px', width: '100%', height: '100%', backgroundColor: 'rgba(0, 0, 0, 0)', transition: 'background-color 0.3s', '&:hover': { // backgroundColor: 'rgba(0, 0, 0, 0.6)', <-- moved this to textOverlay:hover }, }, textOverlay: { position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', color: 'white', fontSize: '14px', fontWeight: 100, textAlign: 'center', opacity: 0, transition: 'opacity 0.3s', fontFamily: 'Arial, sans-serif', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', '&:hover': { opacity: 1, backgroundColor: 'rgba(0, 0, 0, 0.6)' //<-- this comes from overlay }, }, playButton: { position: 'absolute', top: '30%', left: '30%', width: '100px !important', //<-- add !important because they are otherwise being overwritten height: '100px !important', //<-- add !important because they are otherwise being overwritten backgroundColor: 'rgba(255, 255, 255, 0.8)', borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 2px 4px rgba(0, 0, 0, 0.2)', transition: 'opacity 0.3s', }, playButtonTriangle: { position: 'absolute', left: '37px', top: '28px', width: '30px', heigh…
upvote count: 1
accepted answer of: http://stackoverflow.com/q/79000488
score: 1

http://stackoverflow.com/comment/139380796
type: AnswerComment
comment on: http://stackoverflow.com/a/79047864
type: Comment
has text: Thank you so much! I applied the margin setting, and it worked. I didn't know about seeing what styles are applied to each element. That will be used in the future, again, thank you so much!
score: 0

http://stackoverflow.com/q/79047983
has body: I have the folllowinig code: library(shiny) library(shinydashboard) library(shinyWidgets) library(dplyr) library(DT) # library(tidyverse) library(data.table) #reproducible minimal data frame YLMI <- structure(list(X = c(511L, 700L, 943L, 1402L, 1429L, 1483L, 1726L, 1834L, 1861L, 2266L), name = c("Austria", "Belgium", "Bulgaria", "Cyprus", "Czech Republic", "Denmark", "Estonia", "Finland", "France", "Iceland"), year = c(2015L, 2015L, 2015L, 2015L, 2015L, 2015L, 2015L, 2015L, 2015L, 2015L), X1 = c(6.0948572, 5.1031427, 5.145143, 4.3162856, 5.9200001, 6.0751429, 5.8771429, 5.0911427, 4.8957143, 6.262857), X2 = c(5.7982831, 5.1347985, 4.1193204,3.9259963, 5.9878144, 5.8885102, 5.5807657, 4.5704818, 4.8845162, 5.7285347), X3 = c(5.8720002, 5.1729999, 4.1079998, 4.7049999, 5.8794999, 6.0700002, 5.3740001, 5.4159999, 5.2164998, 6.3175001), X4 = c(6.0436354, 3.9714868, 6.0058327, 4.7928214, 4.636817, 6.1576967, 5.9891138, 3.3220425, 3.2921035, 4.1184382), X5 = c(6.3000154, 5.7192054, 6.5671687, 3.4370663, 6.6064062, 5.8908257, 6.8782973, 4.7578831, 4.3325543, 6.2499504), X6 = c(4.9257145, 5.5085716, 4.0457144, 3.737143, 2.817143, 5.0228572, 4.0057144, 3.0914288, 5.3942857, 1.7485714), X7 = c(5.2685714, 5.8857141, 5.1657143, 4.4285712, 6.6914287, 3.7942855, 4.8914285, 5.7142859, 5.2857141, 5.0457144), X8 = c(5.7268553, 5.3676248, 5.7317734, 5.1083288, 4.9277864, 6.2327962, 6.1439047, 5.5020885, 5.9025269, 5.6717625), X9 = c(4.7919998, 5.428, 5.1039996, 4.7199998, 5.4880004, 6.2319999, 5.1399999, 5.3560004, 5.4160004, 5.3560004), X10 = c(4.7384157, 3.7913544, 4.4407039, 5.8613172, 3.5934217, 5.534936, 4.0672798, 4.2066154, 4.3676648, 3.6402931), X11 = c(5.7328, 5.1810961, 5.4579573, 5.5078635, 5.3274336, 5.7784905, 5.5863309, 5.2231383, 5.3318233, 5.2328768), X12 = c(5.6389961, 3.9419262, 2.6277056, 4.8922715, 4.4109187, 6.3135815, 5.6100388, 6.3433652, 4.5896773, 6.6938777), W1 = c(0.0833, 0.0833, 0.0833, 0.0833, 0.0833, 0.0833, 0.0833, 0.0833, 0.0833, 0.0833), W2 = c(0.0833…
type: Question
tagged with: http://stackoverflow.com/tag/r
has title: Changing selectable area of sorting filter
score: 0
tagged with: dt
answer count: 0
tagged with: css
has comment: http://stackoverflow.com/comment/139387450
tagged with: shiny
has comment: http://stackoverflow.com/comment/139381305
type: UnansweredQuestion

http://stackoverflow.com/comment/139393390
comment on: http://stackoverflow.com/q/79054875
type: Comment
score: 0
type: QuestionComment
has text: If you want a sticky footer, then why aren't you using sticky instead of fixed?

http://stackoverflow.com/a/78957464
accepted answer of: http://stackoverflow.com/q/78957424
has body: You can use a box-shadow on either side instead. box-shadow: 2px 0px 0px coral, -2px 0px 0px coral; 2px / -2px extends it to the right / left, 0px offset on the y-axis, and 0px blur radius. function toggleBorders() { table.tHead.firstElementChild.children[1].classList.toggle('thick-border'); Array.from(table.tBodies[0].children).forEach(row => row.children[1].classList.toggle('thick-border')); } table { border-collapse: collapse; } th.thick-border, td.thick-border { box-shadow: 2px 0px 0px coral, -2px 0px 0px coral; } h1 h2 h3 h4 11 12 13 14 21 22 23 24 Click Me!
upvote count: 3
answers question: http://stackoverflow.com/q/78957424
type: AcceptedAnswer
downvote count: 0
type: Answer
score: 3

http://stackoverflow.com/a/78931281
score: 0
has body: I am not sure if I follow and understood the problem correctly, but here goes my <a href="https://codesandbox.io/p/sandbox/ryvvl2?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522cm0ghhrc700063b6mx5vf19ul%2522%252C%2522sizes%2522%253A%255B100%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522cm0ghhrc600023b6mzbvl30nu%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522cm0ghhrc600033b6ms2bl7ofa%2522%257D%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522cm0ghhrc600053b6mne3tx0pl%2522%257D%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522cm0ghhrc600023b6mzbvl30nu%2522%253A%257B%2522tabs%2522%253A%255B%257B%252…
answers question: http://stackoverflow.com/q/78929926
type: Answer

http://stackoverflow.com/a/78946946
has comment: http://stackoverflow.com/comment/139195305
score: 1
type: Answer
downvote count: 0
has body: I could not get the suggested flex to work, and note that your align-items has no effect in the code you have given. Instead this snippet resorts to the old fashioned positioning with translate, setting the svg to position: absolute so it has no effect on the button. #search-button { width: 3em; height: 3em; padding: 0; /* one solution used this */ position: relative; } #search-button-svg { outline: 1px dotted red; width: 2em; height: 2em; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } &lt;button type="submit" id="search-button"&gt; &lt;svg id="search-button-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"&gt; &lt;path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/&gt; &lt;/svg&gt; &lt;/button&gt;
answers question: http://stackoverflow.com/q/78946570
upvote count: 1

http://stackoverflow.com/comment/139397511
type: Comment
score: 0
type: AnswerComment
has text: then it's only `rs-sbg { ... }` part
comment on: http://stackoverflow.com/a/79050397

http://stackoverflow.com/comment/139417471
type: Comment
type: AnswerComment
has text: @ss-t.c it's a bit trick to explain in comments, I will try to later update the answer with some explanation
score: 0
comment on: http://stackoverflow.com/a/79067991

http://stackoverflow.com/comment/139194943
has text: @Ry- I got it. thx. :)
comment on: http://stackoverflow.com/q/78946626
type: Comment
score: 0
type: QuestionComment

http://stackoverflow.com/comment/139339281
type: Comment
has text: Have you consider using Go.js? https://gojs.net/latest/, you know, just out of curiosity. Unless the requirement is to strictly create your own diagram
score: 1
type: QuestionComment
comment on: http://stackoverflow.com/q/79024929

http://stackoverflow.com/comment/139163951
comment on: http://stackoverflow.com/q/78929415
type: Comment
has text: i am very sorry guys, i'm new here
score: 0
type: QuestionComment

intersection-observer
tag name: intersection-observer
type: Tag
tags question: http://stackoverflow.com/q/78984306
tags question: http://stackoverflow.com/q/79167752
tags question: http://stackoverflow.com/q/79181828
tags question: http://stackoverflow.com/q/79111387
tags question: http://stackoverflow.com/q/79498975

http://stackoverflow.com/q/79005867
has comment: http://stackoverflow.com/comment/139303418
type: Question
answer count: 1
has title: Laravel components rendered and TailwindCSS v3
type: AnsweredQuestion
has answer: http://stackoverflow.com/a/79006173
tagged with: tailwind-css
accepted answer: http://stackoverflow.com/a/79006173
score: 0
has comment: http://stackoverflow.com/comment/139303356
tagged with: php
has body: I have this views/components/flash-status-message component: @php use App\Enums\FlashStatuses; @endphp @foreach(FlashStatuses::values() as $type) @if(Session::has($type)) @php $color = FlashStatuses::from($type)->color(); @endphp {{ __(ucfirst($type)) }}! {{ Session::get($type) }} @endif @endforeach @vite('resources/js/flash-message.js') and in layouts/default.blade.php I use my component <x-flash-status-message /> HTML that I have: Success! test As you can see I use TailwindCSS v3, and it seems like colors depend of status(in this case success) rendered corretly but in reality I have black color(TailwindCSS default), and it seems like colors aren't applied correctly. I'm wondering why, probably because of @foreach or component nature or whatever, so any thought will be appreciated. Thanks in advance! I was expecting that I have flash message with color that were in html of that component. Unfortunately I didn't have that.
tagged with: css
tagged with: laravel

http://stackoverflow.com/comment/139364375
type: QuestionComment
comment on: http://stackoverflow.com/q/79039123
has text: Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/) using the `<>` icon. See [**How to create a Minimal, Reproducible Example**](http://stackoverflow.com/help/reprex)
type: Comment
score: 0

http://stackoverflow.com/q/79065672
type: AnsweredQuestion
tagged with: http://stackoverflow.com/tag/svg
has body: Codepen example The HTML shown below works perfectly fine. It shows some SVG element which always matches its parents size without any overflow. This is what I want. But when the element is commented back in, then the SVG causes unwanted overflow. Why? Related topics/answers suggest to set display: block on the SVG. But this does not change anything. I am using Brave Browser Version 1.70.123 Chromium: 129.0.6668.89. Edge Version 129.0.2792.79 has same issue. Here the SVG works correctly cause no wrapper div is used: // Step 0. Look at the result // Obersvation 0: The SVG perfectly matches its parents size and causes no overflow at any viewport. This is what the result is supposed to look like. But the final result also needs to use the commented out element. // Step 1. Comment in the . // Obersavation 1: For some reason this is causing an unwanted overflow. Why? // Step 2. Perhaps This could help to understand the problem. Change the class "svg-inner-container" to "svg-inner-container-90-50". Now play with the viewport width. // Oservation 2: If the viewport width is very small, then the svg matches the 90-50 size. But if the viewport grows in width, at some point the svg height scales beyond its 50% limit. This is very confusing to me. .root{ width: 100vw; height: 100vh; } .svg-outer-container{ display: grid; grid-template-rows: auto; grid-template-columns: auto; width: 100%; height: 100%; border: 2px solid red; } .svg-inner-container { width: 100%; height: 100%; } .svg-inner-container-90-50 { width: 90%; height: 50%; } .svg{ width: 100%; height: 100%; background: lightgreen; } polygon { fill: skyblue; stroke: purple; stroke-width: 1; } body { margin: 0; } * { box-sizing: border-box; } <polygon points="50,0 100,50 50,100 0,50"/> Here the SVG is wrapped in an additional DIV and is causing unwanted overflow: .root{ width: 100vw; height: 100vh; } .svg-outer-container{ display: grid; grid-template-rows: auto; grid-template-columns: auto; width: 100%; height: 100%; bord…
tagged with: css
accepted answer: http://stackoverflow.com/a/79065783
score: 0
has title: SVG with 100% width and height causes overflow if wrapped inside DIV element
type: Question
answer count: 1
has answer: http://stackoverflow.com/a/79065783

http://stackoverflow.com/q/78920407
score: 0
tagged with: javascript
has comment: http://stackoverflow.com/comment/139146206
has comment: http://stackoverflow.com/comment/139146212
has answer: http://stackoverflow.com/a/78920877
answer count: 2
linked to: http://stackoverflow.com/q/78921098
tagged with: css
has comment: http://stackoverflow.com/comment/139146437
tagged with: flexbox
has title: How to stretch cards to fill entire div with HTML/CSS?
has body: I've created two cards on a site I am building. I would like them to span the entire div but I cannot get them to span the width without their size being giant. Ideally, I would like to make the cards shorter height and longer width to span the div. The first image below is what I have now, the second image is what I would like it to become. The current code that I have for this area follows. Any insight is helpful, thanks! .alignment { display: flex; justify-content: space-between; column-gap: 2%; padding-bottom: 6%; } .container { padding: 2px 16px; height: 20%; width: 100%; } .card { /* Add shadows to create the "card" effect */ box-shadow: 0 5px 13px 0 #000; border-radius: 15px; background-color: #121212; border-color: #121212; flex-grow: -1; width: 30%; } /* On mouse-over, add a deeper shadow */ .card:hover { box-shadow: 0 8px 16px 0 000; } .card img { border-radius: 15px 15px 0px 0px; } .card h3 { padding-top: 30px; } .card h4 { padding-top: 20px; margin-bottom: 24px; } #content > div.news > div.alignment.show > div:nth-child(1) > div > h4 { text-align: left; font-size: 28px; margin-bottom: 24px; } #content > div.news > div.alignment.show > div:nth-child(1) > div > p { text-align: left; font-size: 18px; } #content > div.news > div.alignment.show > div:nth-child(2) > div > h4 { text-align: left; font-size: 28px; margin-bottom: 24px; } #content > div.news > div.alignment.show > div:nth-child(2) > div > p { text-align: left; font-size: 18px; } .card p { margin-top: -8px; } .card .link-a { margin-bottom: 16px; } Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. CTA Link Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. CTA Link Current Display: Future Display:
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139146222
upvote count: 1
favorite count: 0
has answer: http://stackoverflow.com/a/78920641
type: Question
downvote count: 1
tagged with: http://stackoverflow.com/tag/html

http://stackoverflow.com/comment/139141697
has text: Is there a limit to the structural change, and is the style free to apply?
type: Comment
comment on: http://stackoverflow.com/q/78917857
type: QuestionComment
score: 0

http://stackoverflow.com/comment/139185806
comment on: http://stackoverflow.com/a/78941750
has text: What does max-width: 100 do?
type: Comment
score: 0
type: AnswerComment

http://stackoverflow.com/comment/139406895
type: Comment
score: 0
has text: Your answer could be improved by explaining how your solution works and what the original issue is.
type: AnswerComment
comment on: http://stackoverflow.com/a/79060717

http://stackoverflow.com/comment/139374223
comment on: http://stackoverflow.com/q/79044235
has text: It is not totally clear to me what effect you're trying to achieve. Are you saying that when you select an item from the mega-dropdown-menu, what you call "contents", that you want the menu, and hover state, to stay as they are? For how long? What will any user think of that? How to know that anything was clicked?
type: Comment
score: 0
type: QuestionComment

http://stackoverflow.com/q/78912512
type: Question
tagged with: css
has comment: http://stackoverflow.com/comment/139143214
has title: Set an element's transform-origin based on the viewport in CSS
has body: I have many elements positioned automatically around a page in various ways. I want to be able to transform each of them individually (not using a shared parent) with the center of transformation at the center of the viewport. The default transform-origin is the center of the element, and it seems like any values set are relative to its top left corner. Here is an example situation: paragraph1 paragraph2 paragraph3 p { transform-origin: 50vw 50vh; } p.transform { transform: scale(2); } Setting transform-origin: 50vw 50vh would only give the desired effect on an element in the top left corner of the viewport. CSS doesn't allow for calculations based on computed styles, like the top and left of the element. transform-box only has options relative to the element itself. I can't put each element in an individual parent sized to the viewport, since many of them affect each other's position, others are in flexboxes, etc. I'm sure this is easy in javascript, but I'd be surprised that something this relatively simple cannot be done in plain CSS.
answer count: 1
tagged with: css-transforms
favorite count: 0
has comment: http://stackoverflow.com/comment/139133178
tagged with: http://stackoverflow.com/tag/html
has answer: http://stackoverflow.com/a/78912541
downvote count: 0
has comment: http://stackoverflow.com/comment/139132054
has comment: http://stackoverflow.com/comment/139131957
tagged with: viewport-units
type: UnansweredQuestion
upvote count: 1
score: 1

http://stackoverflow.com/comment/139395322
has text: *you'll see it will not be rendered* – please be more specific what the desired rendering should look like. The current code shows text but maybe not the way as intended – a screenshot/mockup image may help to illustrate the problem.
comment on: http://stackoverflow.com/q/79053510
type: Comment
score: 0
type: QuestionComment

http://stackoverflow.com/a/79051626
upvote count: 1
answers question: http://stackoverflow.com/q/79029152
score: 1
has body: The problem is that you're declaring styles in multiple ways, and might have lost visibility into specificity. Here's a great explanation of specificity and how precedence in styles is determined by browsers. But in summary, you can think of it as inline &gt; id &gt; class &gt; type. Inline styles have the highest precedence. Then come styles applied with id selectors (#my-element). Then, class and attribute selectors (.my-class). And, finally, type selectors (form textarea). There's also a useful section on !important in the article. Basically, it reverts cascade order of the stylesheet, thus overriding other styles. It is mentioned that it's bad practice and should be avoided. Now, for your particular case, you're setting: form textarea { width: 300px !important; } Which results in that width overriding the one set by the class, which is set by using @apply w-[54px]. As a quick fix, you could remove that from the @apply line, and instead add: .line-numbers { width: 54px !important; } Here's a JSfiddle with your code with some changes. In that fiddle, only !important is removed from the form textarea styles. But, if for some reason you have to keep it, adding the above, should still solve it. However, I would encourage you to try and use specificity in the right way to avoid ending up using !important everywhere.
type: Answer
downvote count: 0

http://stackoverflow.com/comment/139376174
score: 0
comment on: http://stackoverflow.com/q/79044837
type: QuestionComment
has text: @ram shinde Please add your `tailwind.config` file code in the above question *(not in comments)* by editing it. Are you using `app` or `pages` router ?
type: Comment

safari
tags question: http://stackoverflow.com/q/78940428
tags question: http://stackoverflow.com/q/79060854
tags question: http://stackoverflow.com/q/79050955
tags question: http://stackoverflow.com/q/78905381
tags question: http://stackoverflow.com/q/79023969
tags question: http://stackoverflow.com/q/78968063
tags question: http://stackoverflow.com/q/78996817
tags question: http://stackoverflow.com/q/79003190
type: Tag
tags question: http://stackoverflow.com/q/78965596
tags question: http://stackoverflow.com/q/78911737
tags question: http://stackoverflow.com/q/78919137
tag name: safari
tags question: http://stackoverflow.com/q/78905266
tags question: http://stackoverflow.com/q/79182907
tags question: http://stackoverflow.com/q/79220759
tags question: http://stackoverflow.com/q/79140892
tags question: http://stackoverflow.com/q/79193764
tags question: http://stackoverflow.com/q/79168311
tags question: http://stackoverflow.com/q/79174022
tags question: http://stackoverflow.com/q/79139248
tags question: http://stackoverflow.com/q/79085989
tags question: http://stackoverflow.com/q/79218723
tags question: http://stackoverflow.com/q/79082974
tags question: http://stackoverflow.com/q/79089243
tags question: http://stackoverflow.com/q/79297729
tags question: http://stackoverflow.com/q/79382188
tags question: http://stackoverflow.com/q/79368243
tags question: http://stackoverflow.com/q/79362367
tags question: http://stackoverflow.com/q/79278247
tags question: http://stackoverflow.com/q/79369310
tags question: http://stackoverflow.com/q/79257517
tags question: http://stackoverflow.com/q/79249704
tags question: http://stackoverflow.com/q/79372219
tags question: http://stackoverflow.com/q/79334531
tags question: http://stackoverflow.com/q/79428827
tags question: http://stackoverflow.com/q/79439511
tags question: http://stackoverflow.com/q/79468235
tags question: http://stackoverflow.com/q/79425976
tags question: http://stackoverflow.com/q/79533642
tags question: http://stackoverflow.com/q/79528340

http://stackoverflow.com/comment/139358030
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/79033554
has text: It is probably due to the fact that the page load itself twice (post with action=self).

http://stackoverflow.com/comment/139147982
score: 0
type: QuestionComment
type: Comment
comment on: http://stackoverflow.com/q/78920429
has text: I'm not sure. I thought Accordion is easier since it has the expand functionality. So you think create Box with expand functionality(another box?)

http://stackoverflow.com/comment/139200643
type: Comment
comment on: http://stackoverflow.com/q/78946570
score: 0
type: QuestionComment
has text: @Danny'365CSI'Engelman I don't know what you mean about linking to centered text in a div.

http://stackoverflow.com/comment/139160731
type: QuestionComment
has text: @AyusChatterjee I posted an answer to prove my point.. I actually also added a further action that translates the top coord of the new candle to follow my second suggestion. I still think it's not perfect but yet it's not how you stated _can be put outside the icing layer_
comment on: http://stackoverflow.com/q/78927953
type: Comment
score: 0

http://stackoverflow.com/comment/139134874
comment on: http://stackoverflow.com/q/78914182
type: Comment
has text: @C3roe I updated my script to what you advised but it broke my css. I am no longer able to see the green fill. I have updated the code snippet.
score: 0
type: QuestionComment

http://stackoverflow.com/comment/139277531
score: 2
type: Comment
type: QuestionComment
has text: ` `?
comment on: http://stackoverflow.com/q/78991592

http://stackoverflow.com/q/79039982
tagged with: transition
type: UnansweredQuestion
has title: What is the correct way to keep container out of the flow until clicking a button to show that container?
has comment: http://stackoverflow.com/comment/139368343
has comment: http://stackoverflow.com/comment/139368345
has answer: http://stackoverflow.com/a/79042941
type: Question
has comment: http://stackoverflow.com/comment/139367682
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139366907
has answer: http://stackoverflow.com/a/79040450
has answer: http://stackoverflow.com/a/79052815
score: 0
tagged with: display
has body: I am struggling with keeping containers out of the flow until i click a button to show them. Maybe its a fundamental thing . In this example , when i click on any of the category of : MEN , WOMEN , KIDS , im displaying 5 links and an svg , but i want to have a transition for smoothness. The problem is that im using display none and transitions dont work with displayenter image description here In the following example , I am going to show the code for the links for simplicity. so the subgenderman, subgenderwomen, subgenderkids are the ul for the links and is displayed to none , until the man,women,kids is checked , the display will be flex . .subgenderman, .subgenderwomen, .subgenderkids { transition: 2s; display: none; } /* Show subgender when the 'men/women/kids' radio button is selected */ #men:checked~.subgenderman, #women:checked~.subgenderwomen, #kids:checked~.subgenderkids { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding-top: 3rem; align-self: center; } WOMEN MEN KIDS TrendingM ClothingM AccesoriesM ShoesM SportM TrendingW ClothingW AccesoriesW ShoesW SportW TrendingK ClothingK AccesoriesK ShoesK SportK
tagged with: css
answer count: 3

http://stackoverflow.com/q/78979144
tagged with: css
has answer: http://stackoverflow.com/a/78979310
type: UnansweredQuestion
type: Question
answer count: 1
tagged with: http://stackoverflow.com/tag/html
has body: I want the blue text ( element) which is inside a flex item to get truncated with ellipsis (...) if text is too long. To do so I have to add min-width:0 to the parent (.entity-container). You can click Toggle element min-width to see how adding min-width:0 affects the code. It adds the ellipsis but it breaks also the flex-wrap: wrap property of .monitored-entities grandparent. In other words flex-wrap: wrap acts like flex-direction: row instead. How can I in the same time keep the blue text truncation with ellipsis and the flex-wrap: wrap property behaviour? document.querySelector('button').addEventListener('click', () => { [...document.querySelectorAll('.entity-container')] .map(item => item.style.minWidth != '' ? item.style.minWidth = '' : item.style.minWidth = 0) }) .monitored-entities { display: flex; justify-content: space-around; flex-wrap: wrap; } .entity-title { padding-top: 16px; padding-bottom: 16px; text-overflow: ellipsis; overflow: hidden; } .entity-container { border-radius: 16px; border-style: solid; border-width: 1px; padding: 32px; margin: 16px; display: flex; flex-direction: column; flex: 1; min-width: initial; } .entity-container > span { font-size: 30px; color: blue; } .entity-variables div { display: flex; } Toggle element min-width host.webdata.replica.123456789.123456789.123456789 health: Bad db.webdata.source health: Good db.webdata.replica health: Bad
score: 0
has title: How to truncate long tex with flex parent having min-width:0 and flex grandparent having flex-wrap: wrap?

http://stackoverflow.com/comment/139158152
has text: There's a difference between checking an inline style and checking if an element has a styled added by a class. "time saver" seems unlikely if you're using already classes.
type: Comment
comment on: http://stackoverflow.com/q/78926741
score: 0
type: QuestionComment

http://stackoverflow.com/comment/139300919
type: QuestionComment
type: Comment
comment on: http://stackoverflow.com/q/78989459
has text: I'm not quite sure Samsung has stoppped doing this? On 26.0.3.7, my carefully crafted website's dark mode is stilll broken :-( This thread seems to relay that: https://forum.developer.samsung.com/t/websites-dark-mode-gets-overridden-by-samsung-internets-dark-mode/22937
score: 0

http://stackoverflow.com/comment/139281545
score: 0
comment on: http://stackoverflow.com/q/78993739
type: QuestionComment
has text: You have to host the font on a webserver where others can get the font. URLs in CSS are from the browser's perspective, so you can't use an absolute path to the filesystem (unless you're the only one accessing your webserver). You can package webfonts directly in your website/app if you meant to do that.
type: Comment

http://stackoverflow.com/comment/139330347
score: 0
comment on: http://stackoverflow.com/q/79012295
type: QuestionComment
has text: You said you can't get to the JS in Codepen, so here's an example of some more modern vanilla JS techniques for event handling. This uses `querySelectorAll()`, which I prefer because I sometimes have multiple things that I want to perform the same action on, a `forEach` to iterate over, and then adds an event listener with an anonymous function that toggles a CSS class on something. `document.querySelectorAll('[data-role=mobile-menu-activator]').forEach((button) => {button.addEventListener('click', () => {document.getElementById('menu').classList.toggle('hidden');});});`
type: Comment

http://stackoverflow.com/q/79028399
has comment: http://stackoverflow.com/comment/139345261
tagged with: liquid-template
has body: I develop the shopify theme from the scratch and now I don't know where should i add the media query for the responsive for the sections and the template. When i add multiple media query it pick only the one and ignore the others. Please anyone guide me for this problem? Image show which page and section I want to add the media query to make responsive
tagged with: shopify-template
type: Question
tagged with: shopify
has comment: http://stackoverflow.com/comment/139377971
score: 0
tagged with: shopify-app
has title: How to add the css into custom develop liquid shopify theme from the scratch for the resposive?
answer count: 0
tagged with: css
type: UnansweredQuestion

http://stackoverflow.com/q/78989619
type: UnansweredQuestion
type: Question
has answer: http://stackoverflow.com/a/78989718
tagged with: css
has answer: http://stackoverflow.com/a/78989629
score: 3
favorite count: 0
upvote count: 3
has title: Why the child select selects all the non direct child?
answer count: 2
linked to: http://stackoverflow.com/q/11578819
tagged with: http://stackoverflow.com/tag/html
downvote count: 0
has body: I have the following code: test l1 l11 l12 l2 I want to select only the li which are direct child of ul with the m class. I added the following css rule: ul.m> li{ color: orange; } But unfortunately all the li are in orange even those which are not direct child of ul with class m. I don't know why? ul.m>li { color: orange; } test l1 l11 l12 l2
linked to: http://stackoverflow.com/q/18534561

http://stackoverflow.com/q/79023917
tagged with: bootstrap-modal
score: 0
tagged with: javascript
has title: swiper js slide disappear after showing bootstrap 5 modal popup
answer count: 0
tagged with: css
type: UnansweredQuestion
has body: I'm trying to use SwiperJS and Bootstrap 5's popup modal on the same page. When I click on the button inside a slide, it opens the popup modal and show the content according to the slider (the slides contain different pastries menu options) but somehow when I click on the .btn-view-gallery button, the leftmost slide disappears as the modal appears.. why is that? and how do I fix that behavior? [UPDATE] when I check the developer tools, the .swiper element becomes affected with transform3d: (93px, 0, 0); when the modal popup appears. this is the code: HTML Kue Bluder Jelajahi dunia rasa dengan bluder Food Happy Tummy, kualitas premium, varian lengkap. Gallery Kue Bluder Kue Bluder ... CSS .swiper { width: 100%; padding-top: 50px; padding-bottom: 50px; } .swiper-slide { background-position: center; background-size: cover; width: 300px; height: 300px; position: relative; } .swiper-slide img { display: block; width: 100%; } .slide-content { position: absolute; bottom: 0; background: linear-gradient( to top, rgb(238, 238, 238) 0%, rgba(238, 238, 238, 0.7) 50%, transparent 100% ); width: 100%; padding: 0 1.2rem 1.2rem 1.2rem; } JS var swiper = new Swiper(".menu-list-container", { effect: "coverflow", loop: true, grabCursor: true, centeredSlides: true, slidesPerView: "auto", coverflowEffect: { rotate: 50, stretch: 0, depth: 100, modifier: 1, slideShadows: true, }, pagination: { el: ".swiper-pagination", }, }); I tried putting the example in jsfiddle and in the code snippet but it wouldn't show the same result I'm having in my browser so I'm uploading a screenshot showing the results instead.. I hope it's allowed. original condition screenshot shows 5 slides. after clicking the modal Button screenshot only shows 4 slides. any help is appreciated..
tagged with: swiper.js
tagged with: http://stackoverflow.com/tag/html
type: Question

http://stackoverflow.com/comment/139318217
type: AnswerComment
score: 1
comment on: http://stackoverflow.com/a/79011841
type: Comment
has text: You definitely cracked it! Great work! I hadn't solved this myself so worth a lot to me. Thank you so much @Rounin!!

http://stackoverflow.com/q/79064664
answer count: 0
tagged with: css
has title: Primeng frozen column not working with p-dialog
tagged with: primeng
tagged with: angular
downvote count: 0
type: UnansweredQuestion
score: 1
favorite count: 0
has body: I use p-table with frozen column in p-dialog is not working when I use outside the p-dialog it work fine
type: Question
has comment: http://stackoverflow.com/comment/139411098
upvote count: 1

http://stackoverflow.com/a/79041940
downvote count: 0
answers question: http://stackoverflow.com/q/79041478
type: Answer
score: 3
upvote count: 3
has body: Whether you like it or not, the result of make html is HTML and CSS so the rendering will be fully controlled by the rules. Your snippet in reStructuredText is compiled to the following HTML elements, We know that \(A \to B \vdash A \to \forall x B\), provided that \(x\) is not free in \(A\). So, when I use the Furo theme to test, the preview looks like this, You see something differently, probably because the theme you chose aligns elements another way.

http://stackoverflow.com/comment/139379799
score: 0
comment on: http://stackoverflow.com/q/79047361
has text: Ignore the grid, put the image **inside** one of the background divs and then position it at the bottom and `translate` it down 50% of it's own height.
type: QuestionComment
type: Comment

http://stackoverflow.com/q/79033378
has body: I have certification system management and I want to show a footer or a section at the bottom of my page on the last page. I tried to fix the section but it shows on all pages. I tried some javascript codes but it still gave me the problem. Example of how I want to stick the selected red area to be in the yellow era and only show it on the last page in the footer but not show it in all pages I want to print the signature on the last page and at the bottom of the page. I have tried to fix it with javascript or CSS but I was not able to solve this problem. @media print { .non-print-view { display: none; } footer { display: flex; position: fixed; bottom: 0; left: 0; right: 0; justify-content: space-between; padding: 5px 1cm; background-color: #c2c3c5; } .for-print { display: block; } @page { size: A4; margin: 0mm; } .watermark { background-repeat: no-repeat !important; background-position: center !important; position: fixed !important; opacity: 0.1 !important; top: 50% !important; left: 50% !important; max-width: 440px; max-height: 540px; transform: translate(-50%, -50%) !important; z-index: 9999 !important; display: block !important; } .qrCode { align-self: end; padding-left: 10px !important; } } @font-face { font-family: 'AKFont'; src: url("{{ asset('assets/fonts/public/assets/fonts/arabic.ttf') }}"); } /* --------------- Start: Signature --------------- */ .signature { display: flex; justify-content: space-between; margin: 2cm 1cm; padding: 1cm 0; } .signature h2 { font-size: 15px; font-weight: bold; } .signature p { font-size: 14px; font-weight: bold; } &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &lt;link rel="stylesheet" href="{{ asset('css/withMarks.css') }}"&gt; &lt;title&gt;Certification @if (isset($student)) {{ $student-&gt;name }} @endif &lt;/title&gt; &lt;/head&gt; &lt;body style="position: relative;"&gt; &lt;button class="non-print-view bt…
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139373764
has comment: http://stackoverflow.com/comment/139360338
type: Question
has comment: http://stackoverflow.com/comment/139362578
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139354079
score: 0
tagged with: javascript
has comment: http://stackoverflow.com/comment/139354103
has comment: http://stackoverflow.com/comment/139360335
has comment: http://stackoverflow.com/comment/139376459
tagged with: jquery
answer count: 0
has title: In printing mode to make a div be at bottom of my page and on the last page of my printing
tagged with: css

http://stackoverflow.com/a/79014025
has comment: http://stackoverflow.com/comment/139318490
upvote count: 0
downvote count: 2
type: Answer
has body: const circle = document.getElementById('circle'); let deg = 0; function rotate() { deg += 60; circle.style.setProperty('--rotation', `${deg}deg`); } .circle { border: 2px solid #ccc; border-radius: 50%; height: 300px; margin: 40px auto 0; transform: rotate(var(--rotation)); transition: transform 1000ms ease; position: relative; width: 300px; } .item { align-items: center; background: red; border: 2px solid #fff; border-radius: 50%; display: flex; height: 30px; justify-content: center; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(calc(var(--i) * 60deg)) translateY(150px); /* Position around circle */ width: 30px; } .btn { align-items: center; background: lawngreen; display: flex; height: 30px; justify-content: center; width: 100px; cursor: pointer; margin: 20px auto; } 1 2 3 4 5 6 Rotate
answers question: http://stackoverflow.com/q/79013991
score: -2
has comment: http://stackoverflow.com/comment/139332535

http://stackoverflow.com/q/79037371
tagged with: http://stackoverflow.com/tag/html
type: Question
tagged with: tailwind-css
has body: Here is the project's file system: enter image description here All classes work in this file: file: navbar.html Shop Sell Sold Home In this file tailwind classes for some reason do not work. Why is this happening??? file: contacts.html {% for item in items %} {{item.name}} {{item.price}} {% endfor %} Why does tailwind work in one part of the code and not in another? Even though both files are in the same folder. You need to make tailwind work in the contacts.html file.
tagged with: django
has comment: http://stackoverflow.com/comment/139362180
has comment: http://stackoverflow.com/comment/139362344
tagged with: python
answer count: 0
tagged with: css
has title: Why in the Django + Tailwindcss project, styles are used in one file and not in another?
has comment: http://stackoverflow.com/comment/139361096
score: 0
type: UnansweredQuestion

http://stackoverflow.com/comment/139150091
type: Comment
type: QuestionComment
comment on: http://stackoverflow.com/q/78920429
has text: In style of AccordionWithBorder, add line this. `margin: 0 auto;`, `width: 10%;`, `&:has(.Mui-expanded) {width: 100%;}`. I'm not good at English, so I'm not sure what you want, but.. It will change width When Accordion expanded
score: 0

http://stackoverflow.com/comment/139225103
type: Comment
score: 0
type: QuestionComment
has text: You may like to look into more 'modern' methods of arranging a line of elements - CSS flex or grid rather than float.
comment on: http://stackoverflow.com/q/78962822

http://stackoverflow.com/comment/139145256
type: Comment
type: QuestionComment
comment on: http://stackoverflow.com/q/78919468
score: 1
has text: Bootstrap rows need to exist within bootstrap containers. E.g. ` `. So wrap your row in a container

http://stackoverflow.com/comment/139294472
type: QuestionComment
type: Comment
has text: You might be confusing between pseudo classes and pseudo elements. For example, `#my-id::after` and `#my-id` are targeting two different elements, but `#my-id:hover` and `#my-id` are targeting the same element.
score: 0
comment on: http://stackoverflow.com/q/79000658

http://stackoverflow.com/q/78990043
has answer: http://stackoverflow.com/a/78990235
has body: In order to avoid code repetition, ideally I would like to apply a class to a DOM element (for example "children") and have the rest of the classes applied to that element affect the direct children elements of that element. Here is an example to clarify the idea: I have this piece of code: some text some text some text some text some text And I would like to turn it into something like this: some text some text some text some text some text Any ideas on the matter? Is this even possible with SASS? I thought of doing something like the following, but it did not work. ul.text-list { li { @extend .text; } } I also thought of doing it via Javascript, but it feels a bit wrong, to be honest. UPDATE: Using the insight given in the answer given by Charles Lavalard, I have arrived to a solution that although it solves the repetition in the HTML, it introduces some more in the SCSS. I consider it useful enough though. This was my text class: .text { font-weight: $font-weight-normal; line-height: $line-height-medium; color: $grey-500; // Font weight &.t-light { font-weight: $font-weight-light; } &.t-semibold { font-weight: $font-weight-semibold; } &.t-bold { font-weight: $font-weight-bold; } } And this is the new class created that achieves what I wanted: .text-children { & > * { @extend .text; } &.tc-light > * { @extend .t-light; } &.tc-semibold > * { @extend .t-semibold; } &.tc-bold > * { @extend .t-bold; } } I would've liked to avoid some of the repetition in the SCSS but I don't know if it can be much more improved.
type: Question
tagged with: http://stackoverflow.com/tag/html
tagged with: repeat
answer count: 1
type: AnsweredQuestion
score: 0
tagged with: sass
accepted answer: http://stackoverflow.com/a/78990235
tagged with: css
has comment: http://stackoverflow.com/comment/139274734
tagged with: frontend
has title: Using SASS, how can I have classes of a parent element also be applied to the direct children elements?

http://stackoverflow.com/comment/139409604
type: QuestionComment
comment on: http://stackoverflow.com/q/79063526
has text: @Anthony there is no needs to complicate this calculation, `80% of 100vw = 80vw` and `15% of 100vw = 15vw`
type: Comment
score: 0

http://stackoverflow.com/a/78973816
type: Answer
score: 0
answers question: http://stackoverflow.com/q/78967875
has body: You are experiencing a conflict between React event system logic and the browser. TLDR: Removing e.preventDefault() solves your issue without any actual downsides. In an attempt to normalize the change handling for radio buttons and checkboxes across multiple browsers, React hijacks the browser's click event. Having a preventDefault on the event causes the browser not to visually update the input but it doesn't stop setting the state. Setting a state triggers a re-render of the component. If you would add Checked: {formData.uGender} somewhere, like below your button, you would see that it does re-render as the value is updated. The input isn't updated however, since preventDefault interfered. Even though the first click didn't show the visual effect, it did set the state. When clicking for the second time, it sets the state yet again and re-renders. Updating the visual effect is probably prevented this time as well, but as we already had the matching state from the previous click, the controlled input checked={formData.uGender === 'female'} is now true and thus is shown visually as well. According to MDN, the checked attribute for checkboxes and radio buttons doesn't actually reflect the selected value, but the initial default value. So there is a disconnect between the checked attribute, and whether or not the state of the input is checked or not. The conflict between the browser event logic and React's event logic could be affected by this. While debugging, I noticed that if you put a console.log in handleForm it only prints for the first click. This has been around since at least 2015. Given the comment in the source code, the need to normalize the change event to a click event was due to IE8. Since this is no longer a very common browser, one could assume that is would be safe to remove. The React team seems to be more prone to eventually removing the React event logic altogether in favor for a more mature browser event logic. Either way, there is no need for th…

http://stackoverflow.com/q/78956764
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139213002
has comment: http://stackoverflow.com/comment/139217550
tagged with: http://stackoverflow.com/tag/html
type: Question
has comment: http://stackoverflow.com/comment/139213133
tagged with: media-queries
score: 0
has body: I'm working on a responsive design for a project and I'm trying to target specific screen sizes using media queries. However, my current media query doesn't seem to be capturing a screen size of 384x730 with a device pixel ratio of 2. Here’s the CSS media query I'm currently using: @media only screen and (max-width: 375px) and (max-height: 667px) and (-webkit-device-pixel-ratio: 2) { /* Add your styles here */ .home-container { width:10% !important; } .hero-content { align-self: unset !important; /* or initial */ } .hero-action { width: unset !important; } } @media only screen and (max-width: 414px) and (max-height: 896px) and (-webkit-device-pixel-ratio: 2) { /* Add your styles here */ .home-container { width:10% !important; } .hero-content { align-self: unset !important; /* or initial */ } .hero-action { width: unset !important; } } @media only screen and (max-width: 384px) and (max-height: 730px) and (-webkit-device-pixel-ratio: 2) { /* Add your styles here */ .home-container { width:10% !important; } .hero-content { align-self: unset !important; /* or initial */ } .hero-action { width: unset !important; } } Issue: This media query is not applying the styles to a device with a screen size of 384x730, but I was expecting it to. I believe the issue might be with the max-height, but I'm not entirely sure. I tried adjusting the max-height to 730px, but it still doesn't seem to capture the screen. My Goal: I want this media query to apply to devices with a screen size of 384px width and 730px height with a device pixel ratio of 2.
has comment: http://stackoverflow.com/comment/139212992
answer count: 0
has title: CSS Media Query Not Capturing Specific Screen Size (384x730)
tagged with: css

http://stackoverflow.com/q/78906921
type: Question
score: 0
has body: I'm trying to make two cloud images responsive on my webpage, but the first cloud image isn't scaling properly like the second one. I am using Bootstrap's img-fluid class to achieve responsiveness. .first-cloud-image { margin-top: 3%; margin-left: 70%; height: auto; max-width: 100%; /* Ensure the image doesn't exceed its container width */ } .text-center>div>p { font-size: 2.5rem; font-weight: 500; color: #11999e; } .text-center>h1 { font-family: Sacramento; font-weight: 700; font-size: 90px; color: #11999e !important; } body>div { background-color: #e4f9f5; margin: 0; } .image-container { display: flex; justify-content: center; max-width: 100%; margin-right: 100px; } About Me I'm Vishwas. a programmer. The img-fluid class is working fine for the second cloud image and the mountain image, making them responsive. However, the first cloud image is not scaling dynamically with the screen size. What I've Tried: I applied the img-fluid class to the first cloud image, but it still does not respond to screen size changes like the other images. I ensured that max-width: 100% and height: auto are set for .first-cloud-image in the CSS.
answer count: 0
has title: Why is the img-fluid class not working on my first cloud image?
tagged with: css
has comment: http://stackoverflow.com/comment/139121964
type: UnansweredQuestion
tagged with: bootstrap-5

http://stackoverflow.com/comment/139281330
has text: @Temani Afif - Is not 100% the same... I used it as help to offer the current answer, but the background is there... But thanks for downvote.
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78993718

http://stackoverflow.com/comment/139241648
type: QuestionComment
has text: ...is thast error message coming from ESLint or is it a runtime error?
comment on: http://stackoverflow.com/q/78972066
type: Comment
score: 0

http://stackoverflow.com/comment/139289152
type: Comment
comment on: http://stackoverflow.com/q/78998005
type: QuestionComment
has text: @muhammad-aleem-hashmi, I have edited the question a bit. I don't think the back end is not relevant to the issue. I will try and make a simplified version of the issue and add it.
score: 1

http://stackoverflow.com/q/78914830
has answer: http://stackoverflow.com/a/78915016
tagged with: css
type: Question
tagged with: opacity
has body: Using the Tailwind color purple-600/50 on both the background and the border of an element, they don't render the same color. It's like the opacity is not the same (tested on Firefox and Safari). See https://play.tailwindcss.com/KrjtSAezXQ. However, inspecting the css shows the same rules : background-color: rgba(147, 51, 234, 0.5); border-color: rgba(147, 51, 234, 0.5); The image being used doesn't seem to have an intrinsic background opacity, or the same would happen with no css opacity : What am I missing ?
answer count: 1
type: AnsweredQuestion
score: 0
has comment: http://stackoverflow.com/comment/139135723
has title: Tailwind opacified color doesn't render the same on the background and the border
accepted answer: http://stackoverflow.com/a/78915016
has comment: http://stackoverflow.com/comment/139135728
tagged with: tailwind-css
has comment: http://stackoverflow.com/comment/139135810

http://stackoverflow.com/comment/139316325
comment on: http://stackoverflow.com/q/79000908
type: Comment
score: 0
has text: I have a live test link that show the error/issue: https://nickvn33.github.io/Yoshin_testbed/Gallery.html You'll also notice if you hide the photo on the bottom line, photos 4-6 become clickable
type: QuestionComment

http://stackoverflow.com/q/79031039
type: Question
tagged with: datepicker
has title: MUI X Date Picker Popper not aligned when less screen space
has body: I have developed a date picker using the MUI X Date Picker - https://mui.com/x/react-date-pickers/date-picker/. When I click on the component while the date picker is positioned at the top of the screen there calendar component is rendering fine. However, when I have the component at the bottom of the screen or in the middle, in the instance when there is less screen space and we click on the date picker the calendar is rendered at the top of the page, we have to scroll up and then scroll down for the calendar component to be aligned appropriately. My Component: <DatePicker value="Date" onChange={handleDateChange} slots={{ openPickerIcon: () => <FilterCalendarIcon date={filters.date} />, }} slotProps={{ field: { clearable: true, onClear: () => handleDateChange(null) }, }} renderInput={(params) => <TextField {...params} className="table-filter-input" />} label={FILTER_DATE_LABEL} className="table-filter-datepicker" /> How can I resolve this issue or make sure the component renders at the bottom or top of the component based on the screen space instead of rendering out of focus. I tried using the following solution as well: PopperComponent={(props) => ( <Popper {...props} placement={determinePlacement()} modifiers={[ { name: 'offset', options: { offset: [0, 10], // Adjust offset if necessary }, }, ]} /> )} However, the issue is still not resolved. I don't see this behaviourial issue in the framework either.
tagged with: reactjs
score: 0
tagged with: material-ui
tagged with: css
tagged with: mui-x-date-picker
answer count: 0
type: UnansweredQuestion

plugins
tag name: plugins
type: Tag
tags question: http://stackoverflow.com/q/79002715

http://stackoverflow.com/comment/139134836
score: 2
type: Comment
has text: "Any ul inside and descending **this li** that has in its path from li to the resulting ul no other ul in between.". What do you mean by "this li"? Your example `li>ul,li>:not(ul....` matches ul descendants of **any** `li`. That matters because in valid HTML, all children of `ul` elements that can themselves contain a `ul` element must be an `li` element. So a `ul` element that's a descendant of a `ul` element that's a descendant of a given `li` - something that you don't want to match - will, by necessity be the descendant of a different `li` that doesn't have an intervening `ul` element.
type: QuestionComment
comment on: http://stackoverflow.com/q/78913738

http://stackoverflow.com/comment/139390000
score: 2
type: Comment
comment on: http://stackoverflow.com/q/79052911
type: QuestionComment
has text: Post code as a [mcve] (hint: click the brackets button `<>`).

http://stackoverflow.com/a/79055020
type: Answer
has body: You can achieve this layout. But to do this, you need to change layout of the footer. I provide updated code for it. But with my code, when you click the create button, it will not trigger submit of form. To solve the issue, you can do it in javascript. document.getElementById('create-button').addEventListener('click', function() { document.getElementById('contract-form').submit(); }); body { height: 100vh } .fixed-footer { position: absolute; bottom: 0; left: 0; width: 100%; z-index: 1300; background: #ffffff; padding: 16px 0; box-shadow: 0px -3px 4px rgba(0, 0, 0, 0.25); border-top: 1px solid #bebec1; display: flex; align-items: center; justify-content: center; gap: 8px; } Add New Contract CANCEL CREATE
score: 0
has comment: http://stackoverflow.com/comment/139393236
has comment: http://stackoverflow.com/comment/139393235
answers question: http://stackoverflow.com/q/79054875

http://stackoverflow.com/q/78906471
tagged with: css
tagged with: vuejs3
downvote count: 0
upvote count: 1
accepted answer: http://stackoverflow.com/a/78908116
score: 1
favorite count: 0
has answer: http://stackoverflow.com/a/78908116
type: Question
tagged with: http://stackoverflow.com/tag/html
answer count: 1
type: AnsweredQuestion
has body: Here's the table: | Units | KPI1 | KPI2 | KPI3 | KPI4 | KPI5 | KPI6 | KPI7 | ---------------------------------------------------------- | Unit 1 | val | val | val | val | val | val | val | | Unit 2 | val | val | val | val | val | val | val | | Unit 3 | val | val | val | val | val | val | val | | Unit 4 | val | val | val | val | val | val | val | | Unit 5 | val | val | val | val | val | val | val | | Unit 6 | val | val | val | val | val | val | val | | Unit 7 | val | val | val | val | val | val | val | | Unit 8 | val | val | val | val | val | val | val | | Unit 9 | val | val | val | val | val | val | val | ---------------------------------------------------------- Because the table is wide, I applied overflow-x: scroll to the parent element of the table. At the same time, I need to apply position: sticky to the header (the row with "Units," "KPI1," "KPI2," etc.) so that it stays fixed at the top when scrolling vertically. I also need to apply position: sticky to the first column of each row (where "Unit 1," "Unit 2," etc., are listed) so that it stays fixed when scrolling horizontally. The code looks like this: Units KPI1 KPI2 Unit 1 val val .table-head th { position: sticky; top: 0; z-index: 2; } .sticky-col { position: sticky; left: 0; z-index: 1; } The overflow-x: scroll style is applied to .block-table. position: sticky isn't working, and I believe it's because of the overflow-x: scroll. I tried adding a parent element .horizontal-scroll with the style position: relative; Units KPI1 KPI2 Unit 1 val val .horizontal-scroll { overflow-x: scroll; position: relative; } .table { border-collapse: collapse; width: 100%; } .table-head th { position: sticky; top: 0; z-index: 10; } .sticky-col { position: sticky; left: 0; z-index: 5; }
has title: How to give position:sticky to table's header and the first column when table also has overflow-x:scroll?

http://stackoverflow.com/comment/139439869
type: Comment
score: 0
type: AnswerComment
has text: https://tests-and-previews.flopcreation.fr/html/20241011/v3/ ; I don't have the overflow:hidden anymore now... and you should also replace z-index:1 by z-index: -1
comment on: http://stackoverflow.com/a/79063036

http://stackoverflow.com/comment/139158108
comment on: http://stackoverflow.com/q/78925071
type: Comment
score: 0
has text: I ran the source you provided in react and it looks like the attached image. Can you explain it in more detail in this image? https://postimg.cc/dD2MGK30 *I will delete the comments once the request is confirmed.*
type: QuestionComment

http://stackoverflow.com/comment/139401049
has text: I copied and pasted your code, and added one div with the class name and nothing in the img tags, and another div without the "items" class, and added the class to each img instead, and nothing is working - it also doesn't seem to work in the sandbox, the non-gif images are gigantic? I don't understand what's going on, I checked in Chrome and Firefox but it's the same. I'll see if I can understand how to use the sandbox with all the code I have to show you.
comment on: http://stackoverflow.com/a/79058981
type: Comment
score: 0
type: AnswerComment

http://stackoverflow.com/comment/139130824
type: QuestionComment
comment on: http://stackoverflow.com/q/78911856
type: Comment
score: 0
has text: Don't use apostrophes around the deg values - note how bottom isn't actually rotated around x axis. Do you use your browser devtools inspect facility to see exactly what CSS is being applied? It will also show you what are invalid values.

http://stackoverflow.com/a/79006366
answers question: http://stackoverflow.com/q/79006304
upvote count: 1
accepted answer of: http://stackoverflow.com/q/79006304
score: 1
has body: If you have set the slide-content text on images for every slide give position CSS and put it to the image's bottom side. var swiper = new Swiper(".mySwiper", { effect: "coverflow", grabCursor: true, centeredSlides: true, slidesPerView: "auto", coverflowEffect: { rotate: 50, stretch: 0, depth: 100, modifier: 1, slideShadows: true, }, pagination: { el: ".swiper-pagination", }, }); html, body { position: relative; height: 100%; } body { background: #eee; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; color: #000; margin: 0; padding: 0; } .swiper { width: 100%; padding-top: 50px; padding-bottom: 50px; } .swiper-slide { background-position: center; background-size: cover; width: 300px; height: 300px; } .swiper-slide img { display: block; width: 100%; } .slide-content { position: absolute; bottom: 0; background: rgb(255 255 255 / 65%); width: 100%; } Slide 1 Title Slide 1 Description Slide 2 Title Slide 2 Description Slide 3 Title Slide 3 Description
type: AcceptedAnswer
has comment: http://stackoverflow.com/comment/139304332
downvote count: 0
type: Answer

http://stackoverflow.com/a/79047401
answers question: http://stackoverflow.com/q/79047361
upvote count: 2
accepted answer of: http://stackoverflow.com/q/79047361
type: AcceptedAnswer
type: Answer
score: 2
downvote count: 0
has body: Using the technique I am detailing here: https://css-tip.com/overflowing-background/ .text--headline { border-image: conic-gradient(var(--color-primary) 0 0) fill 0//0 100vw 0 0; } .text--description { border-image: conic-gradient(var(--color-secondary) 0 0) fill 0//0 100vw 0 0; } Full code :root { --color-primary: lightblue; --color-secondary: orange; --color-tertiary: lightgreen; } .component { display: grid; grid-template-areas: 'headline image' 'description image'; grid-template-rows: auto auto; max-width: 960px; outline: 2px dashed orchid; overflow: hidden; } .text { padding-inline: 8px; } .text--headline { grid-area: headline; border-image: conic-gradient(var(--color-primary) 0 0) fill 0//0 100vw 0 0; } .text--description { grid-area: description; border-image: conic-gradient(var(--color-secondary) 0 0) fill 0//0 100vw 0 0; } .image { grid-area: image; display: grid; align-content: center; justify-content: center; min-width: 200px; min-height: 400px; } .image-fake { width: 100px; height: 200px; padding: 8px; background-color: var(--color-tertiary); } Split Background Headline Split Background Description This is an image
has comment: http://stackoverflow.com/comment/139380477

http://stackoverflow.com/q/79009672
has body: I want to rotate a triangle created with CSS from the top-left or top-right sides. i try some changing origin position but not work fine , i've done a lot of search but don't find anything clear or relative .Is there a way to implement these rotations using CSS? sample images: The first triangle is rotated inward from the top-left. The second triangle is rotated inward from the top-right. I tried using transform: rotate(), and it's work fine for up to down or backward , but I’m not sure how to change the rotation point to the top-left or top-right. try to show this rotate with transition . how can i do somthinge like that ?
accepted answer: http://stackoverflow.com/a/79010446
has comment: http://stackoverflow.com/comment/139310779
tagged with: css
has comment: http://stackoverflow.com/comment/139310702
downvote count: 1
has comment: http://stackoverflow.com/comment/139310529
has comment: http://stackoverflow.com/comment/139312038
upvote count: 0
has title: Rotate a triangle from top left or right sides in css
has comment: http://stackoverflow.com/comment/139311859
favorite count: 0
score: -1
has comment: http://stackoverflow.com/comment/139310629
has answer: http://stackoverflow.com/a/79010446
tagged with: css-animations
type: Question
has comment: http://stackoverflow.com/comment/139310524
answer count: 1
has comment: http://stackoverflow.com/comment/139310930
type: AnsweredQuestion

validation
tags question: http://stackoverflow.com/q/78940746
tags question: http://stackoverflow.com/q/79017087
type: Tag
tag name: validation
tags question: http://stackoverflow.com/q/79201838

http://stackoverflow.com/comment/139223110
has text: How would that apply? There is only one child in each #container
type: Comment
type: AnswerComment
comment on: http://stackoverflow.com/a/78962197
score: 1

sveltekit
tags question: http://stackoverflow.com/q/79030620
type: Tag
tag name: sveltekit
tags question: http://stackoverflow.com/q/79099086
tags question: http://stackoverflow.com/q/79125458
tags question: http://stackoverflow.com/q/79336469
tags question: http://stackoverflow.com/q/79453228
tags question: http://stackoverflow.com/q/79436206

http://stackoverflow.com/a/79060631
has body: White space doesn't allow the text to move in second line and overflow will allow scroll in whichever child text will be larger than its width .container { width: 800px; display: flex; background: blue; overflow: auto; flex-wrap: nowrap; height: 130px; } .item { margin: 10px; background: red; display: flex; flex-wrap: nowrap; flex-basis: calc(100% / 6); // add below in css and remove flex-shrink property white-space:nowrap; overflow:auto; }
answers question: http://stackoverflow.com/q/79060548
has comment: http://stackoverflow.com/comment/139403584
type: Answer
score: 0

transparency
tag name: transparency
tags question: http://stackoverflow.com/q/79049022
type: Tag
tags question: http://stackoverflow.com/q/79241038
tags question: http://stackoverflow.com/q/79537241

getboundingclientrect
type: Tag
tag name: getboundingclientrect
tags question: http://stackoverflow.com/q/79049518

http://stackoverflow.com/comment/139290692
type: QuestionComment
has text: @TemaniAfif Can you stop deleting my posts for no reason? The answers you provided have nothing to do with what I asked. 1. They are not about precision. 2. They have vertical-align parameter in the child, not in the parent.
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78998686

http://stackoverflow.com/a/79051989
has comment: http://stackoverflow.com/comment/139395919
type: Answer
score: 0
has comment: http://stackoverflow.com/comment/139403627
has comment: http://stackoverflow.com/comment/139396317
answers question: http://stackoverflow.com/q/79049598
has body: You can add a class to the table and width: 100% to the class. This should solve. The table below shows nutritional values per serving without the additional fillings. Calories 227kcal Carbs 0g Protein 20g Fat 22g CSS: .table { width: 100%; } Also, the width attribute is deprecated. A simple google search - The width attribute, now deprecated, was once the correct way to adjust the width of a table's columns.

http://stackoverflow.com/comment/139178977
comment on: http://stackoverflow.com/q/78937749
type: Comment
has text: Do you want the left and right values to be centered on their dots or not?
type: QuestionComment
score: 0

http://stackoverflow.com/q/79027496
type: UnansweredQuestion
has answer: http://stackoverflow.com/a/79031231
type: Question
tagged with: shopify
answer count: 1
tagged with: input
score: 0
tagged with: forms
has title: Shopify custom CSS
has comment: http://stackoverflow.com/comment/139342956
has body: I have variants for my products that i would like to add a hover to change the colors but it has no class assigned. Is it better to edit the theme's files and add a class, if possible, or is there another way to assign the class? The Input: I tried assigning the hover to other elements with no luck.
has comment: http://stackoverflow.com/comment/139343341
tagged with: css
has comment: http://stackoverflow.com/comment/139342847

http://stackoverflow.com/a/78986039
type: Answer
score: 0
has body: This is my approach: Some text Click me text text more text Alot of content overflowing the screen! Another content that will overflow main as usual! But this requires you to set an overflowing height (max-h-48 in my case). I understand you want the div to overflow to the end of the page. In this case I would do something like this to avoid too many flex components: Some text Click me text text more text Alot of content overflowing the screen!
answers question: http://stackoverflow.com/q/78969309

http://stackoverflow.com/a/79067779
has comment: http://stackoverflow.com/comment/139420264
has comment: http://stackoverflow.com/comment/139418771
answers question: http://stackoverflow.com/q/79067391
downvote count: 0
has comment: http://stackoverflow.com/comment/139419490
upvote count: 1
score: 1
has body: You can set height or better-yet max-height to the container, which will make the scroll-y meaningful. const main = document.querySelector('main'); function openSlide(slide) { main.style.transform = `translateX(-${slide * 100}vw)`; } window.addEventListener('keydown', function(event) { if (['ArrowLeft', 'ArrowRight'].includes(event.key)) { event.key === 'ArrowLeft' ? openSlide(0) : openSlide(1); event.preventDefault(); } }); openSlide(0); *, *::before, *::after { box-sizing: border-box; } html, body { font-family: sans-serif; margin: 0; padding: 0; overflow: hidden; } body { width: 100%; height: 100vh; font-size: 7vh; display: flex; flex-direction: column; } nav { padding: 2vh; } main { display: flex; flex-direction: row; flex-wrap: nowrap; flex-grow: 1; transition: transform 0.6s ease-in-out; max-height: 150px; border: 1px solid red; } section.slide { padding: 2vh; min-width: 100vw; max-width: 100vw; display: flex; flex-flow: row nowrap; } section.slide .left { width: 55vw; display: flex; flex-flow: column nowrap; overflow-y: auto; } section.slide .left>div { background-color: yellow; margin-bottom: 5vh; } section.slide .right { width: 45vw; display: flex; flex-flow: column nowrap; overflow-y: auto; } section.slide .right>div { background-color: red; margin-bottom: 5vh; } Navigation - press left or right arrow Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla felis lorem, ullamcorper sed porttitor non, hendrerit aliquet nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In interdum varius leo non maximus. Morbi quis dui tellus. Praesent at quam et metus fringilla volutpat ut eu justo. Phasellus at odio non ante consectetur aliquam. Fusce congue ultrices ante, eu sollicitudin lectus tristique sed. Sed neque velit, cursus non consequat ut, aliquet auctor ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla felis lorem, ullamcorper sed porttitor non, hendrerit aliquet nisi. Lorem ipsum dolor sit amet, consectetur adipiscing eli…
type: Answer

http://stackoverflow.com/comment/139152451
type: Comment
score: 0
has text: please check this. https://stackoverflow.com/questions/6996632/multiple-fonts-in-font-family-property, https://www.w3schools.com/cssref/pr_font_font-family.php
type: QuestionComment
comment on: http://stackoverflow.com/q/78923710

http://stackoverflow.com/a/79036263
accepted answer of: http://stackoverflow.com/q/79035988
has comment: http://stackoverflow.com/comment/139362478
has body: Option 1: Animate with CSS only You can remove the setInterval and handle the animation with pure CSS by setting the width to 100% initially and letting CSS handle the timing: const { useState, useEffect } = React; const Loading = () => { const [isLoading, setIsLoading] = useState(true); useEffect(() => { const timer = setTimeout(() => { setIsLoading(false); }, 3000); // 3 seconds timer return () => clearTimeout(timer); }, []); return ( {isLoading && ( )} ); }; // Render it ReactDOM.createRoot(document.getElementById("root")).render(<Loading />); .loading_bar { position: absolute; top: 0; left: 0; width: 0; height: 5px; background-color: #c4483f; animation: load 3s linear forwards; } @keyframes load { to { width: 100%; } } Option 2: Animate with JavaScript If you prefer to control the animation manually with JavaScript using setInterval, you don't need the CSS transition property. Here's the corrected approach: const { useState, useEffect } = React; const Loading = () => { const [isLoading, setIsLoading] = useState(true); useEffect(() => { const duration = 3000; // 3 seconds const stepTime = 10; // Interval time in ms const increment = 100 / (duration / stepTime); // Progress increment per interval const timer = setInterval(() => { setProgress((prevProgress) => { const newProgress = prevProgress + increment; if (newProgress >= 100) { clearInterval(timer); setIsLoading(false); return 100; } return newProgress; }); }, stepTime); return () => clearInterval(timer); }, []); return ( {isLoading && ( )} ); }; .loading_bar { position: absolute; top: 0; left: 0; height: 5px; background-color: #c4483f; }
type: AcceptedAnswer
type: Answer
score: 0
answers question: http://stackoverflow.com/q/79035988

http://stackoverflow.com/a/79007631
type: Answer
score: 0
answers question: http://stackoverflow.com/q/79006570
has body: TL:DR: Converting the mask to a data URL as suggested by Temani Afif is probably the easiest workaround. You current code can't work because your mask is not valid: When referencing inlined SVG masks (appended to your HTML DOM) you need to wrap the mask shape in a element – currently you're referencing the whole SVG element – won't work. There is another catch: mask-size property is ignored for inlined mask elements. See also "How to properly scale an SVG mask within a container element?" document.addEventListener( 'DOMContentLoaded', function() { let funnels = document.getElementsByClassName( 'funnel' ); for( let i = 0; i < funnels.length; i++ ) { let segments = funnels[i].children[1].children; for( let j = 0; j < segments.length; j++ ) { const from = +segments[j].dataset.from; const to = +segments[j].dataset.to; const difference = ( from - to ) / 2; const d = `M 0 ${50 - from * 50} Q 25 ${50 - from * 50} 50 ${50 - ( ( to + difference ) * 50 )} T 100 ${50 - to * 50} V 100 ${50 + to * 50} Q 75 ${50 + to * 50} 50 ${50 + ( ( to + difference ) * 50 )} T 0 ${50 + from * 50} V ${50 - from * 50} Z`; const svg = ` <rect width="100%" height="100%" fill="#000" /> <path d="${d}" fill="#fff" /> `; segments[j].style.setProperty( '--mask', ( 'url( #fcm-' + i + '-' + j + ' )' ) ); segments[j].innerHTML = svg; } } } ); body{ background:#ccc; } .funnel{ background:#999; } .funnel > div:last-child { display: flex; flex-direction: row; height: 300px; } .funnel > div:last-child div { background: green; height: 100%; position: relative; width: 100%; } .funnel:not( .no-mask ) > div:last-child div { -webkit-mask-image: var( --mask ); mask-image: var( --mask ); mask-size: 100%; mask-repeat: no-repeat; } Funnel (Mask) Funnel (No Mask) <!-- <rect width="100%" height="100%" fill="white" /> <path d="M 0 0 Q 25 0 50 8.333250000000007 T 100 16.6665 V 100 83.3335 Q 75 83.3335 50 91.66675 T 0 100 V 0 Z" fill="black"/> --> As an alternative you may also opt for a responsive document.addEventListen…

http://stackoverflow.com/q/78980629
has comment: http://stackoverflow.com/comment/139260162
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139258807
type: Question
has comment: http://stackoverflow.com/comment/139258400
has body: I am using mansory.js to layout my images and their details ( all in a div class="main-section"), They all are contained in a div class="main", The problem I am facing is due to how the elements widths is being calculated, If I say columnWidth:300 It works fine, but when I resize the window only below 300, ( like I expand the window about 150px wider,) the layout stays the same leaving 150px blank on the right hand side, I want the column width to be dynamic so that the width of the items adjusts and increases so that they all add up to 100% of the container, I tried using a function for it, like to calculate the width but it acts weirdly, and stacks all images on top of each other, ( kind of, I don't get it it just gets messed up) This JavaScript code, adds those white spaces on the right hand side, var elem = document.getElementById('main'); var msnry = new Masonry(elem, { itemSelector: '.main-section', columnWidth: 300, isFitWidth:true, percentPosition: true, gutter: 16 // Spacing between items }); document.addEventListener("DOMContentLoaded", function () { setTimeout(function() { msnry.layout(); }, 350); }); window.addEventListener('resize', function() { setTimeout(function() { msnry.layout(); }, 350); }); This code does that jumbling of the items and messes up everything ....snry = new Masonry(elem, { itemSelector: '.main-section', columnWidth: function() { var elem = document.getElementById('main'); var containerWidth = elem.offsetWidth; var numColumns = Math.floor(containerWidth / 300); console.log( containerWidth / numColumns); return 300; }, isFitWidth:true, percent..... [as you can see I tried debugging using console log and just returning 300, but it doesn't work, and displays nothing in console] I attached the jumbled up image and the white space image with it too white space on right Weird image layout Also here's the CSS for container #main-container{//this covers the main width: calc(100% - 160px); margin:0px 80px; margin-top: 40px; } #main{ width: 10…
score: 0
tagged with: javascript
has comment: http://stackoverflow.com/comment/139258694
has title: How to make mansory elements responsive yet take up all available space?
answer count: 0
tagged with: css

http://stackoverflow.com/q/79067391
tagged with: css
possible better answer: http://stackoverflow.com/a/79067779
has answer: http://stackoverflow.com/a/79072990
score: 1
favorite count: 0
type: Question
has title: Setting `overflow: hidden` on element to force scrollbars invalidates `transform: translateX(...)` on that same element
type: AnsweredQuestion
tagged with: http://stackoverflow.com/tag/html
downvote count: 0
has answer: http://stackoverflow.com/a/79067779
accepted answer: http://stackoverflow.com/a/79072990
upvote count: 1
answer count: 2
has body: I made some kind of a slideshow in HTML and CSS, with a tiny bit of JavaScript. The slideshow is to run in a single viewport and is controllable using the keyboard's arrow keys. This all works quite well and I have included a snippet that shows how it works. It is a bit detailed, but I think most of the things in there are relevant to my problem. In short, there is a navigation top element. Below is a main element that takes up the rest of the viewport's height. In this main element, there are two sections that represent a slide. These sections are positioned horizontally next to each other using a flexbox. The sliding aspect comes from a tiny piece of JavaScript that sets, for example, a transform: translateX(-100vw) on the main element to show the 2nd slide. This all works well. Now the content of the slides is vertically larger than the viewport's height. So I want to make the left and right content separately scrollable. This works when I set overflow: hidden on the main element, however than the transform stops working and no slides are shown on an arrow press. In the included snippet, I have commented the overflow: hidden, so that at least the sliding part works. Once you uncomment that line, the sliding stops working but the vertical scrollbars of the slide's content correctly appear. Now my question is, why does the transform: translateX(...) stop working when the overflow of the main element is set? And how can I go about this, to get both the sliding and the scrollbars for the slide's content to work? const main = document.querySelector('main'); function openSlide(slide) { main.style.transform = `translateX(-${slide * 100}vw)`; } window.addEventListener('keydown', function(event) { if (['ArrowLeft', 'ArrowRight'].includes(event.key)) { event.key === 'ArrowLeft' ? openSlide(0) : openSlide(1); event.preventDefault(); } }); openSlide(0); *, *::before, *::after { box-sizing: border-box; } html, body { font-family: sans-serif; margin: 0; padding: 0; overflow: h…

http://stackoverflow.com/comment/139384991
type: QuestionComment
has text: I'm trying to make this behavior with an offset element from the scrollable block in the context menu component. Explaining in simple words, I want to make vertical scroll on menu items and also set submenu items outside the scrollable menu items.
type: Comment
score: 0
comment on: http://stackoverflow.com/q/79050234

http://stackoverflow.com/q/78962162
favorite count: 0
score: -2
has answer: http://stackoverflow.com/a/78986746
possible better answer: http://stackoverflow.com/a/78986746
linked to: http://stackoverflow.com/q/34266597
type: Question
tagged with: http://stackoverflow.com/tag/html
type: AnsweredQuestion
has body: I have a wordpress site where the divs are ID's and cant just make the one background color black. I have tried :nth-child(1) and :nt-child(3) but its not working. And I cant change the ID's as its part of the theme. Just want to make the 1st one and last one have a background color of black. Even tried #page-services:nth-child(odd) { background-color: #000; } text text text
has title: Why is my :nth-child not working on my ID selector
upvote count: 0
answer count: 2
has answer: http://stackoverflow.com/a/78962197
downvote count: 2
accepted answer: http://stackoverflow.com/a/78962197
tagged with: css
has comment: http://stackoverflow.com/comment/139223102

http://stackoverflow.com/comment/139384813
comment on: http://stackoverflow.com/q/79050057
type: Comment
score: 0
has text: I am not, but they are rules. I will firstly tell you to use ChatGPT, then to forget to use a specific height for your cards, to hard to calculate, just use `align-items: flex-start` on your container.
type: QuestionComment

http://stackoverflow.com/comment/139234562
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78967214
has text: Good info, I was not aware of that. This explains why it is happening in Chrome on iOS as well. Thank you.
type: Comment

http://stackoverflow.com/comment/139161423
comment on: http://stackoverflow.com/a/78915820
type: Comment
has text: @shau-kote Adding `position:fixed` to the container as well can have it stick to the viewport. However, you've added `max-height:100vh` on the container, which means it either overlaps the `h1` when positioned at the very top, or could overflow the viewport if not positioned at the very top. Could you please clarify what you actually want?
score: 0
type: AnswerComment

http://stackoverflow.com/a/78938633
has comment: http://stackoverflow.com/comment/139182748
type: Answer
score: 0
has comment: http://stackoverflow.com/comment/139180168
upvote count: 1
has comment: http://stackoverflow.com/comment/139183127
has comment: http://stackoverflow.com/comment/139181300
has comment: http://stackoverflow.com/comment/139180377
downvote count: 1
has body: You can use aspect-ratio and max-width/height to keep it from going outside parent container (here &lt;body&gt;): * { box-sizing: border-box; /* Needed here to prevent border making scrollbar */ } html, body { margin: 0; width 100%; /* Or any other size */ height: 100%; /* Or any other size */ } .box { aspect-ratio: 1 / 1; /* This keeps it square */ max-height: 100%; /* This sets largest side */ border: 5px solid green; } &lt;div class="box"&gt;&lt;/div&gt;
answers question: http://stackoverflow.com/q/78938496
has comment: http://stackoverflow.com/comment/139182641

http://stackoverflow.com/q/78947535
type: AnsweredQuestion
has answer: http://stackoverflow.com/a/78947638
has body: I'm trying to sort elements of a flexbox from the last to the first. I tried using flex-direction: row-reverse; but it only reverses the lines, not the whole container. The result: It sorts like 3-2-1-(...)-9-8-7, what I want is 9-8-7-(...)-3-2-1* How can I reverse all elements? .container { display: flex; flex-wrap: wrap; height: 10rem; flex-direction: row-reverse; } .container .item { height: 30%; width: 30% } 1 2 3 4 5 6
answer count: 2
downvote count: 0
has title: How can I reverse all the elements of a flexbox in CSS?
tagged with: css
tagged with: flexbox
possible better answer: http://stackoverflow.com/a/78947638
score: 1
favorite count: 0
upvote count: 1
has answer: http://stackoverflow.com/a/78947649
accepted answer: http://stackoverflow.com/a/78947649
tagged with: direction
type: Question

http://stackoverflow.com/comment/139294535
type: Comment
has text: This is still unclear to me. Just take my code example and remove all layers, rest only css rules and you will see transition that I waited. I don't understand layers logic that block parent `:hover` rule.
type: AnswerComment
score: 0
comment on: http://stackoverflow.com/a/79000845

http://stackoverflow.com/comment/139181754
type: QuestionComment
comment on: http://stackoverflow.com/q/78938538
has text: You should use the `complete` callback of [slideUp](https://api.jquery.com/slideUp/) - eg `$login.slideUp(() => $login.slideDown(() => $signupOrLoginDiv.slideDown()));` (but hard to tell from the text what `$signUpOrLoginDiv` is and when it should be shown - odd to put it as a `.toggle` between slideup/down)
type: Comment
score: 0

http://stackoverflow.com/comment/139339669
score: 0
type: Comment
has text: How do you know the content isn't loaded?
type: QuestionComment
comment on: http://stackoverflow.com/q/79025588

google-forms
type: Tag
tags question: http://stackoverflow.com/q/78973195
tag name: google-forms

http://stackoverflow.com/q/79012374
score: 0
answer count: 2
tagged with: pseudo-class
tagged with: css
has body: I have a button with a :active class instruction to scale down to produce a nice effect, it works fine on pc, but on my mobile device I found that the hover effect remained there after I pressed the button, which is of course not desired. This is how it becomes after I click the button, Also with the :acitve pseudo-class, the button becomes smaller in scale when I click it and it works as expected on pc, but on mobile device it just doesn't work and the active effect only works when I keep on pressing the button for sometime which is not the user would do. Note: I am using the active pseudo-class to show an effect when the user clicks the button. Note 2: I am not actually using a &lt;btn&gt; tag instead a &lt;p&gt; tag for the button, I just now tried using the &lt;btn&gt; tag but it doesnt scale up or down while using it. This is the snippet of the button, .queueAdd { background-color: #008d3fed; transition: 0.2s; user-select: none; -webkit-user-select: none; } .queueAdd:hover { scale: 1.1; cursor: pointer; } .queueAdd:active { scale: 0.7; background-color: #00853ced; } &lt;!-- bootstrap --&gt; &lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha3840evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous"&gt; &lt;!-- The button --&gt; &lt;p style="width: fit-content" class="fs-4 px-3 m-3 rounded-2 queueAdd text-center"&gt;+&lt;/p&gt;
has answer: http://stackoverflow.com/a/79019955
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139327708
has title: My css :hover properties do not get removed on mobile when the element is clicked and remain there. And the :active property also works after a delay
has answer: http://stackoverflow.com/a/79012419
has comment: http://stackoverflow.com/comment/139315928
type: Question
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139327718
has comment: http://stackoverflow.com/comment/139315584

http://stackoverflow.com/a/78977854
answers question: http://stackoverflow.com/q/78977782
type: Answer
score: 0
has body: Here's the description of answer given by – Roko C. Buljan in comments just update your container class to: .container { position: absolute; border: 1px solid green; } The .spinner element is taken out of the normal document flow and positioned absolutely. This is done so that it will be placed at a specific location within its containing element.

http://stackoverflow.com/q/78994392
has comment: http://stackoverflow.com/comment/139282404
has body: I have created a CSS global variable (--debug) and an @container. As I understand it, the @container will normally contain styles for elements based on the condition. I (mistakenly?) put the @container inside each style element rule instead of the style elements inside the @container. It works! But why...? I don't quite understand, based on everything I can find about @container. I am using Chrome Version 128.0.6613.138 (Official Build) (64-bit). My stylesheet contains the following : :root { container-name: debug; --debug: false; } .DIV-RED { width:200px; height:200px; background-color:red; display:inline-block; @container debug style(--debug:true) { background-color:blue; } } changing the --debug variable to true (which I normally do programmatically) works, the DIV changes to a background-color of blue. But notice my @container INSIDE the .DIV-RED rule. I have only seen it in my research the other way ... (below) .DIV-RED { width:200px; height:200px; background-color:red; display:inline-block; } @container debug style(--debug:true) { .DIV-RED { background-color:blue; } } which also works ! Is this a bug in @container that I can use it inside a CSS rule as I am? As above...I've tried it both ways, both ways seem to work identically. I just don't quite understand why.
answer count: 0
tagged with: css
tagged with: location
type: UnansweredQuestion
has title: Why does my CSS @container with a CSS global variable work when the @container is INSIDE the CSS rule rather than the rule inside the @container?
type: Question
score: 0
tagged with: containers

http://stackoverflow.com/comment/139146394
type: Comment
score: 0
has text: Not all of the image, I need it partially hidden as in the screenshot. Otherwise it's quite easy - I'd just use 100% for y-axis and it would work. :)
type: QuestionComment
comment on: http://stackoverflow.com/q/78919901

http://stackoverflow.com/comment/139810041
type: QuestionComment
comment on: http://stackoverflow.com/q/79048153
has text: I test it in the antd playground with the latest version and it works as expected... Can you try to upgrade to antd latest version?
type: Comment
score: 0

http://stackoverflow.com/comment/139418607
has text: @asportnoy I made it public, can you help me https://codesandbox.io/p/sandbox/l4q4pz?file=%2Fsrc%2FsortingVisualizer%2FsortingVisualizer.jsx%3A10%2C3
type: QuestionComment
score: 0
comment on: http://stackoverflow.com/q/79068036
type: Comment

http://stackoverflow.com/q/79040050
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139377387
type: Question
answer count: 1
tagged with: tailwind-css
tagged with: border
has answer: http://stackoverflow.com/a/79050502
has body: I'm facing an issue where my borders seem to have extra borders or a kind of double border effect when I zoom in on the page or when viewing it on different screen formats, like the iPad Air. Here is the code for my component (React + Next.js + Tailwind CSS): return ( &lt;div className=&quot;space-y-8 sm:space-y-12 py-6 sm:py-12 mb-12 lg:mb-0&quot;&gt; &lt;div className=&quot;flex flex-col items-end relative&quot;&gt; &lt;FadeText text=&quot;Catégories&quot; direction=&quot;right&quot; className=&quot;text-4xl md:text-6xl lg:text-8xl font-extrabold tracking-tight&quot; /&gt; &lt;Link href=&quot;/produits/tous_les_produits&quot; className=&quot;-mt-10 md:-mt-8 lg:-mt-10 text-sm font-semibold text-slate-800 hover:text-slate-600/80&quot; &gt; Voir tous les produits &amp;rarr; &lt;/Link&gt; &lt;/div&gt; &lt;div className=&quot;w-full relative&quot;&gt; &lt;div className=&quot;absolute inset-0&quot;&gt; &lt;Image src=&quot;/bac-a-pates.webp&quot; alt=&quot;catégories&quot; fill sizes=&quot;100vw&quot; className=&quot;object-cover border-none&quot; /&gt; &lt;/div&gt; &lt;div className=&quot;relative z-10 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 auto-rows-fr gap-0&quot;&gt; {categories.map((item, index) =&gt; ( &lt;Link href={item.link} className={`w-full ${ index === 0 ? &quot;md:col-span-2 md:row-span-2&quot; : index === 1 ? &quot;md:row-span-2&quot; : item.title === &quot;Stockage des pâtes &amp; ingrédients&quot; ? &quot;md:row-span-2&quot; : &quot;&quot; }`} key={index} &gt; &lt;div className=&quot;relative bg-black bg-opacity-30 w-full h-full min-h-[200px] transition-all duration-300 hover:bg-opacity-50 border-4 lg:border-2 border-[#fffdf3]&quot;&gt; &lt;p className=&quot;text-white text-xl sm:text-2xl md:text-3xl p-3 font-bold absolute inset-0 flex items-end justify-start uppercase&quot;&gt; {item.title} &lt;/p&gt; &lt;/div&gt; &lt;/Link&gt; ))} &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; ); Problem: The borders (defined with border-4 and lg:border-2) appear with e…
tagged with: reactjs
score: 0
has comment: http://stackoverflow.com/comment/139372569
tagged with: css
has title: Why do my borders appear with extra borders when zooming or on devices like the iPad Air?
tagged with: image

http://stackoverflow.com/comment/139197302
type: QuestionComment
has text: No, that is not possible. See duplicate for further explanation.
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78948175

http://stackoverflow.com/q/79026518
type: UnansweredQuestion
tagged with: http://stackoverflow.com/tag/html
type: Question
has comment: http://stackoverflow.com/comment/139341172
score: 0
has title: can ng-select dropdown work in mat tab in angular
tagged with: css
answer count: 0
tagged with: angular
has body: I have mat-tab-group inside that I have 4 tabs, on 3rd tab I have to add dropdown, and also I want to disable scrolling ink behavior for this 3rd Tab, it should only be dropdown (ng-select) inside . How to disable the mat-tab scrolling behavior and only shows dropdown with the values there. I tried this, but ng-select is not working

http://stackoverflow.com/comment/139318374
score: 1
type: Comment
comment on: http://stackoverflow.com/a/79013936
has text: I can't make this work by changing `overflow-wrap`. Could you provide a working example by editing my codepen?
type: AnswerComment

http://stackoverflow.com/comment/139133022
comment on: http://stackoverflow.com/a/78908435
has text: @TalhaSaleemi Yes.
type: AnswerComment
score: 0
type: Comment

data-structures
tags question: http://stackoverflow.com/q/79059469
tag name: data-structures
type: Tag

http://stackoverflow.com/comment/139402541
has text: Ahhh, this fixed it exactly!!! Thank you SO much!!! :D
comment on: http://stackoverflow.com/a/79058398
type: Comment
score: 0
type: AnswerComment

http://stackoverflow.com/comment/139280438
comment on: http://stackoverflow.com/q/78993240
type: QuestionComment
score: 1
has text: PLease note that you can also do this using css only
type: Comment

http://stackoverflow.com/comment/139162840
has text: @Fantasterei could you spell out what are the actual constraints that you have - you did ask for a pure CSS solution, and this is one (albeit you'd need different keyframes for different numbers of images) but now you are saying you want an HTML/CSS solution - is that right and if so what are the constraints? (I still advocate a two line JS solution!).
type: Comment
score: 0
comment on: http://stackoverflow.com/a/78927325
type: AnswerComment

http://stackoverflow.com/comment/139393627
type: AnswerComment
comment on: http://stackoverflow.com/a/79047525
has text: The new css (and glint img) is now live and looking great; thanks again! I've also changed the img sprite to be 1 row high only instead of a grid, so I've also updated your answer to reflect this (since it links to the live images). It should go through once my edit is out of the review queue.
type: Comment
score: 0

http://stackoverflow.com/q/79024535
type: UnansweredQuestion
has title: Wkhtmltopdf is not repeating table headers
tagged with: wkhtmltopdf
tagged with: http://stackoverflow.com/tag/pdf
tagged with: http://stackoverflow.com/tag/html
type: Question
answer count: 1
has body: I have a very long table and the table header is supposed to be repeating on each page break, but it's not. Furthermore, on some page breaks rows get casually cut in the middle along with their text. I tried CTRL+P on the html document and the header loops fine. Weasyprint worked fine too but I have Wkhtmltopdf as a requirement. I tried adding this to my css template, but it didn't help. tbody { display: table-row-group; } thead { display: table-header-group; } table { page-break-inside: avoid; } Update: I solved (?) the issue by updating Wkhtmltopdf to one with patched QT. But now, what used to take 15 seconds to compile takes 2+ minutes. However, everything is formatted properly.
score: 0
has answer: http://stackoverflow.com/a/79026444
tagged with: css

http://stackoverflow.com/comment/139192432
comment on: http://stackoverflow.com/q/78945359
has text: I was able to make the header sections have an equal height by adding @supports (display: contents) { .promo { display: contents; } } but then my box-shadow goes away because the container div is essentially ignored. I need to have the box shadow effect.
type: Comment
score: 0
type: QuestionComment

http://stackoverflow.com/q/79046636
linked to: http://stackoverflow.com/q/50661638
tagged with: css
type: Question
duplicate of: http://stackoverflow.com/q/50661638
score: 0
has comment: http://stackoverflow.com/comment/139379689
tagged with: animation
has body: [EDIT]: To moderators, please read the question carefully before being in hurry to mark the question duplicate. This question more to take CSS variable value from JS (set in element style) and not to update in @keyframe. There is code snippet attached (which includes JS part too. I'm working on building an analog clock using CSS animations, and I've managed to get most of it done. However, to position the clock's hands (hour, minute, and second) according to the current time, I need to use JavaScript to set a variable in the CSS element. I want the animation to begin from this starting point. Is this possible? Here’s my working code: https://jsfiddle.net/ashishanexpert/yjk78t0f/, and this is where I want the CSS variables to be applied: @keyframes move-niddle { 0% { transform: rotate(calc(0 + var(--start)) deg); } 100% { transform: rotate(360deg); } }
answer count: 0
tagged with: css-variables
has comment: http://stackoverflow.com/comment/139379635
has title: Can we take CSS variable value in CSS @keyframes animation?
type: UnansweredQuestion

http://stackoverflow.com/q/78920209
tagged with: tailwind-css
has body: I want to have a page that consums the full height of the browser window. I have a navbar on top and then the main content is split into a list of cards on the left (which should be scrollable), and a map on the right side (which should consume the full height minus the navbar and should NOT be scrollable. Problem: the entire page (so also the map) is scrollable - it looks like as much scrollable as the navbar's height. my navbar Card Card Card Card Card Card Card Card Card map
has title: Scrollbar issues - html/css and tailwindcss
tagged with: javascript
has answer: http://stackoverflow.com/a/78920325
tagged with: css
type: Question
tagged with: flexbox
answer count: 1
type: AnsweredQuestion
score: 0
accepted answer: http://stackoverflow.com/a/78920325
tagged with: http://stackoverflow.com/tag/html

http://stackoverflow.com/comment/139146206
type: QuestionComment
comment on: http://stackoverflow.com/q/78920407
type: Comment
score: 0
has text: What is `flex-grow: -1;`? Do you mean `flex-grow: 1;`

http://stackoverflow.com/q/78937138
score: 0
has title: Dynamic text color on hover based on fetched values
tagged with: css
tagged with: next.js
has comment: http://stackoverflow.com/comment/139177243
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139179704
has comment: http://stackoverflow.com/comment/139177212
has comment: http://stackoverflow.com/comment/139177550
has comment: http://stackoverflow.com/comment/139177256
type: Question
has body: I am not sure why applying className based on the value fetched from the database and then using this value in css for custom color on hover doesn't work. Could you help? An example of the category would be 'Literature' --&gt; lowercased 'literature'. This class is getting correctly assigned when I inspect but somehow the content of the class is not being displayed properly: Part of the tsx file: &lt;ul className={`${style.categories} ${poppins.className}`}&gt; {unique_categories.map((category) =&gt; ( &lt;li key={category.id}&gt; &lt;Link href={`${category}`.toLowerCase()} className={`${category}`.toLowerCase()}&gt; {category} &lt;/Link&gt; &lt;/li&gt; ))} &lt;/ul&gt; Part of the css file: .categories { border: 1px solid rgb(0, 0, 0); margin: 0 auto; padding: 0; width: 100%; text-align: left; list-style: none; padding: 10px; text-align: center; } .categories li { display: inline-block; margin: 0px 20px 0px; } .categories a { color: rgb(0, 0, 0); text-decoration: none; text-transform: uppercase; } .literature:hover { color: blue !important; text-decoration: underline !important; }
has comment: http://stackoverflow.com/comment/139177254
answer count: 1
has answer: http://stackoverflow.com/a/78937155

http://stackoverflow.com/comment/139316022
type: Comment
has text: @Jens - this took a few abortive attempts, but I'm pretty sure I've cracked it, now.
type: AnswerComment
comment on: http://stackoverflow.com/a/79011841
score: 0

http://stackoverflow.com/q/78984431
has title: Change html table color based on the value of a cell
tagged with: innerhtml
answer count: 4
has answer: http://stackoverflow.com/a/78984475
has body: I am fetching data from an API and displaying it in a html table. Now I want to change the color of the rows based on the value of a column. For example if status is Accepted then green row and if status is not accepted then red color row. const url = "https://dummyjson.com/c/38f5-f39a-411e-aeb0"; fetch(url).then( res => { res.json().then( data => { //console.log(data.data); if (data.data.length > 0) { var temp = ""; data.data.forEach((itemData) => { temp += " "; temp += " " + itemData.Name + " "; temp += " " + itemData.Address + " "; temp += " " + itemData.Status + " "; }); document.getElementById('data').innerHTML = temp } } ) } ) table { border-collapse: collapse; } td,th { border: thin solid black; padding: 0.2rem; } Name Address Status
has answer: http://stackoverflow.com/a/78984479
type: Question
has answer: http://stackoverflow.com/a/78984753
tagged with: http://stackoverflow.com/tag/html
type: AnsweredQuestion
possible better answer: http://stackoverflow.com/a/78984475
score: 0
tagged with: javascript
accepted answer: http://stackoverflow.com/a/78984479
tagged with: fetch-api
has answer: http://stackoverflow.com/a/78984580
tagged with: css

http://stackoverflow.com/comment/139263637
score: 0
has text: As you've mentioned Apple devices – does it run on MacOS safari? At least iOS safari and linux web/epiphany and midori (also webkit based) also seem to struggle with this approach.
type: QuestionComment
comment on: http://stackoverflow.com/q/78981776
type: Comment

http://stackoverflow.com/q/78984786
type: Question
downvote count: 0
has body: I’ve noticed an issue with backdrop-filter: blur in Chrome. As soon as an element in front of the blurred area has full width or height, it seems to get blurred (edges) as well. This affects combinations of bottom: 0; top: 0; or left: 0; right: 0; width:100%; height: 100%. So far, I’ve only been able to observe this problem in Chrome. Is there a way to avoid this behavior? Screenshot: Chrome shows blurred edges Screenshot: Firefox is fine Codepen I did notice that applying transform cancels the effect, but only as long as the element is actually changed. For example, transform: translateX(-1px) works in combination with left: 0; but not with left: 1px;.
upvote count: 1
has title: backdrop-filter:blur affecting full width/height elements in Chrome?
answer count: 0
tagged with: css
tagged with: google-chrome
tagged with: blur
type: UnansweredQuestion
favorite count: 0
score: 1

calibre
tags question: http://stackoverflow.com/q/79010665
type: Tag
tag name: calibre

http://stackoverflow.com/comment/139136956
type: QuestionComment
comment on: http://stackoverflow.com/q/78913738
has text: Your question may have been exact, but to make it clearly _comprehensible_ for any reader, a more verbose explanation is always helpful. It's the difference between a terse one liner and an unrolled loop.
type: Comment
score: 0

http://stackoverflow.com/comment/139207691
comment on: http://stackoverflow.com/a/78951535
score: 1
has text: It's been clarified that Bootstrap 4 is at play.
type: Comment
type: AnswerComment

http://stackoverflow.com/comment/139307074
type: Comment
comment on: http://stackoverflow.com/q/78991280
has text: Please put the relevant HTML into the question - you can find the HTML that has been generated by whatever system you are using by looking in your browser devtools inspect facility. And making a runnable snippet would be very helpful.
type: QuestionComment
score: 1

http://stackoverflow.com/a/78967208
type: Answer
score: 0
has body: Add the following to the .fundo class: align-items: stretch body { background-image: url('../img/Bem vindo ao Tradlibras.png'); background-size: cover; background-position: center; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; font-family: Arial, sans-serif; } .fundo { background-color: rgba(0, 0, 0, 0.7); padding: 30px; /* Ajustado para combinar com o padding do login */ border-radius: 20px; width: 90%; max-width: 600px; /* Ajustado para combinar com o max-width do login */ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; align-items: stretch; text-align: center; } .fundo h1 { color: white; font-size: 2em; /* Ajustado para combinar com o font-size do login */ margin-bottom: 20px; /* Ajustado para combinar com o margin-bottom do login */ } .fundo input[type="text"], .fundo input[type="email"], .fundo input[type="password"] { width: 90%; /* Ajustado para combinar com a largura dos inputs do login */ padding: 10px; /* Ajustado para combinar com o padding dos inputs do login */ margin: 10px 0; /* Ajustado para combinar com a margin dos inputs do login */ border: none; border-bottom: 2px solid #ffffff; background-color: transparent; color: white; font-size: 1em; /* Ajustado para combinar com o font-size dos inputs do login */ } #text_termos { color: white; font-size: 0.9em; /* Ajustado para combinar com o font-size do link "Esqueci a senha" */ margin-bottom: 20px; } #termos_de_uso { color: #1a73e8; /* Cor do link para termos de uso */ text-decoration: none; } #botao_cadastrar_container { width: 100%; display: flex; justify-content: center; margin-top: 20px; margin-bottom: 20px; } .botoes { width: 70%; max-width: 300px; /* Ajustado para combinar com o max-width do botão do login */ padding: 10px; /* Ajustado para combinar com o padding do botão do login */ border: none; background-color: #1a73e8; color: white; font-size: 1.2em; /* Ajustado para combinar com o font-size do botão do login */ border-r…
answers question: http://stackoverflow.com/q/78966903

http://stackoverflow.com/comment/139281505
score: 1
has text: Anyway, [the file:// URL should have three slashes](https://en.wikipedia.org/wiki/File_URI_scheme#Unix) (`url('file:///Users/gomu/Font/testBold.otf')`).
type: Comment
comment on: http://stackoverflow.com/q/78993739
type: QuestionComment

http://stackoverflow.com/comment/139402405
score: 0
type: QuestionComment
has text: I am generating the game board with javascript so I may breakdown and add intermediate row divs that can use the column shrink behaviour and do the same row space evenly for the tubes within it, although that approach would be awful to even try to have some javascript function restructure the DOM on resize to consistently use a useful number of rows
comment on: http://stackoverflow.com/q/79058041
type: Comment

http://stackoverflow.com/comment/139256668
type: Comment
score: 0
type: QuestionComment
has text: it seems like this was logged as an issue at one point, but not followed up: https://github.com/mui/material-ui/issues/39106
comment on: http://stackoverflow.com/q/78980184

http://stackoverflow.com/comment/139212992
score: 2
has text: Have you verified that the viewport actually is as large as you think? (You're aware that it doesn't have to match the actual physical screen dimensions, right?)
type: Comment
comment on: http://stackoverflow.com/q/78956764
type: QuestionComment

http://stackoverflow.com/a/79019401
downvote count: 0
has body: I eventually came up with a solution using floats. It's a little awkward, but it actually does work. We can use psuedo-elements as invisible spacer floats, and then make the "interrupting" content as a float with 100% width. *{ box-sizing: border-box; } body{ width: 250px; } h2{ width: 100%; border: 1px solid black; margin: 0; } #title1{ border-bottom: none; } #title1::after{ /* This psuedo-element provides the height of the first block */ display: block; content: " "; width: 0; height: 150px; float: left; } #title2{ /* This appears below the psuedo-element, interrupting the content text */ float: left; clear: left; } #content{ border: 1px solid black; } Split up content Here's the first box And here's the second This is some really long content. My goal is for it to start in the first content block until the overflow is reached, and then the overflowed content will automatically be displayed in the second box. This is intended for use in a print layout, so I cannot rely on JavaScript.
score: 1
upvote count: 1
type: Answer
answers question: http://stackoverflow.com/q/79016277

http://stackoverflow.com/comment/139402653
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/79059377
has text: Thank you so much, it is working ,I am very happy :)

http://stackoverflow.com/comment/139140802
has text: Thanks for your reply. I tried this solution before, but when the main content is larger than main, the footer will be strange, which means it will behave like a fixed footer, but not a sticky footer.
type: Comment
comment on: http://stackoverflow.com/a/78916977
score: 0
type: AnswerComment

http://stackoverflow.com/q/78999352
tagged with: jquery
answer count: 0
tagged with: css
tagged with: angular
type: UnansweredQuestion
score: 1
favorite count: 0
type: Question
tagged with: http://stackoverflow.com/tag/html
downvote count: 0
has comment: http://stackoverflow.com/comment/139291653
has title: Integrate landing page in angular
upvote count: 1
has body: I need a little help, I have a landing page created with HTML, CSS and Jquery, and I have a project in Angular, what I am looking to do is have the Landing page be displayed on the main domain (mydomain.com) and when I click on a login button it sends me to mydomain.com/sign-in which would already be the project in Angular. I hope both projects work on the same domain

http://stackoverflow.com/comment/139792402
type: QuestionComment
has text: Hi @ScottZ, That's what I did for the whole day. Anyway I figured it out, it was the parent container height being smaller what pushed the text down. The weird thing is that wasn't happening on the codepen and I couldn't figure out if there is any style causing this on my page.
comment on: http://stackoverflow.com/q/79034459
type: Comment
score: 0

http://stackoverflow.com/comment/139356945
has text: @Paulie_D im not really sure how to use it though...
type: QuestionComment
comment on: http://stackoverflow.com/q/79035000
type: Comment
score: 0

http://stackoverflow.com/comment/139323942
type: Comment
score: 0
type: QuestionComment
has text: This might not be solution for you but I generally adjust width like wise that no white-space remains which gets job done unless you have dynamic data. m-sarabi doing same thing but with js.
comment on: http://stackoverflow.com/q/79016707

http://stackoverflow.com/comment/139405404
comment on: http://stackoverflow.com/q/79061543
type: QuestionComment
has text: What is supposed to happen when the content exceeds the `max-height`? *"All buttons should remain identical in size (width and height), and the number of columns should adjust accordingly."* - This already happens, so your issue is unclear.
score: 2
type: Comment

http://stackoverflow.com/comment/139395695
type: QuestionComment
comment on: http://stackoverflow.com/q/79056369
type: Comment
score: 0
has text: You could have the last two boxes in a nested flex box and the outer flex box with the flex-direction set to column. [Demo](https://jsbin.com/fotehotufe/1/edit?css,output) (ignore the styling). Compare the HTML/CSS in the demo with what the code in your question to know the required changes.

http://stackoverflow.com/comment/139205323
comment on: http://stackoverflow.com/a/78952600
score: 0
type: AnswerComment
has text: Yes, that works, but sometimes I have more css styling added to the element and with them and white-space: nowrap the ellipsis doesn't work. I edited my code snippet
type: Comment

http://stackoverflow.com/comment/139205802
score: 0
type: Comment
type: AnswerComment
comment on: http://stackoverflow.com/a/78952600
has text: Very similar problem when ellipsis is on second or third line, depending on font size and line height, sometimes the rest of the text is showing.

http://stackoverflow.com/q/78917857
answer count: 2
downvote count: 0
has body: I am having troubles getting my main content next to the sidebar in a flexbox layout. My TopBar and SideBar components are combined into a single component, so they are returned in a single parent div. Is there a solution using CSS flexbox or do I have to use grid? This is basically how it is returned: TopBar SideBar Main content This is what I would like to achieve visually, but I cannot return the TopBar and SideBar seperately. TopBar SideBar Main content
score: 1
upvote count: 1
has answer: http://stackoverflow.com/a/78918097
has title: CSS Flexbox with a component returning TopBar and SideBar and another one returning main content
has answer: http://stackoverflow.com/a/78918156
tagged with: css
type: Question
tagged with: flexbox
has comment: http://stackoverflow.com/comment/139141346
has comment: http://stackoverflow.com/comment/139141284
type: AnsweredQuestion
has comment: http://stackoverflow.com/comment/139141697
accepted answer: http://stackoverflow.com/a/78918097
has comment: http://stackoverflow.com/comment/139142464
possible better answer: http://stackoverflow.com/a/78918156
favorite count: 0

drupal-7
tag name: drupal-7
tags question: http://stackoverflow.com/q/78936282
type: Tag

http://stackoverflow.com/comment/139406386
type: Comment
score: 0
has text: The issue I'm trying to solve is when there's no limited viewport. The content of the button should spread it's width, which will then effect/reduce the amount of the columns
type: QuestionComment
comment on: http://stackoverflow.com/q/79061543

http://stackoverflow.com/comment/139389129
type: QuestionComment
has text: The project is being served via nginx. The dependency is listed under 'dependencies'.
type: Comment
comment on: http://stackoverflow.com/q/79052206
score: 0

http://stackoverflow.com/comment/139194409
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78946426
has text: I've tried ```animation-direction```. I don't think it has an effect on animations with an ```animation-timeline```
type: Comment

http://stackoverflow.com/comment/139330963
comment on: http://stackoverflow.com/a/79016879
type: Comment
score: 0
type: AnswerComment
has text: @overflowed-stacker I have included a javascript option to calculate an ellipse or circular intersection for a percentage offset of the length left over from the two segments from the radius of the border-radius set in CSS. Not sure you'll find a CSS only option here.

http://stackoverflow.com/comment/139371035
type: QuestionComment
has text: I've tried poking this lots of ways to get iOS Safari to render it - including trying to move the animation into SMIL within the filter. It just won't work.
score: 0
type: Comment
comment on: http://stackoverflow.com/q/79030241

freemarker
tag name: freemarker
tags question: http://stackoverflow.com/q/78966204
type: Tag

http://stackoverflow.com/comment/139348691
has text: I tried that, it didnt work either. Also with flex-basis instead of width, there is no need for min-width and it will shrink normally.
type: Comment
comment on: http://stackoverflow.com/q/79030661
score: 0
type: QuestionComment

http://stackoverflow.com/comment/139373288
type: Comment
type: QuestionComment
comment on: http://stackoverflow.com/q/79043745
score: 0
has text: This question is similar to: [Styles in react-pdf showing abnormal behaviour](https://stackoverflow.com/questions/60705386/styles-in-react-pdf-showing-abnormal-behaviour). If you believe it’s different, please [edit] the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem.

http://stackoverflow.com/q/79002065
score: 0
tagged with: viewport
tagged with: scaling
tagged with: responsive-design
tagged with: css
answer count: 0
has body: I’m trying to replicate a zoom-out effect similar to what’s seen on SuperSimpleDev's Amazon Clone when the viewport width goes below 190px. I have a video showcasing the exact effect I want to achieve, which you can view here: Video The video contains the exact same CSS and HTML as the source website for the header. I’ve tried the following approaches to achieve this effect: CSS Media Queries: Applied transform: scale() for scaling content, but it didn’t produce the desired zoom-out effect. @media screen and (max-width: 190px) { body { transform: scale(0.5); /* Tried different values */ transform-origin: top left; /* Tried different values */ } } Viewport Meta Tags: Adjusted viewport settings in the meta tag to control initial scale and width. JavaScript: Experimented with JavaScript to dynamically scale content based on viewport width, but did not get the expected result. window.addEventListener('resize', function() { if (window.innerWidth < 190) { document.body.style.transform = 'scale(0.5)'; /* Tried different values */ document.body.style.transformOrigin = 'top left'; /* Tried different values */ } else { document.body.style.transform = 'none'; } }); I’m checking my code through the VS Code Live Server extension, and my website is not actually hosted anywhere. Despite these efforts, I’ve noticed that the source of the referenced website doesn’t include any media queries, CSS rules, or JavaScript directly controlling the scaling effect. I’m wondering if this behavior might be related to the browser’s default zoom or scaling features when the viewport becomes very small. Here’s what I’m looking for: -How can I achieve a zoom-out effect similar to the one on the referenced site? -Is this behavior likely related to browser default scaling or zoom features? -Are there specific browser settings or default behaviors that might influence this effect? Any insights or suggestions on how to replicate or understand this effect would be greatly appreciated!
type: UnansweredQuestion
type: Question
has comment: http://stackoverflow.com/comment/139296831
tagged with: browser
has title: How Can I Achieve a Zoom-Out Effect for a Website When the Viewport Width is Below 190px?

http://stackoverflow.com/comment/139142459
has text: Thank you, this works! I find the Method 1 quite elegant. I'm trying to fix 2 issues: a) When I have to scroll due to a lot of content in Main, then the SideBar does not go all the way to the bottom; b) When I reduce the window width, Main goes below the SideBar instead of staying on the right with a horizontal scroll bar.
comment on: http://stackoverflow.com/a/78918097
type: Comment
score: 0
type: AnswerComment

http://stackoverflow.com/comment/139383939
score: 0
type: AnswerComment
has text: For IE I make an exception by ignoring it :) And the site I work on is aimed at a demographic with potentially potatoes for computers and smartphones, and I don't want those to be left behind. So far I've managed fine I think with the compatibility, but then again: the code and css for my site isn't really that ambitious.
comment on: http://stackoverflow.com/a/79047525
type: Comment

http://stackoverflow.com/q/79049716
linked to: http://stackoverflow.com/q/75359772
has body: &lt;style&gt; .gl { width: 50%; } .pl { width: 100%; max-height: 50vh; background: red; } video { display: block; height: 100%; margin: 0 auto; } &lt;/style&gt; &lt;div class='gl'&gt; &lt;div class='pl'&gt; &lt;video src='/1111.mp4'&gt;&lt;/video&gt; &lt;/div&gt; &lt;/div&gt; The aspect ratio of the video may vary. Tall, narrow, wide and tall, etc... In my example, the problem is that the video ignores the maximum width limit max-height: 50vh; Logically, the video is aligned horizontally, but its height extends beyond the red canvas. In this case, how can I force the video to adhere to the maximum height of the parent?
has comment: http://stackoverflow.com/comment/139383956
tagged with: http://stackoverflow.com/tag/html
answer count: 0
type: UnansweredQuestion
type: Question
tagged with: css
has comment: http://stackoverflow.com/comment/139383996
score: 0
has title: Video does not accept the height of its parent

background-color
tags question: http://stackoverflow.com/q/79049022
tags question: http://stackoverflow.com/q/78961384
tags question: http://stackoverflow.com/q/78946419
tags question: http://stackoverflow.com/q/78946409
tag name: background-color
type: Tag
tags question: http://stackoverflow.com/q/79312483
tags question: http://stackoverflow.com/q/79294398

http://stackoverflow.com/comment/139377300
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/79045866
has text: FWIW: If you inspect the heading, in the codepen posted in the comments, you can see the `only light` has priority, though the color changes when clicking the button

http://stackoverflow.com/comment/139295763
score: 0
type: Comment
has text: Note that it is half the x-height **of the parent**. So it's not the x-height of the 36px font-size given to the span, but the x-height of the 16px font-size given to, in your example, the body element.
type: QuestionComment
comment on: http://stackoverflow.com/q/78998686

http://stackoverflow.com/comment/139345121
score: 0
type: AnswerComment
has text: Ok, your explanation saved me a lot! Thak you so much. I'm going to take some more layouts like that to pratice. I can use it in everything i wonder that should be "painted in the layout". Last question: Can i have any performance issues using this approach? Or did i have to use it wisely for some other reasons?
comment on: http://stackoverflow.com/a/79028000
type: Comment

http://stackoverflow.com/comment/139166913
type: AnswerComment
comment on: http://stackoverflow.com/a/78931052
has text: There is only one issue I have noticed with this and that is that if you hover after the second element Just between the element and the next element, the effect jumps to the top element before you hover on the next element.
type: Comment
score: 0

http://stackoverflow.com/comment/139340212
has text: I doubt it, but you might need other changes to your `style.css` file.
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/79018152

http://stackoverflow.com/comment/139198243
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78948718
has text: So, there's one flaw in your logic here I think. You say _"The problem with simply removing the above rule is that browsers use color:fieldtext for textareas, color:buttontext for buttons, etc. which I don't want."_. Yet, if you don't do this, how does it know what colour to use in light mode, and what colour to use in dark mode? You haven't defined these anywhere. The `p` tag is only working because it too is using a system colour

http://stackoverflow.com/comment/139305629
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/79006973
has text: That works perfect! Thank you all so much for your phantastic and quick help :-)

http://stackoverflow.com/a/78985158
has body: Use requestAnimationFrame() and find the element in the center using elementFromPoint(): const wrapper = document.querySelector('.wrapper'); const images = document.querySelectorAll('.wrapper img'); const updateActiveImage = () =&gt; { const { left, top, width, height } = wrapper.getBoundingClientRect(); const centerX = left + width / 2; const centerY = top + height / 2; const imgAtCenter = document.elementFromPoint(centerX, centerY); images.forEach(img =&gt; img.classList.remove('active')); if (imgAtCenter) { imgAtCenter.classList.add('active'); } requestAnimationFrame(updateActiveImage); }; requestAnimationFrame(updateActiveImage); body { background: black; margin: 0; } .wrapper { overflow: hidden; } img { width: 300px; height: 300px; object-fit: cover; transition: filter 200ms ease-in-out; &amp;:not(.active) { filter: grayscale(100%); } } .img-container { display: flex; gap: 24px; animation: marquee 40s linear infinite; } @keyframes marquee { 0% { transform: translateX(0); } to { transform: translateX(calc(-100% - 24px)); } } &lt;div class="wrapper"&gt; &lt;div class="img-container"&gt; &lt;img src="https://www.wonderwall.com/wp-content/uploads/sites/2/2020/11/shutterstock_editorial_10552447px.jpg?x=514&amp;y=800&amp;icq=74&amp;sig=639b09155acfa34ee0f71886a1556c55" /&gt; &lt;img src="https://hips.hearstapps.com/hmg-prod/images/gettyimages-1280266077.jpg" /&gt; &lt;img src="https://cdn-0.atwoodmagazine.com/wp-content/uploads/2018/01/Chappell-Roan-2018.jpg" /&gt; &lt;img src="https://e00-marca.uecdn.es/assets/multimedia/imagenes/2022/06/27/16563602316989.jpg" /&gt; &lt;img src="https://www.expressandstar.com/resizer/SxBF0kXCbz34fI7twkxcDR8Rdi4=/1200x0/cloudfront-us-east-1.images.arcpublishing.com/mna/MWUDEBVNBZBYFAQSYYVPEYATGQ.jpg" /&gt; &lt;img src="https://parade.com/.image/t_share/MTk3OTcwMTgwMDE2NDQ5MzA5/lindsay-lohan-nyc-2022.jpg" /&gt; &lt;img src="https://i.pinimg.com/originals/5c/b3/02/5cb302c78b1bb14e57194bdc31e7c502.jpg" /&gt; &lt;img src="https://s.yimg.…
type: Answer
downvote count: 0
answers question: http://stackoverflow.com/q/78984306
upvote count: 1
score: 1

http://stackoverflow.com/comment/139259693
has text: Line height changes the numbers but not the result
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78981553
type: QuestionComment

http://stackoverflow.com/comment/139207445
score: 0
type: AnswerComment
has text: https://sass-lang.com/documentation/style-rules/parent-selector/
comment on: http://stackoverflow.com/a/78953766
type: Comment

button
tags question: http://stackoverflow.com/q/79038954
tags question: http://stackoverflow.com/q/79028815
tags question: http://stackoverflow.com/q/78943132
tags question: http://stackoverflow.com/q/79029522
tags question: http://stackoverflow.com/q/78997824
tags question: http://stackoverflow.com/q/78959643
tags question: http://stackoverflow.com/q/78987424
tag name: button
tags question: http://stackoverflow.com/q/78946570
type: Tag
tags question: http://stackoverflow.com/q/79176855
tags question: http://stackoverflow.com/q/79188006
tags question: http://stackoverflow.com/q/79196455
tags question: http://stackoverflow.com/q/79105471
tags question: http://stackoverflow.com/q/79238953
tags question: http://stackoverflow.com/q/79232439
tags question: http://stackoverflow.com/q/79118984
tags question: http://stackoverflow.com/q/79090673
tags question: http://stackoverflow.com/q/79211746
tags question: http://stackoverflow.com/q/79132058
tags question: http://stackoverflow.com/q/79164898
tags question: http://stackoverflow.com/q/79184374
tags question: http://stackoverflow.com/q/79149320
tags question: http://stackoverflow.com/q/79363662
tags question: http://stackoverflow.com/q/79408440
tags question: http://stackoverflow.com/q/79245616
tags question: http://stackoverflow.com/q/79310764
tags question: http://stackoverflow.com/q/79388955
tags question: http://stackoverflow.com/q/79323441
tags question: http://stackoverflow.com/q/79330207
tags question: http://stackoverflow.com/q/79301911
tags question: http://stackoverflow.com/q/79331433
tags question: http://stackoverflow.com/q/79325687
tags question: http://stackoverflow.com/q/79441320
tags question: http://stackoverflow.com/q/79472393
tags question: http://stackoverflow.com/q/79469640
tags question: http://stackoverflow.com/q/79501162

radial-gradients
type: Tag
tag name: radial-gradients
tags question: http://stackoverflow.com/q/79013129

http://stackoverflow.com/a/78994206
upvote count: 3
downvote count: 0
type: Answer
score: 3
answers question: http://stackoverflow.com/q/78993240
has body: You can use simple HTML and CSS for that. input#df1:checked ~ form#co { visibility: visible; } form#co { visibility: hidden; } Show Form Name Roll No. But if you still want to use JavaScript const cb = document.getElementById("df1") const form = document.getElementById("co") cb.addEventListener("change", (e) => { if (e.target.checked) form.style.visibility = "visible" else form.style.visibility = "hidden" }) Show Form Name Roll No.
has comment: http://stackoverflow.com/comment/139331716

http://stackoverflow.com/comment/139185099
type: QuestionComment
has text: Have you read: https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78941051

http://stackoverflow.com/comment/139320963
has text: by the way I wanted also to point out that you described the problem in a way that's not very accurate. Your current solution fails also when scaling up by cropping the bottom side of the picture because you imposed a fixed height
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/79015030

http://stackoverflow.com/comment/139202621
score: 0
type: AnswerComment
has text: Thanks for your response. The issue is not fitting image in the webview. Its completely fine when showing in the webview. But as I am generating a pdf from the webview it cut off. I can see half of some image is in a page and other half of the image is in the next page.
comment on: http://stackoverflow.com/a/78951019
type: Comment

http://stackoverflow.com/q/78928087
type: Question
has comment: http://stackoverflow.com/comment/139167220
tagged with: position
tagged with: http://stackoverflow.com/tag/html
has body: I am trying to produce the following result: Desired outcome However I am getting this so far and I am stuck. What I am getting This is my code: .base { background: #e2e2e2; width: 1020px; height: 350px; position: absolute; top: 100px; left: 130px; }
type: AnsweredQuestion
accepted answer: http://stackoverflow.com/a/78928360
has answer: http://stackoverflow.com/a/78928265
score: 0
answer count: 2
has comment: http://stackoverflow.com/comment/139161550
tagged with: css
tagged with: z-index
has comment: http://stackoverflow.com/comment/139161849
possible better answer: http://stackoverflow.com/a/78928265
has title: How to overlap divs
has answer: http://stackoverflow.com/a/78928360
tagged with: absolute

http://stackoverflow.com/comment/139456016
score: 0
comment on: http://stackoverflow.com/q/79057460
type: QuestionComment
has text: Did you manage to solve your problem? If so, consider adding an answer detailing your solution so others might have access to the resource. If you still need help, let us know what's going on so we can further assist :)
type: Comment

http://stackoverflow.com/comment/139348759
type: Comment
score: 0
comment on: http://stackoverflow.com/q/79030490
has text: @AHaworth the crossdiagonals will always be black, the blue was only for better seeing. I tested it, it works if the background is white but if the cellbackground is eg. green the pink will change to black
type: QuestionComment

http://stackoverflow.com/q/79047869
tagged with: css
accepted answer: http://stackoverflow.com/a/79048188
tagged with: angular
has title: Angular CSS: Expansion panel and align items at the top despite the status
has body: I am coding some own expansion panel in Angular. I want to mimic the behaviour of Angular Material Expansion Panel (which won't work with my requirement). So, I have essentially 3 items, namely a starting icon text a collapse/expand button. When I click on the expand icon the text is displayed. The running code is provided on Stackblitz. When the panel is collapsed all the three icons are on the same level This is due to the align-items: center; and this looks perfectly. As soon as I expand the panel the icons float as well to the center of the container. Is there a way to fixate them on the top AND have it centered when collapsed?
type: Question
has answer: http://stackoverflow.com/a/79048188
answer count: 1
type: AnsweredQuestion
score: 0

http://stackoverflow.com/comment/139267993
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78986510
has text: Flex would help here. Why did you comment that the flex value is between 0 and 1? It could be any positive number, even greater than 1.

http://stackoverflow.com/comment/139272567
comment on: http://stackoverflow.com/a/78988300
score: 0
type: Comment
has text: Besides that, it is far too broad for an answer but commentary at best. As Haworth already pointed out also technically incorrect. `media` queries are only a small part of RWD. There are even methods that can make layout changes without media queries such as CSS-Grid with `auto-fit`/`auto-fill` or Floexbox with `flex-wrap`.
type: AnswerComment

http://stackoverflow.com/comment/139351178
comment on: http://stackoverflow.com/q/79029787
has text: Hi @NarendraSishodiya. Thanks. There is no webpack.config.js file in my plugin directory. I created it using the WordPress create-block package. I have a package.json file. I had intenret connectivity issues so couldn't comment earlier. :)
type: Comment
score: 0
type: QuestionComment

http://stackoverflow.com/comment/139129536
type: Comment
score: 0
has text: Also, `let checked = document.querySelector(".example").checked` (since you're using class selector) - can lead to false positives if multiple such elements are present in the DOM...
type: AnswerComment
comment on: http://stackoverflow.com/a/78909739

http://stackoverflow.com/comment/139176794
comment on: http://stackoverflow.com/q/78936697
has text: Do you really want all those fixed px values? The whole set up looks like a fairly simple grid which would adjust to whatever space is available horizontally.
type: Comment
score: 0
type: QuestionComment

http://stackoverflow.com/q/79036972
has body: I am trying to do some pulsating lines using HMTL and CSS. However, I can't make a line pulsate when this is set to be fully horizontal. I am unfamiliar with web development and I recon something is wrong with my understanding of how the "gradient-mask" seen in the snippet below works. Does anyone have any idea how this can be fixed? Here is what I have that is functional. However when I try to change the line "y2" parameter to make it horizontal. It does not work. Pulsating Line <line x1="0" y1="30" x2="100%" y2="0" stroke="#2660fb" stroke-width="7" /> <line x1="0" y1="30" x2="100%" y2="0" stroke="gray" stroke-width="7" /> <stop offset="0" stop-color="white" stop-opacity="0" /> <stop offset="0.8" stop-color="white" stop-opacity="1" /> <stop offset="0.8" stop-color="white" stop-opacity="1" /> <rect class="mask-rect" x="0" y="0" width="100%" height="100%" fill="url(#gradient)" /> <line x1="0" y1="30" x2="100%" y2="0" stroke="#75c3fc" stroke-width="7" mask="url(#gradient-mask)" />
has comment: http://stackoverflow.com/comment/139360315
tagged with: http://stackoverflow.com/tag/svg
score: 0
has title: Horizontal pulsating line HTML
answer count: 0
tagged with: css
has comment: http://stackoverflow.com/comment/139360802
linked to: http://stackoverflow.com/q/21638169
linked to: http://stackoverflow.com/q/78150897
type: UnansweredQuestion
tagged with: http://stackoverflow.com/tag/html
tagged with: css-animations
type: Question
duplicate of: http://stackoverflow.com/q/21638169

http://stackoverflow.com/q/78977674
score: 0
tagged with: javascript
tagged with: css
answer count: 0
has comment: http://stackoverflow.com/comment/139252259
has comment: http://stackoverflow.com/comment/139252118
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139252705
has body: I have a green circle with many images inside of it. Upon loading, the images have a simple animation in which they show up and bounce back at the positions I have set up. However, one of the images ( fruit-1 ) acts quite differently than the others. The image with class fruit-1 shows up but stays at the position it showed up. At the end of the animation, it slides to the position it should end up. Here is the React structure of the green circle and images: import React from "react"; import "../../css/HomePage.css"; //Images import apple from "../../Images/apple.png"; import banana from "../../Images/banana.png"; import orange from "../../Images/orange.png"; import strawberry from "../../Images/strawberry.png"; const Home = () => { return ( Welcome to Fitness-Tracker Get Started ); }; export default Home; This is the CSS file for it: body, html { margin: 0; padding: 0; } .home-container { display: grid; grid-template-columns: 1fr 1fr; height: 100%; overflow: hidden; } .green-circle { height: 85vh; width: calc(22vh * 2); justify-self: end; align-self: center; background-color: #8cc63f; border-top-left-radius: 50rem; border-bottom-left-radius: 50rem; grid-column: 2; } .green-circle img { height: 25%; width: 50%; opacity: 0; animation: fruitFlyIn 1.5s cubic-bezier(0.25, 0.1, 0.25, 1.5) forwards; animation-delay: 5s; } .fruit-1 { position: relative; left: 80%; top: 0; --translateX: -80%; --translateY: 0; } .fruit-2 { position: relative; right: 50%; top: 50%; --translateX: -50%; --translateY: -50%; } .fruit-3 { position: relative; left: 35%; top: 65%; --translateX: -35%; --translateY: -65%; } .fruit-4 { position: relative; left: 10%; top: 0; --translateX: -30%; --translateY: 30%; --rotate: -45deg; } .welcome-text { font-size: 4vw; margin: 0 auto; justify-self: center; align-self: center; margin-bottom: 10rem; text-align: center; white-space: nowrap; } .welcome-text .greeting-text { font-weight: bold; color: black; } .welcome-text .brand-name { font-weight: bold; color: #…
tagged with: css-animations
type: Question
has title: CSS animation acts weird for one particular item
tagged with: animation

http://stackoverflow.com/comment/139249821
type: AnswerComment
has text: okay so I was able to do a workaround regarding the width issue by adding a ` ` tag for every word, but im not sure yet if there are any better approach other than this since there are cases where a single word is too long and other similar issues like that.
comment on: http://stackoverflow.com/a/78972034
type: Comment
score: 0

http://stackoverflow.com/comment/139364382
type: QuestionComment
has text: Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a **Stack Snippet** using the `<>` icon.. Although you have provided a link, if it was to become invalid, your question would be of no value to other future SO users with the same problem. See [**Something in my website/example doesn't work can I just paste a link**](http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to-it).
comment on: http://stackoverflow.com/q/79039117
type: Comment
score: 1

centering
tags question: http://stackoverflow.com/q/78925071
type: Tag
tag name: centering
tags question: http://stackoverflow.com/q/78946570
tags question: http://stackoverflow.com/q/79082533
tags question: http://stackoverflow.com/q/79157236
tags question: http://stackoverflow.com/q/79271305
tags question: http://stackoverflow.com/q/79363526
tags question: http://stackoverflow.com/q/79418098
tags question: http://stackoverflow.com/q/79394825
tags question: http://stackoverflow.com/q/79439062

shadow-dom
tag name: shadow-dom
tags question: http://stackoverflow.com/q/79029035
type: Tag
tags question: http://stackoverflow.com/q/79133517
tags question: http://stackoverflow.com/q/79192939
tags question: http://stackoverflow.com/q/79171059
tags question: http://stackoverflow.com/q/79365340
tags question: http://stackoverflow.com/q/79295632
tags question: http://stackoverflow.com/q/79411331
tags question: http://stackoverflow.com/q/79374232
tags question: http://stackoverflow.com/q/79332721

http://stackoverflow.com/comment/139239100
score: 0
type: AnswerComment
has text: See Also - https://stackoverflow.com/questions/36191516/center-and-bottom-align-flex-items
comment on: http://stackoverflow.com/a/78970732
type: Comment

http://stackoverflow.com/comment/139261503
has text: Yes, you are right, I rephrased my question.
type: QuestionComment
comment on: http://stackoverflow.com/q/78982848
type: Comment
score: 0

http://stackoverflow.com/q/78995150
has answer: http://stackoverflow.com/a/78999464
tagged with: cross-browser
score: 0
type: Question
tagged with: text-align
has comment: http://stackoverflow.com/comment/139302221
answer count: 1
type: AnsweredQuestion
tagged with: http://stackoverflow.com/tag/html
accepted answer: http://stackoverflow.com/a/78999464
has body: When working with the CSS style writing-mode: vertical-lr; and two different languages font, my text would get aligned to the left side of the kanji on Chrome, but to the right side on Firefox. This code snippet that I'm working with: &lt;h1 style="writing-mode: vertical-lr;"&gt; 結ꦲꦂꦠꦤ꧀ꦠ &lt;/h1&gt; How can I modify my code it so it can be similar to the Chrome counterpart, where the script text is horizontally aligned to the left side of the kanji, and to be consistent across browsers?
has title: Relative horizontal alignment on text when `writing-mode: vertical-lr;`
tagged with: css
tagged with: vertical-text

http://stackoverflow.com/comment/139410066
type: Comment
comment on: http://stackoverflow.com/q/79060854
score: 0
type: QuestionComment
has text: I tried `-webkit-text-decoration-thickness: 2px;` – unfortunately, that doesn't work either.

http://stackoverflow.com/comment/139203421
comment on: http://stackoverflow.com/a/78951599
type: Comment
score: 0
has text: While I agree on that `94%`is not clean, it is not a fixed value. Percentages are responsive values and complies with RWD rules.
type: AnswerComment

http://stackoverflow.com/comment/139152195
type: QuestionComment
comment on: http://stackoverflow.com/q/78923550
has text: By selection box, I mean the blue area you see below the grey box. It was achieved by scrolling down in the box, selecting some text, and then scrolling up again. I'd like that blue area to scroll out of view along with the text.
type: Comment
score: 0

http://stackoverflow.com/q/78980116
has title: Add dynamic styles to AG Grid row groups
tagged with: javascript
has answer: http://stackoverflow.com/a/78983523
tagged with: ag-grid
tagged with: css
has body: I'm having trouble adding dynamic styles to row groups on an AG Grid table because I need each row group to have its own custom background color in hex that comes from an API. I've tried using AG Grid's autoGroupColumnDef with cellStyle, but since AG Grid only stores the value that will be displayed, I can't access it. To illustrate what I want, I made a drawing. Image Here is my code: var levels = ""; if (data != null && data != undefined && data.d != '[]') { levels = JSON.parse(data.d)[0].levels; } var columnDefs = [{ headerName: "CT1", field: "category1", rowGroup: true, filter: true, rowGroupIndex: 1, hide: true }, { headerName: "CT2", field: "category2", rowGroup: true, filter: true, rowGroupIndex: 2, hide: true }, { headerName: "CT3", field: "category3", rowGroup: true, filter: true, rowGroupIndex: 3, hide: true }, { headerName: "CT4", field: "category4", rowGroup: true, filter: true, rowGroupIndex: 4, hide: true }, { headerName: "CT5", field: "category5", rowGroup: true, filter: true, rowGroupIndex: 5, hide: true }, { headerName: "CT6", field: "category6", rowGroup: true, filter: true, rowGroupIndex: 6, hide: true }, { headerName: "CT7", field: "category7", rowGroup: true, filter: true, rowGroupIndex: 7, hide: true }, { headerName: "CT8", field: "category8", rowGroup: true, filter: true, rowGroupIndex: 8, hide: true }, { headerName: "CT9", field: "category9", rowGroup: true, filter: true, rowGroupIndex: 9, hide: true }, { headerName: "CT10", field: "category10", rowGroup: true, filter: true, rowGroupIndex: 10, hide: true }, { headerName: "C", field: "descriptionC", rowGroup: true, filter: true, rowGroupIndex: 11, hide: true }, { headerName: "C", field: "descriptionC", rowGroup: true, filter: true, hide: true }, { headerName: "color1", field: "color1", aggFunc: "avg", hide: true }, { headerName: "color2", field: "color2", aggFunc: "avg", hide: true }, { headerName: "color3", field: "color3", aggFunc: "avg", hide: true }, { headerName: "color4", field: "color4"…
type: Question
answer count: 1
type: AnsweredQuestion
score: 0
accepted answer: http://stackoverflow.com/a/78983523

http://stackoverflow.com/comment/139359063
type: Comment
score: 0
has text: Don't use hardcoded px width and height (for containers) in this responsive era.
type: QuestionComment
comment on: http://stackoverflow.com/q/79036207

http://stackoverflow.com/comment/139405062
score: 0
type: Comment
has text: You can check this SO answer [link](https://stackoverflow.com/questions/37789476/java-jsp-how-to-add-watermark-on-video). Put your watermark on video using any other tool. If you are using wordpress there are good plugin for that.
type: QuestionComment
comment on: http://stackoverflow.com/q/79061205

http://stackoverflow.com/comment/139137096
comment on: http://stackoverflow.com/q/78912045
type: QuestionComment
has text: @AHaworth: I also tried `text-size-adjust: none` to no avail. I tried putting the text into a container. Surprisingly, setting `display: flex` or `display: inline-block` for the container prevents chrome from resizing. The reason why the first section has the original font size is that it is a flex container! I do not understand why chrome does this! They should just leave such issues to the designer of the website.
type: Comment
score: 0

http://stackoverflow.com/q/78981552
type: UnansweredQuestion
type: Question
has title: Issue with Dynamic Tailwind Classes Not Being Generated When Applied via Function in React
has body: Question: Hi, I'm fairly new to frontend development, especially with React and JavaScript frameworks like Next.js and Tailwind CSS. I've started working on a couple of small projects to improve my understanding, one of which is a UI kit that includes components like buttons, alerts, dropdowns, and autocomplete fields. One of the challenges I've been working on is implementing dynamic positioning for DropDownContent and AutoCompleteContent components. I wanted to pass a position prop to these components to control the absolute positioning of the content div (e.g., bottom-center, top-right, right-middle, etc.). Additionally, I wanted to incorporate conditional animation classes that control how the content opens and closes. The functionality works, but I’m having trouble when trying to abstract the logic into a reusable function. Here's an example of the function I created for dynamically assigning these classes: export function getShowDynamicAbsolutePosition( position: AbsolutePositionProps, prefixShow: string, ): string { let result: string = prefixShow + "DynamicContentShow"; if (position === "bottom-center" || position === "top-center") { result = prefixShow + "DynamicContentShowCenter"; } else if (position === "left-middle" || position === "right-middle") { result = prefixShow + "DynamicContentShowMiddle"; } return result; } For example, here's how I’m using it in the AutoCompleteContent component: function getAutoCompleteContentStyle(props: AutoCompleteContentProps): string { const radius: string = getRadius(props.radius); const shadow: string = getShadow(props.shadow); const bgColor: string = getColor( false, props.color, props.variant, props.blurProps, ); const position: AbsolutePositionProps = props.position ? props.position : "bottom-center"; const showDynamicPosition: string = getShowDynamicAbsolutePosition( position, "peer-[.focus]:", ); const hideDynamicPosition: string = getHideDynamicAbsolutePosition( position, "peer-[.notfocus]:", ); return ( radius +…
tagged with: http://stackoverflow.com/tag/html
answer count: 1
linked to: http://stackoverflow.com/q/72560190
tagged with: tailwind-css
tagged with: typescript
score: 0
tagged with: reactjs
tagged with: css
has answer: http://stackoverflow.com/a/78981649
has comment: http://stackoverflow.com/comment/139259155

http://stackoverflow.com/comment/139147676
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78920877
has text: No, it is a new question completely
type: Comment

http://stackoverflow.com/a/78941701
has comment: http://stackoverflow.com/comment/139186141
answers question: http://stackoverflow.com/q/78941616
has body: Applying flexbox to your &lt;main id=&quot;main-doc&quot;&gt; wrapper should do the work. JSFiddle Demo @media (min-width: 680px) { #main-doc { display: flex; align-items: start; } /* ... */ } In the picture above I removed the margin-left property. .main-section { /* margin-left: 30vw; */ } Edit The revised answer follows the same style as before, but this time I wrapped the content on the right in a single parent container. *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { background-color: #faf0e6; margin: 0; padding: 0; } #navbar { background-color: #b9b4c7; } #navbar li a:hover { background-color: #5c5470; color: #faf0e6; } .main-section { margin: 0 auto; padding: 10px; letter-spacing: 0.2; } .main-section header { font-size: 1.5em; font-weight: 600; } pre, code { white-space: pre-wrap; font-family: monospace; } #conclusion li a:hover { color: #b9b4c7; } #conclusion, ul { list-style: none; } #conclusion li a { text-decoration: none; color: #352f44; display: block; padding: 2px; } @media (min-width: 680px) { body { width: 100vw; } #main-doc { display: flex; align-items: start; } .main-section { /*margin-left: 30vw;*/ } #navbar { position: sticky; top: 0; width: 30vw; height: 100vh; border-right: 2px solid #5c5470; } #navbar ul { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; } #navbar li { text-align: center; width: 100%; } #navbar a { color: #352f44; text-decoration: none; display: block; border: 1px solid black; text-align: left; padding: 10px; font-size: 1.5em; margin: 2px; } #navbar header { font-size: 2.5em; text-align: left; padding: 10px; font-weight: 600; margin-bottom: 10px; } } &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &lt;link rel="stylesheet" href="styles.css"&gt; &lt;title&gt;Responsive Web Design Principles&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;mai…
accepted answer of: http://stackoverflow.com/q/78941616
type: AcceptedAnswer
has comment: http://stackoverflow.com/comment/139186077
type: Answer
score: 0

http://stackoverflow.com/comment/139370008
comment on: http://stackoverflow.com/a/79039692
type: AnswerComment
score: 0
has text: I tried too, but it didn't do nothing
type: Comment

http://stackoverflow.com/comment/139297459
score: 0
type: AnswerComment
has text: You are right it's working quite well. I moved the style part you added to the others. Maybe it was this or some copy and paste mistake. Sorry for the false alert. Btw. do you have a coffee link?
comment on: http://stackoverflow.com/a/78996025
type: Comment

http://stackoverflow.com/comment/139137678
type: AnswerComment
has text: Either way, there was `::moz-resizer` but isn't working anymore so you pretty much need to hide it by covering it with other elements. It is *maybe* possible to avoid JS but you will need a very dedicated CSS to avoid it covering actual contents like I mentioned. Need to also account for when the container is resized to be super small. That's why I recommend might as well just right your own resizer components using something like drag drop events which shouldn't be too hard.
comment on: http://stackoverflow.com/a/78915845
type: Comment
score: 0

http://stackoverflow.com/a/78914370
upvote count: 2
has comment: http://stackoverflow.com/comment/139135083
has comment: http://stackoverflow.com/comment/139135128
answers question: http://stackoverflow.com/q/78914182
has comment: http://stackoverflow.com/comment/139134925
has comment: http://stackoverflow.com/comment/139135015
downvote count: 3
type: Answer
has comment: http://stackoverflow.com/comment/139134990
score: -1
has body: With css animation not possible in this case, please see here for a reference. I have implemented some extra code with the JS. Please review the attributes added animate-end="75" animate-speed="10". $(function () { $(".bar").addClass("animate"); var animationEnd = parseInt($(".bar").attr("animate-end"), 10); var speed = parseInt($(".bar").attr("animate-speed"), 10); var initial = 0; if (!isNaN(animationEnd) && animationEnd >= initial) { var intervalId = setInterval(() => { $(".bar").attr("style", `--stat-bar: ${initial}%`); initial++; if (initial > animationEnd) { clearInterval(intervalId); } }, speed); } }); .icon { width: 146px; height: 146px; padding: 36px; position: relative; flex-shrink: 0; } .icon .bar { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .icon .bar::before { content: ""; position: absolute; border-radius: 50%; inset: 0; background: conic-gradient(#00a451 0%, #e1e1e1 0%); z-index: 1; transition: none; } .icon .bar::after { content: ""; background-color: #fff; border-radius: 50%; width: 110px; height: 110px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; } .icon .bar.animate::before { background: conic-gradient(#00a451 var(--stat-bar), #e1e1e1 0%); }
has comment: http://stackoverflow.com/comment/139135157

http://stackoverflow.com/comment/139419150
type: Comment
score: 0
comment on: http://stackoverflow.com/a/79068924
type: AnswerComment
has text: Hi @user0, Yes, just custom one is very easy. For overriding styles, you may write all of the default css class/id in the file, then override it with new value and end with `!important` .

django
type: Tag
tags question: http://stackoverflow.com/q/79035449
tags question: http://stackoverflow.com/q/78978467
tags question: http://stackoverflow.com/q/78908954
tags question: http://stackoverflow.com/q/79037371
tag name: django
tags question: http://stackoverflow.com/q/78948123
tags question: http://stackoverflow.com/q/79010172
tags question: http://stackoverflow.com/q/79108006
tags question: http://stackoverflow.com/q/79192257
tags question: http://stackoverflow.com/q/79126504
tags question: http://stackoverflow.com/q/79113272
tags question: http://stackoverflow.com/q/79243681
tags question: http://stackoverflow.com/q/79261192
tags question: http://stackoverflow.com/q/79267555
tags question: http://stackoverflow.com/q/79430356
tags question: http://stackoverflow.com/q/79537932
tags question: http://stackoverflow.com/q/79469681
tags question: http://stackoverflow.com/q/79507985
tags question: http://stackoverflow.com/q/79457398
tags question: http://stackoverflow.com/q/79537942
tags question: http://stackoverflow.com/q/79449675

http://stackoverflow.com/comment/139392202
score: 0
has text: I have reduced your code to a simple demo. Please revise further as needed.
type: QuestionComment
comment on: http://stackoverflow.com/q/79054258
type: Comment

http://stackoverflow.com/comment/139182559
has text: Thnx @C3roe for this reference, this explains a lot!
score: 0
comment on: http://stackoverflow.com/q/78939815
type: Comment
type: QuestionComment

http://stackoverflow.com/q/78989661
has comment: http://stackoverflow.com/comment/139274757
has title: Pure CSS dynamic HTML table layout issue
has comment: http://stackoverflow.com/comment/139284447
tagged with: responsive-design
has comment: http://stackoverflow.com/comment/139284459
answer count: 0
downvote count: 0
tagged with: css
has comment: http://stackoverflow.com/comment/139274769
tagged with: angular
has comment: http://stackoverflow.com/comment/139274647
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139275244
has comment: http://stackoverflow.com/comment/139274873
favorite count: 0
has body: I want to display two HTML tables (a main list and a detail view) in a responsive manner, such that at Boostrap's xl breakpoint the two are shown side by side, and otherwise one below the other (with e.g. a 30/70 split). Both tables can be quite long, and so I have them set up for tbody scrolling like this so that they stay within the screen viewport: tbody { display: block; height: 80vh; overflow-y: scroll; } table thead, table tbody tr { display: table; width: 100%; table-layout: fixed; } The two tables are generated by Angular components, and both are contained inside a Bootstrap row: <app-list class="col-xl-4" /> <app-detail class="col-xl-8" /> This layout is working fine for the side-by-side mode. I cannot for the life of me find a way to shrink the (max) heights in top-to-bottom mode. As a general design principle I want the two components to be standalone and independent of any media or container queries because they may get re-used in other layouts. I hoped to be able to use media queries from the containing app level component's CSS to control the sizes of the two components' host elements. I've tried numerous combinations of supplying max-height values via vh and vb at every level of the DOM tree but nothing is working. A further consideration is that if the app-list view only contains a few items I'd like the app-detail view to use all remaining available space (i.e. the ratio could be 10/90, but cannot exceed 30/70). Is this even possible with pure CSS, or do I need to catch resize events. NB: I'm developing for latest Chrome - backwards compatibility is not a concern.
has comment: http://stackoverflow.com/comment/139274393
type: Question
tagged with: http://stackoverflow.com/tag/html
upvote count: 2
has comment: http://stackoverflow.com/comment/139275301
score: 2
has comment: http://stackoverflow.com/comment/139275451
has comment: http://stackoverflow.com/comment/139276134

css-transforms
tags question: http://stackoverflow.com/q/78912512
tags question: http://stackoverflow.com/q/78981776
tag name: css-transforms
tags question: http://stackoverflow.com/q/79048767
type: Tag
tags question: http://stackoverflow.com/q/79222973
tags question: http://stackoverflow.com/q/79189222
tags question: http://stackoverflow.com/q/79085318
tags question: http://stackoverflow.com/q/79518147
tags question: http://stackoverflow.com/q/79541851
tags question: http://stackoverflow.com/q/79422157

http://stackoverflow.com/comment/139364374
comment on: http://stackoverflow.com/q/79039117
type: Comment
score: 0
type: QuestionComment
has text: Why do you need your chart_title to be absolute ?

http://stackoverflow.com/q/79040516
has title: How to set elements back to relative after keeping it on fixed
tagged with: css
has body: https://codepen.io/BlazgoCompany/pen/dyBBRLp I am trying to make a website with lots of scroll animations (the text has been masked). The first animation with the zooming in star works very well, but the second animation doesn't work. It plays the animation like normal, but once it is done, it doesn't go back to the regular scrolling. It should also continue with the text below it after the animation is done. I am pretty sure I need to set it to relative but can't seem to get it to work. Also, please do not suggest using ScrollTrigger because it will not stay on CodePen forever, and I do not want to get Club GSAP. I am unable to use Stack Snippets for some reason so here's the full code: Lorem Ipsum Login Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt. Lorem. Ipsum. Dolor Sit Amet. Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Get Started Placeholder Heading Placeholder Title Placeholder Subtitle Placeholder text for description. Placeholder Title Placeholder Subtitle Placeholder text for description. Placeholder Title Placeholder Subtitle Placeholder text for description. Placeholder Title Placeholder Subtitle Placeholder text for description. This text should appear after this scroll animation (but it doesn't!) @import url('https://fonts.googleapis.com/css?family=Nunito:200,200i'); @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500'); @import url('https://fonts.googleapis.com/css?family=Varela+Round'); /* Import fonts */ /* Global Styles */ body { background: black; overflow-x: hidden; min-height: 800vh; margin: 0; font-family: sans-serif; /* Fallback font */ } input { padding: 12px; width: 80%; border-radius: 8px; border: none; left: 50%; position: relative; transform: translate(-50%); margin-top: 42px; } .hero { padding: 16px; position: fixed; …
downvote count: 1
accepted answer: http://stackoverflow.com/a/79040717
tagged with: gsap
favorite count: 0
type: Question
has answer: http://stackoverflow.com/a/79040717
tagged with: animation
answer count: 1
type: AnsweredQuestion
tagged with: scroll
score: 0
tagged with: javascript
upvote count: 1

http://stackoverflow.com/comment/139398299
type: Comment
score: 0
comment on: http://stackoverflow.com/q/79057850
type: QuestionComment
has text: Also use `defer` only if you provide a script's `src` attribute.

http://stackoverflow.com/comment/139349547
type: QuestionComment
has text: When I test it, using device emulation in Firefox, it sort of seems to work. What exact device and browser are you using to test your code?
type: Comment
score: 0
comment on: http://stackoverflow.com/q/79031158

http://stackoverflow.com/comment/139404714
score: 0
has text: This question is similar to: [Force a div to show up and overlay whatever is in fullscreen](https://stackoverflow.com/questions/23507096/force-a-div-to-show-up-and-overlay-whatever-is-in-fullscreen). If you believe it’s different, please [edit] the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem.
type: QuestionComment
type: Comment
comment on: http://stackoverflow.com/q/79061205

http://stackoverflow.com/q/78974046
tagged with: javascript
type: UnansweredQuestion
tagged with: css
type: Question
has title: Different behaviour of node.style.setProperty and node.setAttribute
answer count: 1
has answer: http://stackoverflow.com/a/78974124
score: 0
has body: Expected that setProperty and setAttribute should have had same effect on element. What is the reason for this? I cannot use setAttribute for my element , what can be alternate solution to get the expected result. element1 = document.getElementById("test1") element2 = document.getElementById("test2") element1.style.setProperty("font-family", 'Lato\\2c \\20 Helvetica\\20 Neue\\2c \\20 Helvetica\\3b ') //and element2.setAttribute("style", 'font-family:Lato\\2c \\20 Helvetica\\20 Neue\\2c \\20 Helvetica\\3b ') Test1 Test2 gives Test1 Test2
has comment: http://stackoverflow.com/comment/139245159

http://stackoverflow.com/q/78945251
has body: I boiled this down to as few code as I could without loosing function. You have to run this in Firefox, Chrome has an already reported and confirmed bug involved. If you click on the second Item ("click here first") you open a submenu and if you click one of the not-checkboxed-items, that will autoclose. however, if you click on the checkbox'd item, it should stay open. For the checkbox, this works, but a click on the label doesnt check the box and closes the sublist. can anyone spot, why this is the case? Both are coupled with id and for, so they should behave he same. :root { --menu-padding:0.5em; --menu-checkmargin:0.5em; --menu-checksize:1em; } nav ul { position:absolute; white-space:nowrap; display:flex; width:fit-content; list-style-type:none; margin:0; padding:0; } nav ul > li:has(> a) { padding: 0; } nav ul > li:has(> a) > a { display: inline-block; padding: var(--menu-padding); } nav ul li:focus-within > ul { display: flex; } nav ul li:focus-within > ul:focus { height: 0 !important; width: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; content-visibility: hidden; } nav li { position: relative; align-items: left; display: flex; box-sizing: border-box; justify-content: space-between; line-height: 1; padding: var(--menu-padding); } ul.qm-tiled { position: relative; text-align: left; flex-direction: column; white-space-collapse: collapse; left: 0; } ul.qm-tiled > li:focus-within:has(ul) { flex-direction: column; justify-content: space-between; } ul.qm-tiled > li:has(> ul:focus) { flex-direction: row; } ul.qm-tiled > li { display: flex; } ul.qm-tiled > li > ul { bottom: calc(-1 * var(--menu-padding)); } ul.qm-tiled ul { position: relative; margin: 0 calc(-1 * var(--menu-padding)); width: auto; } ul.qm-tiled li:not(:has(ul)):hover:focus { visibility: hidden; } ul.qm-tiled:has(> li > label) > li:not(ul.qm-tiled:has(> li > label) > li:has(> label)) { padding-left: calc(var(--menu-checkmargin) + var(--menu-checksize) + var(--…
upvote count: 1
type: UnansweredQuestion
score: 1
favorite count: 0
has answer: http://stackoverflow.com/a/78945424
tagged with: http://stackoverflow.com/tag/html
type: Question
answer count: 1
downvote count: 0
tagged with: focus
has title: Checkbox and its label behave differently in this example, can someone spot why?
tagged with: css

http://stackoverflow.com/comment/139418800
comment on: http://stackoverflow.com/a/79066480
type: AnswerComment
has text: Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer).
type: Comment
score: 0

http://stackoverflow.com/a/79039854
answers question: http://stackoverflow.com/q/79039846
has comment: http://stackoverflow.com/comment/139448989
score: 4
has body: You wrote: For some reason I am getting one column on my iPad Pro when in portrait mode. Can anyone help me understand why? Your media query is as follows: @media only screen and (min-width: 375px) and (orientation: portrait) { article { columns: 1; } } Any iPad Pro, regardless of the model, will definitely be wider than 375px, no matter if in portrait or in landscape mode (the model I am aware of has a 1024x1366px screen). So your media query will apply to any iPad Pro in portrait mode, and therefore you get the one column you see! To get two columns, I would simply change that media query to something like this: @media only screen and (max-width: 600px) and (orientation: portrait) { article { columns: 1; } } This will create one column on all mobile phones in portrait mode and on all tablets in portrait mode which are less than 600px wide when held in portrait mode. Note that I used a max-width value, which means "smaller than" / "less than"... You can change that value according to your needs, for example to 768px if you also want it to apply to older iPad models and iPad mini.
upvote count: 4
type: Answer
downvote count: 0

http://stackoverflow.com/comment/139185792
comment on: http://stackoverflow.com/a/78941783
type: Comment
score: 0
type: AnswerComment
has text: Hello. Thank you. I appreciate your time. Please check out the second version. I updated the original post. Why it doesn't happen in that? And I don't have any margin or z-index?

http://stackoverflow.com/a/78933450
has comment: http://stackoverflow.com/comment/139171417
answers question: http://stackoverflow.com/q/78930649
has body: For multiple levels of transparency you need a . Transparency can either be defined by opacity values or by the grayscale value of a color (actually, how photoshop masks work): 100% white = fully opaque 50% black = semi transparent 100% black = fully transparent * { padding: 0; margin: 0; } body { background: orange; } <rect fill="#FFF" width="100%" height="100%" /> <rect mask="url(#mask)" fill="#FFF" width="100%" height="100%" /> You may also define the mask as a data URL in CSS – in this case you may probably reverse the masking to show the back ground color of a * { padding: 0; margin: 0; } body { background: orange; } .masked { width: 100%; height: 100px; background-color: red; -webkit-mask-image: url("data:image/svg+xml, <rect fill='white' width='100%' height='100%'/> "); mask-mode: luminance; mask-size: contain; mask-repeat: no-repeat; } Masks vs. clip-paths Although both concepts serve a similar purpose they have different limitations and behaviors: Masks "8bit" alpha transparency – support multiple grades of transparency support for strokes and dashed strokes easier to use with regards to responsive layouts (e.g due to mask-size properties don't affect the hit area for pointer events (the invisible/transparent areas still respond to pointer events unlike clipped areas) put more load on the renderer as they introduce a rgba rendering context Clip-paths "1bit" transparency: areas are either fully opaque (within the clip-path element) or fully transparent/invisible (everthing outside the clip-path) strokes are ignored more refactoring needed for responsive clip-paths (e.g by scaling and setting and clipPathUnits="objectBoundingBox". See "Complex SVG clip-path responsive" "cut-out" the hit area – invisible areas won't respont to pointer events more performant If you definitely need semi-transparencies – masks are the way to go. If you only need to "cut-out" a shape you should take the slightly more sturdy way and opt for clip-paths. If you only need polygonal cl…
type: Answer
has comment: http://stackoverflow.com/comment/139171730
score: 0

http://stackoverflow.com/comment/139346452
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/79028934
has text: Ok great to know. Thank you!!
type: Comment

http://stackoverflow.com/comment/139319423
type: QuestionComment
comment on: http://stackoverflow.com/q/79014373
score: 0
has text: Please add your current code here. As soon as you push any changes to the repo the question will likely be invalidated and not helpful for someone else with a similar issue.
type: Comment

http://stackoverflow.com/comment/139405010
type: Comment
score: 0
has text: @MartinBean I see quite a few forms that have the submit button in the top right corner, then why not this variant?
comment on: http://stackoverflow.com/q/79060918
type: QuestionComment

http://stackoverflow.com/a/78976989
has comment: http://stackoverflow.com/comment/139256164
score: 1
has comment: http://stackoverflow.com/comment/139263031
answers question: http://stackoverflow.com/q/78975874
type: AcceptedAnswer
accepted answer of: http://stackoverflow.com/q/78975874
downvote count: 0
has comment: http://stackoverflow.com/comment/139262620
type: Answer
has comment: http://stackoverflow.com/comment/139256199
has comment: http://stackoverflow.com/comment/139263284
upvote count: 1
has comment: http://stackoverflow.com/comment/139262619
has comment: http://stackoverflow.com/comment/139262315
has body: The break tags are easy, just replace those with a new line tag /n. It gets complicated with the bold tags. The only way I see to do this is to replace() the bold tags within the initial string, defining a newly reformatted text variable. A function within a replace method to get a start and end range of the bold characters and save them in an array of objects. Then iterate over the reformatted text variable and use a conditional defining a boolean variable with .some() to check the range start and end, when we have a match, wrap those characters in a span tag that has a class which can be formatted in CSS to add the bold formatting. Then in the updateText() method we swap out formattedText accordingly using the current index, apply the bold formatting and then assign the innerHTML. I have further comments in the snippet to help explain the logic in more detail. EDIT: Added logic => tagOffset and adjustedOffset to track the exact amount of characters after the bold tags were removed within the replace method. The indexing was getting off because it was still referring to the indexes of the bold tag characters within the string. let text = "Ferrars all spirits his imagine effects amongst neither. Sure last upon he same as knew next. End friendship sufficient assistance can prosperous met. As game he show it park do. Was has unknown few certain ten promise. No finished my an likewise cheerful packages we are.For assurance concluded son son something depending discourse see led collected. Packages oh no denoting my advanced humoured. Pressed be so thought natural. "; const skip = document.querySelector('#skipAnimation'); // replace tags with newline characters text = text.replace(/ /g, '\n'); // define an array to hold any bold strings let boldTextRange = []; // we need to track positions of the shift of characters when we remvoe the break tags let replacedText = ''; // initialize a variable to track the character offset // initialize a variable to keep a closer track …
has comment: http://stackoverflow.com/comment/139263259

http://stackoverflow.com/a/79064366
has body: Try this: body { display: flex; justify-content: center; align-items: flex-start; /* Aligns the content at the top */ height: 100vh; /* Ensure the body takes up the full viewport height */ margin: 0; } .borderedTitle { border: 2px solid black; border-radius: 10px; padding: 10px; display: inline-block; text-align: center; } #title { color: rgb(226, 35, 35); display: inline-block; } .lato-bold { font-family: "Lato", sans-serif; font-weight: 700; font-style: normal; } Title
upvote count: 0
has comment: http://stackoverflow.com/comment/139410714
answers question: http://stackoverflow.com/q/79064359
score: -2
downvote count: 2
has comment: http://stackoverflow.com/comment/139410722
type: Answer

http://stackoverflow.com/a/78972283
answers question: http://stackoverflow.com/q/78971663
score: 0
has body: On the image-gallery items need to be set background-size property. background-image: url(https://images.squarespace-cdn.com/content/v1/5f5f09509b510014eef53096/0a27ec38-eddc-4c0e-bd69-4f9ecfe9475d/SaltFlats+%282%29.jpg); background-position: center; background-size: cover; After this change, all your images will be the size of the container. https://ibb.co/9885Vpc
has comment: http://stackoverflow.com/comment/139248295
type: Answer

http://stackoverflow.com/comment/139122332
type: QuestionComment
has text: [Questions asking for tool recommendations are off-topic for Stack Overflow](https://stackoverflow.com/help/on-topic#:~:text=Questions%20asking%20us%20to%20recommend%20or%20find%20a%20book%2C%20tool%2C%20software%20library%2C%20tutorial%20or%20other%20off%2Dsite%20resource).
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78907119

http://stackoverflow.com/comment/139369287
type: AnswerComment
has text: I thought all the buttons worked once the initial play (ie anywhere on the iframe) had been clicked for the first time. I’ll take a look. I don’t think they can be made to work before that fist click, which results in playing, though.
score: 1
type: Comment
comment on: http://stackoverflow.com/a/79041195

http://stackoverflow.com/comment/139363203
type: Comment
score: 0
has text: *"Except, in this particular case, you need the order property to work (meaning all items must have the same parent), so a nested flex container is out of the question."*
type: QuestionComment
comment on: http://stackoverflow.com/q/79038356

http://stackoverflow.com/q/78917075
answer count: 0
tagged with: css
tagged with: import
type: UnansweredQuestion
score: 1
favorite count: 0
type: Question
has body: When importing a css file with @import and a media query, the file is retrieved even if the media query doesn't match. For example, the code below. Click me The styles.css file is always retrieved, while the media query print does not match. This happens is all browser. Here is a <a href="https://codesandbox.io/p/sandbox/css-import-x78sr2?layout=%257B%2522sidebarPanel%2522%253A%2522SEARCH%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522cm0bwccz500063b5tpwypgw4s%2522%252C%2522sizes%2522%253A%255B100%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522cm0bwccz500023b5tzr6bhdh3%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522cm0bwccz500033b5tjjuhgwnj%2522%257D%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522cm0bw…
tagged with: http://stackoverflow.com/tag/html
downvote count: 0
has title: @import with media query still being retrieved
upvote count: 1

http://stackoverflow.com/q/78906838
tagged with: java
favorite count: 0
tagged with: javafx
has comment: http://stackoverflow.com/comment/139123527
has comment: http://stackoverflow.com/comment/139122726
linked to: http://stackoverflow.com/q/25650491
has body: I am trying to create a custom JavaFX window, with rounded corners and a drop shadow: Right now there are no system buttons, menu or anything. The primary stage has StageStyle.TRANSPARENT and the primary scene is also filled with Color.TRANSPARENT. The structure of the window is as follows (from Scene Builder): The StackPane and the GridPane are styled as follows: #support-pane { /* StackPane */ -fx-padding: 12px; -fx-background-color: transparent } #main-pane { /* GridPane */ -fx-background-color: red; -fx-background-radius: 7px; -fx-effect: dropshadow(three-pass-box, rgba(0, 0, 0, 0.4), 10, 0, 3, 3); } For illustrative purposes, this is how the window would look like if the StackPane was cyan: The sole purpose of the StackPane is to be a transparent canvas on which the inner GridPane can cast its shadow. Obviously, the problem is that the cyan edge acts as if it's part of the window, so, for example, any clicks on that area will bring the whole window into focus. Is it possible to make the transparent (cyan) edge completely ignore any events and just let clicks through? Or is it possible to implement a true window with round corners and a drop shadow, without such workarounds?
type: Question
tagged with: window
has comment: http://stackoverflow.com/comment/139124174
score: 2
downvote count: 0
tagged with: events
has title: JavaFX transparent window events
has comment: http://stackoverflow.com/comment/139133078
has comment: http://stackoverflow.com/comment/139123126
has comment: http://stackoverflow.com/comment/139121686
answer count: 0
tagged with: css
upvote count: 2
type: UnansweredQuestion

http://stackoverflow.com/a/79037432
score: 1
downvote count: 0
answers question: http://stackoverflow.com/q/79037411
type: Answer
has comment: http://stackoverflow.com/comment/139361199
upvote count: 1
has body: You could use has() for that: h3>span+span:not(:has(a))::after { border: solid 1px transparent; content: '\2199'; display: inline-block; color: gray; } Title Title linklink

http://stackoverflow.com/q/78976005
has title: Incorrect position of tooltip on a canvas
tagged with: http://stackoverflow.com/tag/html
type: Question
tagged with: tooltip
answer count: 1
type: AnsweredQuestion
has body: I’m trying to click on any of the cells to get a tooltip next to the cell, but I’m having a lot of trouble getting the correct coordinates. I went through it and none of the solutions worked. What could it be? Comprar esta celda Comprar If you can see in the example it seems to be a problem of image size and relative positioning, that’s what I imagine but I can’t find the solution. Also if you know a better way to do the job, I would appreciate it. This seemed to be a pretty simple option until I had this problem with the tooltip.
score: 0
has answer: http://stackoverflow.com/a/78976080
tagged with: css
accepted answer: http://stackoverflow.com/a/78976080

http://stackoverflow.com/comment/139305974
comment on: http://stackoverflow.com/a/79007197
type: Comment
type: AnswerComment
has text: Pretty clever use of `Date.toISOString()`
score: 1

http://stackoverflow.com/a/78967953
answers question: http://stackoverflow.com/q/78967875
has comment: http://stackoverflow.com/comment/139238747
has body: In your CSS, you're using the sibling combinator (+), which only applies styles to the that is immediately following the . This means that your CSS rule will only affect labels that are direct siblings of the radio inputs. Keep the label immediately after the input within the same .custom-input container.
type: Answer
score: 0
has comment: http://stackoverflow.com/comment/139254065

css-grid
tags question: http://stackoverflow.com/q/79061543
tags question: http://stackoverflow.com/q/79054197
tags question: http://stackoverflow.com/q/78971329
tags question: http://stackoverflow.com/q/78929318
type: Tag
tags question: http://stackoverflow.com/q/79057724
tags question: http://stackoverflow.com/q/79050871
tags question: http://stackoverflow.com/q/78968754
tags question: http://stackoverflow.com/q/79047361
tags question: http://stackoverflow.com/q/78949395
tags question: http://stackoverflow.com/q/78917255
tags question: http://stackoverflow.com/q/78941057
tags question: http://stackoverflow.com/q/78951014
tags question: http://stackoverflow.com/q/78993924
tags question: http://stackoverflow.com/q/78979042
tags question: http://stackoverflow.com/q/78983946
tags question: http://stackoverflow.com/q/79020577
tags question: http://stackoverflow.com/q/79023969
tags question: http://stackoverflow.com/q/78971081
tags question: http://stackoverflow.com/q/79024730
tags question: http://stackoverflow.com/q/79050055
tags question: http://stackoverflow.com/q/79058041
tags question: http://stackoverflow.com/q/79011399
tag name: css-grid
tags question: http://stackoverflow.com/q/79058959
tags question: http://stackoverflow.com/q/79039117
tags question: http://stackoverflow.com/q/79030672
tags question: http://stackoverflow.com/q/78929748
tags question: http://stackoverflow.com/q/79074626
tags question: http://stackoverflow.com/q/79244522
tags question: http://stackoverflow.com/q/79133226
tags question: http://stackoverflow.com/q/79135911
tags question: http://stackoverflow.com/q/79196073
tags question: http://stackoverflow.com/q/79085186
tags question: http://stackoverflow.com/q/79198554
tags question: http://stackoverflow.com/q/79167948
tags question: http://stackoverflow.com/q/79156938
tags question: http://stackoverflow.com/q/79109895
tags question: http://stackoverflow.com/q/79128857
tags question: http://stackoverflow.com/q/79220183
tags question: http://stackoverflow.com/q/79213157
tags question: http://stackoverflow.com/q/79242665
tags question: http://stackoverflow.com/q/79177167
tags question: http://stackoverflow.com/q/79110718
tags question: http://stackoverflow.com/q/79209293
tags question: http://stackoverflow.com/q/79212300
tags question: http://stackoverflow.com/q/79230957
tags question: http://stackoverflow.com/q/79112738
tags question: http://stackoverflow.com/q/79177871
tags question: http://stackoverflow.com/q/79153398
tags question: http://stackoverflow.com/q/79177543
tags question: http://stackoverflow.com/q/79224047
tags question: http://stackoverflow.com/q/79221911
tags question: http://stackoverflow.com/q/79133810
tags question: http://stackoverflow.com/q/79185396
tags question: http://stackoverflow.com/q/79234207
tags question: http://stackoverflow.com/q/79163031
tags question: http://stackoverflow.com/q/79088112
tags question: http://stackoverflow.com/q/79195348
tags question: http://stackoverflow.com/q/79218866
tags question: http://stackoverflow.com/q/79232279
tags question: http://stackoverflow.com/q/79358096
tags question: http://stackoverflow.com/q/79305675
tags question: http://stackoverflow.com/q/79407218
tags question: http://stackoverflow.com/q/79390073
tags question: http://stackoverflow.com/q/79386303
tags question: http://stackoverflow.com/q/79337722
tags question: http://stackoverflow.com/q/79363526
tags question: http://stackoverflow.com/q/79345168
tags question: http://stackoverflow.com/q/79341771
tags question: http://stackoverflow.com/q/79325223
tags question: http://stackoverflow.com/q/79392816
tags question: http://stackoverflow.com/q/79391251
tags question: http://stackoverflow.com/q/79249213
tags question: http://stackoverflow.com/q/79329887
tags question: http://stackoverflow.com/q/79248558
tags question: http://stackoverflow.com/q/79415432
tags question: http://stackoverflow.com/q/79327976
tags question: http://stackoverflow.com/q/79381307
tags question: http://stackoverflow.com/q/79365683

http://stackoverflow.com/q/78979287
type: UnansweredQuestion
tagged with: shadcnui
has comment: http://stackoverflow.com/comment/139262372
has body: Depending on where I put a select component or any component that uses a popper, it creates an unnecessary white space at the bottom of the page. The select is within a div that has a custom overflow y set and I want the select pop up to be scrollable with that div component It's hard to describe with words so I will post a picture as well. before pop down after pop down How do I make the pop down go down with the div with the custom scrollbar and instead of just the page in general? I tried changing the styling of the Select component itself as well as the max height and although that does work, I don't like how the pop up looks because its so small. Here is the select component I am using, there are multiple of them within the form that all function relatively the same way: <FormField control={form.control} name="startTimeHour" render={({ field }) => ( Start Hour <SelectValue placeholder={event ? dateObj.startHour : "01"} /> {hourArray.map((hour) => { return ( {hour} ); })} <FormMessage /> )} /> Here is the styling of the div it is affecting: .common-container { @apply flex flex-col flex-1 items-center gap-10 overflow-y-scroll py-10 px-5 md:px-8 lg:p-14 custom-scrollbar; } This issue only occurs when the page is full of elements, so you probably won't notice anything if you test with just one of these selects. I have a bottom bar that sticks to the bottom of the page and when you scroll all the way down there is just extra whitespace below the bottom bar, I need to either adjust the bottom bar to stick below that white space or for the div's content to expand when the select component drops down.
type: Question
has comment: http://stackoverflow.com/comment/139264034
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139264009
answer count: 1
tagged with: tailwind-css
has title: Shadcn select creating unnecessary white space at bottom of page
has comment: http://stackoverflow.com/comment/139264770
has answer: http://stackoverflow.com/a/79146528
score: 0
has comment: http://stackoverflow.com/comment/139262377
tagged with: overflow
tagged with: css

http://stackoverflow.com/comment/139443106
score: 0
has text: `This is my first time using a script` Really?? The script included in the question demonstrates competency with scripting. So you didn't write this script? You should have made this clear at the outset. `and I’ve already attempted it` Would you please edit the question to include the your attempt at a script and describe the problem you are having with it.
type: QuestionComment
type: Comment
comment on: http://stackoverflow.com/q/79064015

http://stackoverflow.com/comment/139393479
has text: So why are you specifying gap size?
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/79051207

http://stackoverflow.com/q/78952476
tagged with: css
has title: The image becomes really big when it changes to next in carousel. (React)
has answer: http://stackoverflow.com/a/78968454
has comment: http://stackoverflow.com/comment/139205951
has body: I am working on building a react website and I want to add a carousel in it with some text next to it. The problem is that whenever the image switches to the next manually or automatically, the image enlarges in size and goes back to normal after the image is changed. Here is my section containing the carousel and text in Home.jsx component: Previous Next About Our Farm lorem ipsum. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Also, here is the css for the above section in home.css: .intro-section { display: flex; padding: 50px 20px; align-items: center; justify-content: center; margin: 0 auto; flex-wrap: wrap; } .intro-text { width: 50%; text-align: justify; flex: 1; padding: 20px; max-width: 600px; font-size: 1.25rem; } .carousel { max-width: 100%; /* margin: auto; */ overflow: hidden; } .carousel-control-prev-icon, .carousel-control-next-icon { background-color: rgba(0, 0, 0, 0.5); } .carousel-image { width: 100%; height: auto; } .carousel-item { max-height: 500px; overflow: hidden; } I have tried the solutions from the similar questions like enclosing the image in a div or using overflow:hidden. Also, I know all my images must have the same dimensions and I have made sure of it. It has not worked for me or I am doing something wrong. Can someone find the problem with my code and the solution.
type: Question
has comment: http://stackoverflow.com/comment/139206005
answer count: 1
has comment: http://stackoverflow.com/comment/139208097
type: AnsweredQuestion
score: 0
accepted answer: http://stackoverflow.com/a/78968454
tagged with: reactjs
tagged with: carousel

http://stackoverflow.com/comment/139282359
type: Comment
comment on: http://stackoverflow.com/a/78992641
has text: @cjenkins08 I get your point. in your CSS you apply float:left property to navigation li tag Sometimes float affects to their sibling also. If you need to not apply the float property to sibling element just add CSS to #header {clear: both;}
score: 0
type: AnswerComment

pkgdown
type: Tag
tag name: pkgdown
tags question: http://stackoverflow.com/q/79039316
tags question: http://stackoverflow.com/q/79083814

http://stackoverflow.com/comment/139144149
type: AnswerComment
comment on: http://stackoverflow.com/a/78917605
has text: I have a related question but should probably do a new thread. I would like to also reveal/hide the password when typing it into the input field using javascript focusin and focusout.
type: Comment
score: 0

http://stackoverflow.com/comment/139186700
comment on: http://stackoverflow.com/a/78942209
type: Comment
has text: Yes, staying close to the original code can be a good idea. However, the original seems just a copy of the w3Schools example with the `*` select added. Maybe Jwok thinks this is the proper way to set the background color of the web page?
type: AnswerComment
score: 0

http://stackoverflow.com/comment/139339175
score: 1
comment on: http://stackoverflow.com/q/79025318
type: Comment
has text: I couldn't reproduce this, it worked fine for me.
type: QuestionComment

http://stackoverflow.com/q/78980291
has answer: http://stackoverflow.com/a/78980302
tagged with: css
has title: Squarespace custom css works in inspect element in browser but not in my browser
type: UnansweredQuestion
has body: here's my site: https://manatee-dodecahedron-ap6r.squarespace.com/ I've added a bunch of css to try and change the design of the gallery element to make the font bigger. The css i've added works in preview and inspect element but not in a full desktop browser. if you have any ideas to solve i'd be so grateful. thank you in advance. Here's the css in question: #sections &gt; section.page-section.has-section-divider.gallery-section.full-bleed-section.background-width--full-bleed.section-height--medium.content-width--wide.horizontal-alignment--center.vertical-alignment--middle &gt; div.content-wrapper { min-height: 825px; }
favorite count: 0
type: Question
downvote count: 1
tagged with: http://stackoverflow.com/tag/html
tagged with: squarespace
answer count: 1
tagged with: browser
upvote count: 0
score: -1

http://stackoverflow.com/comment/139448989
type: AnswerComment
comment on: http://stackoverflow.com/a/79039854
has text: It's possible to use the newer range syntax - in your example that would be `(width <= 600px)` - in place of the 'traditional' `(max-width: 600px)` approach, the newer version requiring less of an explanation. See: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries#targeting_media_features
type: Comment
score: 0

http://stackoverflow.com/comment/139126977
has text: Where in the custom css code it should be added? On the input element level? as this code not affect spesific on the input element isn't it?
comment on: http://stackoverflow.com/a/78909522
type: Comment
score: 0
type: AnswerComment

http://stackoverflow.com/comment/139411301
comment on: http://stackoverflow.com/a/79064784
score: 1
has text: Please explain what you've actually change to address the issue. Code-only answers are not good answers
type: Comment
type: AnswerComment

http://stackoverflow.com/a/78967957
type: Answer
upvote count: 3
score: 3
downvote count: 0
has body: These two techniques achieve similar outcomes, with subtle differences. Personally if a simple clear: both works for a particular layout, then it would be my first choice. But there may be layouts for which the clearfix hack works better, in which case I would use that. Here is a snippet which illustrates the differences. div { border: 3px solid #4CAF50; padding: 5px; } .img1, .img2 { float: right; } .next { color: green; } hr, .clear { clear: both; } .clearfix::after { content: ""; clear: both; display: table; } code { background: silver; padding: 2px 5px; border-radius: 5px; } hr { border: 0; padding-bottom: 1em; border-bottom: 3px dashed orange; } Base case Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet... Next paragraph Use of clear: both You can add clear: both to an element to make sure it starts beneath any floats. Here I have applied it to the next paragraph. This is a simple CSS style, which does the job if applied correctly. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet... Next paragraph cleared With clearfix hack The clearfix hack as described here, is used on the parent of the floated element. It uses clear: both as well, but adds a couple of extra styles to make the parent container grow to contain the float. If this is more suitable for your use case, then use it. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet... Next paragraph
has comment: http://stackoverflow.com/comment/139233906
answers question: http://stackoverflow.com/q/78967851

http://stackoverflow.com/comment/139320950
comment on: http://stackoverflow.com/q/79015030
has text: another approach could be using an actual ` ` element that will work appropriately in those regards. But since you used the css variable trick for its url it would need added js to set that url taken from css variable
type: Comment
score: 0
type: QuestionComment

http://stackoverflow.com/comment/139165131
comment on: http://stackoverflow.com/a/78928397
type: Comment
has text: Thank you for you input but we can achieve this with CSS. https://stackblitz.com/edit/angular-lxk9aa?file=src%2Findex.html,src%2Fmain.ts Please go through this stakblitz i just updated
score: 0
type: AnswerComment

http://stackoverflow.com/q/78947964
tagged with: material-ui
answer count: 0
tagged with: css
type: UnansweredQuestion
type: Question
has title: Tailwind CSS Styling Not Applying to Custom MUI Components in Next.js
has body: I'm using Tailwind CSS and MUI in my Next.js 14 project, but the Tailwind className prop is not working with custom MUI components. Here's an example of one of my custom component: import Button, { ButtonProps } from '@mui/material/Button'; import React from 'react'; type MHButtonProps = ButtonProps & { className?: string; }; const MHButton: React.FC<MHButtonProps> = ({ color = 'inherit', className, sx, ...props }) => { return ( ); };` export default MHButton When I try to style the button using Tailwind, the styles do not apply, but it works perfectly with the sx prop from MUI: hi ``` I've tried configuring my Tailwind config file, but it still doesn't work. Here’s how my layout file (layout.tsx) is set up: ` <AppRouterCacheProvider options={{ enableCssLayer: true }}> <CssBaseline /> {children} </AppRouterCacheProvider> ` Any ideas on how to get Tailwind CSS classes to apply to MUI components? Is there a conflict with the setup, or is there a specific configuration needed to make this work?
tagged with: next.js14
tagged with: tailwind-css
tagged with: typescript
score: 0

http://stackoverflow.com/comment/139332438
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/79021330
has text: Try and replace the `display: none` with one of the "screenreader-friendly" ways of hiding content - https://css-tricks.com/inclusively-hidden/, https://www.sitelint.com/blog/hiding-a-text-but-making-it-accessible-to-a-screen-reader

http://stackoverflow.com/a/78999243
answers question: http://stackoverflow.com/q/78999075
type: Answer
score: 0
has body: Solution to Dropdown Alignment Issue To fix the misalignment and properly position the arrow, you can adjust the CSS for the dropdown arrow. .dropdown-content::before { content: ""; position: absolute; bottom: 100%; left: 10%; /* Adjusted to align with the "Other" tab */ transform: translateX(-50%); border-width: 5px; border-style: solid; border-color: transparent transparent #f1f1f1 transparent; /* Match dropdown background color */ } Hope this helps!

http://stackoverflow.com/a/79058981
score: 3
upvote count: 3
has comment: http://stackoverflow.com/comment/139400298
has comment: http://stackoverflow.com/comment/139400292
downvote count: 0
answers question: http://stackoverflow.com/q/79058968
has comment: http://stackoverflow.com/comment/139401445
has comment: http://stackoverflow.com/comment/139403197
has comment: http://stackoverflow.com/comment/139401062
has comment: http://stackoverflow.com/comment/139401096
has comment: http://stackoverflow.com/comment/139400385
has comment: http://stackoverflow.com/comment/139400972
has body: You can select html object with attribute equal to something with img[src="something"] { /* Your styles here */ } But as you need to select only by file extension, you can use $= as shown below img[src$=".gif"] { /* Your styles here */ } As for your code: mistake one: you're using *= which will check if .gif is mentioned anywhere in string,but you need to use $= to check if .gif is in last mistake 2: css doesn't support nested selection, and you seem to use default css: so corrected code will be like: .items { clear: both; display: flex; position: relative; width: 100%; max-width: 200px; height: auto; max-height: 100%; object-fit: contain; margin: 5px; } .items img { width: 100%; max-width: 80px; height: auto; max-height: 100%; object-fit: contain; margin: 5px; } /*This targets only GIF images within .items*/ .items img[src$=".gif"] { border: 2px solid red; /*Example style for GIFs..*/ } Code sandbox preview/example: https://87y63l.csb.app/
has comment: http://stackoverflow.com/comment/139401049
has comment: http://stackoverflow.com/comment/139400297
type: Answer

http://stackoverflow.com/q/79048394
favorite count: 0
tagged with: react-native-flatlist
type: Question
downvote count: 0
tagged with: flatlist
has comment: http://stackoverflow.com/comment/139414132
has body: I am new to react native and i have a an array of products in my react native expo project for which i am using the Flatlist to render them on screen. i am facing issue where the box shadow is not proper. if i use mapping everything regarding box shadow is perfect but when i use flatlist, there seems to be shadow visible outside the radius of card. const renderItem = ({ item }) => ( {item.title} {item.description} Price- {item.price} / Kg Add `your text` ); <FlatList data={products} renderItem={renderItem} keyExtractor={(item) => item.id.toString()} ItemSeparatorComponent={ } />; const styles = { card: { borderRadius: 16, flexDirection: "row", backgroundColor: "#FFFFFF", shadowColor: "#000000", shadowOffset: { width: 0, height: 4, }, shadowOpacity: 0.15, shadowRadius: 4, elevation: 5, }, }; Notice that there is extra shadow on bottom right of cards and the last card has minimal effect o the bottom
upvote count: 1
tagged with: expo
tagged with: react-native
tagged with: css
has title: Box shadow issues in flatlist
answer count: 0
type: UnansweredQuestion
score: 1

http://stackoverflow.com/a/78921243
has comment: http://stackoverflow.com/comment/139149542
has body: You can check bootstrap documentation. It contains many examples. It also has an example for you problem. Anyway here is the answer. Link for the documentation: Bootstrap documentation * { margin: 0; padding: 0; font-family: "Roboto", sans-serif; color: #272727; } .register-form { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; flex-direction: column; } form { width: 30%; } .form-group { margin-top: 5px !important; } Document First name: Last Name: E-mail: City of residence:
has comment: http://stackoverflow.com/comment/139160300
type: Answer
score: 0
has comment: http://stackoverflow.com/comment/139160287
answers question: http://stackoverflow.com/q/78920900

http://stackoverflow.com/comment/139277540
type: AnswerComment
has text: I am experimenting with your code, how does this answer change if we adjust the height/width of the icon?
comment on: http://stackoverflow.com/a/78991582
score: 0
type: Comment

http://stackoverflow.com/a/78908116
score: 1
type: AcceptedAnswer
downvote count: 0
has comment: http://stackoverflow.com/comment/139129579
type: Answer
has body: I have created a simple example to illustrate your requirement. We will create a div with class table-container and inside it we have our table. For table-container we will add two main properties overflow: auto & height: 300px (which will add vertical scroll). For table we will add this two properties table-layout: fixed and width: 100%;. To make header sticky we will add position: sticky and z-index: 10 (So that its above unit row when we add sticky to that) to our th. To apply position: sticky to the first column of each row, we will add td:nth-child(1){position: sticky;left: 0} That's all. Below is working example. body { margin: 0; padding: 0; color: white; background-color: #333; } .table-container { height: 300px; overflow: auto; margin: 20px; } table { table-layout: fixed; width: 100%; } thead{ z-index: 10; background-color:#333; position: sticky; top: 0; left:0; } th, td { width: 200px; padding: 8px; } td:nth-child(1){ background-color:#333; position: sticky; left: 0 } Units KPI1 KPI2 KPI1 KPI2 KPI1 KPI2 KPI1 KPI2 Unit 1 val val val val val val val val Unit 2 val val val val val val val val Unit 3 val val val val val val val val Unit 4 val val val val val val val val Unit 5 val val val val val val val val Unit 6 val val val val val val val val Unit 7 val val val val val val val val Unit 8 val val val val val val val val Unit 9 val val val val val val val val Unit 1 val val val val val val val val Unit 1 val val val val val val val val Unit 1 val val val val val val val val
upvote count: 1
answers question: http://stackoverflow.com/q/78906471
accepted answer of: http://stackoverflow.com/q/78906471

http://stackoverflow.com/comment/139238747
has text: appreciated, in my above code I do the same
type: Comment
score: 0
comment on: http://stackoverflow.com/a/78967953
type: AnswerComment

http://stackoverflow.com/a/78994391
answers question: http://stackoverflow.com/q/78993739
type: Answer
has comment: http://stackoverflow.com/comment/139284179
score: 0
has body: I hope I understood correctly. Since you mentioned that the fonts were not saved anywhere in the project, I used an external font. However, you could create a folder in your project and place the fonts inside it, allowing you to access them by referencing those fonts, which is a better solution. In any case, there are three methods for foreign fonts, and I used Google Fonts. All methods have been written and commented on so that you can study them more easily. 1- import 2- font-face 3- link Font test Font no juts! You can also refer to the link above for more information on the mentioned topics: enter link description here I also added a folder named Fonts to my project and placed my downloaded fonts inside it and referenced them: Font test Font no jutsu! I hope you have received my response.

http://stackoverflow.com/comment/139157668
comment on: http://stackoverflow.com/a/78924322
has text: @Zourab what do you want to happen if a column cell already has a background colour?
type: Comment
score: 0
type: AnswerComment

http://stackoverflow.com/a/79386901
has body: My shot: Give the button borders (bottom and right) a darker color than the background, change its size when its clicked (active). Code: Click me Obs 1: Since when clicked this will shrink the button size by 4 pixels, you will have to add a margin bottom/right to compensate: active:mb-[4px] active:mr-[4px] Obs 2 (if the button will be disabled at some point): In Tailwind CSS (and in CSS in general), the :active pseudo-class can still apply to an element, even if it's disabled. So, you will have to copy the "not-active" style to apply when "disabled" as well: disabled:active:border-b-4 disabled:active:mb-0 disabled:active:border-r-4 disabled:active:mr-0 Gif:
answers question: http://stackoverflow.com/q/78987424
type: Answer
score: 0

http://stackoverflow.com/comment/139382634
type: Comment
has text: Whoever wants to edit the title of this post, have at it.
score: 0
comment on: http://stackoverflow.com/q/79048771
type: QuestionComment

http://stackoverflow.com/comment/139253716
has text: It's definitely something to do with drawing outside of the boundaries. I've played around with the width and found that if I edit the width post-render, that the axes show up. I'll be trying both of your suggestions right now. Thank you!!!!
type: QuestionComment
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78975591

http://stackoverflow.com/q/79021456
has comment: http://stackoverflow.com/comment/139332194
type: UnansweredQuestion
has body: I am having trouble to adjust the background images to stop and do not overflow at the end of the last section of my website. I cannot put them in the body background since I apply blend mode and I rotate the image trough the website. If someone wants to help I attach also the bg image somewhere here I expected the images to stop after the contact section that in the entire code is at the very bottom of the page. I tried to put in the page a width 100% but it scales too much in the mobile versions so right now I don't know what to do. EDIT: [this is how the website looks right now] The background image overflows too much as you can see in the scroll bar since there is no content below the Contact section * { margin: 0; padding: 0; scroll-behavior: smooth; overflow-x: hidden; gap: 0; } body { display: flex; min-width: 79.5rem; flex-direction: column; align-items: flex-start; background-color: #D9D9D9; } .paper { position: absolute; z-index: -1; overflow: hidden; top: 0; left: 0; flex-shrink: 0; display: flex; flex-direction: column; gap: 0; background-color: #D9D9D9; mix-blend-mode: exclusion; } .paper img:nth-child(2) { rotate: 180deg; transform: scaleX(-1); } .paper img:nth-child(3) { margin-top: -40px; transform: scaleX(1); } #contact { display: flex; padding: 7.551svh 0rem 12.945svh 0rem; flex-direction: column; justify-content: center; align-items: center; align-self: stretch; } #contact .content { display: flex; flex-direction: column; align-items: flex-start; } #contact .content h4 { position: absolute; left: 11.97916svw; color: var(--primary-light); font-family: var(--title); font-size: 5.394svh; font-style: normal; font-weight: 400; line-height: normal; } .content .main { display: flex; padding: 6.688svh 0rem 0rem 1.5625svw; flex-direction: column; align-items: center; } .main a { color: var(--primary-light); text-decoration: none; text-align: center; font-family: var(--title); font-size: 21.575svh; font-style: normal; font-weight: 400; } .main .bottom { dis…
type: Question
has comment: http://stackoverflow.com/comment/139332460
tagged with: http://stackoverflow.com/tag/html
answer count: 1
score: 0
has title: Is there any way to prevent the overflow of the background images?
tagged with: overflow
tagged with: css
tagged with: image
has comment: http://stackoverflow.com/comment/139332372
has answer: http://stackoverflow.com/a/79021631

http://stackoverflow.com/comment/139187188
comment on: http://stackoverflow.com/a/78939019
score: 0
type: Comment
has text: Okay, so now our task is to improve this post (your question) so that it makes sense for those who come after us. For the benefit of the community. Can you please edit your post to include the code for the relevant header styles which, when inherited, caused the problem in the first place? That way, the code in your post will be able to be used to demonstrate the problem you are describing. I will then revise my answer to shorten it and clearly point out the problem.
type: AnswerComment

http://stackoverflow.com/comment/139229600
comment on: http://stackoverflow.com/a/78965584
type: Comment
has text: Nav2 overlaps nav1 with the scroll, instead I would like them not to overlap but to be one under the other
score: 0
type: AnswerComment

overlay
tags question: http://stackoverflow.com/q/78997151
type: Tag
tag name: overlay
tags question: http://stackoverflow.com/q/78973058
tags question: http://stackoverflow.com/q/79101849
tags question: http://stackoverflow.com/q/79283555

http://stackoverflow.com/comment/139416168
has text: can you change borderBottomWidth?
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/79066460
type: Comment

http://stackoverflow.com/comment/139158202
has text: to be clear: your question is fine. @OMiShah 's comment above should be an answer. My first comment is just a suggestion - you've already considered it so no longer relevant (left the comment otherwise others would just make the same suggestion). To clarify my second comment: *If* you are using classes and want to check that the class has applied a border, then it's very different from if an inline style has applied a border - so more of an advisory for anyone wanting that scenario and wondering why .style.border isn't working. But that's not this question.
type: QuestionComment
comment on: http://stackoverflow.com/q/78926741
type: Comment
score: 0

http://stackoverflow.com/comment/139276986
has text: Can't see what's wrong, works perfectly for me, (I did try your pointing technique)
type: QuestionComment
score: 1
type: Comment
comment on: http://stackoverflow.com/q/78991256

http://stackoverflow.com/a/79030730
has body: Use pseudo-element and remove the inline styles: td { width: 56.7pt; border: 1px solid red; position: relative; background-color: white; } td:before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(to right bottom, #0000 49.9%, black 50% 52%,#0000 52.1%), linear-gradient(to right top, #0000 49.9%, blue 50% 51%,#0000 51.1%); pointer-events: none; } Content Content
downvote count: 1
upvote count: 0
has comment: http://stackoverflow.com/comment/139348834
has comment: http://stackoverflow.com/comment/139348877
type: Answer
has comment: http://stackoverflow.com/comment/139348795
score: -1
answers question: http://stackoverflow.com/q/79030490

http://stackoverflow.com/comment/139131644
has text: You need to add some comments/explanation on how you came to the conclusion that the answer provided answers the OP's question. https://stackoverflow.com/help/how-to-answer
type: Comment
score: 5
type: AnswerComment
comment on: http://stackoverflow.com/a/78912348

http://stackoverflow.com/comment/139171925
type: AnswerComment
has text: thanks - I will try and see if these changes work.
type: Comment
comment on: http://stackoverflow.com/a/78927318
score: 0

http://stackoverflow.com/a/78916781
score: 0
answers question: http://stackoverflow.com/q/78914640
has body: You can use a pixel value to .head-img image width rather than 100%. Then you can use media queries to reduce with when device width reaches to 1300px. Here you can see how I did that. /* *************** */ /* HERO-SECTION */ /* *************** */ .hero { max-width: 130rem; display: grid; grid-template-columns: 1fr 1fr; align-items: center; justify-content: center; column-gap: 9.6rem; } .hero h1 { font-size: 5.2rem; font-weight: 700; margin-bottom: 3.2rem; line-height: 1; letter-spacing: -1px; } .hero p { font-size: 1.8rem; font-weight: 500; margin-bottom: 4.8rem; line-height: 1.5; } .btn:link, .btn:visited { font-size: 2rem; padding: 1.2rem 3.2rem; text-decoration: none; display: inline-block; background-color: #e67e22; color: white; border-radius: 1.5rem; font-weight: 500; transition: all 0.3s; } .left:hover, .left:active { background-color: #cf711f; } .right:link, .right:visited { background-color: white; color: #333; margin-left: 2.4rem; } .right:hover, .right:active { background-color: #fdf2e9; color: #333; box-shadow: 0 0 0 3px white; } .hero-section { background-color: #fdf2e9; padding: 16rem 32rem; } .head-img { width: 600px; } .deliver-ithems { display: flex; align-items: center; margin-top: 8rem; gap: 1.6rem; } .deliver-imgs { display: flex; } .deliver-imgs img { height: 4.8rem; width: 4.8rem; border-radius: 50%; border: #fff solid 2px; margin-left: -1.6rem; } .deliver-imgs img:first-child { margin: 0; } .deliver-text { font-size: 1.8rem; font-weight: 600; } .deliver-ithems span { color: #cf711f; } @media screen and (max-width: 1300px) { .head-img { width: 400px; } } Here is my output.
type: Answer

http://stackoverflow.com/comment/139967428
has text: Try not using advertising funded hosting for your legal documents! I'd be astonished if removing the ads wasn't a violation of your contract with Google for the hosting.
comment on: http://stackoverflow.com/q/79023748
type: Comment
score: 0
type: QuestionComment

http://stackoverflow.com/q/79000802
has title: How to draw a curve border in css
answer count: 2
tagged with: css
score: -3
has body: I want to create the same border that attached below this post with the only CSS. Is this possible? If so, how can it be done? My code and I want to create it by .curve::after {}: Thank you!
has answer: http://stackoverflow.com/a/79001321
has answer: http://stackoverflow.com/a/79000899
type: UnansweredQuestion
upvote count: 0
favorite count: 0
type: Question
downvote count: 3
has comment: http://stackoverflow.com/comment/139294640

http://stackoverflow.com/q/78990433
favorite count: 0
has answer: http://stackoverflow.com/a/78990469
has body: I am currently working on a country flag slider with around 14 different country flags. My desired animation is that there is a container/card showing only 3 countries on the card, where it slides after 2 seconds: Country on the left moves out of the container Country on the middle moves to the left Country on the right goes to the middle and scales a little bit (so it pops a bit more out) while moving to it. And a new country moves to the right side. The issue I'm encountering is that I can't figure out how to center the middle image into the middle of the card, since the way I've implemented it is that there are 14 images and when I use justify-content: center; the Philippines shows on the card in the middle which is normal but not the desired outcome. What I have tried so far: Using pixels and calculate the amount it has to move but this doesn't make it responsive and I would like it to be responsive. Justify-content: center; on the div What currently happens: [Click] Desired animation: [Click] This is my first Stackoverflow post and I hope I explained everything clearly, if not please feel free to give feedback on how I can improve my post. Code: const slider = document.querySelector('.flag-slider'); const flags = document.querySelectorAll('.flag'); let currentIndex = 2; // Middle flag function updateFlags() { flags.forEach((flag, index) => { flag.classList.remove('active'); if (index === currentIndex - 1) { flag.classList.add('active'); } }); } function slideFlags() { // Slide to the left slider.style.transform = `translateX(-${(currentIndex - 1) * (75 / 3)}%)`; currentIndex++; if (currentIndex > flags.length) { console.log('reset'); currentIndex = 2; slider.style.transform = `translateX(0%)`; } updateFlags(); } // Initial flag setup updateFlags(); // Auto-slide every 2 seconds setInterval(slideFlags, 2000); * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; background-color: #f0f0f0; } .countries { display: flex; flex-d…
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139275304
type: Question
downvote count: 0
answer count: 1
type: AnsweredQuestion
score: 3
tagged with: javascript
has comment: http://stackoverflow.com/comment/139275666
tagged with: css
accepted answer: http://stackoverflow.com/a/78990469
has title: How to center items in carousel slider?
upvote count: 3

http://stackoverflow.com/comment/139157801
type: Comment
score: 0
type: QuestionComment
has text: Okay so under the hood this is power automate desktop with an html element action, but afaik the syntax is CSS3. so cannot do javascript. Not to bash anyone I just thought these tags would get responses from people with more experience in selectors
comment on: http://stackoverflow.com/q/78926526

http://stackoverflow.com/comment/139153259
comment on: http://stackoverflow.com/a/78921469
score: 0
type: Comment
has text: What if I don't want to connect the Azure AD account to an Identity account? Our staff just needs the ability to manage those Identity users. Like change email addresses for example. But the staff wouldn't actually have an Identity account.
type: AnswerComment

http://stackoverflow.com/a/79069319
answers question: http://stackoverflow.com/q/79067744
type: Answer
score: 0
has body: Why don't you use cubic-bezier()? div { background: red; width: 100px; aspect-ratio: 1/1; } @keyframes fade-out-50-in-70 { 0% { opacity: 1; } 50% { opacity: 0; } 70% { opacity: 1; } 100% { opacity: 1; } } .animate-fade-out-in { animation-name: fade-out-50-in-70; animation-timing-function: cubic-bezier(0, 0.5, 0.35, 1); animation-duration: 2s; animation-iteration-count: infinite; } @keyframes fade-out-in { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } .animate-fade-out-in-2 { animation-name: fade-out-in; animation-timing-function: cubic-bezier(0, 0.5, 0.35, 1); animation-duration: 2s; animation-iteration-count: infinite; } &lt;div class="animate-fade-out-in"&gt;&lt;/div&gt;

http://stackoverflow.com/comment/139307033
score: 0
has text: Bad rendering with font-awesome ... ?
type: QuestionComment
comment on: http://stackoverflow.com/q/79007606
type: Comment

http://stackoverflow.com/comment/139204809
type: Comment
score: 0
has text: +1 because "`p` tag is also using a default colour" was a helpful correction, but an important part of the question is: "which 'respects' the `color-scheme` of the nearest ancestor which has it specified" and IIUC this answer doesn't do that. E.g. if you visit this with your device in dark mode: https://jsbin.com/wevamudovu/edit?html,output The `color:inherit` will cause the color in the textarea to be incorrect. It "climbs past" the ancestor with `color-scheme:light` since that obviously doesn't set an explicit `color` value, even though it does implicitly change child textarea colors.
type: AnswerComment
comment on: http://stackoverflow.com/a/78948809

http://stackoverflow.com/comment/139180507
comment on: http://stackoverflow.com/q/78938680
has text: What that means "Want search bar drop down vertical" ?. Its already vertical, attach some screenshot or something.
type: Comment
score: 0
type: QuestionComment

http://stackoverflow.com/q/79064359
duplicate of: http://stackoverflow.com/q/19026884
type: UnansweredQuestion
score: -2
has comment: http://stackoverflow.com/comment/139411174
upvote count: 0
has comment: http://stackoverflow.com/comment/139410674
duplicate of: http://stackoverflow.com/q/114543
favorite count: 0
downvote count: 2
type: Question
tagged with: http://stackoverflow.com/tag/html
has body: I'm trying to wrap my title at the top of my webpage with a border. But, whenever I do, the text and the border around it shift all the way to the left of the webpage. I'm trying to do this with an h1 element. I also don't want to just put a margin value to center it because it then will not scale with different webpage sizes. #title { color: rgb(226, 35, 35); display: inline; } .borderedTitle { border: 2px solid black; display: inline-block; border-radius: 10px; padding: 10px; } .lato-bold { font-family: "Lato", sans-serif; font-weight: 700; font-style: normal; } Title I've tried different things like text-align: center, align-content: center, etc.
linked to: http://stackoverflow.com/q/114543
has answer: http://stackoverflow.com/a/79064432
has title: How to center a bordered h1 element at the top of a webpage?
has answer: http://stackoverflow.com/a/79064366
answer count: 2
tagged with: css
duplicate of: http://stackoverflow.com/q/4980525

http://stackoverflow.com/comment/139411174
type: Comment
score: 0
comment on: http://stackoverflow.com/q/79064359
type: QuestionComment
has text: @tacoshy Invalid HTML is never a side note.

http://stackoverflow.com/q/78929847
type: UnansweredQuestion
favorite count: 0
upvote count: 1
has answer: http://stackoverflow.com/a/78930053
has title: How to trigger multiple animations when the user clicks on the (link)
tagged with: http://stackoverflow.com/tag/html
type: Question
tagged with: animation
has answer: http://stackoverflow.com/a/78929978
has comment: http://stackoverflow.com/comment/139164156
has comment: http://stackoverflow.com/comment/139165668
has comment: http://stackoverflow.com/comment/139164174
tagged with: javascript
answer count: 2
score: -1
downvote count: 2
has comment: http://stackoverflow.com/comment/139164225
tagged with: css
has body: I have this Html code and I want all the animations to be played after clicking on the link : document.querySelector('.play').addEventListener('click', function() { document.querySelector('.trans-up').style.animationPlayState = 'running'; document.querySelector('.trans-mid').style.animationPlayState = 'running'; document.querySelector('.trans-down').style.animationPlayState = 'running'; }); .trans-up { animation: trans-up-anim 1.8s forwards; } .trans-down { animation: trans-dow -anim 1.5s forwards; } .trans-mid { animation: trans-down-anim 1.3s forwards; } @keyframes trans-up-anim { 0% { top: -100% } } @keyframes trans-down-anim { 0% { bottom: -100% } } &lt;a class="play"&gt;click on me&lt;\a&gt; &lt;div class="trans-up"&gt;&lt;/div&gt; &lt;div class="trans-mid"&gt;&lt;/div&gt; &lt;div class="trans-down"&gt;&lt;/div&gt;

http://stackoverflow.com/comment/139322733
comment on: http://stackoverflow.com/q/79015820
type: Comment
score: 0
has text: Try to add `min-height:0` and set `flex-direction:column` and you can see that the `flex-grow` transition works perfectly. [jsFiddle](https://jsfiddle.net/c4qs7bxp/)
type: QuestionComment

http://stackoverflow.com/comment/139136615
comment on: http://stackoverflow.com/a/78915363
score: 1
has text: Justify self is ignored on flex items.
type: Comment
type: AnswerComment

http://stackoverflow.com/a/79051990
has comment: http://stackoverflow.com/comment/139393892
has comment: http://stackoverflow.com/comment/139400992
downvote count: 0
has comment: http://stackoverflow.com/comment/139392583
has comment: http://stackoverflow.com/comment/139393980
answers question: http://stackoverflow.com/q/79044610
accepted answer of: http://stackoverflow.com/q/79044610
type: AcceptedAnswer
has body: You probably got it all figured out with all the answers, but I have two points. First of all, you can use both the next-sibling combinator and the subsequent-sibling combinator to show/hide the text elements. Second, I like "constructing" SVGs, so I replaced your path elements with circle elements. If you have the data it is easy to calculate the length and rotation of the circle slices. Only drawback is that you need to mask off the spaces between the slices (here, just some line elements that are rotated). Update I misunderstood the dim/no dim requirement, so here is an update. It concerns the following two selectors that both use the :has() pseudo-class. If the .background has a subsequent sibling .slice that is hovered, all subsequent siblings should dim. A more specific selector says, that if the subsequent sibling is hovered is should stay bright. .background:has(~.slice:hover)~.slice { filter: brightness(80%); } .background:has(~.slice:hover)~.slice:hover { filter: brightness(100%); } * { margin: 0px 0px 0px 0px; /* Top Right Bottom Left */ padding: 0px 0px 0px 0px; /* Top Right Bottom Left */ border: 0px solid #00FF00; box-sizing: border-box; } body { background-color: #002233; color: #FFC355; font-family: "Helvetica", "Arial", sans-serif; font-size: 16px; overflow-y: scroll; } .slice { filter: brightness(100%); } .background:has(~.slice:hover)~.slice { filter: brightness(80%); } .background:has(~.slice:hover)~.slice:hover { filter: brightness(100%); } .slice+g { filter: opacity(0%); } .slice:hover+g { filter: opacity(100%); } .slice:hover~g.total { filter: opacity(0%); } <g transform="translate(250 250)"> <circle class="background" r="250" fill="black" /> <circle class="slice" r="190" transform="rotate(-90)" fill="none" stroke="#d35400" stroke-width="100" stroke-dasharray="311 1000" pathLength="1000" /> <g> 8.21 KH/s 31.1% </g> <circle class="slice" r="190" transform="rotate(-90)" fill="none" stroke="#aa2200" stroke-width="100" stroke-dasharray="246 1000" …
has comment: http://stackoverflow.com/comment/139393866
score: 2
upvote count: 2
type: Answer

http://stackoverflow.com/comment/139203059
comment on: http://stackoverflow.com/q/78948236
type: QuestionComment
has text: Have you tried clamp? `max-width: clamp(300px, 50%, 600px)` This will make sure the container is never smaller than 300px, never larger than 600px, and will otherwise scale flexibly with 50% width.
type: Comment
score: 0

http://stackoverflow.com/q/79049135
tagged with: python
has title: Beautiful soup indeed scrape
tagged with: web-scraping
has body: Im trying to scrape data from the indeed website and wanted to first make a transform function that finds all the divs that have this section and return the length: My code keeps returning zero and I can't quite understand why. import requests from bs4 import BeautifulSoup def extract(page): headers = {'User_Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:130.0) Gecko/20100101 Firefox/130.0'} url = f'https://www.indeed.com/jobs?q=data+analyst&amp;start={page}' r = requests.get(url, headers) soup = BeautifulSoup(r.content, 'html.parser') return soup def transform(soup): divs = soup.find_all('div', class_ = 'cardOutline tapItem dd-privacy-allow') return len(divs) #extract everything from page one and stored in variable c = extract(0) #prints length of every instance the class_ argument shows up in the extracted data print(transform(c))
tagged with: css
tagged with: data-analysis
upvote count: 0
type: UnansweredQuestion
score: -2
downvote count: 2
has comment: http://stackoverflow.com/comment/139383647
favorite count: 0
has comment: http://stackoverflow.com/comment/139383431
tagged with: http://stackoverflow.com/tag/html
type: Question
answer count: 1
has answer: http://stackoverflow.com/a/79049375

http://stackoverflow.com/a/79064079
answers question: http://stackoverflow.com/q/79063149
has comment: http://stackoverflow.com/comment/139426485
accepted answer of: http://stackoverflow.com/q/79063149
type: AcceptedAnswer
type: Answer
has body: Your styled syntax was wrong, and the transition still works but you can not change width and background. When embedding css string inside a css string, you have to use ThemedCssFunction - css (Template literals) const Bar = styled.div&lt;{ selected: boolean }&gt;` width: 28px; height: 6px; cursor: pointer; border-radius: 8px; background-color: #ffffff66; transition: width 1s ease; ${({ selected }) =&gt; selected &amp;&amp; // THIS LINE css` width: 40px; background-color: #fff; `} `;
score: 0

http://stackoverflow.com/q/78956414
has answer: http://stackoverflow.com/a/78956442
tagged with: php
type: Question
tagged with: css
upvote count: 2
answer count: 1
score: 2
accepted answer: http://stackoverflow.com/a/78956442
type: AnsweredQuestion
has comment: http://stackoverflow.com/comment/139212382
linked to: http://stackoverflow.com/q/75734651
has body: A contact form forms part of a single-page website. It is situated at the bottom of the page. When the form is completed successfully by a user a 'success' message is generated and displayed immediately above the contact form. I wish to add CSS to the text of that message. Specifically, centering the text and changing the colour. The form is controlled by contact.php and submit.php. The actual text is contained in an 'echo' statement in submit.php. contact form code Part of submit.php // Send email // @mail($toEmail, $emailSubject, $htmlContent, $headers); // echo json_encode(['status' => 'success', 'message' => 'Thank you for your message. We will respond as soon as possible.']); if (mail($toEmail, $emailSubject, $htmlContent, $headers)) { echo json_encode(['status' => 'success', 'message' => 'THANK YOU FOR YOUR MESSAGE. WE WILL RESPOND AS SOON AS POSSIBLE.']); } else { echo json_encode(['status' => 'error', 'message' => 'Failed to send your message.']); } } ?> Any assistance would be much appreciated
favorite count: 0
has title: How to add CSS to text located in submit.php file
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139215095
downvote count: 0
has comment: http://stackoverflow.com/comment/139214985

http://stackoverflow.com/comment/139254707
comment on: http://stackoverflow.com/a/78978650
has text: Thank you so much for this solution! It worked like a charm.
type: Comment
score: 1
type: AnswerComment

http://stackoverflow.com/comment/139313448
type: QuestionComment
score: 2
type: Comment
has text: Make sure your folder name is actually `fontawsome`, not `fontawesome`.
comment on: http://stackoverflow.com/q/79011275

http://stackoverflow.com/comment/139418857
has text: Thanks for this very complete answer! I was not aware of this `::view-transition` element s added to the root , it explains everything :) Well, it(s indeed sad 'cause I can't easily solve my issue, but at least I know why now :D
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/79063106

http://stackoverflow.com/comment/139151788
type: AnswerComment
comment on: http://stackoverflow.com/a/78922499
has text: the plugin was updated today and is working normally.
type: Comment
score: 0

http://stackoverflow.com/comment/139399603
type: Comment
score: 0
type: AnswerComment
has text: @AdamD are you saying the CSS doesn’t work or just that the custom css system shows a couple of properties in red?
comment on: http://stackoverflow.com/a/79056061

http://stackoverflow.com/a/78985551
has comment: http://stackoverflow.com/comment/139266257
downvote count: 0
has body: I tried which look similar just add gradient. you can adjust box shadow. <Image className="w-full h-auto rounded-2xl border border-white" width={0} height={0} sizes="100vw" src="/image.jpg" alt="Image" /> Streaming // tailwind.config.ts import type { Config } from "tailwindcss" const config: Config = { content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", ], theme: { extend: { boxShadow: { card: "#BD00FF 0px 0px 20px 6px", // <--- adjust as need }, }, }, plugins: [], } export default config Output
score: 1
answers question: http://stackoverflow.com/q/78967491
upvote count: 1
accepted answer of: http://stackoverflow.com/q/78967491
type: AcceptedAnswer
type: Answer

http://stackoverflow.com/comment/139313665
type: QuestionComment
has text: Thanks for your reply @herrstrietzel. I need to use strokes (no fill at all) as you see in the example and the screenshot. I don't know if that's possible with SVG filters.
type: Comment
score: 0
comment on: http://stackoverflow.com/q/79000085

http://stackoverflow.com/comment/139174512
score: 0
type: QuestionComment
has text: I'm doubtful you can do this with tables, CSS-Grid would be optimal.
comment on: http://stackoverflow.com/q/78935678
type: Comment

http://stackoverflow.com/comment/139171002
score: 0
has text: HTML5 offers a modal system using the ` ` tag with the js [.showModal()](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal) method in which you can still use Boostrap CSS. Simpler and more reliable to use than B5's JS/CSS machinery. (and use CSS [::backdrop](https://developer.mozilla.org/en-US/docs/Web/CSS/::backdrop) )
type: QuestionComment
comment on: http://stackoverflow.com/q/78933676
type: Comment

http://stackoverflow.com/a/79060360
answers question: http://stackoverflow.com/q/79060298
score: 1
downvote count: 0
type: Answer
upvote count: 1
has body: You have to define the values like below, without using quotes. @property --border-top-style { syntax: "dotted|dashed|solid"; inherits: true; initial-value: solid; } @property --border-top-width { syntax: "&lt;length&gt;"; inherits: true; initial-value: 5px; } @property --border-top-color { syntax: "&lt;color&gt;"; inherits: true; initial-value: red; } body { border: var(--border-top-width) var(--border-top-style) var(--border-top-color); } some content

http://stackoverflow.com/comment/139370038
comment on: http://stackoverflow.com/q/79042214
has text: Please share the relevant parts of your code. Otherwise all we can do is guess.
type: Comment
type: QuestionComment
score: 1

js-scrollintoview
tags question: http://stackoverflow.com/q/78950411
tag name: js-scrollintoview
type: Tag

http://stackoverflow.com/comment/139194649
type: Comment
comment on: http://stackoverflow.com/q/78946419
score: 1
type: QuestionComment
has text: [Check out this article](https://css-tricks.com/switch-font-color-for-different-backgrounds-with-css/)

http://stackoverflow.com/a/78946893
score: 1
has body: There are multiple ways to achieve this functionality. But I have tried to use HTML, CSS, and JavaScript as simple as I could. I also have added Fontawesome CDN to make it simple instead of using CSS properties to make a hamburger and times icon. I also added main body content to check if it works perfect. You can keep your current code and navbar style and adjust this code into it to make it perfectly functional. Here is the updated code: document.addEventListener("DOMContentLoaded", function () { const menuIcon = document.querySelector(".menu-icon"); const hamburger = document.getElementById("hamburger"); const cross = document.getElementById("cross"); const navLinks = document.getElementById("nav-links"); menuIcon.addEventListener("click", function () { hamburger.style.display = hamburger.style.display === "none" ? "block" : "none"; cross.style.display = cross.style.display === "none" ? "block" : "none"; navLinks.classList.toggle("show"); }); }); body { margin: 0; padding: 0; } main { padding: 8px; } nav { background-color: #333; color: #fff; padding: 15px; } nav ul { list-style: none; display: flex; justify-content: center; } nav ul li { margin: 0 15px; } nav ul li a { color: #fff; text-decoration: none; font-size: 18px; } .menu-icon { display: none; cursor: pointer; position: relative; font-size: 24px; } @media (max-width: 768px) { nav ul { display: none; flex-direction: column; width: 100%; text-align: center; position: absolute; top: 52px; left: 0; background-color: #333; margin: 0; padding: 0; } nav ul.show { display: flex; } nav ul li { margin: 15px 0; } .menu-icon { display: block; } } Responsive Navbar <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" integrity="sha512-<hash>" crossorigin="anonymous" referrerpolicy="no-referrer" /> Home Destinations Book Now Main content Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus temporibus porro pariatur eum molestias, iure nisi assumenda qui…
type: Answer
downvote count: 0
answers question: http://stackoverflow.com/q/78946720
has comment: http://stackoverflow.com/comment/139195206
upvote count: 1

http://stackoverflow.com/comment/139208480
type: AnswerComment
has text: This answer could be improved by noting that that solution likely won't work for all user agents
comment on: http://stackoverflow.com/a/78953944
score: 2
type: Comment

opacity
type: Tag
tags question: http://stackoverflow.com/q/79049022
tags question: http://stackoverflow.com/q/78914830
tag name: opacity
tags question: http://stackoverflow.com/q/79122546
tags question: http://stackoverflow.com/q/79362013
tags question: http://stackoverflow.com/q/79430202
tags question: http://stackoverflow.com/q/79502109

http://stackoverflow.com/comment/139172698
type: QuestionComment
comment on: http://stackoverflow.com/q/78929068
type: Comment
score: 0
has text: Is there way to customise the streamlit File uploader using css

http://stackoverflow.com/q/78947221
answer count: 0
tagged with: reactjs
tagged with: javascript
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139198636
has title: Don’t see the next section of page after the fixed slider in NextJs
tagged with: next.js
tagged with: css
type: Question
has body: I have a NextJs component Slider which is responsible for the fact that when scrolling, the lower section "runs over" the upper section and overlaps it. Here is code: "use client" import { useEffect, useState } from 'react'; import UploadSlider from "./UploadSlider"; import RecommendedCandiates from './RecommendedCandiates'; import WorkWithAI from './WorkWithAI'; import UseSupport from './UseSupport'; import FreeVacancy from './FreeVacancy'; const sections = [ <UploadSlider key="upload-slider" />, <RecommendedCandiates key="recommended-candidates" />, <WorkWithAI key="work-with-ai" />, <UseSupport key="use-support" />, <FreeVacancy key="free-vacancy" /> ]; const Slider = () => { const [currentSection, setCurrentSection] = useState(0); const [hasStartedSliding, setHasStartedSliding] = useState(false); const startedSlidingHandler = (scrollPosition, triggerHeight) => { const sectionHeight = window.innerHeight; const newSection = Math.min( sections.length - 1, Math.floor((scrollPosition - triggerHeight / 2.3) / sectionHeight) ); if (newSection !== currentSection) { setCurrentSection(newSection); } } const handleScroll = () => { const scrollPosition = window.scrollY; const triggerHeight = document.getElementById('sliding-sections').offsetTop; if (scrollPosition >= triggerHeight && !hasStartedSliding) { setHasStartedSliding(true); } if (hasStartedSliding) { startedSlidingHandler(scrollPosition, triggerHeight); } }; useEffect(() => { window.addEventListener('scroll', handleScroll); return () => window.removeEventListener('scroll', handleScroll); }, [currentSection, hasStartedSliding]); return ( <> {sections[0]} {sections.slice(1).map((section, index) => ( = index + 1 ? 'translate-y-0' : 'translate-y-full' }`} > {section} ))} </> ); }; export default Slider; But the problem I have is that when I place another section under this component on the same page, it is not visible because the slider covers its content. As far as I understand, this is due to the fact that I define f…
has comment: http://stackoverflow.com/comment/139202833
score: 0
has comment: http://stackoverflow.com/comment/139203508
has comment: http://stackoverflow.com/comment/139211180
tagged with: http://stackoverflow.com/tag/html

http://stackoverflow.com/a/79054154
upvote count: 1
has body: This might be useful: Intersection Observer API MDN This API provides an efficient way to track visibility changes of elements relative to the viewport. You can try doing something like: // Target elements const span1 = document.querySelector('.message &gt; span'); const span2 = document.querySelector('.vh &gt; span'); // Fade-in observer for span1 (centered/sticky) const observer1 = new IntersectionObserver(function (entries) { entries.forEach(entry =&gt; { if (entry.intersectionRatio &gt; 0.5) { // If more than half of the span is visible span1.style.opacity = 1; } else { span1.style.opacity = 0; } }); }, observerOptions); // Fade-in observer for span2 (at the bottom) const observer2 = new IntersectionObserver(function (entries) { entries.forEach(entry =&gt; { if (entry.intersectionRatio &gt; 0.5) { // Same logic for span2 span2.style.opacity = 1; } else { span2.style.opacity = 0; } }); }, observerOptions); // Observe the target elements observer1.observe(span1); observer2.observe(span2); });
score: 1
downvote count: 0
type: Answer
answers question: http://stackoverflow.com/q/79054124

http://stackoverflow.com/comment/139241198
comment on: http://stackoverflow.com/q/78971720
has text: HTML email is a disaster, with little support for modern CSS — especially in Outlook. Have a look at CSS support charts for HTML email.
score: 2
type: Comment
type: QuestionComment

http://stackoverflow.com/q/78958406
type: UnansweredQuestion
favorite count: 0
type: Question
has body: I am using following scss: to have a row of buttons. Working good. However in case of focus the single buttons size increases by a few pixels and it looks like parent flex container .form-buttons does not adapt the height and outline is cut of at the bottom due to that. .form-buttons { display: flex; gap: 5px; align-items: flex-start; } .form-button { display: flex; gap: 5px; flex-wrap: nowrap; align-items:center; border-radius: 4px; min-height: 50px; padding: 0px 24px; font-size: 16px; line-height: 24px; font-family: $font-family; &amp;:focus ,&amp;:focus-within{ **outline: 2px solid $color-primary-link-default; outline-offset: 1px; } } I ve tried setting a min-height for form-buttons, and that fixes for specific cases the issue, however I do not know in advance for all cases necessary min-height
score: 0
has comment: http://stackoverflow.com/comment/139219239
tagged with: resize
upvote count: 1
tagged with: sass
answer count: 0
tagged with: css
has title: Flex Container cutting of item, which increases height on focus using outline
has comment: http://stackoverflow.com/comment/139217147
tagged with: flexbox
downvote count: 1

http://stackoverflow.com/comment/139373801
type: QuestionComment
comment on: http://stackoverflow.com/q/79043889
score: 2
type: Comment
has text: It might be helpful if you could show us the resultant HTML of just a line of the two types - one with and one without spans and any relevant CSS. I'm wondering for example what the change of space character is for?

http://stackoverflow.com/a/78983523
score: 0
answers question: http://stackoverflow.com/q/78980116
type: AcceptedAnswer
has body: I found the solution. In the end, I had to check the child leaves and take the first one in the group. When a leaf is empty, it means that the color won’t change due to the level not having a color in the object sent by the API. When it’s a group, it will have a color, so it can be applied. In the end, the code turned out like this. autoGroupColumnDef: { pinned: 'left', minWidth: 1000, headerName: lblColunaDescricao, // what i changed cellStyle: (cell) =&gt; { // check if the information displayed is the description // (the last child in my case) if (cell.node.field != "descricaoCIP") { // get any value from the group const nodeData = cell.node.allLeafChildren[0].data; // get the level const level = cell.node.level + 1; return { // get the color from the value backgroundColor: nodeData['color' + level] } } }, cellClassRules: { "cell-blue": function(params) { return params.node.field == "descricaoCIP" }, "total-cell-left-no-bg": function(params) { return params.node.field != "descricaoCIP" } } },
accepted answer of: http://stackoverflow.com/q/78980116
type: Answer

http://stackoverflow.com/q/79032804
linked to: http://stackoverflow.com/q/62349536
tagged with: sass
linked to: http://stackoverflow.com/q/78790381
tagged with: css
upvote count: 2
accepted answer: http://stackoverflow.com/a/79033371
has title: How to use an injected string as part of the path in a URL within CSS (in Angular)
tagged with: angular
has comment: http://stackoverflow.com/comment/139353392
has comment: http://stackoverflow.com/comment/139353041
favorite count: 0
has body: I have a library that allows you to inject a base-href value for your specific app so that the lib's assets (which you're hosting as an npm dependency in your app) can be accessed without a proxy. This works in most cases, except I can't figure out how to use that injected value in CSS to do this: $fonts: '#{&lt;injected base path here&gt;}/fonts'; @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 300; src: local('Roboto Light'), local('Roboto-Light'), url('#{$fonts}/roboto-v18-greek-ext_cyrillic-ext_latin-ext-300.woff2') format('woff2'), url('#{$fonts}/roboto-v18-greek-ext_cyrillic-ext_latin-ext-300.woff') format('woff'); } The problem is the URL needs to resolve at build time, so this code won't compile. 2 notes: I'm using Angular with injection tokens. In my case, in the scss file, I tried $fonts: '#{var(--asset-base-path)}/fonts'; and in the component.ts file, I tried: @HostBinding('style.--asset-base-path') assetBasePath = ''; constructor(@Inject(LIB_ASSET_BASE_PATH) path: string) { this.assetBasePath = path }
type: Question
has answer: http://stackoverflow.com/a/79033371
downvote count: 0
answer count: 1
type: AnsweredQuestion
score: 2

http://stackoverflow.com/comment/139287574
comment on: http://stackoverflow.com/a/78991981
type: Comment
has text: Thanks, it works. But how come height givent in percents doesn't work, only in vh?
score: 0
type: AnswerComment

http://stackoverflow.com/a/79065772
has body: The quotes I used were incorrect. I changed ” into &quot; , and now the button works and no error is displayed.
answers question: http://stackoverflow.com/q/79065331
score: 1
type: AcceptedAnswer
accepted answer of: http://stackoverflow.com/q/79065331
type: Answer
downvote count: 0
upvote count: 1

http://stackoverflow.com/comment/139360178
type: QuestionComment
has text: Stopping after a certain width can be done with CSS variables, but what do you want to happen to the color? Should it stick at the nearest color or should it go all the way to yellow?
type: Comment
score: 0
comment on: http://stackoverflow.com/q/79036823

http://stackoverflow.com/comment/139140265
score: 0
type: QuestionComment
has text: Yes, sure, when you serve it from your own system, then you are in control of the response headers. Just thought you wanted to explicitly use such a CDN.
comment on: http://stackoverflow.com/q/78917299
type: Comment

http://stackoverflow.com/comment/139208732
has text: This works perfectly. Thank you!
type: Comment
score: 0
comment on: http://stackoverflow.com/a/78948436
type: AnswerComment

http://stackoverflow.com/comment/139289731
type: AnswerComment
has text: Brilliant, it works perfectly! Thank you very much for the answer, I would never have figured it ou by myself!
comment on: http://stackoverflow.com/a/78997948
type: Comment
score: 0

http://stackoverflow.com/comment/139315744
type: AnswerComment
has text: @iorgu Concerning your suggestion about `vertical-align: 2px;`: `px` is an absolute unit – if there is a different `font-size` in that element, you'd have to adjust the px value, whereas `text-bottom`is always text-bottom...
comment on: http://stackoverflow.com/a/79011555
type: Comment
score: 0

http://stackoverflow.com/comment/139284825
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78986883
has text: Glad to get know it worked! now come on your question, u're right that Bootstrap documentation doesn't make it obvious. L'me explain you d-flex: It makes the parent div a flexbox container. Flexbox layouts enable you to control alignment, positioning, and spacing within the container. justify-content-center: This class centers the content horizontally inside the flex container (the div with d-flex). align-items-center: This class vertically centers the items inside the flex container. Works after removing align-items-center? because the d-flex justify-content-center combination

http://stackoverflow.com/q/78950245
has answer: http://stackoverflow.com/a/78950828
favorite count: 0
score: -2
has body: I'm trying to create an effect where I have 3 lines of text. The text in the middle signifies the "now". The text on the bottom signifies "yesterday" and text above signifies "tomorrow". The "effect" is that the text is on a drum that rotates to display the "now" while also allowing the viewer to see previous and upcoming text. Example (made in Photoshop): I think this is possible based on this example on Mozilla (click and drag on the X rotation). The problem is that whatever I try using rotation does that, it rotates the text, make the text smaller, larger or skews it (make it look like italics), instead of allowing me to change the "shape" of the text. Changing the shape is apparently possible based on the link I shared. However, I am not able to find out how to do that. This is my code. This doesn't work (it squashes it vertically, but there's no shortening of the top of the text): The transform property THIS These questions I've found on here only deal with drawing of shapes behind the text - not the text itself.
type: Question
linked to: http://stackoverflow.com/q/58593035
has answer: http://stackoverflow.com/a/78950336
tagged with: transform
type: AnsweredQuestion
possible better answer: http://stackoverflow.com/a/78950828
answer count: 2
duplicate of: http://stackoverflow.com/q/58593035
downvote count: 4
tagged with: css
accepted answer: http://stackoverflow.com/a/78950336
has title: Transform text with CSS into a trapezoid
upvote count: 2

http://stackoverflow.com/comment/139169273
comment on: http://stackoverflow.com/a/78932544
type: AnswerComment
has text: @TemaniAfif I guess I didn't phrase it correctly, should said value instead of initial-value. What I meant is a defined custom property should always have a value at the time you used it, no? When you define a custom property you define a value along with it.
type: Comment
score: 0

http://stackoverflow.com/comment/139221486
type: Comment
score: 0
has text: @Zach Jensz code of my row is: .row::after { content: ""; clear: both; display: table; } please help me why margin: 0px auto; prevent? I edit my question you can check now.
type: QuestionComment
comment on: http://stackoverflow.com/q/78961311

http://stackoverflow.com/a/78963058
downvote count: 0
has comment: http://stackoverflow.com/comment/139224966
has body: The reason the animation is not executed on the first click is because the CSS variable --x initially has no value. When you click the button for the first time, the variable is set for the first time. The animation will not play because there is no starting value for the transition. On the second and subsequent clicks, --x is already set and there is a starting value, so the transition works correctly. To ensure that the animation is executed on the first click, you can add a fallback option for the --x variable so that there is a starting value from which the transition is executed. Remove the unnecessary calc. It doesn't calculate anything. Set a fallback for the variable. For example, set 0 as a fallback. left: var(--x, 0); let elem = document.querySelector(".e") let but1 = document.querySelector(".but1") let but2 = document.querySelector(".but2") but1.addEventListener("click", () => { elem.style.setProperty("--x", `300px`) }) but2.addEventListener("click", () => { elem.style.setProperty("--x", `500px`) }) .e { top: 50px; left: var(--x, 0); width: 200px; height: 200px; position: absolute; background-color: black; transition: 2000ms ease-in-out; } 2 click me click me
type: Answer
answers question: http://stackoverflow.com/q/78962975
score: 3
upvote count: 3
has comment: http://stackoverflow.com/comment/139225279

http://stackoverflow.com/comment/139171730
type: Comment
type: AnswerComment
comment on: http://stackoverflow.com/a/78933450
has text: @NINE: thanks! to be honest: the current state of masks/clip-path implementations can be quite confusing and frustrating (especially in terms of responsiveness) - I think I've never achieved the desired result at the first shot (despite "shooting" for quite some time;)
score: 1

http://stackoverflow.com/a/78995154
type: Answer
answers question: http://stackoverflow.com/q/78995137
score: 0
accepted answer of: http://stackoverflow.com/q/78995137
has body: For clarity, what you're talking about are subdirectories, not subdomains. If you rename the file in your about subdirectory from abt.html to index.html, your web server should serve it when you visit example.com/about/. The MDN Web Docs has a Getting Started with HTML guide that explains more.
type: AcceptedAnswer

http://stackoverflow.com/comment/139116953
type: Comment
score: 0
type: QuestionComment
has text: the start using tailwind in your example. Nothing you posted so far indicates a tailwind relevance. Why should `overflow: hidden` not be responsive?
comment on: http://stackoverflow.com/q/78904335

http://stackoverflow.com/comment/139252738
comment on: http://stackoverflow.com/q/78978054
type: QuestionComment
type: Comment
has text: @tacoshy so wait you would use the `background-image` on the footer or what?
score: 0

http://stackoverflow.com/comment/139152442
comment on: http://stackoverflow.com/q/78923710
score: 1
type: Comment
has text: This might be https://techcommunity.microsoft.com/t5/windows-insider-program/wrong-fonts-in-multiple-browsers/m-p/3637533
type: QuestionComment

http://stackoverflow.com/comment/139281311
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78993739
type: Comment
has text: @RoyBogado Thank you for your answer, I checked your link, and the difference with my question is that I want to load the font locally outside of the project folder (it is specified in my question)

http://stackoverflow.com/q/78935425
tagged with: css
has body: I'm working on a section of a site where I have six boxes grouped together three on the top and three on the bottom, and I wanted to give them all a margin to separate them, but then I want the top ones to not have a margin-top so I did this: .boxess { display: flex; flex-flow: column; margin: 1rem; width: min-content; background-color: white; } .boxess #boxes_1 #boxes_2 #boxes_3{ margin-top: 0; } This did not override anything, and I don't think doing it box by box is the right answer either. I also tried just one id at a time to see if that was the issue like so: .boxess #boxes_1 { margin-top: 0; } Same result. I also tried just selecting the id; tried negative values; using !important; initial (inheritance) and nothing once again. I'm sure I've done something like this before, but maybe it was on paddings and those react differently when overridden? Am I approaching this the wrong way? Whole snippet here (added after due to suggestion): .learning_content { background-color: whitesmoke; align-content: center; display: flex; flex-flow: column; justify-content: center; align-items: center; } .learning_content h2 { text-align: center; padding: 2rem; } .boxes { display: flex; flex-flow: row wrap; padding: 0 4.5rem 2rem 4.5rem; max-width: 66rem; } .boxess { display: flex; flex-flow: column; margin: 1rem; width: min-content; background-color: white; } .boxess #boxes_1 { margin-top: 0; } .boxess img { height: auto; width: 20rem; } .boxess p { text-wrap: wrap; } &lt;div class="learning_content"&gt; &lt;h2&gt;It doesn't hurt to keep learning&lt;/h2&gt; &lt;div class="boxes"&gt; &lt;div class="boxess" id="boxes_1"&gt; &lt;img src="https://images.pexels.com/photos/346529/pexels-photo-346529.jpeg" alt="Mac computers with software programming" /&gt; &lt;h4&gt;Software engineering&lt;/h4&gt; &lt;p class="subtitle"&gt;COURSES&lt;/p&gt; &lt;p&gt;Web Development, Mobile Development, iOT, API's&lt;/p&gt; &lt;/div&gt; &lt;div class="boxess" id="boxes_2"&gt; &lt;img src="https://imag…
has comment: http://stackoverflow.com/comment/139174008
has title: How can I override the margin from a parent element on a child element in CSS (class and id)?
tagged with: margin
type: Question
answer count: 1
has answer: http://stackoverflow.com/a/78935589
type: AnsweredQuestion
accepted answer: http://stackoverflow.com/a/78935589
score: 0

http://stackoverflow.com/a/78914236
has body: I have managed to replicate your issue. When I used the same loading order of CSS as your original, for example, I cannot set the body background-color: var(--bs-body-bg) in index.css it always uses bootstrap.min.css background-color. This is because after preloading, you manually switch rel="preload" to rel="stylesheet" using JavaScript (onload event). At this point, the browser applies the styles from bootstrap.min.css (large CSS file) overriding index.css colors. When I changed the CSS loading order to preload bootstrap.min.css first and load the index.css after that. Then that will have the correct body background-color set to the one defined in index.css I believe CSS specificity is not involved in this behavior but only the order of the CSS loading. The resolution is to load the index.css after the preloaded CSS. I also noticed duplicate CSS for the body element in index.css there could be others.
type: Answer
answers question: http://stackoverflow.com/q/78912888
has comment: http://stackoverflow.com/comment/139138433
has comment: http://stackoverflow.com/comment/139136560
score: 0

http://stackoverflow.com/comment/139127726
type: Comment
comment on: http://stackoverflow.com/q/78905081
score: 0
has text: @SveinMathisen please replicate the issue on this [stackblitz](https://stackblitz.com/edit/stackblitz-starters-gxrbun) and update on the question for checking
type: QuestionComment

slider
type: Tag
tags question: http://stackoverflow.com/q/78937749
tag name: slider
tags question: http://stackoverflow.com/q/78932299
tags question: http://stackoverflow.com/q/79151953
tags question: http://stackoverflow.com/q/79163099
tags question: http://stackoverflow.com/q/79232439
tags question: http://stackoverflow.com/q/79267107
tags question: http://stackoverflow.com/q/79360370
tags question: http://stackoverflow.com/q/79257667
tags question: http://stackoverflow.com/q/79452013
tags question: http://stackoverflow.com/q/79536466
tags question: http://stackoverflow.com/q/79543425
tags question: http://stackoverflow.com/q/79465003

http://stackoverflow.com/a/78961438
has body: Because the last 0 of the css color:rgba(0, 0, 255, 0.0) mean "transparent". if you want to set font color to white you need to set CSS to color:rgba(255, 255, 255, 1.0)
type: AcceptedAnswer
type: Answer
answers question: http://stackoverflow.com/q/78961384
accepted answer of: http://stackoverflow.com/q/78961384
downvote count: 0
upvote count: 1
score: 1

fluentui-react
tags question: http://stackoverflow.com/q/79000488
type: Tag
tag name: fluentui-react
tags question: http://stackoverflow.com/q/79149799
tags question: http://stackoverflow.com/q/79286413

http://stackoverflow.com/comment/139219854
comment on: http://stackoverflow.com/a/78960222
type: Comment
has text: @Kirneh Share the CSS code with me, and I can help you review it to check for any potential issues
score: 0
type: AnswerComment

http://stackoverflow.com/q/78949090
tagged with: css
answer count: 0
tagged with: twitter-bootstrap
has body: I'm following the Bootstrap 5 customization docs and able to get a build working using "option A": include all of Bootstrap. However, almost nothing renders properly using "option B": pick the parts you need. I haven't added any customizations yet, just copy/pasted the 2 scss examples from the docs (code included below). Option A: // Custom.scss // Option A: Include all of Bootstrap // Include any default variable overrides here (though functions won't be available) @import "../node_modules/bootstrap/scss/bootstrap"; // Then add additional custom code here Here's a screenshot of my test page using this, where everything appears as expected: And here's option B: // Custom.scss // Option B: Include parts of Bootstrap // 1. Include functions first (so you can manipulate colors, SVGs, calc, etc) @import "../node_modules/bootstrap/scss/functions"; // 2. Include any default variable overrides here // 3. Include remainder of required Bootstrap stylesheets (including any separate color mode stylesheets) @import "../node_modules/bootstrap/scss/variables"; @import "../node_modules/bootstrap/scss/variables-dark"; // 4. Include any default map overrides here // 5. Include remainder of required parts @import "../node_modules/bootstrap/scss/maps"; @import "../node_modules/bootstrap/scss/mixins"; @import "../node_modules/bootstrap/scss/root"; // 6. Optionally include any other parts as needed @import "../node_modules/bootstrap/scss/utilities"; @import "../node_modules/bootstrap/scss/reboot"; @import "../node_modules/bootstrap/scss/type"; @import "../node_modules/bootstrap/scss/images"; @import "../node_modules/bootstrap/scss/containers"; @import "../node_modules/bootstrap/scss/grid"; @import "../node_modules/bootstrap/scss/helpers"; // 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss` @import "../node_modules/bootstrap/scss/utilities/api"; // 8. Add additional custom code here With a screenshot of the results: I'm building with…
type: UnansweredQuestion
has title: Bootstrap 5 scss build full import works but part by part import doesn't
type: Question
score: 0
tagged with: sass

http://stackoverflow.com/comment/139219686
type: AnswerComment
score: 1
comment on: http://stackoverflow.com/a/78960225
type: Comment
has text: This is the solution to your problem. Also, compared to your previous code, this code is more take up less space.

http://stackoverflow.com/q/79067108
has comment: http://stackoverflow.com/comment/139456115
has comment: http://stackoverflow.com/comment/139415792
upvote count: 1
tagged with: css
has answer: http://stackoverflow.com/a/79089955
has comment: http://stackoverflow.com/comment/139456124
has comment: http://stackoverflow.com/comment/139415825
type: UnansweredQuestion
score: 1
has title: Combination of `display: grid` And ` ` Breaks Overflow?
favorite count: 0
linked to: http://stackoverflow.com/q/43311943
type: Question
has comment: http://stackoverflow.com/comment/139415680
has body: I have a layout where I apply display: grid to the element. Inside this layout, I have a elements containing a wrapper with a long rectangle. I want the wrapper to have horizontal scrolling using overflow-x: scroll, which works fine without the grid layout. It also works fine without the element. However, when I have both, display: grid on the body and the element, the wrapper becomes as long as the rectangle. body { display: grid; } .wrapper { overflow-x: scroll; } .rect { width: 1000px; height: 20px; background: linear-gradient(to left, red, green); } Works similarly with a tag containing a very long line instead of the wrapper. Also for overflow: hidden instead of scroll. What could be the reason for this? EDIT I found out that grid-template-columns: minmax(0, 1fr) on the body removes this behaviour. But still curious, why is specifically triggering this?
downvote count: 0
answer count: 1

http://stackoverflow.com/a/78933330
score: 0
answers question: http://stackoverflow.com/q/78933187
has body: You can try this. With this structure, both the left and middle headers will remain sticky at the top, while allowing horizontal and vertical scrolling in the middle content area. The middle content area can scroll horizontally, and the headers will remain fixed in place, providing a stable view for the user. The key is to ensure that the table headers are in a container that is independent of the table body, which allows them to remain sticky. Side Header 1 Side Row 1 Middle Header 1 Middle Header 2 Middle Row 1 Col 1 Middle Row 1 Col 2 Side Header 1 Side Row 1 .container { display: flex; } .side-table-wrapper { flex: 0 0 auto; width: 150px; } .middle-table-wrapper { flex: 1; position: relative; } .middle-table-header { overflow: hidden; position: sticky; top: 0; z-index: 10; } .middle-table-body { overflow-x: auto; /* Enable horizontal scrolling */ overflow-y: auto; /* Enable vertical scrolling */ max-height: 400px; /* Adjust based on your needs */ } .middle-table th, .side-table th { position: sticky; top: 0; background-color: white; z-index: 2; }
type: Answer

http://stackoverflow.com/comment/139315908
type: Comment
score: 0
type: QuestionComment
has text: For password "USTAX2024" still error 400 "{"errors":{"password":"Invalid."},"error":"Form field errors."}"
comment on: http://stackoverflow.com/q/79012618

http://stackoverflow.com/comment/139132848
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78912015
has text: Maybe this could help https://codepen.io/tonkec/pen/zYVaqKW

http://stackoverflow.com/comment/139158293
has text: @VikasAcharya Note that `getComputedStyle` despite it's name doesn't compute anything on its own. The getters on the returned (live) CSSStyleDeclaration object will cause the computation. Depending on what property is gotten it may either cause a recalc of all the elements in the DOM (worst case, like `width` etc.), or just the ones above in the node tree (for inheriting properties), and might even cause no more calculations than just the one needed.
comment on: http://stackoverflow.com/a/78926787
type: Comment
score: 0
type: AnswerComment

http://stackoverflow.com/comment/139324456
has text: Will this play nicely with a elements in the core of the document?
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/79017211

http://stackoverflow.com/comment/139361996
comment on: http://stackoverflow.com/q/79021330
type: Comment
has text: @A Haworth So are you essentially suggesting that it is not theoretically possible to disguise the video player as audio player since the controls won't work without a real click? BTW, for those who are wondering why I want to do this it is because the big streaming service providers (who provide DRM protection like VDOCipher or Bunny.net Stream) only stream via a native video player but I need to stream audio, not video. They allow you to upload audio but it is displayed like a video. So my only option is to make the video player look like an audio player.. I hope this makes sense.
score: 0
type: QuestionComment

http://stackoverflow.com/comment/139353015
comment on: http://stackoverflow.com/q/79032875
type: Comment
has text: As isherwood said, seeing a runnable snippet goes a long way to understanding what you’re asking. If I’m inferring correctly, though, you’re asking about a breakout layout. There are lots of resources online for how to create those, including [SmolCSS](https://smolcss.dev/#smol-breakout-grid), [Kevin Powell](https://www.youtube.com/watch?v=c13gpBrnGEw), [Andy Bell](https://piccalil.li/blog/building-a-breakout-element-with-container-units/), and [me](https://noahliebman.net/2024/05/yet-another-take-on-layout-breakouts/).
type: QuestionComment
score: 1

http://stackoverflow.com/comment/139377383
comment on: http://stackoverflow.com/q/79045866
score: 0
has text: @VincentDecaux - No, but the browser does - You can clearly see the color switching from white to black if you turn on the computed styles even when the doc states that using `only` forbids this
type: QuestionComment
type: Comment

http://stackoverflow.com/comment/139147701
has text: This isn't quite what I am looking for, I want the cards to span the full width of the container but be shorter, not their max height
type: Comment
comment on: http://stackoverflow.com/a/78920641
score: 0
type: AnswerComment

http://stackoverflow.com/comment/139347855
comment on: http://stackoverflow.com/q/79029787
type: Comment
score: 0
type: QuestionComment
has text: Could you please share the configuration of the `webpack.config.js ` file, this helps us in understanding this issue.

layout
tags question: http://stackoverflow.com/q/78996939
tags question: http://stackoverflow.com/q/78954702
tags question: http://stackoverflow.com/q/78929748
tag name: layout
tags question: http://stackoverflow.com/q/78936697
tags question: http://stackoverflow.com/q/79058041
type: Tag
tags question: http://stackoverflow.com/q/79244319
tags question: http://stackoverflow.com/q/79105574
tags question: http://stackoverflow.com/q/79196073
tags question: http://stackoverflow.com/q/79177543
tags question: http://stackoverflow.com/q/79087062
tags question: http://stackoverflow.com/q/79084207
tags question: http://stackoverflow.com/q/79236459
tags question: http://stackoverflow.com/q/79159987
tags question: http://stackoverflow.com/q/79184833
tags question: http://stackoverflow.com/q/79254543
tags question: http://stackoverflow.com/q/79297422
tags question: http://stackoverflow.com/q/79355708
tags question: http://stackoverflow.com/q/79327976
tags question: http://stackoverflow.com/q/79310859
tags question: http://stackoverflow.com/q/79326719
tags question: http://stackoverflow.com/q/79503425
tags question: http://stackoverflow.com/q/79428171
tags question: http://stackoverflow.com/q/79521268
tags question: http://stackoverflow.com/q/79432855
tags question: http://stackoverflow.com/q/79447471
tags question: http://stackoverflow.com/q/79452494
tags question: http://stackoverflow.com/q/79544666
tags question: http://stackoverflow.com/q/79429125
tags question: http://stackoverflow.com/q/79521235
tags question: http://stackoverflow.com/q/79469370
tags question: http://stackoverflow.com/q/79460307
tags question: http://stackoverflow.com/q/79490604

http://stackoverflow.com/comment/139332420
type: QuestionComment
has text: You could get rid of all the extra divs, the `grid`property and simply use `float: left;` on the image as it was designed exactly for that.
score: 1
type: Comment
comment on: http://stackoverflow.com/q/79021574

expo
tags question: http://stackoverflow.com/q/79048394
tag name: expo
tags question: http://stackoverflow.com/q/78915642
type: Tag

http://stackoverflow.com/q/78993090
tagged with: slideshow
score: 0
tagged with: carousel
answer count: 0
tagged with: css
has title: Bootstrap carousel box-shadow doubling during slide transition
type: UnansweredQuestion
tagged with: css-transitions
has body: I have a bootstrap carousel in which the bootstrap "row" for each slide has a box-shadow applied. When the slide is transitioning the second slide shadow appears and doubles on top of each other (making the shadow look darker). I've tried to figure out how to apply it to a parent container so it won't show on each slide thus doubling up but have had no luck. .row { padding:70px !important; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 14px 40px 0 rgba(0, 0, 0, 0.15); } screenshot Thank you for any help. " I've been interested in coding for a while but never taken the jump, until now. I couldn't recommend this course enough. I'm now in the job of my dreams and so excited about the future. " Tanya Sinclair UX Engineer " If you want to lay the best foundation possible I'd recommend taking this course. The depth the instructors go into is incredible. I now feel so confident about starting up as a professional developer. " John Tarkpor Junior Front-end Developer I've tried applying the shadow to a div outside of the carousel itself so it won't double but have had no luck.
type: Question

http://stackoverflow.com/q/78955166
has title: Separate Overflow X scroll on 2 child components
tagged with: overflow
answer count: 0
has body: What I want is for 2 components to have their own separate overflow-X scrolling, rather than scrolling the entire container together. I have tried everything and this prop is just enraging me at this point. This is a React component, so the #root acts as the body. body { font-family: 'Montserrat', sans-serif; margin: 0; position: relative; } #root { display: flex; flex-direction: column; min-height: 100vh; position: absolute; right: 0; left: 0; bottom: 0; top: 0; background: linear-gradient(to bottom, #f1f1f1, #eae6e1); } #main { flex: 1; display: flex; flex-direction: column; overflow: auto; max-height: 100vh; position: relative; } The #main is the root layout, whereby there is a navbar above it and nothing else. I have tried removing overflow auto from the main, but this causes the navbar to disappear on zoom. Where as this layout works perfectly on the other 4 routes I have made, it is failing on the most basic component I have. export default function HomePage() { return ( <Photos /> <Banner /> ); } The section is purely optional, I added it because I thought maybe wrapping an extra layer around the 2 components might help. But I can get rid of it. .banner { display: flex; justify-content: space-between; button { width: 100px; border-color: transparent; background-color: transparent;; font-size: 4rem; svg { color: #414345; } } > div { height: 200px; width: 466px; display: flex; align-items: center; justify-content: center; border-radius: 3px; color: #ffffff; background: linear-gradient(to right, #232526, #414345); } } clickHandler(-1)}> <FontAwesomeIcon icon='chevron-left' /> <motion.div> // placeholder for content </motion.div> clickHandler(1)}> <FontAwesomeIcon icon='chevron-right' /> .container { display: flex; flex-direction: column; align-items: center; h1 { margin: 0; text-wrap: nowrap; text-align: center; } .row { display: flex; align-items: center; gap: 1rem; img { width: 225px; border-radius: 5px; } } } Title I've ran out of things to say. I have tried …
tagged with: css
type: UnansweredQuestion
type: Question
tagged with: scroll
score: 0

http://stackoverflow.com/q/79063993
tagged with: css
tagged with: angular
tagged with: bootstrap-5
has title: Change overflow-visible for overflow-auto if the size of the element is bigger than the viewport
tagged with: ng-bootstrap
favorite count: 0
type: Question
has body: I have an Angular component that opens another component as an offcanvas: openTop() { this.offcanvasService.open(AdvancedSearchComponent, { position: 'top', backdropClass: 'bg-dark', panelClass: 'h-25 bg-danger text-bg-danger flex-column', keyboard: true, }); } Then in that offcanvas component I have something like this: ... And some of the css that might be relevant is: :host { height: 100%; display: flex; flex-direction: column; } form { scrollbar-gutter: stable; } If I add overflow-auto to the element, the height of the top offcanvas is 25vh and there's a scroll bar when the content doesn't fit vertically. If I add overflow-visible to the top element, or no overflow class at all, then the offcanvas panel expands when the content doesn't fit vertically. The offcanvas panel itself has some buttons with data-bs-toggle="collapse" that can make the content grow and overflow the screen. The problem is that if the content overflows the screen there's no scrollbar, as I have overflow-visible. What I need is to have overflow-visible when the offcanvas panel occupies 25%-100% of the viewport, but overflow-auto when the content is larger than 100% of the viewport. What I want to achieve is to have the top offcanvas panel adjust in size to the content, but when the content overflows the size of the screen to have a scrollbar to be able to see the entire content. Things I have tried: Some SO questions/answers have suggested that the problem might be having body {overflow: hidden}. This is indeed the case in my app, at least when I inspect the elements on my offcanvas. However, removing that style from the body has only added a scrollbar that scrolls the "background" content, not the offcanvas content. I have tried adding additional elements with different classes. I have tried using max-height and height on css, or the correspoding bootstrap classes on my element, but I couldn't achieve what I wanted. Some solutions suggest using padding in order to solve this type of problem…
has comment: http://stackoverflow.com/comment/139417633
answer count: 1
accepted answer: http://stackoverflow.com/a/79075550
upvote count: 0
type: AnsweredQuestion
downvote count: 1
has answer: http://stackoverflow.com/a/79075550
score: -1

http://stackoverflow.com/comment/139315146
type: QuestionComment
type: Comment
score: 0
has text: A couple of tips: use your browser devtools inspect facility to find where that pseudo element is (as it’s positioned absolute, what is that relative to?) and note that double colons are used in CSS now to distinguish pseudo elements from pseudo classes.
comment on: http://stackoverflow.com/q/79011645

http://stackoverflow.com/a/78947045
has body: Similar to your expectations I came across this hover animation, hope if it could help !! Menu Item Menu Item Menu Item Menu Item Menu Item Menu Item <path id="blob-path" d="M60,500H0V0h60c0,0,20,172,20,250S60,900,60,500z"/> The CSS file body, html { margin: 0; padding: 0; width: 100%; height: 100%; background-color:#26394E ; } #menu { height: 100%; position: fixed; background-color: #FED057; width: 300px; transition: 1000ms all cubic-bezier(0.19, 1, 0.22, 1); transform: translateX(-100%); left: 60px; } #menu.expanded { transform: translateX(0%); left: 0px; } .menu-inner { width: 100%; height: 100%; position: relative; } #blob { top: 0; z-index: -1; right: 60px; transform: translateX(100%); height: 100%; position: absolute; } #blob-path { height: 100%; fill: #FED057; } .hamburger { right: 20px; position: absolute; width: 20px; height: 20px; margin-top: -10px; } .hamburger .line { width: 100%; height: 4px; background-color: #fff; position: absolute; } .hamburger .line:nth-child(2) { top: 50%; margin-top: -2px; } .hamburger .line:nth-child(3) { bottom: 0; } h1 { position: fixed; right: 0; margin: 0; } ul { padding: 0; list-style: none; width: 80%; margin-left: 10%; position: absolute; top: 10px; } ul li { color: #fff; font-family: sans-serif; padding: 20px 0; } h2 { position: absolute; left: 50%; color: #fff; margin: 0; font-size: 16px; font-family: sans-serif; font-weight: 100; } The JS File $(window).load(function(){ var height = window.innerHeight, x= 0, y= height/2, curveX = 10, curveY = 0, targetX = 0, xitteration = 0, yitteration = 0, menuExpanded = false; blob = $('#blob'), blobPath = $('#blob-path'), hamburger = $('.hamburger'); $(this).on('mousemove', function(e){ x = e.pageX; y = e.pageY; }); $('.hamburger, .menu-inner').on('mouseenter', function(){ $(this).parent().addClass('expanded'); menuExpanded = true; }); $('.menu-inner').on('mouseleave', function(){ menuExpanded = false; $(this).parent().removeClass('expanded'); }); function easeOutExpo(currentIterat…
upvote count: 1
answers question: http://stackoverflow.com/q/78946720
score: 1
type: Answer
downvote count: 0

http://stackoverflow.com/a/79054707
answers question: http://stackoverflow.com/q/79054198
type: Answer
score: 0
has body: Thank you Paulie_D for showing me how. If anyone else needs this I have made it responsive to drop down to two columns then one. .five_item_grid { display: grid; grid-template-columns: repeat(6, minmax(135px, 1fr)); gap: 1em; } @media (max-width: 950px) { .five_item_grid { grid-template-columns: repeat( 4, minmax(135px, 1fr) ); /* 4 columns on smaller screens */ } .five_item:nth-child(4) { grid-column: 3 / span 2 !important; /* Adjust 4th item to span 1 column */ } .five_item:nth-child(5) { grid-column: 2 / span 2; /* Adjust 5th item to span 2 columns */ } } @media (max-width: 650px) { .five_item_grid { display: grid; grid-auto-flow: row !important; grid-template-rows: 1fr !important; grid-template-columns: none; } .five_item { outline: 1px solid red; grid-column: span 1 !important; /* Default for all items */ } .five_item:nth-child(4) { grid-column: span 1 !important; } } .five_item { grid-column: span 2; /* Default for all items */ } /* Specific rule for 4th item on larger screens */ .five_item:nth-child(4) { grid-column: 2 / span 2; }

http://stackoverflow.com/comment/139414303
type: Comment
score: 0
has text: The codepen should have a third image with the id "masked", which is not visible in the rendered result, because it is fully masked by the lottie-animation. That is the problem. If I try to create a runnable snipped the lottie animation doesn't work at all, so I think snippets do not cover that functionality.
comment on: http://stackoverflow.com/q/79066138
type: QuestionComment

http://stackoverflow.com/comment/139297990
type: QuestionComment
has text: _"This is the code adding content to the website"_ - adding it _where_, and _how_?
score: 1
type: Comment
comment on: http://stackoverflow.com/q/79002715

http://stackoverflow.com/q/78991256
type: Question
has comment: http://stackoverflow.com/comment/139276827
has body: First, look at this: at this SandBox: Also, here's my code import { useState } from "react"; import "./styles.css"; export default function App() { const [change, setChange] = useState(false); return ( { setChange(!change); }} > 15 ); } I'm coding in react, and I was creating a seat-picker. Everytime I click on the seat, it changes its background color. Until there, everything fine, but when the background color changes, the text seems to move up. I put my finger on the screen and I could verify, text is really moving on the screen. What I don't get, is why when changing the background color, suddenly, the text inside the p, moves? Is it some sort of optical illusion? If it's, is there any workaround I could do? Anything else I could try? I tried changing colors, and when the colors are close to each other, the text doesn't seem to move. But I wanted to freely use any color I want and not be affected by this possible illusion;
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139279947
has comment: http://stackoverflow.com/comment/139276839
has comment: http://stackoverflow.com/comment/139276986
tagged with: reactjs
score: 0
answer count: 0
has comment: http://stackoverflow.com/comment/139284040
tagged with: css
has comment: http://stackoverflow.com/comment/139284017
has title: When changing the background color of a div, the element inside it moves up
type: UnansweredQuestion

http://stackoverflow.com/a/79022254
accepted answer of: http://stackoverflow.com/q/79022190
upvote count: 2
has body: You could using some version of :has and iterating up the DOM but it would be incredibly brittle. .week { outline: 1px solid grey; margin-bottom: .25em; } .month .week .today { background: lightgreen; } .month:has(.today)~.month .week .disabled { background: lightblue; } Day 1 Day 2 Day 3 Day 4 Day 5 Day 6 Day 7 Day 8 Day 9 Day 10 Day 11 Day 12 Day 13 Day 14
type: AcceptedAnswer
type: Answer
score: 2
downvote count: 0
answers question: http://stackoverflow.com/q/79022190

http://stackoverflow.com/comment/139151136
type: AnswerComment
comment on: http://stackoverflow.com/a/78922935
type: Comment
has text: found a solution that works, but I don't know if it is the "best" solution. I removed "position:absolute" and added "scrolling='no'". Then I changed % to vw for width and height.
score: 0

http://stackoverflow.com/comment/139375629
type: AnswerComment
has text: thanks for your response, can you explain what changes you made...it is difficult to understand
type: Comment
comment on: http://stackoverflow.com/a/79037204
score: 0

http://stackoverflow.com/comment/139406566
type: AnswerComment
has text: it appear on build version..
comment on: http://stackoverflow.com/a/79050502
type: Comment
score: 0

http://stackoverflow.com/comment/139194108
comment on: http://stackoverflow.com/q/78944847
type: Comment
has text: https://css-generators.com/custom-corners/#4 (select 180deg and the corners you want)
type: QuestionComment
score: 1

http://stackoverflow.com/q/79066659
type: UnansweredQuestion
favorite count: 0
has body: I try to draw border-radius on certain rows. The structure is as follow: row with border-top-radius normal row with some tds normal row with some tds normal row with some tds row with border-bottom-radius This block repeated with arbitrary number of normal row with some tds The table should be border-collapse: collapse; I try to play with but border lines are discontinued left border; Cell 1 and 5 right border; Cell 4 and 8 How to fix this? table { border-collapse: collapse; } td { border: 2px solid black; padding: 10px; height: 50px; width: 100px; } .footer > td:first-child { border-left: none; border-bottom: none; padding: 0; } .footer > td:last-child { border-right: none; border-bottom: none; padding: 0; } .footer > td:first-child > div { height: 100%; width: 100%; border-left: 2px solid black; border-bottom: 2px solid black; border-bottom-left-radius: 10px; } .footer > td:last-child > div { height: 100%; width: 100%; border-right: 2px solid black; border-bottom: 2px solid black; border-bottom-right-radius: 10px; } Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6 Cell 7 Cell 8 EDIT By "This block repeated with arbitrary number of normal row with some tds ", I mean there are multiple blocks like that block. The difference between each block is the number of normal inside that block. Something like this table { border-collapse: collapse; } th { border: 2px solid black; } td { border: 2px solid black; padding: 5px; height: 30px; width: 100px; } .spacer > td { border: none; height: 10px; } .header > td:first-child { border-left: none; border-top: none; padding: 0; } .header > td:last-child { border-right: none; border-top: none; padding: 0; } .header > td:first-child > div { height: 100%; width: 100%; border-left: 2px solid black; border-top: 2px solid black; border-top-left-radius: 10px; } .header > td:last-child > div { height: 100%; width: 100%; border-right: 2px solid black; border-top: 2px solid black; border-top-right-radius: 10px; } .footer > td:first-child { border-…
type: Question
tagged with: http://stackoverflow.com/tag/html
score: 2
downvote count: 0
tagged with: html-table
has answer: http://stackoverflow.com/a/79067172
has title: Discontinued border
answer count: 2
tagged with: css
has answer: http://stackoverflow.com/a/79067033
upvote count: 2

http://stackoverflow.com/q/79009313
favorite count: 0
has title: Delete button not aligned when displaying input errors
tagged with: http://stackoverflow.com/tag/html
type: Question
score: -3
has body: I'm using self-end to align the delete button (trash can) horizontally with the inputs. But there's a problem: when the error messages display, the delete button is misaligned again. How would you solve this issue? I want the delete button to always be aligned with the inputs. https://play.tailwindcss.com/G6V57WhEOY
answer count: 1
tagged with: tailwind-css
has answer: http://stackoverflow.com/a/79009326
upvote count: 0
type: AnsweredQuestion
accepted answer: http://stackoverflow.com/a/79009326
tagged with: css
downvote count: 3

http://stackoverflow.com/comment/139153324
score: 2
type: Comment
comment on: http://stackoverflow.com/q/78924192
has text: it looks like you are missing mask-composite, no? you see the white part of both gradients which is the intended result for me since the default composition is "add"
type: QuestionComment

http://stackoverflow.com/comment/139195570
has text: I updated the post, but I also realized, there's a black/grey background that fills the view height and centers a lot of things, but now I'm not sure how to put the page content on the screen.
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78946960

http://stackoverflow.com/a/78984753
answers question: http://stackoverflow.com/q/78984431
upvote count: 2
score: 2
downvote count: 0
type: Answer
has body: When creating a TR Element, set its className to the user.Status value: const el = (sel, par = document) => par.querySelector(sel); const elNew = (tag, prop) => Object.assign(document.createElement(tag), prop); const getUsers = async () => { let users = []; try { const res = await fetch("https://dummyjson.com/c/38f5-f39a-411e-aeb0"); const data = await res.json(); users = data.data; } catch (err) { console.error(err); } return users; }; const drawUsersData = async () => { const elData = el("#data"); const users = await getUsers(); const rows = users.map((user) => { return elNew("tr", { className: user.Status, innerHTML: ` ${user.Name} ${user.Address} ${user.Status} ` }); }); elData.innerHTML = ""; elData.append(...rows); }; drawUsersData(); table { border-collapse: collapse; } td, th { border: thin solid black; padding: 0.2rem; } tr.Accepted { color: green; } Name Address Status

http://stackoverflow.com/comment/139159292
comment on: http://stackoverflow.com/a/78915820
type: Comment
score: 0
has text: You made a very good point about `z-index`, but as I outlined in the question, I need to make the header row stick to the viewport's top edge, so the `h1` block should be scrollable.
type: AnswerComment

http://stackoverflow.com/comment/139300662
comment on: http://stackoverflow.com/a/78990966
has text: So that fixed it?
type: Comment
score: 0
type: AnswerComment

http://stackoverflow.com/comment/139306105
comment on: http://stackoverflow.com/q/79007335
type: Comment
score: 0
type: QuestionComment
has text: Unrelated to the issue, but note the error in the console telling you that you've included Highcharts.js in the page twice

http://stackoverflow.com/comment/139243018
score: 0
type: AnswerComment
has text: Perfect! It's simple and has minimal code. However, I made a mistake by including the interest number within the span tag `(10,625s)`. The interest calculation should be based on the value given in the div ` $250,000 `. It seems the displayed value is the same as what I gave in the span tag, which was just for discussion. I need to remove it. By any chance calculating the div value by 4.25% interest?
comment on: http://stackoverflow.com/a/78967078
type: Comment

http://stackoverflow.com/q/78940431
upvote count: 2
answer count: 0
tagged with: css
score: 2
tagged with: angular
type: UnansweredQuestion
has title: Error: Undefined mixin in SCSS when upgrading Angular 14 to Angular 18
favorite count: 0
type: Question
downvote count: 0
has body: I am upgrading my project from Angular 14 to Angular 18, and I'm encountering an error related to an undefined SCSS mixin when running the build. The error message I receive is: ./src/scss/angular.scss?ngGlobalStyle - Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/mini-css-extract-plugin/dist/loader.js): HookWebpackError: Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js): Undefined mixin. ╷ 9 │ ┌ @include media-breakpoint-down(md) { 10 │ │ margin: (-$app-content-padding-y-sm) (-$app-content-padding-x-sm); 11 │ │ padding: $app-content-padding-y-sm $app-content-padding-x-sm; 12 │ └ } ╵ src/scss/default/app/_app-content.scss 9:3 @import src/scss/default/_app.scss 1:9 @import src/scss/default/styles.scss 12:9 @import src/scss/angular.scss 1:9 root stylesheet What I've Tried: 1. Upgrade Process: This issue started occurring after upgrading from Angular 14 to Angular 18. 2. Ensured that Bootstrap is correctly imported: Here's my angular.scss file: @import 'default/styles'; @import '@ctrl/ngx-emoji-mart/picker'; @import '~bootstrap/scss/functions'; @import '~bootstrap/scss/variables'; @import '~bootstrap/scss/mixins'; @import '~bootstrap/scss/bootstrap'; @import 'bootstrap/scss/_functions'; @import 'bootstrap/scss/_variables'; @import 'bootstrap/scss/mixins/_breakpoints'; 3. Checked the versions: My package.json includes the following dependencies: "dependencies": { "@angular/animations": "^18.2.0", "@angular/cdk": "^18.2.0", "@angular/common": "^18.2.0", "@angular/compiler": "^18.2.0", "@angular/core": "^18.2.0", "@angular/forms": "^18.2.0", "@angular/localize": "^18.2.0", "@angular/material": "^18.2.0", "@angular/platform-browser": "^18.2.0", "@angular/platform-browser-dynamic": "^18.2.0", "@angular/router": "^18.2.0", "bootstrap": "^5.2.0", ... }, "devDependencies": { "@angular-devkit/build-angular": "^18.2.2", "@angular/cli": "^18.2.2", "css-loader": "^7.1.2", "mini-c…
tagged with: javascript
tagged with: sass

http://stackoverflow.com/comment/139227706
has text: @AHaworth if I change it to "right: 100" then moving the left side causes the right side to shrink/grow instead. Basically then the left side doesn't move at, and resizing on both ends causes the right side to grow/shrink. I couldn't figure out a way to include the re-resizable library in Stack Overflow's code snippets tool but I'm happy to try to post the code to another alternative than CodeSandbox if that would help.
type: Comment
comment on: http://stackoverflow.com/q/78963829
score: 0
type: QuestionComment

http://stackoverflow.com/comment/139183789
type: Comment
has text: Why are you not using CSS 3? You're aware there's a CSS 3 right?
type: QuestionComment
score: 0
comment on: http://stackoverflow.com/q/78940746

http://stackoverflow.com/a/78972243
has comment: http://stackoverflow.com/comment/139242348
score: 1
has comment: http://stackoverflow.com/comment/139241931
has body: You should change the scale of the child elements of canvas instead of canvas itself: let scale = 1; window.addEventListener("keydown", (e) => { if (e.key === "+") scale += 0.2; if (e.key === "-") scale -= 0.2; const canvas = document.getElementById("canvas"); const children = canvas.children // get the child elements for(const child of children){ child.style.transform = `scale(${scale})`; // pass the scale to the childs only } }); body { font-family: sans-serif; height: 100vh; width: 100%; } #app { width: 100%; height: 100%; position: relative; display: flex; background-color: brown; } .canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: green; } .element { position: absolute; top: 50px; left: 50px; width: 100px; height: 100px; background-color: blue; } JavaScript Sandbox
type: Answer
answers question: http://stackoverflow.com/q/78972128
downvote count: 0
has comment: http://stackoverflow.com/comment/139241977
has comment: http://stackoverflow.com/comment/139241966
upvote count: 1
has comment: http://stackoverflow.com/comment/139242620

http://stackoverflow.com/q/78971464
tagged with: image
type: UnansweredQuestion
type: Question
tagged with: http://stackoverflow.com/tag/html
has body: I am using a modified version of this w3schools tutorial for a magnifying glass W3Schools. I'm trying to make my glass as functional as possible, dealing with it being able to render even on the furthest edges of my image. Unfortunately I'm having an issue with the top and left edges "freezing" the glass whenever the edge of the glass reaches the edge of the image. This is most likely due to the glass rendering the image from the top left corner, creating the problem of trying to render part of an image that doesn't actually exist. My question is how can I get my glass to render the zoomed image all the way up to the edges of the image, while still keeping the glass centered over my cursor. I want the overflow to smoothly be able to hide outside of the image, without constraining the glass at all within the image itself. I attached the full code here: FullFiddle and a testable example here: TestFiddle (may have to press run again to get the glass to update properly). Notice how the top and left edges don't magnify properly all the way to the edge while the bottom and right edges do. Let me know if theres any other questions. // The moveMagnifier function sets the position of the glass to the position of the cursor function moveMagnifier(e) { e.preventDefault(); pos = getCursorPos(e); // Calls function to get cursor position x = pos.x; y = pos.y; glass.style.left = `${x - w}px`; // Centers glass position over cursor glass.style.top = `${y - h}px`; glass.style.backgroundPosition = `-${x * zoom - w}px -${y * zoom - h}px`; } // Function for finding the cursor based on the bounds of the image function getCursorPos(e) { let xPos = e.clientX - imgRect.left; // Gets cursor position based on image position let yPos = e.clientY - imgRect.top; return { x: xPos, y: yPos }; } TLDR: Magnifying glass is extending out of bounds and want it to be able to handle zooming in on the edges of the image. P.S: If anyone has a better way to handle hiding the actual overflow of the glass or …
score: 0
tagged with: javascript
has title: How to deal with image that tries to render out of bounds in a magnifier
tagged with: magnification
answer count: 0
tagged with: css

http://stackoverflow.com/comment/139302221
type: QuestionComment
has text: This issue happens but less prevalent on latin alphabets too. I made a bug-report for [Firefox](https://bugzilla.mozilla.org/show_bug.cgi?id=1919966) and [Chrome](https://issues.chromium.org/issues/368341465).
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78995150

http://stackoverflow.com/comment/139376459
comment on: http://stackoverflow.com/q/79033378
type: Comment
has text: So please do what I asked, so we can help you. Click [edit], then scroll down and click "edit above snippet" and change the content of the HTML frame with pure HTML (right click on your rendered page, click "inspect" and copy enough content to show the issue in the snippet
score: 0
type: QuestionComment

http://stackoverflow.com/a/79061456
answers question: http://stackoverflow.com/q/79060590
upvote count: 1
has body: Keep the use of visibility but place all the items above each other. $('#next-button-vis').click(function() { $('#first-vis').toggleClass('hidden'); $('#second-vis').toggleClass('hidden'); }); .container { background-color: blue; padding: 10px; display: grid; } .container > * { grid-area: 1/1; /* all the items in the same area */ } .hidden { visibility: hidden; } .first { background-color: purple; } .second { background-color: yellow; } Using visibility panel one panel two which has two lines
accepted answer of: http://stackoverflow.com/q/79060590
score: 1
type: AcceptedAnswer
downvote count: 0
type: Answer

http://stackoverflow.com/comment/139180739
type: Comment
type: AnswerComment
has text: Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer).
comment on: http://stackoverflow.com/a/78921561
score: 0

mantine
tag name: mantine
type: Tag
tags question: http://stackoverflow.com/q/78921976
tags question: http://stackoverflow.com/q/79049832
tags question: http://stackoverflow.com/q/79098915
tags question: http://stackoverflow.com/q/79470290

typescript
tags question: http://stackoverflow.com/q/78940137
tags question: http://stackoverflow.com/q/79063149
tags question: http://stackoverflow.com/q/79049832
tags question: http://stackoverflow.com/q/78976041
tags question: http://stackoverflow.com/q/79026835
tags question: http://stackoverflow.com/q/79063167
tags question: http://stackoverflow.com/q/78937517
tags question: http://stackoverflow.com/q/79004878
tags question: http://stackoverflow.com/q/78981552
tags question: http://stackoverflow.com/q/79042214
tags question: http://stackoverflow.com/q/79007799
tag name: typescript
tags question: http://stackoverflow.com/q/78947964
tags question: http://stackoverflow.com/q/79046794
type: Tag
tags question: http://stackoverflow.com/q/79024929
tags question: http://stackoverflow.com/q/78948750
tags question: http://stackoverflow.com/q/78960176
tags question: http://stackoverflow.com/q/78928449
tags question: http://stackoverflow.com/q/79157847
tags question: http://stackoverflow.com/q/79130963
tags question: http://stackoverflow.com/q/79099009
tags question: http://stackoverflow.com/q/79166660
tags question: http://stackoverflow.com/q/79102712
tags question: http://stackoverflow.com/q/79130377
tags question: http://stackoverflow.com/q/79187996
tags question: http://stackoverflow.com/q/79126535
tags question: http://stackoverflow.com/q/79175743
tags question: http://stackoverflow.com/q/79174535
tags question: http://stackoverflow.com/q/79141656
tags question: http://stackoverflow.com/q/79162853
tags question: http://stackoverflow.com/q/79196764
tags question: http://stackoverflow.com/q/79403226
tags question: http://stackoverflow.com/q/79365252
tags question: http://stackoverflow.com/q/79371805
tags question: http://stackoverflow.com/q/79407833
tags question: http://stackoverflow.com/q/79341627
tags question: http://stackoverflow.com/q/79346732
tags question: http://stackoverflow.com/q/79395890
tags question: http://stackoverflow.com/q/79409425
tags question: http://stackoverflow.com/q/79298582
tags question: http://stackoverflow.com/q/79366807
tags question: http://stackoverflow.com/q/79277199
tags question: http://stackoverflow.com/q/79411364
tags question: http://stackoverflow.com/q/79281296
tags question: http://stackoverflow.com/q/79399598
tags question: http://stackoverflow.com/q/79305372
tags question: http://stackoverflow.com/q/79394890
tags question: http://stackoverflow.com/q/79337161
tags question: http://stackoverflow.com/q/79256298
tags question: http://stackoverflow.com/q/79345550
tags question: http://stackoverflow.com/q/79406692
tags question: http://stackoverflow.com/q/79248910
tags question: http://stackoverflow.com/q/79407201
tags question: http://stackoverflow.com/q/79389104
tags question: http://stackoverflow.com/q/79474219
tags question: http://stackoverflow.com/q/79543213
tags question: http://stackoverflow.com/q/79457066
tags question: http://stackoverflow.com/q/79442441
tags question: http://stackoverflow.com/q/79464833
tags question: http://stackoverflow.com/q/79546415
tags question: http://stackoverflow.com/q/79431542
tags question: http://stackoverflow.com/q/79488335
tags question: http://stackoverflow.com/q/79493077
tags question: http://stackoverflow.com/q/79519963
tags question: http://stackoverflow.com/q/79499434

http://stackoverflow.com/comment/139267654
type: Comment
comment on: http://stackoverflow.com/q/78986368
score: 0
type: QuestionComment
has text: No, they don't!

micro-frontend
tag name: micro-frontend
type: Tag
tags question: http://stackoverflow.com/q/78944756

http://stackoverflow.com/comment/139373114
type: QuestionComment
has text: Welcome. Please take the [tour].
type: Comment
score: 0
comment on: http://stackoverflow.com/q/79043462

http://stackoverflow.com/comment/139128749
type: AnswerComment
comment on: http://stackoverflow.com/a/78908965
type: Comment
has text: i have tried that it still not working i am getting the same error....
score: 0

http://stackoverflow.com/comment/139394619
has text: @David Im trying to make the code uniform across all screen types. On a pc, it works perfectly fine and shows the proper code how its supposed to be displayed. But when you load it on a mobile or reduce the screen from a full screen it looks different
type: QuestionComment
type: Comment
score: 0
comment on: http://stackoverflow.com/q/79055654

http://stackoverflow.com/a/79057637
has body: Try using object-fit: fill The video will stretch or squish to fit the ratio or size without hiding anything or showing white spaces. See this example on w3schools You can also set aspect ratio of parent div to fit in a given ratio Hoe this helps...
answers question: http://stackoverflow.com/q/79055839
type: Answer
score: 0

http://stackoverflow.com/comment/139310451
type: QuestionComment
has text: We have also checked that we have uploaded the CSS and the xhtml, and have cleared the browser caches on both my Safari and my wife’s.
type: Comment
comment on: http://stackoverflow.com/q/79009569
score: 0

http://stackoverflow.com/comment/139209577
type: Comment
score: 1
has text: unrelated, but using the same id (banner) twice is not valid in html. It usually works fine in most browsers but can lead to bugs, so you probably should avoid it.
type: QuestionComment
comment on: http://stackoverflow.com/q/78954650

http://stackoverflow.com/comment/139297678
comment on: http://stackoverflow.com/q/78998815
has text: fixed it by using display:flex in nav ul
type: QuestionComment
score: 0
type: Comment

http://stackoverflow.com/a/78957721
type: Answer
has body: To achieve the effect of clipping a gradient background applied to a parent element so that it only covers the text of its children, you can utilize a combination of CSS properties. Specifically, setting the parent to have the gradient background and ensuring that the children are set to be transparent will allow the gradient to show through only the text. Here's a possible workaround using CSS: Ensure the parent element has a gradient background. Use bg-clip-text and text-transparent on the child elements. Set the background-clip property on the parent to text for the text to show the gradient. Long Text 1 Long Text 2 Make sure you have the following CSS for the gradient background: .mesh-gradient-background { background: linear-gradient(to right, #ff7e5f, #feb47b); /* Example gradient */ -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 1)); mask-image: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 1)); z-index: -1; /* Send the gradient behind the text */}
score: -1
answers question: http://stackoverflow.com/q/78957706
downvote count: 1
upvote count: 0

http://stackoverflow.com/comment/139251101
comment on: http://stackoverflow.com/a/78976656
type: AnswerComment
has text: Why are both .Shell and .Box affected by 0.5fr at the same time? I want .Box to be 50px, but it becomes 25px instead.
type: Comment
score: 0

microsoft-forms
tags question: http://stackoverflow.com/q/79066201
tag name: microsoft-forms
type: Tag

http://stackoverflow.com/a/79015571
downvote count: 0
upvote count: 1
score: 1
has body: The main step to fixing that is to add box-sizing: border-box; to pretty much everything, i.e. * { box-sizing: border-box; } This calculates the padding and borders as part of given widths and heights, which are otherwise added, which again results in what you see in your example. (for example 100% width plus paddings left/right will create something wider than 100%) * { box-sizing: border-box; } body { background-color: rgb(250, 250, 250); font-family: 'markazi text', serif; margin-top: 3rem; margin-bottom: 3rem; margin-left: 5%; margin-right: 5%; scroll-margin-right: 5%; } h1 { font-size: 3rem; } h2 { font-size: 2rem; } header>img { display: block; margin-left: auto; margin-right: auto; margin-bottom: 20px; } .image-container { text-align: center; } .image-container img { display: inline-block; } nav { background-color: #71d1a1; text-align: center; padding: 2px; border-radius: 10px; width: 100%; } nav a { color: #ffffff; text-decoration: none; padding: 10px 15px; font-size: 25px; } nav a:hover { background-color: #5bb98b; color: #ffffff; border-radius: 10px; text-decoration: underline; } nav ul { list-style: none; text-align: center; } nav li { display: inline-block; } nav li:not(:last-child)::after { content: "|"; margin: 0 10px; } section { display: flex; } article { flex: 1; border-radius: 10px; } .spaced-section article { background-color: #fbe9d3; border: 1px solid #ddd; padding: 15px; margin: 10px; border-radius: 10px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .spaced-section article img { width: 100%; height: auto; display: block; } .spaced-section { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 2rem; } p { font-size: 22px; } a.promotion-banner { display: block; text-decoration: none; color: inherit; width: 100%; } a.promotion-banner article { transition: transform 0.6s ease-in-out; cursor: pointer; } a.promotion-banner:hover { text-decoration: none; } a.promotion-banner:hover h1 { text-decoration: underline; text-decoration-thickness: 2px; } a.p…
answers question: http://stackoverflow.com/q/79015496
type: AcceptedAnswer
accepted answer of: http://stackoverflow.com/q/79015496
type: Answer
has comment: http://stackoverflow.com/comment/139350038

http://stackoverflow.com/comment/139117860
comment on: http://stackoverflow.com/a/78904813
type: AnswerComment
score: 1
has text: @tacoshy At first, I thought the same, but after trying it, it really didn’t work. [The article I mentioned in my answer](https://kilianvalkhof.com/2022/css-html/do-you-know-about-overflow-clip/) discusses this, specifically in the paragraph right before the first CodePen example. You can also try changing `overflow-x-clip` in my answer to `overflow-x-hidden` `overflow-y-visible`, but it doesn’t work. If I missed something, please let me know.
type: Comment

http://stackoverflow.com/q/78984279
tagged with: animation
answer count: 1
type: AnsweredQuestion
downvote count: 0
has answer: http://stackoverflow.com/a/78984323
upvote count: 1
has title: Issue with animation, skips half of it's way
tagged with: css
has body: I'm having a weird issue with a simple animation: Four/three elements should move from the center to the corners of a container: Test Animation remove this When alle child divs are there the animation is working fine. However when I remove div.div1 where the content reads "remove this", the remaining divs are skipping the first part of their way to the corners. I'm helpless and have no clue what's the reason for this behaviour. I'm expecting that the animation is working the same way independently of the number of divs. I tried to start the animation on the load event or DOMDocumentReady but no success. When I add a delay the animation is working fine again: .container div { animation-delay: 1000ms; } however the delay is not welcome. When I increase the duration to, say, 10s, again the animation is working fine. Update: For me the issue occurs on Windows 10, Opera, Chrome, Edge.
has comment: http://stackoverflow.com/comment/139264210
score: 1
favorite count: 0
accepted answer: http://stackoverflow.com/a/78984323
type: Question

http://stackoverflow.com/q/78977902
type: UnansweredQuestion
type: Question
answer count: 1
score: 0
has answer: http://stackoverflow.com/a/78995466
tagged with: material-ui
tagged with: css
has title: Material-UI , Control hover in each rows
has body: I have script like this , test1 test2 test3 it works correctly when mouse comes to the row the row color changes. However now I want to change the color for each row. When mouse pointer comes to test1 backgroundColor will be "#FFFFFF" When mouse pointer comes to test2 backgroundColor will be "#DDDDDD" When mouse pointer comes to test2 backgroundColor will be "#222222" I guess I should set the sx in each TableRow, but I guess & .MuiTableRow-root:hover should be changed. How can I make this?

http://stackoverflow.com/a/78922037
type: Answer
score: 0
has body: Seems I just have to send the HTML and CSS separately! I just didn't know yet that HTTP would send a different request for the CSS file itself.
answers question: http://stackoverflow.com/q/78918262
has comment: http://stackoverflow.com/comment/139160335
accepted answer of: http://stackoverflow.com/q/78918262
type: AcceptedAnswer

http://stackoverflow.com/comment/139419294
type: Comment
has text: @TemaniAfif You're right; I should have been more clear in qualifying that.
score: 0
comment on: http://stackoverflow.com/a/79060366
type: AnswerComment

http://stackoverflow.com/comment/139388347
type: Comment
score: 0
type: QuestionComment
has text: Once we have a simple HTML/CSS situation to work with I'll have another look. My usual approach with something like this is to back out to a simple grid and start fresh. You seem to have much more CSS than you need, and probably extra markup, too. You're also very far away from a Bootstrap layout, which I'd think would get you 95% of the way there without _any_ CSS.
comment on: http://stackoverflow.com/q/79052168

http://stackoverflow.com/a/78979928
has comment: http://stackoverflow.com/comment/139261198
downvote count: 0
has body: You want to place your table inside a container. Here the container is 100% of page, whereas the table is about twice that. Was this what you had in mind? body { padding: 10px; margin: 0; } table { table-layout: fixed; width: 200vw; border-collapse: collapse; margin: 10px; } .table-container { width: 100%; overflow-x: auto; border: 1px solid pink; } th, td { border: 1px solid #000; padding: 5px; text-align: center; } Column 1 Column 2 Column 3 Column 4 Column 5 Row 1, Col 1 Row 1, Col 2 Row 1, Col 3 Row 1, Col 4 Row 1, Col 5 Row 2, Col 1 Row 2, Col 2 Row 2, Col 3 Row 2, Col 4 Row 2, Col 5
upvote count: 1
score: 1
answers question: http://stackoverflow.com/q/78979166
type: Answer

http://stackoverflow.com/comment/139228316
type: Comment
score: 0
type: AnswerComment
has text: Is giving line-height a value like 8px bad practice?
comment on: http://stackoverflow.com/a/78964887

http://stackoverflow.com/comment/139281525
has text: @RKrish it's hard to deal with reactive code that needs to be tested as a whole instead of focusing on a single vanilla page. So all I can suggest is: track down the elements having the uneven font size at runtime; understand which css rules they are engaging for having such style; narrow down which exact selectors are having the issues so you can understand which are the media queries engaging at those conditions that are setting those weird font size.
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78992567
type: QuestionComment

http://stackoverflow.com/comment/139312627
type: QuestionComment
score: 1
has text: url: Sandbox not found
type: Comment
comment on: http://stackoverflow.com/q/79010725

http://stackoverflow.com/comment/139386579
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/79050826
has text: Are you using your browser devtools inspect facility to see exactly what CSS is being applied, and from where it comes. From you description it sounds as though you are talking about some default settings from the browser but it's difficult to tell.

http://stackoverflow.com/comment/139228997
type: AnswerComment
has text: No, I don't have to. But I have to learn framer motion library in order to create complex animations. That's why this would be a great training for it. Thanks, you've been a great help, truly..
type: Comment
comment on: http://stackoverflow.com/a/78964412
score: 0

http://stackoverflow.com/comment/139241587
score: 0
has text: You can try using custom CSS which is suggested by most of the AI tools(ChatGPT), however, I have noticed these custom CSS doesn't always work consistently when used for LWC components; in such cases try using lightning design system (LDS) to build your custom combobox where the possibilities are endless.
type: QuestionComment
comment on: http://stackoverflow.com/q/78960605
type: Comment

http://stackoverflow.com/comment/139157625
has text: Wow, that's very good, thanks! One question - what to do if the column cells are already colored with their "style" attributes?
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78924322

http://stackoverflow.com/comment/139380788
type: Comment
score: 3
comment on: http://stackoverflow.com/q/79047847
has text: Because I want to make sure it is semantically correct.
type: QuestionComment

http://stackoverflow.com/comment/139160579
comment on: http://stackoverflow.com/q/78927953
type: Comment
score: 0
type: QuestionComment
has text: @DiegoD Even if i change the event listener to .icing element still candles can be put outside the icing layer

http://stackoverflow.com/comment/139388146
comment on: http://stackoverflow.com/q/79044235
has text: thanks @MartinBean
type: Comment
score: 0
type: QuestionComment

http://stackoverflow.com/q/78914768
has body: I want a single row (using divs) that has a gray text box with a transparent image overlaying the box. The gray box does not go all the way across the div, but the image does overlay part of it. I want to achieve this with HTML and CSS. I have attached a crude image of what I am trying to achieve. I also need this to be responsive in mobile where the text box fills the first row, and the image drops below the text box. Any help would be greatly appreciated. Desired Outcome Here is a more detailed example of what I am trying to achieve using an image. Updated Image This was some generic code I came up with, but it did not work as intended. body { margin: 0; font-family: Arial, sans-serif; } .container { position: relative; display: flex; align-items: center; height: 300px; /* Adjust height as needed */ } .text-box { background-color: #ccc; /* Gray color */ padding: 20px; width: 50%; /* Adjust width as needed */ box-sizing: border-box; z-index: 1; } .image-overlay { position: absolute; right: 0; top: 0; width: 50%; /* Adjust width as needed */ height: 100%; overflow: hidden; } .image-overlay img { width: 100%; height: 100%; object-fit: cover; /* Ensures the image covers the container */ } Text and Image Overlay Your text goes here. This box is gray and contains some content.
has title: Overlaying an image on a text box and making it responsive
has comment: http://stackoverflow.com/comment/139143104
score: 0
answer count: 2
tagged with: css
has comment: http://stackoverflow.com/comment/139135540
has comment: http://stackoverflow.com/comment/139135752
has answer: http://stackoverflow.com/a/78930279
has answer: http://stackoverflow.com/a/78915510
type: UnansweredQuestion
tagged with: http://stackoverflow.com/tag/html
type: Question

http://stackoverflow.com/comment/139270438
type: AnswerComment
has text: The problem is due to --bs-table-bg-type and --bs-table-striped-bg being defined as styles via table.scss. They seem to override inline CSS for background-color. As you've mentioned, the correct way is to override those. You can't reproduce the problem because somebody overrode --bs-table-striped-bg in our code with gray instead of semi-transparent black, as is defined in bootstrap. Specifically to answer my question, I needed ` 1 `
comment on: http://stackoverflow.com/a/78987871
type: Comment
score: 0

http://stackoverflow.com/comment/139167568
type: QuestionComment
comment on: http://stackoverflow.com/q/78931907
has text: Look into `flexbox` and/or `grid`. (flexbox will probably already do for this though.)
score: 2
type: Comment

http://stackoverflow.com/a/79026444
has body: Update: I solved (?) the issue by updating Wkhtmltopdf to one with patched QT. But now, what used to take 15 seconds to compile takes 2+ minutes. However, everything is formatted properly.
answers question: http://stackoverflow.com/q/79024535
type: Answer
score: 0

http://stackoverflow.com/comment/139287727
type: AnswerComment
has text: I thought that was what you were after
comment on: http://stackoverflow.com/a/78995513
type: Comment
score: 0

http://stackoverflow.com/comment/139137666
has text: I said OS specific because as far as I know its the OS that is deciding the look of those UI components. Not exactly sure about that though.
type: Comment
comment on: http://stackoverflow.com/a/78915845
score: 0
type: AnswerComment

documentation
tag name: documentation
tags question: http://stackoverflow.com/q/78993272
type: Tag
tags question: http://stackoverflow.com/q/78962032

http://stackoverflow.com/comment/139400258
type: Comment
has text: nesting selectors won't work unless you're using some CSS preprocessor like Sass/SCSS. In plain CSS it would be `.items img[src$=".gif"]` which would select nested img tags with srcs that end with `.gif` within elements with the `items` class
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/79058968

http://stackoverflow.com/comment/139155878
score: 0
comment on: http://stackoverflow.com/q/78925311
type: QuestionComment
has text: I've made [a CodePen of your code](https://codepen.io/kikosoft/pen/mdZjqmP) and tried printing to PDF, but I don't get what you get. Lot's of styling is missing and you're probably using headless Chrome to create the PDF. Anyway, I'm nowhere near [reproducing your problem](https://stackoverflow.com/help/minimal-reproducible-example), let alone find a reason for it.
type: Comment

http://stackoverflow.com/comment/139164174
type: QuestionComment
has text: your div are empty, there is nothing to animate
comment on: http://stackoverflow.com/q/78929847
type: Comment
score: 1

http://stackoverflow.com/comment/139360023
type: AnswerComment
has text: thanks for your response I am able to fix the typo in the line number 78, but not able to fix the line number 23,. So confusing, can you please update in the stackblitz @user3309300
type: Comment
comment on: http://stackoverflow.com/a/79035320
score: 0

http://stackoverflow.com/q/78914640
type: UnansweredQuestion
upvote count: 0
has answer: http://stackoverflow.com/a/78916781
has title: Problem with the responsive image in the hero section that shrinks before the set width
favorite count: 0
type: Question
answer count: 1
tagged with: http://stackoverflow.com/tag/html
has body: What I want What I'm seeing I'm working on making a responsive hero section where I want the image to stay full size until the window width drops below 1300px. However, I have noticed that the image starts to shrink much earlier, and I am not sure why this is happening. Here is my HTML and CSS code: /* *************** */ /* HERO-SECTION */ /* *************** */ .hero { max-width: 130rem; display: grid; grid-template-columns: 1fr 1fr; align-items: center; justify-content: center; column-gap: 9.6rem; } .hero h1 { font-size: 5.2rem; font-weight: 700; margin-bottom: 3.2rem; line-height: 1; letter-spacing: -1px; } .hero p { font-size: 1.8rem; font-weight: 500; margin-bottom: 4.8rem; line-height: 1.5; } .btn:link, .btn:visited { font-size: 2rem; padding: 1.2rem 3.2rem; text-decoration: none; display: inline-block; background-color: #e67e22; color: white; border-radius: 1.5rem; font-weight: 500; transition: all 0.3s; } .left:hover, .left:active { background-color: #cf711f; } .right:link, .right:visited { background-color: white; color: #333; margin-left: 2.4rem; } .right:hover, .right:active { background-color: #fdf2e9; color: #333; box-shadow: 0 0 0 3px white; } .hero-section { background-color: #fdf2e9; padding: 16rem 32rem; } .head-img { width: 100%; } .deliver-ithems { display: flex; align-items: center; margin-top: 8rem; gap: 1.6rem; } .deliver-imgs { display: flex; } .deliver-imgs img { height: 4.8rem; width: 4.8rem; border-radius: 50%; border: #fff solid 2px; margin-left: -1.6rem; } .deliver-imgs img:first-child { margin: 0; } .deliver-text { font-size: 1.8rem; font-weight: 600; } .deliver-ithems span { color: #cf711f; } &lt;header class="hero-section"&gt; &lt;div class="hero"&gt; &lt;div class="head-text"&gt; &lt;div class="text-section"&gt; &lt;h1&gt; A healthy meal &lt;br /&gt;delivered to your door, &lt;br /&gt;every single day &lt;/h1&gt; &lt;p&gt; The smart 365-days-per-year food subscription that will make you eat healthy again. Tailored to your personal tast…
score: -1
tagged with: responsive-design
tagged with: css
downvote count: 1

http://stackoverflow.com/comment/139153976
type: QuestionComment
comment on: http://stackoverflow.com/q/78922065
type: Comment
score: 0
has text: yeahh thats what Im saying I dont know how to do that. Thanks for answering.

http://stackoverflow.com/comment/139329737
comment on: http://stackoverflow.com/q/79019992
type: QuestionComment
type: Comment
score: 0
has text: Getting the same [which I guess you'd expect] on Edge 129.0.2792.52 (Official build) (64-bit) on Windows11.

http://stackoverflow.com/a/78993644
type: Answer
answers question: http://stackoverflow.com/q/78993557
score: -1
has body: You need one more div wrapper inside #item-outer-container in order to dissociate container and child width. https://jsfiddle.net/rdj29amL/#&togetherjs=zlfuJRNyqE
downvote count: 1
upvote count: 0

http://stackoverflow.com/q/79048616
duplicate of: http://stackoverflow.com/q/49492208
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139382103
has body: I have a simple set up as below but despite setting width of the parent div of the image on the right to be 100px, or alternatively setting flex-basis to be 100px, flexbox shrinks the div (and the image inside it) to a lot less than 100px. I get that there are ways to set the width of the div be exactly 100px - e.g. set "flex: 1 0 100px" or set "min-width: 100px" and "flex: 1 1 100px" on the div but I want to know why the width is not 100px in the case those settings are not used. In general, different combinations of CSS properties seem to produce sometimes (to me) unpredictable results. For example, if I set "min-width: 100px" but flex-basis is changed to the default "auto" the div and the image within grow to way over 100px. I wanted to ask if there is a way to find out exactly how those final properties are computed - browser plugins or similar. The standard dev tools on Chrome for example are of course no help giving me only the css settings that I already know and the final computed width which seems to come from nowhere. /* standard css reset*/ * { margin: 0; padding: 0; cursor: default; box-sizing: border-box; } img { max-width: 100%; max-height: 100%; display: block; } /* actual settings */ #container { background-color: yellow; width: 100%; height: max-content; padding: 20px; display: flex; flex-direction: row; justify-content: left; align-items: center; } #text { flex: 1 1 auto; background-color: #94e02d; } #image-div { flex: 1 1 auto; /* min-width: 100px;*/ background-color: crimson; width: 100px; display: flex; justify-content: center; align-items: center; } #image { background-color: cornflowerblue; height: 100%; width: auto; object-fit: contain; } ajkasdlaksdalksdasdasdn alklkasdlakms ak mlakmalkm l kmalksdmlakmlk akdalksmdlak al kmlak masd
type: Question
tagged with: http://stackoverflow.com/tag/html
score: 0
linked to: http://stackoverflow.com/q/49492208
tagged with: css
answer count: 0
has title: Why is flexbox ignoring my width settings?
tagged with: flexbox

http://stackoverflow.com/comment/139167888
score: 0
type: AnswerComment
has text: Exactly but since he provided the code as inline style I did not want to change it.
comment on: http://stackoverflow.com/a/78932074
type: Comment

http://stackoverflow.com/a/79062243
has body: Another approach I've been referred to by a friend is to use the OWASP Java HTML Sanitizer, if like me your webapp uses Java servlets. It is open source, so could in principal be ported to other languages.
answers question: http://stackoverflow.com/q/79057952
type: Answer
score: 0

http://stackoverflow.com/comment/139306100
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/79006973
has text: I just can't get it to work. with $(`li.menu-item-${(a.getMonth() + 1)}-${a.getDate()}`).addClass('heute'); works fine in fiddle, but not in wordpress-template. I've inserted the function between within the body. Isn't it correct?

http://stackoverflow.com/q/78999725
linked to: http://stackoverflow.com/q/76303977
has body: I'd like to use svh viewport units for the first section of my landing page, and while they work great on standard mobile browsers, they function the same as dvh units in in-app browsers like Google Search and Instagram. This causes some clunky snapping when I'm scrolling down through the rest of the landing page. How can I fix this to fully display the first section of the landing page (which is why we use svh units), without having it expand/change size with respect to the browser elements (like you'd expect to happen with dvh units)? Is this just a bug in the browsers' rendering engines? It seems like mobile Safari used to have this issue as well: SVH units not working properly in mobile Safari This is what we've tried, along with standard vh units etc. HTML snippet `your text`<body data-new-gr-c-s-check-loaded="14.1196.0" cata-ar-ext-installeos == $0. ... . ... . ... . CSS snippet @media screen and (max-width: 767px) {. .hero {. height: 100svh; max-height: 100vh; }. } Thank you!
has title: svh viewport units are not working in mobile in-app browsers like Google Search and Instagram
tagged with: viewport
answer count: 0
tagged with: css
tagged with: iphone
tagged with: mobile
score: 0
type: UnansweredQuestion
type: Question
tagged with: http://stackoverflow.com/tag/html

http://stackoverflow.com/a/79003124
has body: To prevent the focus outline from appearing around your <image> element inside the when navigating with the Tab button, you can simply remove the default focus outline using CSS. Add the following styles to target the <image> element within the and remove the focus outline: svg image:focus { outline: none; } If you'd prefer to completely prevent the <image> element from being focusable, you can remove it from the tab navigation by setting the tabindex to -1: <image tabindex="-1" href="image.jpg" width="100" height="100" /> This ensures that the <image> element is not focusable, and the focus outline won't appear while tabbing through the page.
type: Answer
answers question: http://stackoverflow.com/q/79003079
downvote count: 0
upvote count: 1
score: 1
has comment: http://stackoverflow.com/comment/139298693

http://stackoverflow.com/comment/139169122
comment on: http://stackoverflow.com/a/78932544
type: Comment
type: AnswerComment
has text: *A valid custom-property, whether or not defined by @property, always has a initial value.* --> and what value is the "initial value"?
score: 1

http://stackoverflow.com/q/79033331
tagged with: reactjs
score: 0
tagged with: javascript
has comment: http://stackoverflow.com/comment/139353717
has body: I'm using Next.js 14.2.12 and I'm trying to create a login page with different background images for the element based on screen size. Here's the basic structure of my src/app/login/page.tsx component: "use client"; const Login: React.FC = () => { return ( <> Some text </> ); }; export default Login; Is there a built-in way in Next.js to achieve this? Or do I need to use CSS media queries and JavaScript to dynamically update the background image? If so, how can I do this efficiently without affecting performance? I am working with the following four screen sizes and I want to apply four different images of PNG format.
tagged with: next.js
answer count: 0
has comment: http://stackoverflow.com/comment/139353732
tagged with: css
type: UnansweredQuestion
type: Question
has title: Next.js - Dynamically change Body's background image based on screen size

http://stackoverflow.com/comment/139291210
type: QuestionComment
comment on: http://stackoverflow.com/q/78996274
has text: I'm afraid there is not much you can do but to tweak heights and offsets manually. The tibetan Noto has quite large descender values. If you need more predictable bounding boxes you may render the glyphs on a canvas or as SVG with a library like opentype.js
type: Comment
score: 0

http://stackoverflow.com/comment/139403400
has text: @AHaworth added new bounty
comment on: http://stackoverflow.com/a/79041195
type: AnswerComment
score: 1
type: Comment

http://stackoverflow.com/comment/139158260
type: AnswerComment
has text: @VikasAcharya I mean your browser will read all the styles and make them all available through `getComputedStyles`. If you're concerned about a performance issue, I don't imagine the overhead of checking the computed styles object will make a difference in comparison to checking the existence of a class. There are many ways to accomplish the same task.
score: 2
comment on: http://stackoverflow.com/a/78926787
type: Comment

scss-mixins
type: Tag
tags question: http://stackoverflow.com/q/78979860
tags question: http://stackoverflow.com/q/78944574
tag name: scss-mixins
tags question: http://stackoverflow.com/q/78909507
tags question: http://stackoverflow.com/q/79214790
tags question: http://stackoverflow.com/q/79089405
tags question: http://stackoverflow.com/q/79198325
tags question: http://stackoverflow.com/q/79378025
tags question: http://stackoverflow.com/q/79258531

http://stackoverflow.com/comment/139140569
type: Comment
score: 0
type: QuestionComment
has text: Thanks - I updated to include the webpage and form action URL.
comment on: http://stackoverflow.com/q/78917311

http://stackoverflow.com/a/78951317
has comment: http://stackoverflow.com/comment/139203804
type: Answer
has comment: http://stackoverflow.com/comment/139203667
score: 0
upvote count: 1
has body: You have used + in CSS, which is used for sibling elements. The correct approach is following, I also have updated class names for ease of understanding: .hiddenElementOne { display: none; min-height: 200px; } .hiddenElementTwo { display: none; min-height: 200px; border: solid #ff8900 2px; border-radius: 20px; padding: 20px; } .firstHover:hover~ .hiddenElementOne { display: block; color: gray; } .secondHover:hover~ .hiddenElementTwo { display: block; color: gray; } Hover Effect Display an Element on Hover Hover over me 1. | Hover over me 2. I am shown when someone hovers over the div above. I am shown when someone hovers over the div above2.
downvote count: 1
answers question: http://stackoverflow.com/q/78951292

http://stackoverflow.com/comment/139158592
type: QuestionComment
comment on: http://stackoverflow.com/q/78913588
has text: Your HTML is invalid. The ` ` element is self-closing and does not use a closing ` `
type: Comment
score: 0

http://stackoverflow.com/a/78955242
answers question: http://stackoverflow.com/q/78946419
has body: The need for CSS to address this problem has been recognised, and a CSS function contrast-color() has been drafted to help. At this stage, experimental support for this function is available only in Safari TP. Note that the spec says the function is to be called contrast-color(), but what Safari TP has currently implemented is color-contrast().
downvote count: 0
has comment: http://stackoverflow.com/comment/139211491
upvote count: 2
type: Answer
score: 2

http://stackoverflow.com/comment/139381939
type: QuestionComment
comment on: http://stackoverflow.com/q/79044235
type: Comment
score: 0
has text: The problem is, there’s “space” between the links that trigger the mega menu, and the mega menu itself. So in between moving your mouse from the trigger to the mega menu itself, your pointer travels through empty space, and therefore the mega menu closes. You need to _not_ put margin/padding around your links.

http://stackoverflow.com/a/78980538
score: 1
type: AcceptedAnswer
downvote count: 0
type: Answer
upvote count: 1
answers question: http://stackoverflow.com/q/78980184
accepted answer of: http://stackoverflow.com/q/78980184
has body: Seems like the square variant of the Avatar is just CSS of height and width behind the scene, which isn't exactly very intuitive. My suggestion is to -- add the style of aspect-ratio (which is supported by all the modern browsers) yourself with the value of 1 / 1 so the code will look like this. <Avatar sx={{ width: 180, aspectRatio: "1 / 1", // <-- look here height: "auto", maxHeight: 180, margin: 2, }} variant="square" // doesn't matter anymore, can omit src="/static/images/avatar/3.jpg" /> This will work with max-height when you set the width that is larger than it. Heres a working <a href="https://codesandbox.io/p/sandbox/epic-elgamal-rtsyw3?from-embed=&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522cm105xcsz00063b6jrt3n85tg%2522%252C%2522sizes%2522%253A%255B100%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522cm105xcsz00023b6j4b670z89%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522cm105xcsz00033b6jxx7280ps%2522%257D%255D%257D%255D%257D%252C%257B…

http://stackoverflow.com/comment/139163954
score: 1
comment on: http://stackoverflow.com/q/78928853
has text: I think instead of **toggle** event you should use **click** because when the detail is toggling to close state, its transition is not displayed. In the click event handler, check for the state of **open** and if it is true, first apply the closing animation and at the end of the transition (you need another event handler for this), change the state to close (more accurately not open).
type: Comment
type: QuestionComment

http://stackoverflow.com/comment/139117111
has text: @WildThing Make a parent div `position:relative` and `padding-top` to cover the slant part of the title, then apply `position:absolute; left:0; right:0;' and ` top: to-relevant to the height of the div;` to the slant div.
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78904335
type: QuestionComment

http://stackoverflow.com/comment/139158171
type: Comment
score: 0
has text: @fdomn-m kindly guide me, if the question is not so relevant in present tech world. I would like to delete this question.
type: QuestionComment
comment on: http://stackoverflow.com/q/78926741

http://stackoverflow.com/comment/139243728
score: 0
has text: I have submitted the answer, but the screenshot was a bit confusing for me. If it does not work, please provide more information for us to understand it better.
type: QuestionComment
comment on: http://stackoverflow.com/q/78973058
type: Comment

http://stackoverflow.com/comment/139391450
score: 0
comment on: http://stackoverflow.com/a/79051207
type: AnswerComment
has text: That's what the snippet does - is there something it's not achieving that you want?
type: Comment

http://stackoverflow.com/comment/139316807
has text: I have tried to make it seamless with help of `setInterval` but its not how you want. But I have found the cause of issue which is `delay: anime.stagger(100)` this also adds delay for each circle but also adds delay after each loop.
type: Comment
score: 0
comment on: http://stackoverflow.com/q/79013054
type: QuestionComment

http://stackoverflow.com/tag/svg
tags question: http://stackoverflow.com/q/79006570
tags question: http://stackoverflow.com/q/78997151
tag name: svg
tags question: http://stackoverflow.com/q/78928449
tags question: http://stackoverflow.com/q/78930262
tags question: http://stackoverflow.com/q/78954204
tags question: http://stackoverflow.com/q/79018787
tags question: http://stackoverflow.com/q/78946570
tags question: http://stackoverflow.com/q/78975591
tags question: http://stackoverflow.com/q/78916038
tags question: http://stackoverflow.com/q/78917706
tags question: http://stackoverflow.com/q/79044610
tags question: http://stackoverflow.com/q/78921797
tags question: http://stackoverflow.com/q/79011645
tags question: http://stackoverflow.com/q/78981776
tags question: http://stackoverflow.com/q/78981277
tags question: http://stackoverflow.com/q/78912766
tags question: http://stackoverflow.com/q/78940358
tags question: http://stackoverflow.com/q/78978054
tags question: http://stackoverflow.com/q/79036972
tags question: http://stackoverflow.com/q/79026458
tags question: http://stackoverflow.com/q/79003079
tags question: http://stackoverflow.com/q/78930649
tags question: http://stackoverflow.com/q/79065672
tags question: http://stackoverflow.com/q/78957189
tags question: http://stackoverflow.com/q/78920988
tags question: http://stackoverflow.com/q/79008222
tags question: http://stackoverflow.com/q/79010977
tags question: http://stackoverflow.com/q/79053510
tags question: http://stackoverflow.com/q/78948434
type: Tag
tags question: http://stackoverflow.com/q/79089951
tags question: http://stackoverflow.com/q/79234941
tags question: http://stackoverflow.com/q/79168311
tags question: http://stackoverflow.com/q/79109764
tags question: http://stackoverflow.com/q/79211746
tags question: http://stackoverflow.com/q/79094637
tags question: http://stackoverflow.com/q/79088639
tags question: http://stackoverflow.com/q/79104214
tags question: http://stackoverflow.com/q/79132186
tags question: http://stackoverflow.com/q/79243761
tags question: http://stackoverflow.com/q/79079863
tags question: http://stackoverflow.com/q/79115026
tags question: http://stackoverflow.com/q/79071799
tags question: http://stackoverflow.com/q/79139104
tags question: http://stackoverflow.com/q/79150821
tags question: http://stackoverflow.com/q/79212721
tags question: http://stackoverflow.com/q/79124557
tags question: http://stackoverflow.com/q/79069315
tags question: http://stackoverflow.com/q/79196050
tags question: http://stackoverflow.com/q/79175271
tags question: http://stackoverflow.com/q/79233388
tags question: http://stackoverflow.com/q/79213143
tags question: http://stackoverflow.com/q/79088273
tags question: http://stackoverflow.com/q/79146097
tags question: http://stackoverflow.com/q/79103699
tags question: http://stackoverflow.com/q/79363350
tags question: http://stackoverflow.com/q/79367431
tags question: http://stackoverflow.com/q/79384109
tags question: http://stackoverflow.com/q/79251100
tags question: http://stackoverflow.com/q/79288384
tags question: http://stackoverflow.com/q/79376437
tags question: http://stackoverflow.com/q/79350854
tags question: http://stackoverflow.com/q/79312690
tags question: http://stackoverflow.com/q/79283555
tags question: http://stackoverflow.com/q/79393206
tags question: http://stackoverflow.com/q/79280469
tags question: http://stackoverflow.com/q/79271888
tags question: http://stackoverflow.com/q/79355417
tags question: http://stackoverflow.com/q/79284657
tags question: http://stackoverflow.com/q/79312631
tags question: http://stackoverflow.com/q/79310343
tags question: http://stackoverflow.com/q/79319585
tags question: http://stackoverflow.com/q/79390885
tags question: http://stackoverflow.com/q/79304721
tags question: http://stackoverflow.com/q/79312709
tags question: http://stackoverflow.com/q/79249056
tags question: http://stackoverflow.com/q/79419631
tags question: http://stackoverflow.com/q/79314585
tags question: http://stackoverflow.com/q/79318246

http://stackoverflow.com/q/78987974
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139278796
has comment: http://stackoverflow.com/comment/139275049
has comment: http://stackoverflow.com/comment/139277142
tagged with: blazor-webassembly
type: Question
tagged with: asp.net-core
has comment: http://stackoverflow.com/comment/139281952
has title: Isolated css in Blazor .net 8 WASM didn't work
score: 0
has body: I have a solution as described in title. (I'm new in blazor) I worked few times on new solution. On one day, before close solution css works fine. Next day when I start solution, it didn't see css. Then I created the new one and problem repeated. I found here post, where somebody propose to add in the api project, parameter to method app.UseStaticFiles("/styles"); and in the App.razor to complete paths to css. Then it worked. But now, when I added css to component and page it didn't works. What can be wrong in solution?
tagged with: .net-8.0
has comment: http://stackoverflow.com/comment/139275070
tagged with: css
has comment: http://stackoverflow.com/comment/139278721
answer count: 0
has comment: http://stackoverflow.com/comment/139286976

http://stackoverflow.com/a/78906365
type: Answer
score: -1
has body: #btn1 { height: 150px; width: 220px; position: absolute; left: 550px; top: 400px; background-image: url(Images/portugal-flag.jpg); background-size: cover; cursor: pointer; transition: all 1s; } #btn1:hover { height: 200px; width: 250px; } --or-- #btn1 { height: 150px; width: 220px; position: absolute; left: 550px; top: 400px; background-image: url(Images/portugal-flag.jpg); background-size: cover; cursor: pointer; transition: transform 1s; } #btn1:hover { transform: scale(1.2); } Lisbon
answers question: http://stackoverflow.com/q/78906308
downvote count: 1
upvote count: 0

http://stackoverflow.com/comment/139433039
type: Comment
score: 0
has text: @ Muhammad Aleem Hashmi thank you. i will try it later today on my code. thank you again
type: AnswerComment
comment on: http://stackoverflow.com/a/79056370

http://stackoverflow.com/comment/139294695
type: Comment
comment on: http://stackoverflow.com/a/79000845
type: AnswerComment
has text: I don’t understand what you mean by ‘parent layer’. The layer you call base is in no way a parent. And in fact, because of the order in which you have declared them, it has less precedence than special. Specificity between layers has no relevance. If you’ve set a CSS property for an element in a higher layer that will be what is used, regardless of specificity.
score: 1

http://stackoverflow.com/comment/139405393
score: 0
comment on: http://stackoverflow.com/q/79061543
type: QuestionComment
type: Comment
has text: Please add more details and clarity to your question. It is unclear what you're asking or trying to achieve.

http://stackoverflow.com/comment/139396970
type: QuestionComment
has text: Can you provide a recoded demo gif of what happens, when you resize with your question.
comment on: http://stackoverflow.com/q/79052612
type: Comment
score: 0

http://stackoverflow.com/comment/139234594
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78968270
has text: Thanks @Meet I need to respect all the Figma values. By increasing the font size, we wouldn’t be staying true to those values, which is why I can’t make that change. I could decrease the border width, but I don’t think that’s the best solution. What do you think? Since Figma is setting the standards, we should aim to match them exactly.

http://stackoverflow.com/comment/139209729
comment on: http://stackoverflow.com/q/78954874
type: Comment
has text: first of all, what is the size of body to start with? then you can find where it needs to be rescaled , probably via mediaqueries as a first step. There is also container queries, but from body, mediaquerie should be fine enough
score: 0
type: QuestionComment

http://stackoverflow.com/comment/139418806
type: QuestionComment
has text: The problem with what you call a MRE here, can be fixed by simply _not_ making the div inline. Anything else you are talking about, can not be verified with that "example." And questions here are supposed to be self-contained, so referring to code form elsewhere "for context", is simply not enough.
comment on: http://stackoverflow.com/q/79068427
score: 2
type: Comment

http://stackoverflow.com/q/78912766
tagged with: http://stackoverflow.com/tag/svg
has answer: http://stackoverflow.com/a/78912790
tagged with: reactjs
score: 0
has title: How to add div or text in svg tag, which I imported from gatewaves.io?
linked to: http://stackoverflow.com/q/4282108
linked to: http://stackoverflow.com/q/6849192
tagged with: css
has comment: http://stackoverflow.com/comment/139132347
has body: I want to add div or text in svg tag ,which imported from getwaves.io, I have added but not showing. import React from "react"; import "../styles/About.css"; const About = () => { return ( We serve in following technologies Reactjs Wordpress PHP ); }; export default About; I added div tag in between svt tag and also path tag , but both of these not working. I want to show text in svg screen.
has comment: http://stackoverflow.com/comment/139132405
has comment: http://stackoverflow.com/comment/139132358
has comment: http://stackoverflow.com/comment/139132704
type: UnansweredQuestion
tagged with: http://stackoverflow.com/tag/html
type: Question
answer count: 1

http://stackoverflow.com/comment/139352600
type: Comment
score: 0
type: AnswerComment
has text: I already have the URL pathnames to the svgs, am I supposed to use img src=that url?
comment on: http://stackoverflow.com/a/79030977

http://stackoverflow.com/comment/139399686
type: QuestionComment
comment on: http://stackoverflow.com/q/79058104
score: 1
has text: **Note:** The reason why slotting `` `` does not work is because content is **not _moved_ to** ``<slot>`` but **_reflected_ to ``<slot>``**. Long read: https://stackoverflow.com/questions/61626493/slotted-css-selector-for-nested-children-in-shadowdom-slot/61631668#61631668 ``adoptedStyleSheets`` **_links_** CSS content
type: Comment

http://stackoverflow.com/comment/139181668
type: QuestionComment
has text: @Barnee No The first image in my question shows what I am trying to achieve [link](https://xd.adobe.com/view/17148088-9d9f-4867-9226-94d7c00f39eb-4247/)
comment on: http://stackoverflow.com/q/78939256
type: Comment
score: 0

http://stackoverflow.com/q/78991187
downvote count: 0
answer count: 1
tagged with: mudblazor
type: AnsweredQuestion
has answer: http://stackoverflow.com/a/78991981
accepted answer: http://stackoverflow.com/a/78991981
tagged with: css
has title: MudDataGrid inside MudDialog
has comment: http://stackoverflow.com/comment/139276820
upvote count: 1
score: 1
favorite count: 0
has body: Ok, I have problem with MudDataGrid being inside MudDialog. My data grid has many items, so it's taller than the dialog. But I would like to get the outcome that Dialog doesn't show any scroll. So that grid is only scrollable, something like that: |--------------------| | | | |--------------| | | | this is grid | | | | | | | | | | | | | | | | | | | | | | | |------------- | | | | | Other stuff | ---------------------- | OK Cancel | ---------------------- The first thing is dialog itself - without any scrolls Then we have grid with scroll Then some other stuff (MudText) And the grid footer with OK and Cancel buttons. I am struggling with this grid for couple of hours now. But I am from backend, not front, so I need some help with that.
type: Question

http://stackoverflow.com/q/79009939
has comment: http://stackoverflow.com/comment/139311923
has title: Apc Customize UI++ activityBarTop vscode set item background
tagged with: visual-studio-code
answer count: 0
tagged with: css
tagged with: vscode-extensions
type: UnansweredQuestion
score: 0
has body: I want to give each item a background and space and center them but my code is not working please help me enter image description here I tried to solve this problem with the following code, but it didn't work "apc.stylesheet": { ".tabs-container .tab.active": { "background": "#3b3c45 !important" }, ".scrollbar": { "background": "#21222f !important" }, ".activityBarTop": { "text-align":"center" } }
tagged with: http://stackoverflow.com/tag/html
type: Question

r-markdown
tags question: http://stackoverflow.com/q/79013297
tag name: r-markdown
tags question: http://stackoverflow.com/q/79059000
type: Tag
tags question: http://stackoverflow.com/q/79178223
tags question: http://stackoverflow.com/q/79109809
tags question: http://stackoverflow.com/q/79414957
tags question: http://stackoverflow.com/q/79445365
tags question: http://stackoverflow.com/q/79481487

http://stackoverflow.com/comment/139240763
has text: Yes. Bootstrap 5.
type: Comment
comment on: http://stackoverflow.com/q/78970924
score: 0
type: QuestionComment

http://stackoverflow.com/a/78941500
has comment: http://stackoverflow.com/comment/139185176
has body: This can be achieved by putting the info relating to each item immediately after it in the HTML, setting it to display none and on click setting it to display. The whole is in a 3 column grid, with the even items set to column 1 and a span of 3. This snippet illustrates this on hover as we do not have the information on what should happen on a click with previously clicked items. .container { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-flow: dense; gap: 10px; } .container>div { display: none; height: 200px; } .container>div:nth-child(odd) { background: pink; display: block; } .container>div:nth-child(odd):hover+div { display: block; grid-column: 1 / span 3; } the stuff below item 1 the stuff below item 2 the stuff below item 3 the stuff below item 4
score: 1
type: AcceptedAnswer
answers question: http://stackoverflow.com/q/78941057
downvote count: 0
type: Answer
accepted answer of: http://stackoverflow.com/q/78941057
upvote count: 1

http://stackoverflow.com/comment/139158304
type: QuestionComment
has text: @NINE I added only the html part with the elements to which the animation is applied.
type: Comment
comment on: http://stackoverflow.com/q/78926774
score: 0

http://stackoverflow.com/comment/139213264
type: AnswerComment
comment on: http://stackoverflow.com/a/78956802
type: Comment
has text: I am using Firefox, but I didn't see the table divided into 4 columns, is this normal?
score: 0

http://stackoverflow.com/q/78960206
tagged with: css
downvote count: 1
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139219638
answer count: 4
has answer: http://stackoverflow.com/a/78960222
favorite count: 0
linked to: http://stackoverflow.com/q/61472948
has answer: http://stackoverflow.com/a/78960270
has title: Div not showing with JavaScript
type: Question
tagged with: http://stackoverflow.com/tag/html
has body: I'm currently improving my website for the use with mobile devices. Therefore I'm trying to open a menu with a click onto a equiv button. The menu is a fixed div with scrollable content and should appear and disappear with a click onto the button. Either option is working if set through the display property in CSS, but I'm not able to toggle the visibility through JavaScript. function ToggleDiv() { var v = document.getElementById('equiv-submenu'); if (v.style.display == '' || v.style.display == 'none') { v.style.display = 'block'; } else { v.style.display = 'none'; } } &lt;div id="equiv" onclick="ToggleDiv()"&gt; &lt;p&gt;&amp;equiv;&lt;/p&gt; &lt;/div&gt; &lt;div id="equiv-submenu"&gt; &lt;div id="equiv-submenu-content"&gt; ... &lt;/div&gt; &lt;/div&gt;
has comment: http://stackoverflow.com/comment/139219737
has comment: http://stackoverflow.com/comment/139219705
has answer: http://stackoverflow.com/a/78960225
score: 0
has answer: http://stackoverflow.com/a/78960213
tagged with: javascript
upvote count: 1
has comment: http://stackoverflow.com/comment/139219647
has comment: http://stackoverflow.com/comment/139219709
has comment: http://stackoverflow.com/comment/139219678

http://stackoverflow.com/q/78941674
has title: Divs with images won't scale on mobile
has body: Working on building a responsive site and I've gotten all my divs to fit mobile other than the divs that contain images. Those are bigger and create an overhang. The picture shows the issue on #welcome-pic.#welcome-pic And here it is on an image in a book-pick div. book-pick @media screen and (max-width:650px){ .col{ width:90%; object-fit: contain; } .book-pick img{ width: 70%; object-fit: contain; } #welcome-pic{ width:70%; object-fit: contain; } .col2{ width:100% } } I added the 'col' class to every div that contains an image. I added the next two rules that should apply to those images as well, in case specificity was the issue. Here is the site: translatedokc.com Here is the HTML for the welcome image: Welcome to OKC's Translated Fiction Book Club! We are an Oklahoma City-based book club that focuses on fiction in translation. Our meetings take place every 2nd Thursday at Bookish: Used Books & Art. Follow us on Instagram or join us on the Storygraph Frequently Asked Questions When and where does book club take place? We meet every second Thursday at 7pm at Bookish in Oklahoma City. 1005 NW 36th Street By Western, near Guestroom Records and Cock O' the Walk. Do I need to attend every meeting? Nope! Just come to any meeting. We don’t keep attendance. We appreciate your participation and your company, whether you only join us once or become a frequent member. What if I don’t finish the book? You’re welcome to join us whether you’ve finished our book pick or not, as long as you’re OK with spoilers being discussed. Do I need to buy the books from Bookish? You can join us no matter how you acquire the book.
score: -1
tagged with: css
has answer: http://stackoverflow.com/a/78941750
tagged with: frontend
downvote count: 1
type: UnansweredQuestion
favorite count: 0
upvote count: 0
type: Question
tagged with: responsive
answer count: 1
tagged with: http://stackoverflow.com/tag/html

http://stackoverflow.com/q/78965596
tagged with: safari
type: Question
score: 2
downvote count: 0
tagged with: mobile-safari
tagged with: javascript
has title: Is it possible to detect (with CSS or JavaScript) whether Safari has compact tabs enabled?
tagged with: css
has body: If you're not familiar, Safari on macOS and iPadOS supports compact tabs in Safari, which lets the top of the screen bleed up into the UI chrome, similar to how the top of a page bleeds into the status bar in PWA mode in iOS/iPadOS. Because I'm using the theme color to match the top of the page, I want to round the corners of my sidebar so it's not just a flat edge. Example of the look I'm going for (see the border radius atop the green sidebar): However, for normal tabs, it'd look better without this border radius. I already use JS/CSS to scope this to just PWAs (detected with window.matchMedia &amp;&amp; window.matchMedia('(display-mode: standalone)').matches), but I'm wondering if Apple has exposed a way to determine if the user has compact tabs enabled. Since the feature isn't on by default and it's lesser-known, I wonder if this is possible and just isn't documented because I am, in fact, the first person to care about this.
answer count: 0
upvote count: 2
type: UnansweredQuestion
favorite count: 0

http://stackoverflow.com/comment/139304818
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/79002045
type: Comment
has text: So I fixed the issue with below few lines of CSS code .elementor-widget-n-menu .e-n-menu-content>.e-con:not(.e-active){ display: flex !important; } .e-n-menu-content { overflow: hidden; max-height: 0; transition: max-height 700ms linear; } .e-n-menu-item:hover .e-n-menu-content { max-height: 700px; transition: max-height 700ms linear; }

http://stackoverflow.com/comment/139355191
type: Comment
type: QuestionComment
score: 0
comment on: http://stackoverflow.com/q/79031158
has text: Iphone 12 and in Safari

http://stackoverflow.com/q/79013313
favorite count: 0
tagged with: http://stackoverflow.com/tag/html
type: Question
linked to: http://stackoverflow.com/q/8969381
has body: Why does the button behave like a block element if it is an inline element? I mean, it gets padding, margin, width, and height. .btn-3 { background-color: #8000ff; border-radius: 5px; padding: 80px; width: 300px; height: 250px; margin: 5em; } button 1
score: 0
upvote count: 1
answer count: 0
duplicate of: http://stackoverflow.com/q/68654652
tagged with: css
has title: If tag is an inline element, why it behaves like a block element?
downvote count: 1
type: UnansweredQuestion

http://stackoverflow.com/comment/139150593
score: 0
has text: the website was tested with firefox
type: QuestionComment
comment on: http://stackoverflow.com/q/78922736
type: Comment

http://stackoverflow.com/comment/139400992
has text: Excellent. This is perfect and very clever. Thanks. It took me a bit to digest your solution because I don't use CSS everyday.
comment on: http://stackoverflow.com/a/79051990
type: Comment
score: 0
type: AnswerComment

http://stackoverflow.com/a/79063773
type: AcceptedAnswer
has body: If I understood you correctly, perhaps this example can help you: .container { --skew: 300px; /* <= adjust as you need */ display: flex; width: 100%; height: 300px; position: relative; } .left, .right { width: calc(50% + var(--skew) / 2); height: 200px; position: absolute; } .left { background-color: #4CAF50; clip-path: polygon(0 0, 100% 0, calc(100% - var(--skew)) 100%, 0 100%); left: 0px; } .right { background-color: #2196F3; clip-path: polygon(var(--skew) 0, 100% 0, 100% 100%, 0 100%); right: 0; } .left:before { content: ''; width: var(--skew); height: 100%; float: right; shape-outside: polygon(var(--skew) 0, 100% 0, 100% 100%, 0 100%); } .right:before { content: ''; width: var(--skew); height: 100%; float: left; shape-outside: polygon(0 0, 100% 0, calc(100% - var(--skew)) 100%, 0 100%); } Lorem Ipsum asj sjas hhjks hskj hsjkas hkjas hakjsh skjh skj hsakj sakja shkjas hkjsa hskj hskjs hkjshakjsh sksah kjlash akjshskjasha kjsl Lorem Ipsum asj sjas hhjks hskj hsjkas hkjas hakjsh skjh skj hsakj sakja shkjas hkjsa hskj hskjs hkjshakjsh sksah kjlash akjshskjasha kjsl Lorem Ipsum asj sjas hhjks hskj hsjkas hkjas hakjsh skjh skj hsakj sakja shkjas hkjsa hskj hskjs hkjshakjsh sksah kjlash akjshskjasha kjsl Lorem Ipsum asj sjas hhjks hskj hsjkas hkjas hakjsh skjh skj hsakj sakja shkjas hkjsa hskj hskjs hkjshakjsh sksah kjlash akjshskjasha kjsl Lorem Ipsum asj sjas hhjks hskj hsjkas hkjas hakjsh skjh skj hsakj sakja shkjas hkjsa hskj hskjs hkjshakjsh sksah kjlash akjshskjasha kjsl Lorem Ipsum asj sjas hhjks hskj hsjkas hkjas hakjsh skjh skj hsakj sakja shkjas hkjsa hskj hskjs hkjshakjsh sksah kjlash akjshskjasha kjsl Lorem Ipsum asj sjas hhjks hskj hsjkas hkjas hakjsh skjh skj hsakj sakja shkjas hkjsa hskj hskjs hkjshakjsh sksah kjlash akjshskjasha kjsl Lorem Ipsum asj sjas hhjks hskj hsjkas hkjas hakjsh skjh skj hsakj sakja shkjas hkjsa hskj hskjs hkjshakjsh sksah kjlash akjshskjasha kjsl In this example, I take into account that text can be in both blocks. By changing th…
type: Answer
downvote count: 0
upvote count: 1
answers question: http://stackoverflow.com/q/79063602
accepted answer of: http://stackoverflow.com/q/79063602
score: 1
has comment: http://stackoverflow.com/comment/139417127

http://stackoverflow.com/q/78916931
has title: The :not() CSS pseudo-class not working as expected
accepted answer: http://stackoverflow.com/a/78916942
type: Question
has body: A simple one, why :not(.theme) small{ font-size: 40px; } :not(.theme *) small{ text-decoration: underline; } *:not(.theme *) small{ font-weight: bold; } is taking effect on all small html element? My assumption is that only small elements which are not descendants of a parent with the class theme get affected. Same goes to :not(.theme *) .small-class{ text-transform: capitalize; } is affecting all element with small-class. body { background: #6e28d9; padding: 0 24px; color: white; /* Change my color to yellow */ margin: 0; height: 100vh; display: flex; justify-content: center; align-items: center; flex-direction: column; gap:20px; } .theme small { color: black; } :not(.theme) small{ font-size: 40px; } :not(.theme *) small{ text-decoration: underline; } *:not(.theme *) small{ font-weight: bold; } small:not(.theme *){ letter-spacing: 10px; } :not(.theme *) .small-class{ text-transform: capitalize; } pure small small with theme parent small-class with theme parent small-class with theme parent Indeed, someone may have better idea on how to apply styling on small element which is not a decendant of any parent with class theme Here is a little snippet of the rendered result
answer count: 1
type: AnsweredQuestion
score: 0
tagged with: sass
has answer: http://stackoverflow.com/a/78916942
tagged with: css

vite
tag name: vite
tags question: http://stackoverflow.com/q/79060298
tags question: http://stackoverflow.com/q/79003218
tags question: http://stackoverflow.com/q/79013530
type: Tag
tags question: http://stackoverflow.com/q/79138425
tags question: http://stackoverflow.com/q/79084821
tags question: http://stackoverflow.com/q/79181747
tags question: http://stackoverflow.com/q/79076322
tags question: http://stackoverflow.com/q/79164223
tags question: http://stackoverflow.com/q/79170242
tags question: http://stackoverflow.com/q/79198186
tags question: http://stackoverflow.com/q/79246510
tags question: http://stackoverflow.com/q/79320626
tags question: http://stackoverflow.com/q/79399598
tags question: http://stackoverflow.com/q/79389181
tags question: http://stackoverflow.com/q/79383758
tags question: http://stackoverflow.com/q/79457066
tags question: http://stackoverflow.com/q/79487101
tags question: http://stackoverflow.com/q/79443221
tags question: http://stackoverflow.com/q/79534486
tags question: http://stackoverflow.com/q/79515773
tags question: http://stackoverflow.com/q/79515121
tags question: http://stackoverflow.com/q/79474219

http://stackoverflow.com/comment/139135842
comment on: http://stackoverflow.com/q/78914728
type: Comment
score: 0
type: QuestionComment
has text: This is because your form in the dialog box should be like this: ` `

http://stackoverflow.com/comment/139197892
type: QuestionComment
comment on: http://stackoverflow.com/q/78948434
has text: Can you edit your question to show what you've tried with `mask-size`?
score: 0
type: Comment

http://stackoverflow.com/a/78948809
type: Answer
has comment: http://stackoverflow.com/comment/139210212
has comment: http://stackoverflow.com/comment/139210232
downvote count: 0
has comment: http://stackoverflow.com/comment/139210226
upvote count: 1
has comment: http://stackoverflow.com/comment/139204809
answers question: http://stackoverflow.com/q/78948718
score: 1
has body: So, I think the problem lies here: The problem with simply removing the above rule is that browsers use color:fieldtext for textareas, color:buttontext for buttons, etc. which I don't want. By default, the p tag is also using a default colour provided by the browser, and I don't believe that you've overridden that if you're getting the behaviour you're describing here (otherwise your p would also behave the same as your textarea). However, you've explicitly told the textarea to inherit its colour (which will always be from the last actual explicit colour definition, not from a system colour) --- and besides, even if it inherited the default colour from the p tag, you've stated you don't want to use the browser default colours anyways (most good CSS resets want to set the default colour explicitly anyway, in case the user has set their default browser stylesheet to have something wacky, and this seems like an especially good idea if you want to support light mode / dark mode). So, how should it know what colour to use in dark mode vs what colour to use in light mode if you haven't defined them? The color: inherit rule works perfectly fine if you define the colours you want to use somewhere high up, and change them along with the theme, e.g: body { color: light-dark(#111, #eee); background-color: light-dark(#eee, #111); color-scheme: light dark; } textarea { color: inherit; } Some text Test!

http://stackoverflow.com/comment/139208927
score: 0
type: QuestionComment
has text: @TemaniAfif I love the mask method but its an inner mask and not an outer. Also I am not able to box shadow a mask. Are you?
comment on: http://stackoverflow.com/q/78953076
type: Comment

http://stackoverflow.com/a/79015918
has comment: http://stackoverflow.com/comment/139325948
score: 0
answers question: http://stackoverflow.com/q/79015795
has comment: http://stackoverflow.com/comment/139325053
has body: To create a really simple CSS progress-bar, use a single DIV element with a linear-gradient background-image. Pass the percentage value using CSS Custom Properties (Variables) like i.e: --percent:80; or just --p:80; .progress-bar { --p: 0; margin: 0.5em; height: 2rem; border-radius: 2rem; border: 1px solid blue; background-image: linear-gradient(90deg, blue calc(var(--p)*1%), lightblue calc(var(--p)*1%)); } If you need the value visible inside the progress-bar, use a ::before or ::after pseudo-element: .progress-bar { --p: 0; margin: 0.5em; height: 2rem; border-radius: 2rem; border: 1px solid blue; background-image: linear-gradient(90deg, blue calc(var(--p)*1%), lightblue calc(var(--p)*1%)); overflow: hidden; &::after { counter-reset: p var(--p); content: counter(p) "%"; line-height: 2em; color: #fff; margin-left: max(0rem, calc(var(--p)*1% - 2rem)); } } If you need multiple segments, use multiple --p* properties .progress-bar { --p: 0; margin: 0.5em; height: 2rem; border-radius: 2rem; border: 1px solid blue; background-image: linear-gradient(90deg, blue calc(var(--p1)*1%), lightblue calc(var(--p1)*1%), lightblue calc(var(--p2)*1%), lightgray calc(var(--p2)*1%) ); }
type: Answer

http://stackoverflow.com/comment/139308996
type: QuestionComment
comment on: http://stackoverflow.com/q/79006685
score: 0
type: Comment
has text: @AHaworth I have used only. but i will try finding <style.> and get back to you.

http://stackoverflow.com/a/79036255
answers question: http://stackoverflow.com/q/79036207
has body: This is because .navbar is trying to scale based on the height of the #wrapper, but with height: auto; it doesn't have a defined height. To fix it, you can use display: flex; for #wrapper and reorder the .navbar with order: 2;: body { height: 100%; width: 100%; margin: 0; } #wrapper { width: 800px; background-color: rgba(77, 77, 77, 0.558); text-align: center; margin: 20px auto 0; border: 3px rgb(189, 189, 189) solid; border-bottom-left-radius: 30px; border-bottom-right-radius: 30px; display: flex; /* using flexbox */ } .container { margin-top: 20px; } .navbar { width: 25%; border-left: 3px rgb(189, 189, 189) solid; border-bottom-right-radius: 27px; order: 2; /* to move the .navbar to the right */ } .content { width: 75%; } .box1 { height: min-content; width: 100%; border-bottom: 3px rgb(189, 189, 189) solid; } Box1 Box1 Box1 Box1 Box1 Box1 Box2 Box2 Box2 Box2 Box2 Box2
type: Answer
score: 0

http://stackoverflow.com/comment/139195056
type: QuestionComment
has text: Sorry if I did this wrong. I'm new to the CS field.
comment on: http://stackoverflow.com/q/78946868
type: Comment
score: 0

http://stackoverflow.com/comment/139274781
type: AnswerComment
has text: Thanks @AHaworth! Actually, I was thinking about container queries. But I give an answer that I knew and applied self. I see your answer and will try to understand it. )) Best regards.
comment on: http://stackoverflow.com/a/78983496
type: Comment
score: 0

http://stackoverflow.com/q/79002283
linked to: http://stackoverflow.com/q/16813220
score: 0
type: UnansweredQuestion
duplicate of: http://stackoverflow.com/q/16813220
tagged with: hover
tagged with: http://stackoverflow.com/tag/html
type: Question
has body: I'm currently making a website using css and html, and I have an image (naturally skewed 7 degrees) that I want to rotate back to 0 degrees when the cursor is hovered over it. But of all the methods I find online, none of them work. I added an ID tag to the image, then adding a css class with that ID with a transform effect, with the pseudo class :hover but that didn't work, the image didn't do anything when hovered over it. I'll show my code below, if anyone can provide insight. .rotateImg { width: auto; transition: transform 0.5s ease; } .rotateImg:hover { transform: rotate(-7deg); } &lt;img src="https://i.imgur.com/1lAFovT.png" class="rotateImg" style="border-radius: 10px; border: 5px solid #FF8600; width: 100%; transform:rotate(7deg);"&gt;
has title: How do I get my image hover effect to work?
has comment: http://stackoverflow.com/comment/139297188
tagged with: css
answer count: 0

http://stackoverflow.com/q/79058673
score: -1
has comment: http://stackoverflow.com/comment/139399984
tagged with: css
duplicate of: http://stackoverflow.com/q/52015737
has title: Not able to change theme by checkbox:checked
has answer: http://stackoverflow.com/a/79058734
linked to: http://stackoverflow.com/q/52015737
accepted answer: http://stackoverflow.com/a/79058734
has comment: http://stackoverflow.com/comment/139399844
favorite count: 0
tagged with: http://stackoverflow.com/tag/html
type: Question
answer count: 1
downvote count: 1
has body: While trying to change the variable by checkbox:checked the variable is not getting changed for body element. HTML: Project Manager App Title CSS: :root { --primary: black; --secondary: white; } body { background: var(--secondary); } header { color: var(--primary); background: var(--secondary); } .checkbox:checked ~ * { --primary: black; --secondary: white; } This works for all other elements but not for body. How I can change variable for body too. Using js is the last option, but can anyone help me with css. So according to code when checkbox checked the background and color of elements should be changed, but the background of is not getting changed.
upvote count: 0
type: AnsweredQuestion

http://stackoverflow.com/a/79089955
answers question: http://stackoverflow.com/q/79067108
has comment: http://stackoverflow.com/comment/139464056
has comment: http://stackoverflow.com/comment/139467255
type: Answer
has body: Adding a min-width: 0 to the details element will resolve the issue. Like so: body { display: grid; } details { min-width: 0 /*this fixes the issue*/ } .wrapper { overflow-x: scroll; } .rect { width: 1000px; height: 20px; background: linear-gradient(to left, red, green); } &lt;details&gt; &lt;div class="wrapper"&gt; &lt;div class="rect"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/details&gt; Explanation, from this answer, is the following: By default, a grid item cannot be smaller than the size of its content. Grid items have an initial size of min-width: auto and min-height: auto. You can override this behavior by setting grid items to min-width: 0, min-height: 0 or overflow with any value other than visible. From the spec: 6.6. Automatic Minimum Size of Grid Items To provide a more reasonable default minimum size for grid items, this specification defines that the auto value of min-width / min-height also applies an automatic minimum size in the specified axis to grid items whose overflow is visible. (The effect is analogous to the automatic minimum size imposed on flex items.)
score: 0

http://stackoverflow.com/comment/139157980
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78924322
has text: @Brett Donald if a column cell (``` ```) already has a background colour and I add the ```col_red``` class to the corresponding ``` ``` tag then all the columns cells must be colored according to the ```col_red``` class rools

http://stackoverflow.com/comment/139142464
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78917857
has text: I can't modify the html (unless modifying my components which I'd rather not), but I can style freely in css.
type: Comment

http://stackoverflow.com/a/78990598
has body: You can add a flexbox to the direct children of the grid // apply to every direct child of your grid .canister-a .content-d > * { display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; } :root { --primary-color: #00605f; --secondary-color: #017479; --text-dark: #0f172a; --text-light: #94a3b8; --white: #ffffff; --hover-color: #E5E4E2; --max-width: 1400px; } .canister-a { background-color: var(--primary-color); color: var(--white); max-width: var(--max-width); border-radius: 7px; padding: 1%; margin: 2% auto; margin-top: 10px; display: flex; flex-direction: column; } .canister-a .content-d { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "pricing-card-a pricing-card-b pricing-card-c"; } .canister-a .content-d>* { display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; } .price-card-a { grid-area: pricing-card-a; border-right: 0.1px solid #ffffff; padding: 1.5rem; } .price-card-b { grid-area: pricing-card-b; border-right: 0.1px solid #ffffff; padding: 1.5rem; } .price-card-c { grid-area: pricing-card-c; padding: 1.5rem; } .price-card-a h2, .price-card-b h2, .price-card-c h2 { color: var(--white); font-weight: 400; background: var(--secondary-color); text-align: center; border-radius: 7px; } .price-card-a h4, .price-card-b h4, .price-card-c h4 { color: var(--white); font-size: 1.5rem; } .price-card-a span, .price-card-b span, .price-card-c span { margin: .2rem; } .content-d ul { list-style: none; } .content-d li { line-height: 1.5rem; margin-bottom: 10px; } .content-d button { padding: .75rem 2rem; outline: 1px solid var(--white); border: none; font-size: 1rem; font-weight: 600; color: var(--white); background-color: var(--primary-color); cursor: pointer; border-radius: 7px; } .content-d button>a { text-decoration: none; color: var(--white); } .content-d button:hover, .content-d button:focus { background: var(--secondary-color); } Lorem ipsum dolor sit amet, consectetur adipiscin…
type: Answer
answers question: http://stackoverflow.com/q/78990560
score: 0

http://stackoverflow.com/comment/139245159
comment on: http://stackoverflow.com/q/78974046
has text: setAttribute() does not process CSS escape sequences properly. The browser sees the exact string Lato\\2c \\20 Helvetica\\20 Neue\\2c \\20 Helvetica\\3b instead of translating it to Lato, Helvetica Neue, Helvetica.
type: Comment
type: QuestionComment
score: 0

http://stackoverflow.com/comment/139399936
comment on: http://stackoverflow.com/q/79058686
type: Comment
has text: You could use `w-full max-w-96 aspect-square` on each img element. Flex Children grow and shrink per default. But you gave them a fixed size so they cannot grow or shrink. With `w-full max-w-96` they have a dynamic width up to `96`
score: 0
type: QuestionComment

http://stackoverflow.com/comment/139270597
type: Comment
score: 0
type: AnswerComment
has text: @user2804429 I was almost able to get the behavior I want by setting `background-size: contain`. (Setting it to `100% auto` didn't shrink oversized images to fit.) Now any image, either too-small or too-large, is scaled to fit. That means the too-small images are enlarged, which I didn't particularly want, but it's better than having too-large images get cropped. Is there a way to get containment for oversized images, without enlargement for undersized ones?
comment on: http://stackoverflow.com/a/78986353

http://stackoverflow.com/q/79000282
tagged with: css
has comment: http://stackoverflow.com/comment/139294812
type: Question
tagged with: css-selectors
score: 2
tagged with: visibility
upvote count: 2
has answer: http://stackoverflow.com/a/79001043
answer count: 1
type: AnsweredQuestion
favorite count: 0
has comment: http://stackoverflow.com/comment/139293535
tagged with: http://stackoverflow.com/tag/html
has title: Is focus change in HTML instant for CSS purposes?
downvote count: 0
has body: I have a pair of inputs, where the second input is like a "dropdown": it should only appear when the first input is focused, and then it should be focusable and editable until the focus moves away from the inputs completely. I tried to implement this using CSS :focus selectors. input.conditional { display: none; } input.conditional:focus { display: block; } input.main:focus~input.conditional { display: block; } However, when I focus on the first input, and then try to click on (or TAB into) the second input, it immediately disappears. It looks as if it becomes display: none and unfocusable before it can receive focus. I tried intercepting the focus/blur events, and even though blur properly has the second input as relatedTarget, there is no follow-up focus event for the second input. Is there supposed to be a "gap" in focus transition, where the first input no longer has :focus, but the second input doesn't have :focus yet?
accepted answer: http://stackoverflow.com/a/79001043
has comment: http://stackoverflow.com/comment/139300074

http://stackoverflow.com/comment/139164156
comment on: http://stackoverflow.com/q/78929847
has text: That will not answer your question but correct the closing a tag <\a> to
type: Comment
score: 0
type: QuestionComment

http://stackoverflow.com/q/79065331
has comment: http://stackoverflow.com/comment/139412225
tagged with: css
has comment: http://stackoverflow.com/comment/139412253
has comment: http://stackoverflow.com/comment/139412360
downvote count: 1
tagged with: angular
has comment: http://stackoverflow.com/comment/139412599
has body: My Angular project is based on version 18.2.0 and I also installed Bootstrap. The command I used is install bootstrap is : npm install bootstrap In angular.json I've updates the "styles array" and "scripts array". In app.componemt.html, I've added a simple button. I launched the application using "ng serve" When opening the browser with http://localhost:4200/ , nothing is displayed and in DevTools there is an error: "ERROR InvalidCharacterError: Failed to execute 'setAttribute' on 'Element': 'btn-primary”' is not a valid attribute name." It seems as if Bootstrap is not loaded correctly. What is the cause that Bootstrap is not loaded ?
favorite count: 0
tagged with: bootstrap-5
has comment: http://stackoverflow.com/comment/139412237
has title: Angular 18.2.0 with bootstrap 5.3.3 is not working
accepted answer: http://stackoverflow.com/a/79065772
has comment: http://stackoverflow.com/comment/139412745
type: Question
answer count: 1
type: AnsweredQuestion
score: 0
upvote count: 1
has comment: http://stackoverflow.com/comment/139412220
has answer: http://stackoverflow.com/a/79065772

http://stackoverflow.com/q/78970281
type: Question
has comment: http://stackoverflow.com/comment/139242154
score: 0
tagged with: css
has title: How to set a background image using object-fit and have it fill the parent container without setting a height for the parent?
answer count: 0
type: UnansweredQuestion
has body: Some Text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt magna quis nibh congue hendrerit. Maecenas ultricies diam eget diam volutpat, a posuere leo varius. Pellentesque varius nulla nec felis dapibus, vel varius turpis dignissim. Suspendisse porttitor cursus orci vitae rutrum. .parent { position: relative; } .background { position: relative; z-index: 10; width: 100% !important; height: 100% !important; max-width: none !important; top: 0; left: 0; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; } .content { position: absolute; top: 0; z-index: 11; width: 100%; height: 100%; padding: 0 3rem; } I need to be able to have a flexible height on the parent div that is dependent on the content within it, with the image filling the entire space behind the content; using a background image is not an option, nor is setting an exact height.

http://stackoverflow.com/a/78944990
has body: Using doget() and inline stylesheet function doGet() { template = HtmlService.createTemplateFromFile('index'); return template.evaluate(); } Add this in the head tag. Edit this code since this is for example only: Then add this link rel to use bootstrap or any custom CSS framework online since there's no way for you to add .css file. Reference: link rel adding css inline
answers question: http://stackoverflow.com/q/78944941
score: 1
type: AcceptedAnswer
downvote count: 0
type: Answer
accepted answer of: http://stackoverflow.com/q/78944941
upvote count: 1

http://stackoverflow.com/comment/139222648
has text: Can you share the current UI or a working code snippet so that we can understand your problem better?
type: Comment
score: 1
comment on: http://stackoverflow.com/q/78961939
type: QuestionComment

http://stackoverflow.com/comment/139152796
type: Comment
score: 0
type: QuestionComment
has text: No need to experiment: open your Firefox dev tools, and just look at what font the browser knows it applied (not as CSS property, but as actual rendering. There's a dedicated font tab, and hovering over fonts will highlight all text that uses that font on the page. Incredibly valuable dev tools panel)
comment on: http://stackoverflow.com/q/78923710

http://stackoverflow.com/q/79052269
answer count: 1
type: AnsweredQuestion
accepted answer: http://stackoverflow.com/a/79058398
tagged with: css
has title: How to make a nested list NOT inherit it's parents styling
has answer: http://stackoverflow.com/a/79058398
has body: I have some lists on my page that are nested, and I'm having an issue with styling them the way I want. When each list item is hovered, I want the background of the item to be a colour and for the text the change from black to white, or blue to white depending on if it's a link or not. I can get this to work fine, but what I DON'T want is for the parent to a submenu to highlight ALL the links inside of it when the parent is hovered over. For instance, say I have a list-item called 'home' that opens a sublist inside of it. I would only want 'home' the change it's text and background-color on hover, but what's happening is every single link in the submenu is changed when 'home' is hovered over. I know why this happens, but I want to know how to stop it. I've tried it with closing the initial lists tag, but that's not the right way to do it and it screws up the styling of the lists anyways. Is there anyway I can achieve what I want? I have noticed this seems to only happen if the start of the nested link is a link. Below is a snippet of the lists I'm trying to work with. (I've changed the link hover to grey so you can hopefully see what I'm talking about.) .filesubmenu { display: block; position: absolute; width: 164px; top: 0; left: 0; background-color: #bdbebd; border-top: 1px #dedfde solid; border-right: 1px #000 solid; border-bottom: 1px #000 solid; border-left: 1px #dedfde solid; outline: 1px #fff outset; outline-offset: -2px; } .filestab ul li { display: block; padding-right: 16px; padding-left: 5px; width: calc(100% - 1px); height: 20px; text-align: left; font-family: "Arial"; font-size: 12px; } .filestab ul li:hover { background-color: #00007b; color: #fff; } .filestab ul li a { color: #0000ff; } .filestab ul li:hover a { color: #fff; } .filepop1, .filepop2 { display: block; position: absolute; outline: white 1px outset; outline-offset: -2px; border-right: 1px #000 solid; border-top: 1px #dedfde solid; border-left: 1px #dedfde solid; border-bottom: 1px #000 sol…
score: 0
type: Question

http://stackoverflow.com/comment/139232030
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78966857
has text: can you please include a complete [minimal working example](https://stackoverflow.com/help/minimal-reproducible-example)?
type: QuestionComment

http://stackoverflow.com/comment/139294645
type: Comment
score: 0
comment on: http://stackoverflow.com/a/79000845
type: AnswerComment
has text: @SynRain my question was: "why am i not inheriting `:hover` from the parent layer and as a result i don't get the transition from `rebeccapurple` to `red`?" That was my question.

http://stackoverflow.com/a/79000508
answers question: http://stackoverflow.com/q/78997824
type: Answer
has body: I don't see any reason to avoid clip-path. But another way to do it would be with pseudo-elements and gradient backgrounds. button { --slant-height: 1em; --left-border-width: 2px; display: inline-block; font-size: 20px; background: #f3f46a; border: 0; padding: 0.5em 1em; position: relative; margin: var(--slant-height) 0; } button, button::before, button::after { border-left: var(--left-border-width) solid #fdd748; } button::before, button::after { content: ''; position: absolute; width: 100%; height: var(--slant-height); left: calc(var(--left-border-width) * -1); } button::before { top: calc(var(--slant-height) * -1); background: linear-gradient(to bottom right, rgba(243,244,106,0) 50%, rgba(243,244,106,1) 50%); } button::after { top: 100%; background: linear-gradient(to top right, rgba(243,244,106,0) 50%, rgba(243,244,106,1) 50%); } Miss Smith Ellen Mrs Annabelle McCluskey-Jones
score: 0

http://stackoverflow.com/comment/139311859
comment on: http://stackoverflow.com/q/79009672
type: QuestionComment
has text: @AHaworth yes , it should be 3D .. in image one , imagine fixed top-right side of triangle .. then flip triangle .
score: 0
type: Comment

http://stackoverflow.com/comment/139379789
score: 1
type: QuestionComment
has text: Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a **Stack Snippet** using the `<>` icon.. Although you have provided a link, if it was to become invalid, your question would be of no value to other future SO users with the same problem. See [**Something in my website/example doesn't work can I just paste a link**](http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to-it).
comment on: http://stackoverflow.com/q/79047361
type: Comment

http://stackoverflow.com/comment/139225098
comment on: http://stackoverflow.com/q/78962822
type: Comment
score: 0
has text: See answer just put up. Whether your solution is 'good' would be to give an 'opinion' which is frowned on on SO. I would prefer not to have special settings, especially of fixed px values, where possible in order to maintain responsiveness.
type: QuestionComment

http://stackoverflow.com/comment/139178994
type: AnswerComment
has text: Second does allow more programmatic generation but can get tricky to support different "source" color value formats.
comment on: http://stackoverflow.com/a/78938004
type: Comment
score: 3

http://stackoverflow.com/a/79058690
has comment: http://stackoverflow.com/comment/139399799
type: Answer
answers question: http://stackoverflow.com/q/79058686
has comment: http://stackoverflow.com/comment/139399822
score: -1
downvote count: 1
upvote count: 0

http://stackoverflow.com/comment/139315844
type: Comment
type: AnswerComment
score: 0
has text: but I can't get the select and select2 boxes to occupy the remaining width of the form
comment on: http://stackoverflow.com/a/79012509

http://stackoverflow.com/a/78943282
type: AcceptedAnswer
has body: You can try the below CSS. Might need to align using padding. The fix involves removing display: flex with block and inline-block so that it goes to the full width. Finally on the child, we use display: flex; justify-content: space-between to make the elements located end to end. .custom-treeview .k-treeview-top, .custom-treeview .k-treeview-mid, .custom-treeview .k-treeview-bot { display: block !important; } .custom-treeview .k-treeview-leaf { display: inline-block !important; width: 100% !important; } .custom-treeview .k-treeview-leaf &gt; span { display: flex !important; justify-content: space-between !important; } Stackblitz Demo
type: Answer
answers question: http://stackoverflow.com/q/78943212
accepted answer of: http://stackoverflow.com/q/78943212
score: 0

http://stackoverflow.com/comment/139147667
type: QuestionComment
comment on: http://stackoverflow.com/q/78921073
type: Comment
has text: Error: scrollArea is null
score: 0

http://stackoverflow.com/a/79051668
answers question: http://stackoverflow.com/q/79051162
has comment: http://stackoverflow.com/comment/139387446
type: Answer
downvote count: 1
score: 0
has body: For the desired outcome, first wrap the whole text in one div. Now, your code should look something like this looks like this: Your Heading ODOUR FREE AUTOMATED FAST PROCESSING Designed for the kitchen, the in-vessel composting system, LIDA reduces kitchen food waste through an automated process. By providing optimal conditions for the microorganisms, LIDA improves the composting process drastically, cutting processing time to roughly a week and curing time to a month. The result is high quality fertiliser that is nutritious for the soil. Now remove position:relative from css #composting-machine { display: inline-block; width: 25em; float: right; } #composting-machine { display: inline-block; width: 25em; float: right; } Your Heading ODOUR FREE AUTOMATED FAST PROCESSING Designed for the kitchen, the in-vessel composting system, LIDA reduces kitchen food waste through an automated process. By providing optimal conditions for the microorganisms, LIDA improves the composting process drastically, cutting processing time to roughly a week and curing time to a month. The result is high quality fertiliser that is nutritious for the soil.
has comment: http://stackoverflow.com/comment/139391786
upvote count: 1

http://stackoverflow.com/comment/139274497
score: 1
type: Comment
type: AnswerComment
comment on: http://stackoverflow.com/a/78989599
has text: Have you tried slightly magnifying the offsets - to cut a little more off should there be a sort of rounding-type error?

http://stackoverflow.com/comment/139293359
type: Comment
comment on: http://stackoverflow.com/q/79000174
score: 0
has text: Ah I see what you mean now, did not read the question careful enough : \
type: QuestionComment

http://stackoverflow.com/comment/139336561
type: Comment
comment on: http://stackoverflow.com/q/79020132
score: 0
type: QuestionComment
has text: I don't feel like writing. Here's my example of how to center a map [fitBounds-with-padding](https://tomickigrzegorz.github.io/leaflet-examples/#25.fitBounds-with-padding)

http://stackoverflow.com/a/78917362
has comment: http://stackoverflow.com/comment/139151685
upvote count: 0
has comment: http://stackoverflow.com/comment/139151656
answers question: http://stackoverflow.com/q/78917282
type: Answer
has comment: http://stackoverflow.com/comment/139151662
score: -1
has body: You can try replacing the relevant css classes with the following code: html, body { height: 100%; margin: 0; overflow-y: auto; } body { font-family: 'CascadiaMonoNF', sans-serif; background-color: #221a2e; color: #EACDC2; display: flex; } .scale-container { transform: none; transform-origin: center; display: flex; box-sizing: border-box; position: static; } .container { width: 100%; background-color: #221a2e; padding: 20px; box-sizing: border-box; } .code-container { display: flex; align-items: flex-start; } .line-numbers { width: 50px; background-color: #2C1F35; color: #6C4F6D; padding: 0 5px; text-align: right; font-size: 1em; line-height: 1.2em; border-right: 1px solid #3A2B3A; } .line-number { margin-bottom: 0; line-height: 1.2em; } .code-content { padding-left: 9.99px; flex: 1; line-height: 1.2em; font-size: 1em; } .content-container { background-color: #291e38; margin-left: -10.5px; max-width: calc(100% - 50px); } .header-container { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0; } h1 { font-size: 1em; margin: 0; color: #C66976; } .social-icons { display: flex; } .social-icons a { color: #EACDC2; font-weight: normal; text-decoration: none; margin-left: 10px; } .social-icons a:hover { text-decoration: underline; color: #C66976; } .intro-list { list-style-type: none; padding-left: 20px; margin: 0; } .intro-list li { font-size: 1em; font-weight: normal; margin-bottom: 0; color: #EACDC2; } section { margin: 0; } h3 { font-size: 1em; margin: 0; color: #9266BD; } .projects h3 { font-size: 1em; margin: 0; } .projects .project-link { font-size: 1em; color: #EACDC2; font-weight: normal; text-decoration: none; } shrijan 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 shrijan twitter linkedin github 21 years old software developer east coast based interest in SWE, systems design, ML/AI projects linux simulator bloons in the terminal text file data aggregator queue buster (wip) languages proficient c++/c java & javascript python learning …
downvote count: 1

http://stackoverflow.com/comment/139263013
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78975874
type: QuestionComment
has text: @MarkSchultheiss Fortunately just working with linebreak and bold tags in this scenario.

http://stackoverflow.com/q/79060590
type: Question
tagged with: http://stackoverflow.com/tag/html
has answer: http://stackoverflow.com/a/79060673
type: AnsweredQuestion
score: 0
possible better answer: http://stackoverflow.com/a/79060673
answer count: 2
has title: Multipanel where content is always the same size, but only one is shown
tagged with: css
has answer: http://stackoverflow.com/a/79061456
accepted answer: http://stackoverflow.com/a/79061456
has body: I'm trying to use CSS/HTML to create a multi-panel widget where users can advance through the different panels. Ideally the next button rests below the content, and doesn't move. To support this, I'd like to make it so that the panels are always the same height (even if one had more content than the other). I've tried using grid to force these to the same height, but if I use display: none then the height of the grid doesn't account for those not displayed elements. If I used visibility: hidden then the hidden panels still take up space in the DOM, but just don't show anything. $('#next-button-display').click(function() { $('#first-display').toggleClass('none'); $('#second-display').toggleClass('none'); }); $('#next-button-vis').click(function() { $('#first-vis').toggleClass('hidden'); $('#second-vis').toggleClass('hidden'); }); .container { background-color: blue; padding: 10px; display: grid; grid-auto-rows: 1fr; } .first { background-color: purple; } .second { background-color: yellow; } .none { display: none; } .hidden { visibility: hidden; } Using display panel one panel two which has two lines Using visibility panel one panel two which has two lines Any ideas for making a reactive solution to this problem?

http://stackoverflow.com/q/79054875
has answer: http://stackoverflow.com/a/79055375
has comment: http://stackoverflow.com/comment/139393214
type: UnansweredQuestion
favorite count: 0
has comment: http://stackoverflow.com/comment/139393203
upvote count: 0
type: Question
score: -3
downvote count: 3
tagged with: http://stackoverflow.com/tag/html
has title: How to make footer sticky to bottom position?
has answer: http://stackoverflow.com/a/79055020
has answer: http://stackoverflow.com/a/79055340
tagged with: javascript
has body: I am trying to make my footer sticky to the bottom of a section. I am using position: fixed, but it is still not working. In other words, I have a section with a width of 30%. I want to add form elements in that section I also need to add a sticky button at the bottom of that section that only covers the 100% width of the section or 30% of page width. Is that feasible? body { height: 100vh } .fixed-footer { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 1300; background: #ffffff; padding: 16px 42px; box-shadow: 0px -3px 4px rgba(0, 0, 0, 0.25); border-top: 1px solid #bebec1; } Add New Contract CANCEL CREATE update if I going with position relative and botton one position absolute. button goes up when scroll
has comment: http://stackoverflow.com/comment/139393206
tagged with: reactjs
answer count: 3
tagged with: jquery
has comment: http://stackoverflow.com/comment/139393390
tagged with: css
has comment: http://stackoverflow.com/comment/139393110

http://stackoverflow.com/q/78967214
accepted answer: http://stackoverflow.com/a/78991625
score: 0
tagged with: javascript
tagged with: css
has comment: http://stackoverflow.com/comment/139234562
has answer: http://stackoverflow.com/a/78991625
type: Question
has title: How do different browsers calculate a CSS translate animation containing images?
has body: I am building a small app with a horizontal infinite scroll animation containing a set of images. In essence, it looks like this: index.html Example main.css *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; font: inherit; } html, body { height: 100%; } body { display: grid; place-items: center; background-color: #1f1f1f; } #container { width: 95vw; padding-inline: 1rem; } #photos_container { overflow: hidden; } #photos_scroller { display: flex; gap: 1rem; width: max-content; animation: slide var(--move_duration, 10s) linear infinite; } #photos_scroller > img { max-height: 50vh; transform: translateZ(0); /* to prevent flickering images */ } @keyframes slide { to { transform: translate(calc(-50% - 0.5rem)); } } In Chrome on a MacBook, this works fine. However, on Safari, as well as in Safari and Chrome (?!?) on an iPad the images are hardly moving. Adding a delay to the animation solves the issue, so my hypothesis is that the animation and the corresponding distance are calculated differently in different browsers. Specifically, in the mentioned cases, I suppose the animation is based on the layout at a point in time when the photos have not yet been downloaded. Also, after tilting the iPad from landscape to portrait and back to landscape orientation the animation runs correctly, so I guess, after the repaint the animation is correctly calculated based on the then available images. Can someone please explain to me the mechanics that are at play here? What is the recommended way to handle this issue, in particular when images are added or removed dynamically with JavaScript?
tagged with: css-animations
answer count: 1
has comment: http://stackoverflow.com/comment/139232652
type: AnsweredQuestion
tagged with: http://stackoverflow.com/tag/html

http://stackoverflow.com/comment/139388378
comment on: http://stackoverflow.com/q/79052168
score: 1
type: Comment
type: QuestionComment
has text: https://getbootstrap.com/docs/4.6/utilities/flex/

http://stackoverflow.com/a/79053860
answers question: http://stackoverflow.com/q/79053699
has comment: http://stackoverflow.com/comment/139391466
has body: You don't need JS at all Fix the border rules * { margin: 0; box-sizing: border-box; } .mobile-container { width: 30%; /* DEMO ONLY */ height: 300px; /* DEMO ONLY */ display: flex; flex-direction: column; align-items: center; } h1 { text-align: center; } .table { display: grid; overflow: auto; border: 1px solid #DCDCDC; border-radius: 0.5rem; width: 90%; box-sizing: border-box; position: relative; } .table header { height: 2.625rem; display: grid; padding: 0.6875rem 1.25rem; color: #8C8C8C; border-bottom: 1px solid #DCDCDC; box-sizing: border-box; background: #FAFAFA; grid-template-columns: repeat(2, 15rem) repeat(2, 5rem); white-space: nowrap; column-gap: 1rem; z-index: 2; top: 0; position: sticky; div:nth-child(1) { display: none; } } .table main { >div { display: grid; grid-template-columns: repeat(2, 15rem) 6rem; row-gap: 0.25rem; column-gap: 1rem; padding: 0.5rem 1.25rem; border: 1px solid #DCDCDC; border-width: 0 0 1px 0; /* Improved borders */ div:first-child { grid-column: 1 / -1; position: sticky; left: 1.25rem; z-index: 1; white-space: nowrap; width: min-content; } } } Mobile version Name Description Price Quantity TV Large color TV 1000 rubles 10 units TV Large color TV 1000 rubles 10 units TV Large color TV 1000 rubles 10 units TV Large color TV 1000 rubles 10 units TV Large color TV 1000 rubles 10 units TV Large color TV 1000 rubles 10 units TV Large color TV 1000 rubles 10 units TV Large color TV 1000 rubles 10 units TV Large color TV 1000 rubles 10 units TV Large color TV 1000 rubles 10 units
type: Answer
score: 0

http://stackoverflow.com/comment/139262620
type: Comment
score: 0
type: AnswerComment
has text: "Ferrars all spirits his imagine effects amongst neither. Sure last upon he same as knew next. End friendship sufficient assistance can prosperous met. As game he show it park do. Was has unknown few certain ten promise. No finished my an likewise cheerful packages we are. For assurance concluded son son something depending discourse see led collected. Packages oh no denoting my advanced humoured. Pressed be so thought natural. "
comment on: http://stackoverflow.com/a/78976989

http://stackoverflow.com/comment/139294498
type: Comment
score: 0
comment on: http://stackoverflow.com/q/79000658
type: QuestionComment
has text: @SyndRain nope, I understand difference between `pseudo-classes` and `pseudo-elements`. When I declare a new rule in a new (later) layer for a concrete element, the browser "forget" about pseudo-classes for the element in parent layer? Am I right? Where can I read about that detailed?

http://stackoverflow.com/comment/139213002
type: Comment
type: QuestionComment
has text: FYI, you appear to be applying the exact formatting across all three of those media queries there - if that is intentional, you should be able to write this as _one_, using a comma as an "or", https://css-tricks.com/logic-in-css-media-queries/#aa-or
score: 1
comment on: http://stackoverflow.com/q/78956764

http://stackoverflow.com/comment/139307717
type: Comment
score: 0
has text: https://www.sitepoint.com/css-custom-range-slider/
type: QuestionComment
comment on: http://stackoverflow.com/q/79007799

http://stackoverflow.com/comment/139170663
has text: Absolutely before Shabbos! :) The authored CSS does come from the theme's CSS. Your suggestion made it less 'slidey' but it still doesn't just appear like this page from the site https://www.twerskitorah.com/sermons/ That one just opens.
comment on: http://stackoverflow.com/a/78933480
type: Comment
score: 0
type: AnswerComment

http://stackoverflow.com/comment/139296897
score: 0
comment on: http://stackoverflow.com/q/78996058
type: QuestionComment
has text: code works as expected, one larger screen image is coming to the left of the form and on smaller screens it disappears, can you show how the mobile view looks for you? What browser are you using?
type: Comment

http://stackoverflow.com/q/78930262
tagged with: http://stackoverflow.com/tag/html
linked to: http://stackoverflow.com/q/24819717
type: Question
accepted answer: http://stackoverflow.com/a/78935950
type: AnsweredQuestion
tagged with: http://stackoverflow.com/tag/svg
answer count: 2
possible better answer: http://stackoverflow.com/a/78930396
has title: Is there a way to add a white border inside this div?
tagged with: css
downvote count: 1
has answer: http://stackoverflow.com/a/78935950
upvote count: 2
has answer: http://stackoverflow.com/a/78930396
score: 1
favorite count: 0
has body: Is there a way to add a white border inside this div like in the picture below? The code below was from https://stackoverflow.com/a/65504158. I just refactored it a bit. .hexagon { width: 200px; display: inline-block; margin: 0 5px; color: orange; filter: url("#goo"); } .mask { display: block; background: currentColor; padding-top: 115%; /* 100%/cos(30) */ clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%); } img { position: absolute; top:0; bottom: 0; left: 0; right:0; width: 100%; height: 100%; } <feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" /> <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo" /> <feComposite in="SourceGraphic" in2="goo" operator="atop" /> I tried to add the border property to the hexagon but it wouldn't show.

http://stackoverflow.com/comment/139305272
type: QuestionComment
has text: Looping over all those elements is rather superfluous to begin with - attribute selectors exist! `$('[data-date="09-22"]')` can select that particular element for you directly - so all you still need to do, is dynamically assemble the `09-22` portion of that, based on the current date, _correctly_ ...
score: 1
type: Comment
comment on: http://stackoverflow.com/q/79006902

html-table
tags question: http://stackoverflow.com/q/78957954
tags question: http://stackoverflow.com/q/78951104
tags question: http://stackoverflow.com/q/78920515
tags question: http://stackoverflow.com/q/78967649
tags question: http://stackoverflow.com/q/78921533
tags question: http://stackoverflow.com/q/78979166
tags question: http://stackoverflow.com/q/78934033
tags question: http://stackoverflow.com/q/78930153
tags question: http://stackoverflow.com/q/78915026
tags question: http://stackoverflow.com/q/79066659
tags question: http://stackoverflow.com/q/78925311
tag name: html-table
tags question: http://stackoverflow.com/q/78929444
tags question: http://stackoverflow.com/q/78918002
tags question: http://stackoverflow.com/q/79033531
tags question: http://stackoverflow.com/q/78935678
tags question: http://stackoverflow.com/q/78970518
type: Tag
tags question: http://stackoverflow.com/q/78998005
tags question: http://stackoverflow.com/q/79233888
tags question: http://stackoverflow.com/q/79203175
tags question: http://stackoverflow.com/q/79111203
tags question: http://stackoverflow.com/q/79221201
tags question: http://stackoverflow.com/q/79119907
tags question: http://stackoverflow.com/q/79413123
tags question: http://stackoverflow.com/q/79359442
tags question: http://stackoverflow.com/q/79292983
tags question: http://stackoverflow.com/q/79255619
tags question: http://stackoverflow.com/q/79293717
tags question: http://stackoverflow.com/q/79350342
tags question: http://stackoverflow.com/q/79277215
tags question: http://stackoverflow.com/q/79377132
tags question: http://stackoverflow.com/q/79289128
tags question: http://stackoverflow.com/q/79489065
tags question: http://stackoverflow.com/q/79493558
tags question: http://stackoverflow.com/q/79546729
tags question: http://stackoverflow.com/q/79513519
tags question: http://stackoverflow.com/q/79439415
tags question: http://stackoverflow.com/q/79447187
tags question: http://stackoverflow.com/q/79435208
tags question: http://stackoverflow.com/q/79450682
tags question: http://stackoverflow.com/q/79438542

http://stackoverflow.com/a/78933008
score: 1
has comment: http://stackoverflow.com/comment/139169631
type: Answer
answers question: http://stackoverflow.com/q/78932696
downvote count: 0
upvote count: 1
has body: Many mobile browsers, including Chrome and Safari, restrict autoplay for videos, particularly those with sound. To provide a positive user experience and save data, these browsers typically block autoplay unless the video is muted. Additionally, some users may have settings enabled, either by default or by choice, to prevent autoplay due to data usage concerns or personal preferences. It is important to ensure that all devices are using the same browser, although be aware that device power modes may occasionally interfere with this. If one of these is the cause, there is virtually no solution.

http://stackoverflow.com/comment/139240427
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78971081
has text: @connexo Is there a way to achieve what I want with css grid at all then? Or should I just try to love it or use some other approach? I'm not gonna lie, I like this one-liner and I tried to avoid using media queries or JavaScript.

http://stackoverflow.com/a/78942960
downvote count: 0
answers question: http://stackoverflow.com/q/78941370
score: 1
upvote count: 1
accepted answer of: http://stackoverflow.com/q/78941370
type: AcceptedAnswer
type: Answer
has body: flex-wrap: wrap; Title paragraph of text. another paragraph of text.

http://stackoverflow.com/a/78942509
has body: I also faced problems like you. Instead of using slide, you can use swiper components for vue if your goal is to just make swiper. This is the code for your requirements. .... Maybe this is useful for your project. You can reference this url. https://swiperjs.com/vue
type: Answer
score: 0
answers question: http://stackoverflow.com/q/78941336

http://stackoverflow.com/comment/139284447
comment on: http://stackoverflow.com/q/78989661
type: QuestionComment
has text: @MatanSanbira it turns out that container units (without explicit `@container `queries) have actually helped a lot. By specifying `container:` CSS properties for the enclosing elements I've been able to replace the `vb` units in my `tbody` heights with `cqb` units and now my tables fit within their containing elements perfectly happy. I didn't yet solve the issue of how to shrink the main list to allow more room for the detail view when the main list is short, but good progress has been made, thanks!
score: 1
type: Comment

http://stackoverflow.com/a/79024053
type: Answer
has body: Why don't you style the tag itself "audio"? Audio elements have the following pseudo-element selectors in CSS: audio::-webkit-media-controls-panel audio::-webkit-media-controls-mute-button audio::-webkit-media-controls-play-button audio::-webkit-media-controls-timeline-container audio::-webkit-media-controls-current-time-display audio::-webkit-media-controls-time-remaining-display audio::-webkit-media-controls-timeline audio::-webkit-media-controls-volume-slider-container audio::-webkit-media-controls-volume-slider audio::-webkit-media-controls-seek-back-button audio::-webkit-media-controls-seek-forward-button audio::-webkit-media-controls-fullscreen-button audio::-webkit-media-controls-rewind-button audio::-webkit-media-controls-return-to-realtime-button audio::-webkit-media-controls-toggle-closed-captions-button audio::-webkit-media-controls-panel audio::-webkit-media-controls-mute-button audio::-webkit-media-controls-play-button audio::-webkit-media-controls-timeline-container audio::-webkit-media-controls-current-time-display audio::-webkit-media-controls-time-remaining-display audio::-webkit-media-controls-timeline audio::-webkit-media-controls-volume-slider-container audio::-webkit-media-controls-volume-slider audio::-webkit-media-controls-seek-back-button audio::-webkit-media-controls-seek-forward-button audio::-webkit-media-controls-fullscreen-button audio::-webkit-media-controls-rewind-button audio::-webkit-media-controls-return-to-realtime-button audio::-webkit-media-controls-toggle-closed-captions-button If this option does not suit you, I recommend creating a div container where you can add .audio-container::before
score: 0
answers question: http://stackoverflow.com/q/79023871

http://stackoverflow.com/q/79009556
has comment: http://stackoverflow.com/comment/139310439
has comment: http://stackoverflow.com/comment/139310676
possible better answer: http://stackoverflow.com/a/79012875
tagged with: http://stackoverflow.com/tag/html
type: Question
has comment: http://stackoverflow.com/comment/139310368
accepted answer: http://stackoverflow.com/a/79017532
type: AnsweredQuestion
score: 0
answer count: 2
tagged with: javascript
has body: I have this function that increases the fontsize of a container depending on the scrollwidth. But When I print the scrollWidth and clientWidth in the while loop, it stays the same. function adjustFontSize(textField) { let fontSize = 10; // Starting font size textField.style.fontSize = fontSize + "px"; // Increment font size until textField no longer fits while (textField.scrollWidth <= textField.clientWidth) { fontSize++; textField.style.fontSize = fontSize + "px"; } } This is my html. I am trying to resize the direct children of playerInfoContainer (the playerInfo classes). Sané 9 (40,9%) Hamm 8 (36,4%) Gulászci 5 (22,7%) This is the css. The parent container is a flexbox but even if I change it to grid it doesn't help. #playerInfoContainer { position: absolute; top: 172px; left: 0; width: 267px; height: 599px; text-align: center; display: flex; flex-direction: column; justify-content: space-around; align-items: center; } .playerInfo { width: 200px; } .playerInfoName { font-family: UberEatsFat; } .playerInfoPercentage { font-size: 25px; font-family: UberEatsRegular; } I tried to set the childrens flex-basis to 0px and flex-shrink to 0, so that the width stays the same. When I am looking in devTools the scrollwidth of the containers that exceed the clientWidth is actually greater so I am only getting the wrong readings when executing my code. Here is a MRE: Document Sané 9 (40,9%) Hamm 8 (36,4%) Gulászci 5 (22,7%)
has title: scrollwidth and clientwidth remain the same while increasing fontsize
has comment: http://stackoverflow.com/comment/139310625
has answer: http://stackoverflow.com/a/79012875
tagged with: css
has answer: http://stackoverflow.com/a/79017532

http://stackoverflow.com/comment/139219681
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78960222
has text: Unfortunately, the results are the same.

http://stackoverflow.com/comment/139259601
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78981776
type: QuestionComment
has text: I tested with a MacBook air 13" and an iMac 27"

http://stackoverflow.com/comment/139357434
comment on: http://stackoverflow.com/q/79021330
type: Comment
type: QuestionComment
score: 1
has text: `player.js` hasn't been updated in 7 years and never went past v0.1; Is it the best choice of player?

http://stackoverflow.com/comment/139345800
has text: @j08691 Thanks for the edit; I do not know how to create that box you added with the live code snippet, but that is very helpful. To answer your question, I don't know which space between the two elements you are referring to, but the hope is that the user's cursor is the pointer (for links) the entire time they are inside the container.
type: Comment
score: 0
comment on: http://stackoverflow.com/q/79028709
type: QuestionComment

http://stackoverflow.com/q/79053699
tagged with: javascript
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139393623
has comment: http://stackoverflow.com/comment/139390953
tagged with: css
type: Question
has title: How prevent moving of tables header while scrolling?
has body: The header little moving up and down while vertical scrolling. I can`t use CSS sticky bacause my parent has horizintal sroll. Keep position of the header on the top of page while scrolling page (vertically). Is it possible to do it? const table = document.querySelector('.table'); const header = document.querySelector('.table header'); window.addEventListener('scroll', function() { const tableRect = table.getBoundingClientRect(); const headerRect = header.getBoundingClientRect(); // Проверяем, когда шапка должна прилипнуть к верхней части экрана if (tableRect.top < 0 && tableRect.bottom > headerRect.height) { const topOffset = Math.abs(tableRect.top); header.style.transform = `translateY(${topOffset}px)`; // Используем translateY для плавного перемещения //header.classList.add('header-fixed'); // Добавляем класс при фиксации } else { header.style.transform = `translateY(0px)`; // Сброс перемещения // header.classList.remove('header-fixed'); // Убираем класс, если шапка не фиксируется } }); .mobile-container { background-color: ; width: 30%; border: 1px solid red; display:flex; flex-direction: column; align-items: center; position:relative; } h1 { text-align: center; } .table { display: grid; /* если поменять на table пропадает горизонтальный скрол, зато шапка таблицы фиксируется наверху */ overflow-x: auto; border: 1px solid #DCDCDC; border-radius: 0.5rem; width: 90%; box-sizing: border-box; position: relative; } .table header { height: 2.625rem; display: grid; padding: 0.6875rem 1.25rem; color: #8C8C8C; border-bottom: 1px solid #DCDCDC; box-sizing: border-box; background: #FAFAFA; grid-template-columns: repeat(2, 15rem) repeat(2, 5rem); white-space: nowrap; column-gap: 1rem; z-index:10; top: 0; position: sticky; /* Используем позицию sticky */ width: 100%; /*transition: transform 0.16s linear, opacity 0.16s linear; */ div:nth-child(1) { display: none; } } .table main { > div { display: grid; grid-template-columns: repeat(2, 15rem) 6rem; row-gap: 0.25rem; column-gap:…
answer count: 1
score: 0
has answer: http://stackoverflow.com/a/79053860
has comment: http://stackoverflow.com/comment/139391133
has comment: http://stackoverflow.com/comment/139391151
tagged with: http://stackoverflow.com/tag/html

http://stackoverflow.com/comment/139397790
type: Comment
score: 0
comment on: http://stackoverflow.com/q/79057467
has text: In general, you can use the DOM inspector (part of devtools) to diagnose where extra space is coming from.
type: QuestionComment

http://stackoverflow.com/q/78960221
downvote count: 1
type: UnansweredQuestion
favorite count: 0
has comment: http://stackoverflow.com/comment/139234363
type: Question
tagged with: http://stackoverflow.com/tag/html
has body: I'm a beginner working on my third or fourth project, and I'm encountering an issue with my keyboard tester application. The project is named KeyMaster, and it works perfectly fine on PC browsers for testing keyboard events. However, I am having trouble getting the virtual keyboard to appear on mobile browsers. Here’s a brief overview of my setup: Repository Link: GitHub - CASIOmax/Keyboard-Tester index.html Code: KeyMaster Press any Keyboard key to see the magic! spirit.js Code: const colorGen = function() { const hex = '0123456789ABCDEF'; let color = '#'; for (let i = 0; i < 6; i++) { color += hex[Math.floor(Math.random() * 16)]; } return color; } const insert = document.getElementById('insert'); const hiddenInput = document.getElementById('hiddenInput'); document.body.addEventListener('touchstart', function() { hiddenInput.focus(); }); window.addEventListener('keydown', function(e) { const rand = colorGen(); insert.innerHTML = ` key keyCode Code ${e.key === " " ? "Space" : e.key} ${e.keyCode} ${e.code} `; insert.style.color = "white"; }); Issue: The virtual keyboard does not appear on mobile browsers when the user touches the screen. I’ve included an invisible input field to trigger the keyboard, but it seems not to work as expected on mobile devices. What I’ve Tried: Ensuring the input field is focused when the screen is touched. Using contenteditable as an alternative. Checking for any CSS or JavaScript that might be interfering. Any suggestions or solutions would be greatly appreciated. Thanks!
has comment: http://stackoverflow.com/comment/139220754
tagged with: browser
score: 0
tagged with: javascript
upvote count: 1
has title: Why Isn't the Virtual Keyboard Appearing on Mobile Devices for My Keyboard Tester?
tagged with: jquery
answer count: 0
has comment: http://stackoverflow.com/comment/139226123
has comment: http://stackoverflow.com/comment/139225093
tagged with: css

http://stackoverflow.com/a/79024007
type: Answer
has body: Use disabled attribute to prevent user interaction with element. Updated toggleAudioDisable function: function toggleAudioDisable() { var audio = document.getElementById('myAudio'); if(audio.hasAttribute('disabled')){ audio.removeAttribute('disabled'); audio.classList.remove('disabled'); } else { audio.setAttribute('disabled', disabled); audio.classList.add('disabled'); } } Updated style: audio.disabled { pointer-events: none; opacity: 0.5; }
score: 0
answers question: http://stackoverflow.com/q/79023871

http://stackoverflow.com/comment/139329936
type: QuestionComment
type: Comment
score: 0
has text: I'm anxious to know how both work, and whilst I'll probably end up using the second, based on your opinion that it looks better, I'd just like to fill a hole in my knowledge to find out how the first would be implemented as it might be useful to toggle something in other contexts.
comment on: http://stackoverflow.com/q/79012295

http://stackoverflow.com/a/79031070
upvote count: 0
score: -2
downvote count: 2
answers question: http://stackoverflow.com/q/79028709
type: Answer
has body: Try this : .container { position: relative; width: 200px; height: 200px; padding: 16px; border: solid 1px black; display: flex; justify-content: center; align-items: center; } .button { z-index: 1; width: min-content; height: min-content; padding: 8px; background: red; white-space: nowrap; color: white; pointer-events: none; } .container:hover > .button { background: darkred; cursor: pointer; } a.cover { display: block; position: absolute; inset: 0; width: 100%; height: 100%; } Real link Dummy link
has comment: http://stackoverflow.com/comment/139351648

http://stackoverflow.com/a/78967440
type: Answer
score: 0
answers question: http://stackoverflow.com/q/78967340
has body: What you are asking for cannot be easily done, but even if it could be easily done, I don’t think it’s a great idea. I recommend you take a different approach. Instead of allowing your layout to be determined by the size of the smallest image that you have, determine your layout independently and then create/select/resize images to fit the layout. Choose either of the following approaches: Style all your images to a fixed height. Choose the height which best suits your design (ignoring the actual size of your images). Your images will shrink to your specified height, keeping their intrinsic aspect ratio. body { font-family: sans-serif; } .container { display: flex; gap: 10px; overflow: auto; padding-bottom: 1em; } .imageBucket { font-size: 12px; color: rgb(255 255 255 / 0.6); background-color: #19744e; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); margin: 0; padding: 5px; } .imageBucket img { height: 120px; } Image 1 Image 2 Image 3 Image 4 Style all your images to a fixed size (width and height). Choose the width and height which best suits your design (ignoring the actual size of your images). Use object-fit: cover to shrink and crop your images automatically to fit your chosen size. body { font-family: sans-serif; } .container { display: flex; gap: 10px; overflow: auto; padding-bottom: 1em; } .imageBucket { font-size: 12px; color: rgb(255 255 255 / 0.6); background-color: #19744e; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); margin: 0; padding: 5px; } .imageBucket img { width: 180px; height: 120px; object-fit: cover; } Image 1 Image 2 Image 3 Image 4

http://stackoverflow.com/comment/139127407
type: QuestionComment
has text: That is, again, my point. Let's say I have a huge image: 5000px wide. I'd like to serve smaller options for smaller screens. Should I set the 480px wide option to the 1x resolution? to the 96dpi resolution? In the MDN example they have two sizes: small and big. How small is small? How does it correlate to 1x?
comment on: http://stackoverflow.com/q/78909799
type: Comment
score: 0

css-mask
tags question: http://stackoverflow.com/q/79006570
tag name: css-mask
tags question: http://stackoverflow.com/q/78916038
tags question: http://stackoverflow.com/q/78924192
type: Tag
tags question: http://stackoverflow.com/q/79243761
tags question: http://stackoverflow.com/q/79372046
tags question: http://stackoverflow.com/q/79524928
tags question: http://stackoverflow.com/q/79520200
tags question: http://stackoverflow.com/q/79422036

http://stackoverflow.com/comment/139143214
type: Comment
has text: By "positioned automatically around a page" I mean that they are part of a document flow, and I cannot take them out of that flow without affecting everything after them. In this case its paragraph elements with various positioning classes and flexboxes created per-page from markdown (kramdown) pages. The goal is to have all their transform origins in the same place while being able to transform them individually. Imagine each element scales away from the center of the body or viewport or a common parent on hover.
score: 1
type: QuestionComment
comment on: http://stackoverflow.com/q/78912512

http://stackoverflow.com/comment/139158294
type: Comment
type: AnswerComment
comment on: http://stackoverflow.com/a/78925060
has text: It’s just possible that the accepted answer at https://stackoverflow.com/questions/61727529/how-to-set-css-animation-speed-without-javascript can help but I’m afraid I haven’t got time to look further at the moment. Good luck.
score: 0

http://stackoverflow.com/q/78997818
tagged with: css
tagged with: google-sheets
has title: Signature Pad (Canvas) to Google Sheets
accepted answer: http://stackoverflow.com/a/79007689
has body: I'm attempting to create a form which auto populates into Google Sheets. At the moment, I am able to use to auto populate basic text fields into Google Sheets, but I now need to try to have the user write a digital signature and for that to be put into Google Sheets too - presumably by using toDataURL and then having that be sent to the Google Sheet? But... I have very little experience with anything like this and have absolutely no idea how to achieve this! I have taken code from various sources and videos so far to get to the stage I'm at, but now it is getting messy. Some of the content on the page is somewhat sensitive, so I'll post whatever code I can here. This is some of the HTML currently being used - sorry that it is a little messy! (Some of it might not even have use, I've been messing around with it so much that I'm lost at this point!) Billing Address Clear And this is the Javascript currently being used - it's even more messy and I'm sure a lot of it is doing nothing. Apologies once again. const form = document.forms['contact-form'] form.addEventListener('submit', e => { e.preventDefault() fetch(scriptURL, { method: 'POST', body: new FormData(form)}) .then(response => alert("Thank you! your form is submitted successfully." )) .then(() => { window.location.reload(); }) .catch(error => console.error('Error!', error.message)) }) var canvas = document.getElementById("signature-pad"); function resizeCanvas() { var ratio = Math.max(window.devicePixelRatio || 1, 1); canvas.width = canvas.offsetWidth * ratio; canvas.height = canvas.offsetHeight * ratio; canvas.getContext("2d").scale(ratio, ratio); } window.onresize = resizeCanvas; resizeCanvas(); var signaturePad = new SignaturePad(canvas, { backgroundColor: 'rgb(250,250,250)' }); document.getElementById("clear").addEventListener('click', function(){ signaturePad.clear(); }); function onSubmit(e) { console.log({ 'signature-pad' : dataURL, }); } And this is all connected up to Google Sheets with some kind of scr…
tagged with: digital-signature
score: 0
type: Question
answer count: 1
tagged with: http://stackoverflow.com/tag/html
has answer: http://stackoverflow.com/a/79007689
type: AnsweredQuestion
linked to: http://stackoverflow.com/q/42935656
tagged with: javascript

http://stackoverflow.com/a/79059377
type: Answer
has comment: http://stackoverflow.com/comment/139402653
score: 0
answers question: http://stackoverflow.com/q/79059194
has body: The sub-sub menus are position: absolute so their parent need to be relative and it should be the top menu so that top: 0 would be the correct place. So I removed the relative from all the intermediate parents. This made some issues with the caret for items having sub-menus. But I fixed that by not using position: relative for the li. Further tweaking might be needed. .header .new_menu_class .menu { display: flex; gap: 20px; background: red; position: relative; } .header .nav ul li { line-height: 80px; display: block; } /* Ensure only the immediate child submenu is shown */ .header .nav ul li:hover>ul.sub-menu { -ms-transform: translateY(-5px); transform: translateY(-5px); visibility: visible; opacity: 1; } /* Submenu hidden by default */ .header .nav ul li ul.sub-menu { position: absolute; background: #ffffff; left: 0; min-width: 230px; margin-top: 5px; -ms-transform: translateY(10px); transform: translateY(10px); transition: all .2s ease-in-out; z-index: 99999; visibility: hidden; opacity: 0; border-radius: 10px; box-shadow: 0px 0px 12px rgba(10, 10, 10, .1); } .header .nav ul li ul.sub-menu li.menu-item-has-children { // position: relative; } .header .nav ul li ul.sub-menu li { display: block; position: static; width: 100%; text-align: left; line-height: 38px; padding: 0; } .header .nav ul li ul.sub-menu li:hover { background-color: #ffffff8c; } .header .nav ul li ul.sub-menu li a { margin: 0; border-radius: 0; //position: relative; width: 100%; display: inline-block; padding: 7px 15px; border-bottom: solid 1px rgba(0, 0, 0, 0.1); } .header .nav ul li ul.sub-menu li:first-child a { border-radius: 10px 10px 0 0; } .header .nav ul li ul.sub-menu li:last-child a { border-radius: 0 0 10px 10px; } /* Submenu within submenu - hidden by default */ .header .nav ul li ul.sub-menu li ul.sub-menu { -ms-transform: translateX(calc(100% + 10px)); transform: translateX(calc(100% + 10px)); top: -5px; min-height: 100%; opacity: 0; visibility: hidden; z-index: 1; background: #f5f5…

http://stackoverflow.com/comment/139240547
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78971329
has text: @connexo It's not required to use grid-templates to define explicit tracks. Grid can also generate implicit tracks automatically when needed. Though I agree i don't see why the use of Grid expect using the gap.
type: QuestionComment

http://stackoverflow.com/comment/139411098
type: QuestionComment
has text: please share minimal reproducible code, if possible a stackblitz with the issue replicated
score: 1
comment on: http://stackoverflow.com/q/79064664
type: Comment

navbar
tags question: http://stackoverflow.com/q/78997146
type: Tag
tags question: http://stackoverflow.com/q/78941616
tags question: http://stackoverflow.com/q/78954787
tags question: http://stackoverflow.com/q/78985736
tags question: http://stackoverflow.com/q/79064419
tags question: http://stackoverflow.com/q/78946868
tags question: http://stackoverflow.com/q/79038954
tags question: http://stackoverflow.com/q/78980674
tag name: navbar
tags question: http://stackoverflow.com/q/79221635
tags question: http://stackoverflow.com/q/79182401
tags question: http://stackoverflow.com/q/79218607
tags question: http://stackoverflow.com/q/79157754
tags question: http://stackoverflow.com/q/79119002
tags question: http://stackoverflow.com/q/79132852
tags question: http://stackoverflow.com/q/79123439
tags question: http://stackoverflow.com/q/79108631
tags question: http://stackoverflow.com/q/79369013
tags question: http://stackoverflow.com/q/79412762
tags question: http://stackoverflow.com/q/79342581
tags question: http://stackoverflow.com/q/79468242
tags question: http://stackoverflow.com/q/79527878

http://stackoverflow.com/comment/139167392
comment on: http://stackoverflow.com/a/78931835
has text: Here is the working example https://codepen.io/tonkec/pen/mdZGPpo
type: Comment
score: 0
type: AnswerComment

http://stackoverflow.com/comment/139382521
type: AnswerComment
comment on: http://stackoverflow.com/a/79047525
score: 0
has text: If backward compatibility is an issue, you can try [using SVG](https://stackoverflow.com/questions/16841429/how-can-i-make-a-mask-with-cross-browser-support) or canvas (with canvas you need to draw each frame of the glint manually though). 10 year old browsers seem a bit ambitious, considering how fast the web technology has been growing recent years, 10 years ago is like a lawless jungle (looking nervously at IE).
type: Comment

http://stackoverflow.com/comment/139248967
type: Comment
score: 3
type: QuestionComment
has text: @SyndRain the point is to understand a behavior. The OP provided a minimal code that doesn't necessarily represent a useful use case or a real code.
comment on: http://stackoverflow.com/q/78971329

http://stackoverflow.com/comment/139304332
has text: thank you! I thought the library already provided a class or setting to do this, so I avoided writing a new set of css.. turns out it really had to be done this way, huh..
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/79006366

http://stackoverflow.com/comment/139380710
type: Comment
score: 0
type: QuestionComment
has text: OK, I see it. There is no connection between the `` tag area for "LOREM IPSUM" and the dropdown menu that it open. That means you can't move to the dropdown menu from the `` tag. You need to make sure the mouse cursor in inside either of these two when moving over the menu. Use the [browser developer tools](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools) to inspect the DOM.
comment on: http://stackoverflow.com/q/79044235

mask
tag name: mask
type: Tag
tags question: http://stackoverflow.com/q/78997521
tags question: http://stackoverflow.com/q/79213172
tags question: http://stackoverflow.com/q/79226229
tags question: http://stackoverflow.com/q/79138738
tags question: http://stackoverflow.com/q/79286971
tags question: http://stackoverflow.com/q/79372219
tags question: http://stackoverflow.com/q/79363350
tags question: http://stackoverflow.com/q/79311510
tags question: http://stackoverflow.com/q/79536626

http://stackoverflow.com/comment/139352452
comment on: http://stackoverflow.com/a/79024063
type: Comment
score: 0
has text: Yes, it works with any element.
type: AnswerComment

http://stackoverflow.com/q/79036967
score: 0
tagged with: nextjs14
answer count: 0
tagged with: tailwind-css
has comment: http://stackoverflow.com/comment/139360893
has comment: http://stackoverflow.com/comment/139360481
type: UnansweredQuestion
has title: tailwindcss not giving privority to css inside media query
tagged with: css
type: Question
has body: my calsses using flex flex-col m-6 px-12 rounded-lg shadow-2xl border py-4 lg:flex-row lg:py-6 lg:px-8 bg-white output herre css in breakpoint is striked out for "flex row" i found that my code working perfectly on tawilwind play here preview but not working on my local maching and aws ec2. It was previously working fine

http://stackoverflow.com/comment/139157581
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78925649
has text: The goal is to color a column when the user clicks on its header, so we don't know the column number in advance.
type: Comment

http://stackoverflow.com/a/78907387
score: 1
upvote count: 1
type: AcceptedAnswer
has body: When you drag and drop, you don't change the position, but the structure of the html. So save the html and restore it itself. Something like this: $(document).ready(function () { const originTable = $('#our_table').html(); $(document).on('dragstart', '.event', function (event) { var dt = event.originalEvent.dataTransfer; dt.setData('Text', $(this).attr('id')); }); $(document).on('dragenter dragover drop', '#our_table td', function (event) { event.preventDefault(); if (event.type === 'drop') { var data = event.originalEvent.dataTransfer.getData( 'Text', $(this).attr('id'), ); if ($(this).find('span').length === 0) { de = $('#' + data).detach(); de.appendTo($(this)); //alert("ok"); //mine document.getElementById('done').innerHTML = data + ' moved!'; } } }); $(document).on('click', '.restore', function () { $('#our_table').html(originTable); }); }); table th, table td { height: 30px; width: 200px; border: solid 1px; } table span { display:block; background-color: #09C; height: 100%; width: 100%; } Restore Jun 1 Jun 2 Jun 3 Jun 4 Jun 5 aaa bbb ccc dddd eeee ffff gggg hhhh
type: Answer
answers question: http://stackoverflow.com/q/78906077
accepted answer of: http://stackoverflow.com/q/78906077
downvote count: 0

http://stackoverflow.com/comment/139361140
comment on: http://stackoverflow.com/a/79037252
has text: This is a nice way of getting the end result, but it means there is no animation.
type: Comment
score: 1
type: AnswerComment

http://stackoverflow.com/a/78925266
answers question: http://stackoverflow.com/q/78915094
accepted answer of: http://stackoverflow.com/q/78915094
upvote count: 5
type: AcceptedAnswer
score: 5
has body: The click listeners for the ellipsis don't update slideIndex like the next and previous buttons do. Instead of using newSlideIndex, assign to slideIndex. // Initialization let slideIndex = 1; const dotsPerPage = 5; // Number of dots to show per page showSlides(slideIndex); function plusSlides(n) { showSlides(slideIndex += n); } function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { let slides = document.getElementsByClassName("mySlides"); let dotsWrapper = document.querySelector(".dots-wrapper"); let totalSlides = slides.length; let ellipsisLeft = document.querySelector(".ellipsis-left"); let ellipsisRight = document.querySelector(".ellipsis-right"); if (n > totalSlides) { slideIndex = 1; } if (n < 1) { slideIndex = totalSlides; } // Show or hide slides for (let i = 0; i < totalSlides; i++) { slides[i].style.display = "none"; } slides[slideIndex - 1].style.display = "block"; // Clear existing dots dotsWrapper.innerHTML = ''; // Determine the range of dots to show let start = Math.floor((slideIndex - 1) / dotsPerPage) * dotsPerPage; let end = Math.min(start + dotsPerPage, totalSlides); // Show or hide ellipses based on total slides ellipsisLeft.style.display = (start > 0 && totalSlides > dotsPerPage) ? "inline" : "none"; ellipsisRight.style.display = (end < totalSlides && totalSlides > dotsPerPage) ? "inline" : "none"; // Generate dots dynamically for (let i = start; i < end; i++) { let dot = document.createElement("span"); dot.className = "dot"; dot.setAttribute("tabindex", "0"); dot.setAttribute("aria-label", `Go to slide ${i + 1}`); dot.setAttribute("role", "button"); dot.setAttribute("onclick", `currentSlide(${i + 1})`); if (i === slideIndex - 1) { dot.className += " active"; } dotsWrapper.appendChild(dot); } // Handle arrow visibility document.querySelector(".prev").classList.toggle("disabled", slideIndex === 1); document.querySelector(".next").classList.toggle("disabled", slideIndex === totalSlides); } // Add event listeners for ellip…
downvote count: 0
type: Answer

http://stackoverflow.com/a/78960963
has comment: http://stackoverflow.com/comment/139222151
downvote count: 0
upvote count: 1
score: 1
has body: Check if the current icons are :visible $(document).on('click', '.loop-item .share-btn', function () { const icons = $(this).closest('.loop-item').find('.share-icon'); if (icons.is(':visible')) { $('.loop-item .share-icon').hide(); return; } $('.loop-item .share-icon').hide(); icons.show(); }); $(document).on('click', function (event) { if ($(event.target).closest('.share-icon a, .share-btn').length) { return; } $('.loop-item .share-icon').hide(); }); body { font-family: Arial; font-size: 16px; } .loop-container { display: flex; } .loop-item { width: 200px; margin: 10px; padding: 15px; border: 1px solid #dedede; } .loop-item h4 { margin-top: 0; } .social-share-box { font-size: 14px; } .social-share-box .share-btn { cursor: pointer; margin-bottom: 8px; user-select:none; } .social-share-box .share-icon { display: none; } .social-share-box .share-icon.active { display: block; } .social-share-box .share-icon a { font-size: 12px; width: 14px; height: 14px; border: 1px solid #dedede; border-radius: 90px; display: inline-block; text-align: center; padding: 2px; } Item Title Loop 1 Click here share: F T P Item Title Loop 2 Click here share: F T P
answers question: http://stackoverflow.com/q/78960154
type: Answer

http://stackoverflow.com/q/78993272
has answer: http://stackoverflow.com/a/78993481
has title: how to set the colour of inner request body colour to my default dark colour in redocly?
score: 0
has body: I'm using redocly for my api documentation. Currently I'm having an issue when I using the dark mode, the inner schemas of a request body appears in a white background. I want to change it to dark colour. As you can see if I edit the background colour of the class sc-ikkxIA daqcVd then it will fix my issue. Since it is a random generated class i wanted to know how we can solve this issue permanently.
tagged with: frontend
tagged with: css
tagged with: documentation
accepted answer: http://stackoverflow.com/a/78993481
tagged with: redocly
type: Question
answer count: 1
type: AnsweredQuestion

http://stackoverflow.com/q/78945584
type: UnansweredQuestion
has body: I'm trying to create a marquee scrolling effect from left to right using CSS, but I can't get it to work correctly. The content is supposed to scroll smoothly, but it doesn't behave as expected in my implementation. My Goal I want to create a smooth, continuous scrolling effect, similar to the classic <marquee> HTML tag but using modern CSS. The text and images should scroll from left to right across the screen in a loop. The Problem When I apply my CSS, the scrolling effect doesn't work smoothly, and sometimes the content doesn't loop as intended. I'm not sure if the issue lies with the @keyframes animation, the width settings, or something else. What I've Tried Here's the CSS and HTML I'm using: TEES MAKE YOUR MARK WITH EXCITISM TEES MAKE YOUR MARK WITH EXCITISM TEES MAKE YOUR MARK WITH EXCITISM What I Expect I expect the above code to create a marquee effect similar to this one: Showreel
tagged with: http://stackoverflow.com/tag/html
type: Question
answer count: 1
score: 0
tagged with: javascript
has answer: http://stackoverflow.com/a/78945697
has comment: http://stackoverflow.com/comment/139192683
tagged with: css
has title: CSS Marquee Scrolling Effect Not Working as Expected

http://stackoverflow.com/comment/139132376
type: AnswerComment
comment on: http://stackoverflow.com/a/78912790
type: Comment
has text: I have already applied foreignObject but its not working.
score: 0

http://stackoverflow.com/q/78931833
has body: I'm building a web page using @mui/material/Grid. The layout should have the following 'rows': Some text at the top A toolbar Some content The toolbar contains 4 things; the first 2 are buttons, and the other 2 are controls. I want to show the buttons left-aligned, and then the controls right-aligned. So: |<--------------- section width --------------->| | Button Button Control Control | This bit is fine. However, the second control is a button with a drop-down menu, and when it's open the drop-down menu should cover the content below. If I just had the Control (not in a Grid, and not with the other buttons etc) I can do this by using position: absolute for the control. However, in the Grid layout, adding position: absolute is causing the 2 controls to overlap each other. How can I make this work? Here's what I have currently: Some text here... Button Name Button Name <SortControl className="control-sort" /> <FilterControl className="control-filter" /> Page Contents go here... The corresponding css is: .buttons { display: flex; flex-direction: row; } .controls { display: flex; flex-direction: row; justify-content: flex-end; } .control-filter { z-index: 10; } When it's like this, everything is positioned correctly, apart from the page content, which is pushed down below the dropdown menu. If I add position: absolute; to the control-filter class, the page content moves up, with the dropdown overlapping it, but the sort control is now hidden underneath the filter control. How do I achieve this?
score: 0
tagged with: material-ui
answer count: 0
tagged with: css
type: UnansweredQuestion
has title: Absolute positioning one element in a Mui Material Grid
type: Question

http://stackoverflow.com/comment/139170953
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78933676
type: QuestionComment
has text: Sorry, I just updated my code. It still doesn't work.

liveserver
tag name: liveserver
tags question: http://stackoverflow.com/q/78932990
type: Tag

http://stackoverflow.com/comment/139297188
type: QuestionComment
has text: you are giving `transform:rotate(7deg)` in inline css due to which the rules declared in class or id are ignored you can use !important tag in the :hover class and it will work like this `.rotateImg:hover { transform: rotate(-7deg) !important; }`
type: Comment
score: 0
comment on: http://stackoverflow.com/q/79002283

http://stackoverflow.com/comment/139350784
type: AnswerComment
comment on: http://stackoverflow.com/a/79021631
type: Comment
has text: As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer).
score: 0

http://stackoverflow.com/a/79037433
type: Answer
has body: The problem you are facing is that when you scroll past the right fold on the page horizontally, the browser is calculating the position of the absolute dropdown element prior to the scroll, in relation to the element before it was scrolled. It then places the dropdown elements list in that position relative to the browser window despite whether you have scrolled the button element to the right. To fix this you can use some javascript to detect where the button element is on mouseover. Then pass that to your CSS left position for the child dropdown elements with a cssStyleDeclaration method, setProperty() using a CSS variable. The snippet below is a rough example of how you can control the dropdown elements position with Javascript using the position of the buttons element taken on mouseover, whether the NAV buttons are scrolled or not. I have included a scrollIntoView() method for button elements that are hovered while overflow is present. I have included further explanation within the snippet. // get the dropdown nodeLists const dropBtns = document.querySelectorAll('.DropDown button'); // iterate over the nodelist dropBtns.forEach(btn => { // add a mouseover eventListener and pass the event btn.addEventListener('mouseover', (e) => { // query the Categories within the eventListeners parent element // using closest() const category = btn.closest('.DropDown').querySelector('.Categories'); // get the height of the NAV so the dropdowns top position // nca be placed just below the scroller for the NAV buttons const navHeight = e.target.closest('.CategoryBlock').getBoundingClientRect().height; // skip the elements (buttons) without a dropdown if (category) { // buffer for elements on the edge of the windows page const buffer = 8; // get the boundingClientRect for the eventTarget const categoryRect = e.target.getBoundingClientRect(); // get the boundingClientRect for the dropdown elements const dropdownWidth = category.getBoundingClientRect().width // set the initial left…
score: 0
answers question: http://stackoverflow.com/q/79035574
accepted answer of: http://stackoverflow.com/q/79035574
type: AcceptedAnswer

http://stackoverflow.com/comment/139377244
type: Comment
type: QuestionComment
comment on: http://stackoverflow.com/q/79045866
has text: Yes, I test it on this codepen: https://codepen.io/NathanBruet/pen/yLmeEeo But it's not working neither
score: 1

http://stackoverflow.com/q/78959297
tagged with: html5-video
type: Question
answer count: 1
linked to: http://stackoverflow.com/q/77461432
type: AnsweredQuestion
score: 0
has answer: http://stackoverflow.com/a/78960003
has body: I have HTML5 Player with Video Object in WP Elementor. I used this code to set rounded corners: video{border-radius: 25px; overflow: hidden; -webkit-transform: translateZ(0); box-shadow: 0 19px 51px 0 rgba(0,0,0,0.16), 0 14px 19px 0 rgba(0,0,0,0.07);} Credit: https://stackoverflow.com/a/49681434 The rounded corners are showing very well, but there is a black area in the background that I wish to remove. I tried this code to remove the balack area: video::-webkit-media-controls-enclosure { border-radius: 25; } The Reference Image But It didn't work
accepted answer: http://stackoverflow.com/a/78960003
linked to: http://stackoverflow.com/q/6238451
tagged with: css
has title: HTML5 Video Element with Rounded Corners shows black area

http://stackoverflow.com/comment/139179036
type: Comment
score: 0
has text: You can use this, this might work. If not let me know, I will give a try by creating a scenario you are currently facing. ` `
type: AnswerComment
comment on: http://stackoverflow.com/a/78911196

pdf-to-html
tag name: pdf-to-html
type: Tag
tags question: http://stackoverflow.com/q/78921611

http://stackoverflow.com/a/78922499
answers question: http://stackoverflow.com/q/78920122
score: 1
accepted answer of: http://stackoverflow.com/q/78920122
has comment: http://stackoverflow.com/comment/139151788
type: AcceptedAnswer
downvote count: 0
type: Answer
has body: I solved this by switching my vscode Tailwind extension to the pre release one and then restarting my editor and all intellisense is now back with Angular 18.2
upvote count: 1

range
type: Tag
tags question: http://stackoverflow.com/q/78912664
tag name: range
tags question: http://stackoverflow.com/q/79122802
tags question: http://stackoverflow.com/q/79241885
tags question: http://stackoverflow.com/q/79317941

http://stackoverflow.com/comment/139339719
has text: You would need to resort to the computed style, as explained in [this answer](https://stackoverflow.com/a/79025663/446594) - [demo](https://jsfiddle.net/uhtLqm7x/)
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/79025648
type: Comment

http://stackoverflow.com/comment/139404974
comment on: http://stackoverflow.com/q/79061205
score: 2
type: Comment
has text: Note: Watermarks are usually added to video for some form of copy protection, adding a watermark client side adds zero protection. Doing something like this really wants adding server side to add the watermark to the actual video.
type: QuestionComment

http://stackoverflow.com/comment/139314481
comment on: http://stackoverflow.com/a/79011841
type: Comment
type: AnswerComment
has text: Thanks Rounin, but I am looking for a solution where the user can scroll sideways or down to see the rest of the image.
score: 1

http://stackoverflow.com/comment/139136887
type: AnswerComment
has text: Consider fixing the duplicate ids here.
comment on: http://stackoverflow.com/a/78915276
type: Comment
score: 0

http://stackoverflow.com/q/79062652
tagged with: shadow-root
type: UnansweredQuestion
type: Question
answer count: 1
has title: Within the shadow root of a web component, is it possible to access an element in a way other than using the part property?
has answer: http://stackoverflow.com/a/79065195
has body: I know that it is possible to access the labels of a shadow-root through the part property. Here is an example: fate-breadcrumb::part(text) { font-size: 12px !important; } With this CSS rule I can style the 2 tags with the property part="text" What I'm trying to do without success so far is to access only the last to apply the rule font-weight: 700 !important Here my tries: fate-breadcrumb::part(text):last-of-type { font-weight: 700 !important; } fate-breadcrumb::part(text):nth-last-of-type(1) { font-weight: 700 !important; } fate-breadcrumb::part(container) span::part(text):last-child { font-weight: 700 !important; } fate-breadcrumb::part(container) > a > span::part(text):nth-last-of-type(1) { font-weight: 700 !important; } fate-breadcrumb::part(text).breadcrumb__text { font-weight: 700 !important; }
score: 0
tagged with: css
tagged with: web-component

radzen
tag name: radzen
tags question: http://stackoverflow.com/q/79052687
type: Tag

http://stackoverflow.com/comment/139239781
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78970518
has text: As I said, I haven't read the code, and I don't really plan on it. SVG and CSS are not my area of expertise.

http://stackoverflow.com/comment/139332621
has text: Do you have to have the video in an iframe as opposed to played directly?
comment on: http://stackoverflow.com/q/79021330
type: Comment
score: 0
type: QuestionComment

http://stackoverflow.com/a/78918827
answers question: http://stackoverflow.com/q/78918783
type: AcceptedAnswer
accepted answer of: http://stackoverflow.com/q/78918783
type: Answer
downvote count: 0
has body: Your menu class has set display: none. Since you want to show the toggle button, I would suggest just moving the .toggle-button outside of menu. REST OF YOUR CODE
score: 1
upvote count: 1

http://stackoverflow.com/comment/139141102
comment on: http://stackoverflow.com/q/78917706
type: Comment
score: 0
has text: you need to change unit of svg, and adjust size and viewbox
type: QuestionComment

http://stackoverflow.com/comment/139199924
type: QuestionComment
comment on: http://stackoverflow.com/q/78949570
type: Comment
has text: The `overflow` property controls what happens to content that is too large to fit within its container. The most common values are: `overflow: visible:` The overflowed content is not clipped and will be visible outside the element's box. This is the default value. `overflow: hidden:` The overflowed content is clipped and hidden from view. Anything outside the element’s box will not be displayed.
score: 0

http://stackoverflow.com/q/79013683
linked to: http://stackoverflow.com/q/37406353
tagged with: css
has answer: http://stackoverflow.com/a/79013936
tagged with: flexbox
has title: Why does a flex item grow when its content wraps?
duplicate of: http://stackoverflow.com/q/37406353
type: UnansweredQuestion
type: Question
answer count: 1
has body: I have a flex container with direction row with 3 childs where the first has an intrinsic size and the others have a fixed width and height. I would like the ones with the fixed size to always be placed right after the first one. This works as long as the content of the first one doesn't wrap. As soon as the first one wraps, it grows to fill the remaining space of the parent which produces an unwanted gap between the first & the second child: Playground & code https://codepen.io/skaface/pen/xxvxwoM longword word longword word longword word... short .flex-container { display: flex; flex-direction: row; align-items: center; gap: 8px; width: 300px; margin-bottom: 100px; border: 1px solid black; } .child-dynamic { background: rgb(254 202 202); } .child-fixed { width: 16px; height: 16px; background: rgb(74 222 128); } Update This has been marked as duplicate of Make container shrink-to-fit child elements as they wrap. However, this question is 8 years old and has no working "CSS only" answer and I'm curious on whether there's still no CSS only solution to date. Maybe it is possible to achieve the wanted layout with grid nowadays?
score: 0

http://stackoverflow.com/q/78991592
has comment: http://stackoverflow.com/comment/139277531
favorite count: 0
score: -1
has body: I want a checkbox to be checked by default when the page loads, so that a menu bar is initially collapsed (hidden). How can I achieve this using HTML and CSS? Here is my current HTML and CSS code: header #toggler:checked ~ .navbar{ clip-path:polygon(0 0, 100% 0, 100% 0, 0 0); } header .navbar a{ display: block; } The CheeseCake Shop Home About Products Contact
has answer: http://stackoverflow.com/a/78991612
tagged with: http://stackoverflow.com/tag/html
has title: How to Set a Checkbox to Default Checked to Collapse a Menu Bar Initially Using HTML and CSS?
tagged with: css
type: Question
accepted answer: http://stackoverflow.com/a/78991612
answer count: 1
downvote count: 1
upvote count: 0
type: AnsweredQuestion

http://stackoverflow.com/q/79066620
tagged with: asp.net-core
tagged with: blazor
has title: Blazor css multiple styling for same element type
tagged with: styling
type: UnansweredQuestion
type: Question
tagged with: css
has answer: http://stackoverflow.com/a/79068924
has answer: http://stackoverflow.com/a/79066675
has body: I need to implement different styles for one type of element in my project's page. But I am not able to have more than one fully functional styling. In this example I have my PartPage.razor with its PartPage.razor.css. and I am implementing two identical styles with different naming, trying to get the same result while implementing through different style names: PartPage.razor @page "/part" SomeLabel SomeLabel PartPage.razor.css .form-label{ color: aqua } .form-label-another-label { color: aqua } .form-control { color: #077df2; background: #f2f0f0; } .form-control-another-control { color: #077df2; background: #f2f0f0; } and this is what it does in the app: blazor app It seems like it works allright for text adjustment, but not for the form control. Why is that? Is there a way how to have two stylings for same element? The css is correctly connected to the razor page as this: page css
score: 0
answer count: 2

react-hooks
tag name: react-hooks
tags question: http://stackoverflow.com/q/79014407
type: Tag

http://stackoverflow.com/q/78922197
score: -1
accepted answer: http://stackoverflow.com/a/78922278
has comment: http://stackoverflow.com/comment/139149757
has comment: http://stackoverflow.com/comment/139149691
tagged with: css
tagged with: flexbox
downvote count: 1
has title: 3rd column below the 2nd and move to below the 1st
has answer: http://stackoverflow.com/a/78922278
upvote count: 0
favorite count: 0
type: Question
answer count: 1
has comment: http://stackoverflow.com/comment/139149869
tagged with: http://stackoverflow.com/tag/html
type: AnsweredQuestion
has comment: http://stackoverflow.com/comment/139149697
has body: I'm trying to do this : I try flex but I can't find the solution. .container {display:flex; flex-wrap: wrap;} .col1 {width: 50%; background-color: #ccc;} .col2 {width: 50%; background-color: red;} .col3 {width: 50%; background-color: yellow;} /*@media screen and (max-width: 1024px) { .col3 {width: 100%;} }*/ Content = image Content = text Content = text

http://stackoverflow.com/comment/139142284
comment on: http://stackoverflow.com/q/78917706
type: Comment
score: 0
has text: You have `width="10vw" height="5vh"` and `viewBox="0 0 100 50"`. The size of the svg depends on the size of the window and is not respecting the aspect ratio defined by the viewBox. Different window, different aspect. _One possible solution would be removing the height._
type: QuestionComment

http://stackoverflow.com/a/78925060
answers question: http://stackoverflow.com/q/78923868
upvote count: 2
has comment: http://stackoverflow.com/comment/139158216
type: Answer
has comment: http://stackoverflow.com/comment/139158226
score: 2
downvote count: 0
has comment: http://stackoverflow.com/comment/139158294
has body: You can use the fact that the translateX 100% value is the width of the text in this snippet. Hence 250px - 100% in a translateX is negative for the long text and positive for the short text. The animation in this snippet uses this to get the maximum of 0px and this difference. In this way the short text doesn't move and the long one does. The slight pauses at either end are created by the timing intervals in the keyframes. Note: the snippet puts the two text elements into a container which defines a variable --w - it's width (250px in the question). This is used in the calculation and is made a var simply so it's easier to alter it if required. &lt;style&gt; .container { --w: 250px; width: var(--w); height: 200px; position: relative; white-space: nowrap; overflow: hidden; } .destination { font-size: 32px; position: absolute; animation: move 6s linear infinite forwards; left: 0; } @keyframes move { 0%, 10%, 90%, 100% { transform: translateX(0px); } 40%, 60% { transform: translateX(calc(-1 * max(0px, 100% - var(--w)))); } } .row1 { top: 0; } .row2 { top: 100px; } &lt;/style&gt; &lt;div class="container"&gt; &lt;div class="destination row1"&gt; Short name &lt;/div&gt; &lt;div class="destination row2"&gt; Long destination name &lt;/div&gt; &lt;/div&gt;

http://stackoverflow.com/comment/139403444
type: Comment
score: 0
type: AnswerComment
has text: @Samuel, You are welcome. If you wanna make an image triangular then use following property in `CSS`: `clip-path: polygon(50% 0, 50% 0, 100% 100%, 0 100%, 0 100%);`.
comment on: http://stackoverflow.com/a/79056370

http://stackoverflow.com/q/78967851
type: UnansweredQuestion
favorite count: 0
type: Question
tagged with: clearfix
linked to: http://stackoverflow.com/q/211383
has body: I have floated some elements and to make the layout appear proper. I have two ways basically clear-fix and clear:both at the following element. 1) .extra-float-container::after{ content: &quot;&quot;; clear: both; display: block; } footer { clear: both; background-color: #ff0; padding: 10px; } I can't able understand why there are two ways to that. Is there any special use-cases for each of them so that other option doesn't work?
downvote count: 0
tagged with: css-float
duplicate of: http://stackoverflow.com/q/8554043
upvote count: 1
answer count: 2
has answer: http://stackoverflow.com/a/78967957
score: 1
has title: Difference between clearfix and clear:both at the following element
duplicate of: http://stackoverflow.com/q/211383
has comment: http://stackoverflow.com/comment/139238452
tagged with: css
has answer: http://stackoverflow.com/a/78967934

http://stackoverflow.com/comment/139286615
has text: It's not certainly possible but if you add equal height to each elements then height of all lines would be same.
type: QuestionComment
comment on: http://stackoverflow.com/q/78996269
type: Comment
score: 0

http://stackoverflow.com/comment/139378814
score: 0
has text: One way you can target your element with :host::ng-deep. You can have a look at https://stackoverflow.com/questions/50566274/difference-between-hostng-deep-class-and-class-hostng-deep. Hopefully, you can achieve what you're trying to.
type: QuestionComment
comment on: http://stackoverflow.com/q/79046794
type: Comment

http://stackoverflow.com/comment/139166092
score: 1
has text: Thanks! The javascript method worked for me! I assume the css method above which works in the snippet did not work for me due to something happening in my cascade. But anyways this worked for me.
comment on: http://stackoverflow.com/a/78931052
type: Comment
type: AnswerComment

http://stackoverflow.com/a/79001043
downvote count: 0
type: Answer
score: 3
has body: I am seeing different effects on different browsers. Edge/Chrome on Windows11 gives the behavior you describe - the conditional input disappears when focus is removed from main. However, on Safari IOS it gives the behavior you want - conditional remains visible. To achieve the desired behavior consistently you could put the two inputs in a container and sense focus within that rather than on the two inputs separately. &lt;style&gt; input.conditional { display: none; } .container:focus-within .conditional { display: block; } &lt;/style&gt; &lt;div class="container"&gt; &lt;input type="text" class="main" placeholder="main"&gt; &lt;input type="text" class="conditional" placeholder="conditional"&gt; &lt;/div&gt;
upvote count: 3
answers question: http://stackoverflow.com/q/79000282
accepted answer of: http://stackoverflow.com/q/79000282
type: AcceptedAnswer

http://stackoverflow.com/comment/139401466
has text: I'm not seeing any flickering (Chrome/Edge on Windows 11) - only the text respositioning to different lines as it needs to. I think you will have to give a small example of code for which this definitely shows the problem and say what versions of OS, type of device and version of Chrome you see this in. And do you see it on any other browser?
comment on: http://stackoverflow.com/q/79059286
type: Comment
score: 0
type: QuestionComment

http://stackoverflow.com/q/79048208
tagged with: jmeter
tagged with: css
has answer: http://stackoverflow.com/a/79049483
score: 0
type: Question
has title: JMeter CSS assertion failing
answer count: 1
type: AnsweredQuestion
accepted answer: http://stackoverflow.com/a/79049483
has body: I've been trying to get my head around JMeter all day but I'm struggling. I'm trying to write a load test where I will go to a URL and then click a couple of buttons. To get to the page I use a URL in this format: https://MYSITE?access_token=my_token The problem is the site always returns a 200 even when the access token is expired so I'm trying to put an assertion in the test to check for an element with the css path button#save-button This is what I have so far Test Plan └── Thread Group ├── HTTP Request (to the URL) ├── CSS/Extractor (Variable: saveButtonId, Expression: button#save-button, Attribute: id, Match No: 1) ├── JSR223 Assertion (Check if saveButton is NOT_FOUND) └── View Results Tree Manually if I paste the URL I'm providing with a valid token into Chrome I can see the save button I'm looking for, and I can confirm the css selector is correct, but when I use the same URL in my JMeter script the assertion always fails. What am I doing wrong? My HTTP Request Protocol: https Server name or IP: left empty Port number: left empty HTTP Request: GET Path: https://MYSITE?access_token=my_token CSS Selector Extractor Variable: saveButtonId CSS Selector expression: button#save-button Attribute: id Match No.: 1 Default value: left blank JSR223 Assertion Script: Thread.sleep(10000); // give it time to load before looking for save button if (vars.get("saveButtonId") == null || vars.get("saveButtonId").isEmpty()) { AssertionResult.setFailure(true); AssertionResult.setFailureMessage("Save button not found on the page"); } else { AssertionResult.setFailure(false); } I have this sleep in the script but I know it's not a loading issue, the page displays the button within a second when I try in Chrome. When I run the test I always get a failure from the assertion even though I know the URL is using a valid token. Assertion error:false Assertion failure:true Assertion failure message:Save button not found on the page The HTTP Request result is returning a 200: Thread Name:T…

http://stackoverflow.com/comment/139200859
type: AnswerComment
has text: If you don't understand something, it doesn't mean that others don't either. check these links: https://www.w3.org/TR/css-page-floats-3/ https://www.w3.org/TR/CSS2/visuren.html https://www.w3schools.com/css/css_float.asp
type: Comment
comment on: http://stackoverflow.com/a/78950019
score: 0

http://stackoverflow.com/comment/139281527
type: Comment
score: 0
has text: @AKX the aim is to connect to my webpage (hosted on a webhost) from several computers that will use a personal font that I do not want to be hosted on the webhost server
type: QuestionComment
comment on: http://stackoverflow.com/q/78993739

http://stackoverflow.com/q/78984992
type: UnansweredQuestion
score: 1
favorite count: 0
has title: Text Cut Off When Reducing Height of with datetime-local Type in Angular Material
type: Question
tagged with: http://stackoverflow.com/tag/html
has answer: http://stackoverflow.com/a/78985201
has body: I'm trying to decrease the height of a date input in Angular Material using the height property like so: &lt;mat-form-field appearance="outline"&gt; &lt;input formControlName="dateInput" matInput type="datetime-local" id="date" name="date" style="padding: 0px !important; height: 19px;" /&gt; &lt;mat-error&gt; &lt;app-error-message [control]="lessonDateMode ==='individual' ? lessonForm.controls['dateInput'].errors : null"&gt;&lt;/app-error-message&gt; &lt;/mat-error&gt; &lt;/mat-form-field&gt; However, when I apply this, the text inside the input field gets cut off, as shown in the image: As you can see, there should be plenty of room for the text. I want to keep the current text size and reduce the input's height, but the text gets cut off even though there appears to be enough room for it. Things I've tried so far: Setting the padding to 0 Adjusting the line-height Setting the box-sizing to border-box This issue only occurs with inputs of type datetime-local. I can reduce the height of other input types without any problem. How can I reduce the input's height without the text being cut off (without changing the font-size)
answer count: 1
tagged with: input
downvote count: 0
upvote count: 1
tagged with: css
tagged with: angular

http://stackoverflow.com/q/78987841
type: Question
answer count: 1
has comment: http://stackoverflow.com/comment/139270375
tagged with: http://stackoverflow.com/tag/html
upvote count: 2
type: AnsweredQuestion
score: 0
favorite count: 0
downvote count: 2
tagged with: css
has answer: http://stackoverflow.com/a/78987905
has comment: http://stackoverflow.com/comment/139270392
accepted answer: http://stackoverflow.com/a/78987905
has body: I'm trying to make the div box look like this: box that has a green stripe at the top and the rest is cream I'm using two div boxes to achieve this appearance, but the inner div just won't fill the width no matter what I mess with. HTML Pixel Paws Username My Clan Messages Trades Bookmarks Pixel Paws Welcome welcoming message Announcements Date Posted | Sep 2, 2017 some filler text here My Account account information Recent Posts post post post post post post Staff Assistance some more text wikki / credits / media / etc CSS *{ box-sizing: border-box; } body { font-family: Arial; padding: 10px; background: #3F4438; } /* NAVIGATION BAR */ .topnav { overflow: hidden; background-color: #E8E2DD; position: sticky; top: 14; height:60px; } .topnav a { float: left; display: block; color: #2C2E3D; text-align: center; padding: 14px 16px; text-decoration: none; } .topnav a:hover { background-color: #ddd; color: #2C2E3D; } /* CONTENT BOXES */ .leftcolumn { float: left; width: 75%; } .rightcolumn { float: left; width: 25%; background-color: #3F4438; padding-left: 20px; } h2, h3, h5 { color:#2C2E3D; } /* TEXT BOXES */ .textbox { background-color: #E8E2DD; display: table; width: 100%; padding: 20px; color: #2C2E3D; } /* RIGHT COLUMNS */ .card { background-color: #A3AB96; padding: 20px; margin-top: 20px; } .row::after { content: ""; display: table; clear: both; } /* FOOTER */ .footer { padding: 20px; text-align: center; background: #E8E2DD; color: #2C2E3D; margin-top: 20px; height: 50px; }
has title: Div (inside another div) won't fill entire width despite 100%?

http://stackoverflow.com/comment/139286643
type: QuestionComment
comment on: http://stackoverflow.com/q/78996044
has text: Simply remove this class `table-hover` from ` `.
type: Comment
score: 0

http://stackoverflow.com/comment/139116931
type: QuestionComment
comment on: http://stackoverflow.com/q/78904335
type: Comment
has text: put it inside another div that has `overflow: hidden`
score: 0

http://stackoverflow.com/a/78917812
has comment: http://stackoverflow.com/comment/139141176
score: 0
answers question: http://stackoverflow.com/q/78917786
has body: Check these, Ensure your CSS files are located in src/main/resources/static or a recognized location like /public, /resources. Clear the cache or use incognito mode to avoid cached versions causing issues. Ensure your security configuration allows access to static resources:
type: Answer

http://stackoverflow.com/comment/139250630
has text: Sorry, but the issue still remains...
type: Comment
score: 0
comment on: http://stackoverflow.com/a/78976492
type: AnswerComment

http://stackoverflow.com/comment/139151662
comment on: http://stackoverflow.com/a/78917362
type: Comment
score: 0
has text: Can you please describe what you are referring to?
type: AnswerComment

http://stackoverflow.com/a/78956647
answers question: http://stackoverflow.com/q/78908058
has body: https://tailwindcss.com/docs/guides/sveltekit Import the CSS file Create a ./src/routes/+layout.svelte file and import the newly-created app.css file. <slot />
downvote count: 0
type: Answer
upvote count: 1
score: 1

http://stackoverflow.com/comment/139195072
has text: thank you for the input but my image is too far right and too close to the text after I use your code. How do I give a space between the text and image from the border of each container so that there is a gap between them?
type: AnswerComment
comment on: http://stackoverflow.com/a/78946752
type: Comment
score: 0

http://stackoverflow.com/a/78974408
has body: As explained by Brett Donald: text-stroke property renders the stroke centered around the the letter-shape. We don't have an option to control the alignment of the stroke - as we can do in graphic applications like Adobe Illustrator. But we can get a similar effect by: applying the paint-order: stroke fill to the stroked text adding a drop-shadow filter body { background: #ccc; } @font-face{ font-family: Pally; font-weight:700; src: url("https://cdn.prod.website-files.com/66ddc9942d65d4c963a26174/66ddcaa1a528a79d9b06c7d6_Pally-Bold.ttf") } h1 { font-family: Pally, sans-serif; color: #ff4776; text-align: center; -webkit-text-stroke-width: 4px; -webkit-text-stroke-color: #f8fffd; font-size: 40px; font-weight: 700; line-height: 48px; paint-order: stroke fill; filter: drop-shadow(0px 3px 0px #ff4776); } Stories That Last paint-order: stroke fill makes the stroke render behind the text fill. As a text-shadow would render between text-fill and stroke we need to replace it with a drop-shadow filter which renders behind both. Keep in mind figma doesn't use native HTML/CSS so you shouldn't expect to get a CSS that works 1:1 in a webpage.
score: 1
type: Answer
downvote count: 0
upvote count: 1
answers question: http://stackoverflow.com/q/78968270

http://stackoverflow.com/comment/139130784
score: 0
has text: Please show the relevant HTML and make the code into a runnable snippet (use <> in the editor).
type: QuestionComment
comment on: http://stackoverflow.com/q/78911856
type: Comment

http://stackoverflow.com/comment/139130805
type: QuestionComment
has text: OK thank you very much
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78911856

http://stackoverflow.com/comment/139152330
comment on: http://stackoverflow.com/q/78923550
has text: It's a buggy feature that happens on iOS. Safari, Chrome, Firefox, Opera, ... in OS
type: Comment
score: 0
type: QuestionComment

http://stackoverflow.com/q/79055349
tagged with: http://stackoverflow.com/tag/html
has title: How to do slick.js slider with 5 slides in one row?
type: Question
score: 0
tagged with: javascript
tagged with: jquery
tagged with: css
answer count: 0
tagged with: slick.js
has body: How to do slick.js slider with 5 slides in one row? How should look the slider look like: ibb.co I use classes to add classes to the last two side slides. That these slides will be smaller. I Used CSS: transform: scale My JS code: on( 'afterChange', function( event, slick, currentSlide ) { $( '.slick-slide' ).removeClass( 'side-smaller-left side-smaller-right' ); var parent = $( '.our_certificates_carousel' ); parent.find( '.slick-active' ).eq( 0 ).addClass( 'side-smaller-left' ); parent.find( '.slick-active' ).eq( parent.find( '.slick-active' ).length - 1 ).addClass( 'side-smaller-right' ); } ).on( 'beforeChange', function( event, slick, currentSlide ) { // Remove the class from all slides $( '.slick-slide' ).removeClass( ' ' ); var parent = $( '.our_certificates_carousel' ); parent.find( '.slick-active' ).eq( parent.find( '.slick-active' ).length - 1 ).addClass( 'side-smaller-right' ); } ) But it is still not working properly. I need Smooth working slider. Can you please help me figure out how?
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139394687

http://stackoverflow.com/q/79054197
answer count: 0
tagged with: css
tagged with: css-grid
type: UnansweredQuestion
type: Question
has body: I use a CSS grid with named tracks for my layout. [full] [breakout] [content] [breakout] [full]. This way i can use breakout and full to breakout from my default content width. This is working very well. I also added breakout-left, breakout-right and full-left, full-right to breakout only to one side. In my design the nested content usually should still be aligned with the horizontal center of viewport. Example (tailwind): IMAGE CONTENT The image breaks out correctly. But the center of the grid won't be the center of the screen. So the image won't align with the horizontal center of viewport See example of sections and center lines here: https://codepen.io/danpii/pen/qBeZQZW CSS from pen: /* layout Grid */ :root { --content-max-width: 88rem; --breakout-max-width: 104rem; --breakout-width: calc((var(--breakout-max-width) - var(--content-max-width)) / 2); --gap: clamp(0.675rem, 4vw, 3rem); /* 10.8px -> 48px*/ --full: minmax(var(--gap), 1fr); --content: min(100% - (var(--gap) * 2), var(--content-max-width)); --breakout: minmax(0, var(--breakout-width)); /*@inspiration*/ /*https://www.youtube.com/watch?v=c13gpBrnGEw*/ /*https://smolcss.dev/#smol-breakout-grid*/ /*https://ryanmulligan.dev/blog/layout-breakouts/*/ @layer base { .content-grid{ display: grid; grid-template-columns: [full-start full-left-start] var(--full) [breakout-start breakout-left-start] var(--breakout) [content-start breakout-right-start full-right-start] var(--content) [content-end breakout-left-end full-left-end] var(--breakout) [breakout-end breakout-right-end] var(--full) [full-end full-right-end]; } .content-grid > *, .full > *{ grid-column: content; } .content-grid > .breakout { grid-column: breakout; } .content-grid > .breakout-left { grid-column: breakout-left; } .content-grid > .breakout-right { grid-column: breakout-right; } .content-grid > .full { grid-column: full; } .content-grid > .full-left { grid-column: full-left; } .content-grid > .full-right { grid-column: full-right; } .flow > *:whe…
score: 0
has title: How to use width of CSS Grid track for another elements margin?

http://stackoverflow.com/q/79055645
has body: I’m currently building a responsive header using Bootstrap. The layout works fine on the desktop version, but I’m having some alignment issues in the mobile view. Here’s a brief description of what I’m trying to achieve and the problems I’m facing: The search bar is composed of two div elements: Input type="text" and Input type="submit" -I want the input type="text" to take 80% of the available width and be aligned to the left. The submit button should take the remaining 10% and be aligned to the right (we are left with a margin of 10%). I tried using Bootstrap’s d-flex, justify-content, and text-end classes, but it’s not producing the desired layout. Here is my current code: I try adjusting the widths of the col-* classes to ensure that the columns are proportionate. Used d-flex and justify-content-start/justify-content-end classes on the input fields. Used w-100 and w-80 classes to try to control the widths of the text input and submit button. Also I deleted my css concerning the header in media querys to avoid conflict over css and bootstrap.
tagged with: css
type: UnansweredQuestion
has answer: http://stackoverflow.com/a/79055858
type: Question
answer count: 1
tagged with: bootstrap-4
has title: Responsive Header Layout Issue in Bootstrap: Aligning Logo and Search Bar in Mobile View
score: 0

http://stackoverflow.com/comment/139364863
type: QuestionComment
has text: Please click [edit], then the button marked `[<>]` and provide a [mcve] using CSS and relevant HTML
type: Comment
score: 0
comment on: http://stackoverflow.com/q/79039256

http://stackoverflow.com/comment/139143180
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78917605
has text: Thank you for the answer and explanation. I had tried 'justify: center' before, but had the wrong specificity as you pointed out.
type: Comment

http://stackoverflow.com/q/78904561
has answer: http://stackoverflow.com/a/78906107
type: Question
answer count: 1
has comment: http://stackoverflow.com/comment/139119564
has comment: http://stackoverflow.com/comment/139117766
type: AnsweredQuestion
has comment: http://stackoverflow.com/comment/139118121
score: 0
has comment: http://stackoverflow.com/comment/139119590
accepted answer: http://stackoverflow.com/a/78906107
has title: How can I sync my overlay image with my main circle shape?
has comment: http://stackoverflow.com/comment/139119557
tagged with: css
has body: I'm trying to replicate the look of a solar eclipse. I have a startup screen that shows a &lt;div&gt; with a border-radius at 50% and a width/height of 20vw. This achieves the rounded look of course and with some box-shadow I pretty much accomplish a look. But I'd like to enhance the aesthetic with an overlay with some kind of blend-mode (I've tinkered with color-dodge and hard-light so I'll do both somehow) But I'm running into a wall right now because I cannot fit my eclipse overlay to be perfect around my circle. And I worry that specifically going down to decimal points will just have my design break later because of the units I'm using to make it responsive but I don't know how else I'd try to keep my current layout while syncing my overlay with my shape. I feel like there must be a better way. I'm new to stack overflow so I'm sorry if I formatted this poorly. I've attached the overlay image I'm using to this question as well as the image reference I'm trying to replicate overlay image (incase earlier link doesn't work): https://imgur.com/a/jYMDkaR .startup-screen { position: absolute; z-index: 99; display: flex; overflow: hidden; align-items: center; flex-direction: column; justify-content: center; width: 100vw; height: 100vh; background: black; } .startup-screen__eclipse { display: flex; align-items: center; justify-content: center; width: 20%; height: 40%; padding: 5%; box-shadow: 17px 17px 18px rgba(255, 255, 255, 1), 5px 5px 5px rgb(255, 213, 0), 6px 6px 6px rgb(66, 230, 255), 50px 50px 100px rgb(230, 207, 255); border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; } .startup-screen__eclipse__overlay { position: absolute; width: fit-content; height: fit-content; border: 2px solid red; top: 13%; left: 33%; /* mix-blend-mode: color-dodge; */ } .startup-screen__eclipse__overlay img { width: 35vw; height: 35vw; mix-blend-mode: hard-light; } &lt;div class="startup-screen" id="startupScreen"&gt; &…
tagged with: flexbox

http://stackoverflow.com/comment/139381869
type: QuestionComment
has text: read the Spec for more accurate detail: https://drafts.csswg.org/css-transforms/#mathematical-description
score: 1
comment on: http://stackoverflow.com/q/79048247
type: Comment

http://stackoverflow.com/comment/139219709
has text: That's the part that confuses me. If I set 'display' to ```none``` the div is not visible, but if I set it to ```block``` it is. May something block the execution of the script? If I change the code to an ```alert``` function it is executed without any problems.
type: QuestionComment
comment on: http://stackoverflow.com/q/78960206
type: Comment
score: 0

http://stackoverflow.com/comment/139271428
type: QuestionComment
has text: element.style { } .gMPedu { width: 100%; } * { box-sizing: border-box; } *, ::after, ::before { box-sizing: border-box; } * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'PT Sans', sans-serif; } user agent stylesheet div { display: block; unicode-bidi: isolate; } body { font-family: 'Roboto', sans-serif; } body { font-family: var(--global-font); }
comment on: http://stackoverflow.com/q/78986745
type: Comment
score: 0

http://stackoverflow.com/a/79061341
type: Answer
downvote count: 0
has body: My attempt using container queries and grid display. Feel free to change gap and flex properties to match your design. * { box-sizing: border-box; } form { margin-block-start: 4rem; container: group / inline-size; } fieldset { border: 0; input { padding: .25rem; min-inline-size: 0; } [name="qty"] { flex: 1 } [name="unit"] { flex: 2 } [name="item"] { flex: 2 } @container group (width >= 700px) { display: flex; gap: .5rem; [class^="group"] { display: contents; flex: 1; } } @container group (width < 700px) { display: grid; gap: .5rem; grid-template-columns: 1fr fit-content(15rem); grid-template-areas: "group1 button" "group2 group2"; } [class^="group"] { display: flex; gap: .5rem; min-inline-size: 0 } [name="unit"] { flex: 5 } .group-1 { grid-area: group1; } .group-2 { grid-area: group2; } button { grid-area: button; } } } CANCEL
upvote count: 1
has comment: http://stackoverflow.com/comment/139409152
answers question: http://stackoverflow.com/q/79060918
accepted answer of: http://stackoverflow.com/q/79060918
score: 1
type: AcceptedAnswer

http://stackoverflow.com/comment/139375529
type: Comment
has text: Can you put an example in your question that shows what you have attempted exactly?
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/79044377

http://stackoverflow.com/q/78954874
answer count: 0
tagged with: css
has body: I'm near the end of implementing a new website. It adjusts "responsively" to width changes at widths larger than typical mobile device widths, but I wish to scale the existing design to fit any narrower widths proportionately, if this is possible using fairly simple CSS. My media queries work fine for my major size breakpoints. I tried using body {scale(.8)} and body {transform: scale(.8)}, but such solutions only scale by a fixed amount, rather than scaling to fit the screen (client) width exactly. I also tried body {transform:scale(calc(100vw / 1920px))}, but this doesn't work either. I don't want to just scale the font, or other such shortcuts. I want true fixed-aspect ratio scaling to fit the maximum of the width and height of the device, with any excess width or height filled with a white rectangle, or ignored. I tried discussing it with Code-Llama-34b, but it kept going around in circles and confusing my question with "how to center an element". I don't want to use any special libraries, or complex JavaScript calculations. A simple "it can't be done" is acceptable if it is really true.
has comment: http://stackoverflow.com/comment/139210075
type: UnansweredQuestion
type: Question
has title: At narrow widths, how to scale body element and children so that it fits client width and height?
has comment: http://stackoverflow.com/comment/139209729
has comment: http://stackoverflow.com/comment/139215271
score: 0
has comment: http://stackoverflow.com/comment/139210203

http://stackoverflow.com/a/78960222
has comment: http://stackoverflow.com/comment/139219854
type: Answer
has comment: http://stackoverflow.com/comment/139219681
score: 0
has body: Check the computed style to handle the case where display is set in CSS function ToggleDiv() { var v = document.getElementById('equiv-submenu'); if (window.getComputedStyle(v).display === 'none') { v.style.display = 'block'; } else { v.style.display = 'none'; } }
answers question: http://stackoverflow.com/q/78960206

http://stackoverflow.com/comment/139412220
has text: Can you check the validity of your HTML ?
type: Comment
type: QuestionComment
comment on: http://stackoverflow.com/q/79065331
score: 1

http://stackoverflow.com/comment/139384630
score: 0
has text: I have a card component that displays text, with each card having a fixed size. I want to take a long piece of text and automatically spread it across multiple cards without any resizing, or scrolling. I’m looking for help on how to make this work.
comment on: http://stackoverflow.com/q/79050057
type: QuestionComment
type: Comment

http://stackoverflow.com/a/78989629
upvote count: 7
answers question: http://stackoverflow.com/q/78989619
score: 6
downvote count: 1
type: Answer
has body: Your selector only applies to the elements you are expecting, however the child li inherit the style from their parents by default. This can be avoided by explicitly setting a "default" value for those elements, e.g. li { color: #000; } ul.m > li { color: orange; } test l1 l11 l12 l2

http://stackoverflow.com/comment/139399799
type: AnswerComment
comment on: http://stackoverflow.com/a/79058690
has text: i am trying to get the images to be all horizontal instead of wrapping
type: Comment
score: 0

http://stackoverflow.com/q/78948289
has comment: http://stackoverflow.com/comment/139201321
linked to: http://stackoverflow.com/q/78916038
upvote count: 1
has answer: http://stackoverflow.com/a/78948543
answer count: 2
accepted answer: http://stackoverflow.com/a/78948543
has answer: http://stackoverflow.com/a/78948325
tagged with: css
possible better answer: http://stackoverflow.com/a/78948325
has title: How do I use the reverse border radius at the top of a card? (CSS)
score: 1
has body: I'm trying to create a red box that has a notch on the top edge. This notch should have rounded corners with an inverted border radius. Then I wanted to write a word in the notch, with the size of the notch depending on the length of the word. There will also be text on the box later. I've already tried countless times. But either the background of the notch was not transparent, or the corners were not as rounded. Another problem I encountered was that not everything was in a rectangular container, but some elements were outside.
has comment: http://stackoverflow.com/comment/139197479
favorite count: 0
has comment: http://stackoverflow.com/comment/139197876
type: Question
tagged with: http://stackoverflow.com/tag/html
downvote count: 0
type: AnsweredQuestion

http://stackoverflow.com/comment/139153474
score: 0
has text: all browsers on IOS use Safari's rendering engine, so it makes sense that all of them have this issue
comment on: http://stackoverflow.com/q/78923550
type: QuestionComment
type: Comment

http://stackoverflow.com/q/78946570
has body: NOTE: this question was closed as a duplicate of this question about centering text within a div block. My question is about centering an SVG within a button. Buttons apparently have a lot of hidden properties that make this much more difficult than centering inside a simple div. I tried using this solution to help me center a square SVG within a square button (horizontally and vertically, of course). The main differences is that, in the solution, the coordinate system of the SVG viewBox is different (but still square). Also, I specify a width and height for the button (still square, though). The solution demonstrated that styling the search-button with padding: 0 fixed the problem. For me, though, the SVG is clearly nearer the top than the bottom, as the red outline shows. (It also may be nearer the left than the right, but that could be an optical illusion.) I've tried to eliminate all non-essential styling from this example. What is needed to coerce the SVG to be perfectly centered inside the button? #search-button { align-items: center; width: 3em; height: 3em; padding: 0; /* one solution used this */ } #search-button-svg { outline: 1px dotted red; width: 2em; height: 2em; } &lt;button type="submit" id="search-button"&gt; &lt;svg id="search-button-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"&gt; &lt;path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/&gt; &lt;/svg&gt; &lt;/button&gt;
tagged with: css
answer count: 3
has answer: http://stackoverflow.com/a/78946946
accepted answer: http://stackoverflow.com/a/78946996
has comment: http://stackoverflow.com/comment/139204735
has comment: http://stackoverflow.com/comment/139196216
has comment: http://stackoverflow.com/comment/139195096
type: Question
linked to: http://stackoverflow.com/q/70637788
has comment: http://stackoverflow.com/comment/139207086
tagged with: http://stackoverflow.com/tag/html
type: AnsweredQuestion
tagged with: button
has comment: http://stackoverflow.com/comment/139194850
has title: How do I perfectly center a square SVG within a square button?
has comment: http://stackoverflow.com/comment/139200643
tagged with: centering
linked to: http://stackoverflow.com/q/5703552
possible better answer: http://stackoverflow.com/a/78946946
has answer: http://stackoverflow.com/a/78946975
tagged with: http://stackoverflow.com/tag/svg
score: 0
has answer: http://stackoverflow.com/a/78946996

http://stackoverflow.com/comment/139272091
score: 4
type: Comment
has text: don't use `float` - that just makes positioning a lottery
type: QuestionComment
comment on: http://stackoverflow.com/q/78988683

http://stackoverflow.com/a/78974091
has body: the z-index for the footer is kinda much; try reducing it
has comment: http://stackoverflow.com/comment/139278694
score: 1
answers question: http://stackoverflow.com/q/78974025
type: Answer
downvote count: 0
upvote count: 1

http://stackoverflow.com/comment/139354103
comment on: http://stackoverflow.com/q/79033378
type: Comment
type: QuestionComment
has text: HAve a look at https://developer.mozilla.org/en-US/docs/Web/CSS/:last-of-type
score: 1

http://stackoverflow.com/q/79036821
answer count: 1
tagged with: reactjs
has title: text box not showing up for the angular code
has body: I am trying to learn angular code by converting the below react code into angular, however I am not able to see the text box in the browser an you let me know how to fix it. React source React Tutorial (youtube.com) Angular code With which I try to achieve what I saw in the react tutorial. <a href="https://stackblitz.com/edit/stackblitz-starters-oq6ym3?description=An%20angular-cli%20project%20based%20on%20@angular/animations,%20@angular/common,%20@angular/compiler,%20@angular/core,%20@angular/forms,%20@angular/platform-browser,%20@angular/platform-browser-dynamic,%20@angular/router,%20core-js,%20rxjs,%20tslib%20and%20zone.js&file=src%2Fuser-search.component.html&template=node&title=Angular%20Starter" rel="nofollow noreferrer">Playground (stackblitz.com)
tagged with: css
has comment: http://stackoverflow.com/comment/139360030
tagged with: angular
has answer: http://stackoverflow.com/a/79037204
has comment: http://stackoverflow.com/comment/139362607
type: UnansweredQuestion
score: 0
tagged with: http://stackoverflow.com/tag/html
type: Question

http://stackoverflow.com/a/79146528
upvote count: 1
has body: Wrap your form in a div with className="relative". Radix has absolutely positioned elements that when used with overflow will cause layout issues. For me I had to change sr-only to fixed sr-only. I also had the same issue with Radix's Select as this has absolutely positioned elements inside a portal. To fix that I use. /* ** Used to ensure proper layout and positioning of child components, ** when using select which makes use of absolute positioning inside a portal. ** ** By setting this div to 'position: relative', we establish a containing block for any absolutely ** positioned descendants. This prevents them from escaping the bounds of the form and affecting ** the page's overall layout, which could cause issues like unexpected scrolling or extra space. */ const SelectWrapper = ({ children }: { children: React.ReactNode }) => ( {children} ); A <SelectWrapper> around my select component. I originally had className="relative" on a div wrapping the children of the form. This broke the layout / spacing of my labels / inputs so I relocated it to a select wrapper.
score: 1
downvote count: 0
type: Answer
answers question: http://stackoverflow.com/q/78979287

mixins
type: Tag
tags question: http://stackoverflow.com/q/78979860
tag name: mixins
tags question: http://stackoverflow.com/q/79135053
tags question: http://stackoverflow.com/q/79193050

http://stackoverflow.com/comment/139228492
has text: @herrstrietzel i take it i place this code in `styles.css`? And I were to place it in there, how so. But thanks for the help so far
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78962032
type: QuestionComment

http://stackoverflow.com/comment/139298693
has text: Hello Sajd Iqbal, in the *Properties* tab I see the element already has `tabIndex="-1"`. Removing `outline` is not an option as it “steals” user clicks on `Tab`.
comment on: http://stackoverflow.com/a/79003124
type: Comment
score: 0
type: AnswerComment

http://stackoverflow.com/a/78944155
type: Answer
score: 0
answers question: http://stackoverflow.com/q/78923173
has body: Here is the final solution that I came up with to get the final result that I wanted. This is the code: @import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); @property --light-font { syntax: "<color>"; inherits: false; initial-value: #000; } @property --angle { syntax: "<angle>"; inherits: true; initial-value: 0deg; } .card { position: relative; width: 300px; min-height: 300px; height: auto; z-index: 5; } .card::before { content: ""; position: absolute; width: calc(100% - 16px); height: calc(100% - 16px); top: 50%; left: 50%; transform: translate(-50%, -50%); border: 15px solid transparent; border-image: conic-gradient( from var(--angle), #ea2d66, #00f1cd, #ddea2d, #ea2d66 ) 1; animation: autoRotate 4s linear infinite; filter: blur(20px); } .card-border { position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 10px; overflow: hidden; } .card-border::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 8px solid transparent; border-image: conic-gradient( from var(--angle), #ea2d66, #00f1cd, #ddea2d, #ea2d66 ) 1; animation: autoRotate 4s linear infinite; } .inner-content { position: absolute; top: 0; left: -0.5px; right: 0; bottom: -0.5px; border-radius: 5px; background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(40px); color: var(--light-font); margin: 6px; padding: 2rem; } @keyframes autoRotate { to { --angle: 360deg; } } .inner-content .card--title { font-size: 1.5em; font-weight: bold; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.8em; } .inner-content .card--text { font-size: 1em; } Title Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptas cumque enim, nisi nulla voluptatibus mollitia rerum? Enim nostrum id illo vel, necessitatibus repellendus sed animi fuga assumenda veniam commodi exercitationem?

http://stackoverflow.com/a/79018617
has body: Try this, hopefully this should resolve your issue as it will handle special chars, incase you're still facing issue try renaming your file by removing the special chars.
score: 2
downvote count: 0
type: Answer
answers question: http://stackoverflow.com/q/79018578
upvote count: 2

http://stackoverflow.com/q/79044613
has answer: http://stackoverflow.com/a/79044672
tagged with: css
has body: I have a well designed, responsive site, that looks great on almost any screen. It's got all the media breaks to look good on smaller devices, even mobile. Great! Most designers are worried about how their site looks on mobile and smaller devices.... but the other day I looked at my site on a massively high resolution screen. Look, all websites look terrible, all squashed up in the middle or to the left where "the end of the designer would have imagined any screen to be". I had a max-width css set to the body tag, and that helped hold things together, but what I noticed is that by simply applying a zoom to the same body tag, I could get this ridiculously large screen resolution to display my site quite nicely. I would like to know how I could set a zoom value to apply to the css if the body width becomes really wide. So far I have: @media (min-width: 2560px) { body{ zoom: 120%; } } But I want this value to be calculated, so something like: zoom: calc(1 + 2560 / var(--width)); But how do I get --width to be the available media width? The end result would display my site exactly as my designer wanted it, even at a very high resolution.
has title: Use CSS zoom to fix website to design width
score: 0
accepted answer: http://stackoverflow.com/a/79044672
type: Question
tagged with: http://stackoverflow.com/tag/html
answer count: 1
type: AnsweredQuestion

http://stackoverflow.com/comment/139130233
comment on: http://stackoverflow.com/q/78911526
score: 2
has text: transition from `display:none` to `display:block` (and back) requires `transition-behavior: allow-discrete` along with some other majicks ... and even then it won't work as expected in firefox yet
type: Comment
type: QuestionComment

http://stackoverflow.com/q/78954572
accepted answer: http://stackoverflow.com/a/78957410
type: Question
answer count: 1
type: AnsweredQuestion
has title: Pico CSS semantic-root-element not being applied to input, select, textarea from forms/_basics.scss
score: 0
has answer: http://stackoverflow.com/a/78957410
tagged with: sass
has body: I installed Pico CSS into my npm workspace for my HTML project. npm i -D @picocss/pico My package version is such "@picocss/pico": "^2.0.6", Next, I have a sass file that I am using to initiate pico styling into my project @use "../../node_modules/@picocss/pico/scss/index" with ( $enable-semantic-container: true, $semantic-root-element: "#nffaac", $enable-classes: true, $modules: ( "themes/default": true, "content/code": false, "forms/input-color": false, "forms/input-date": false, "forms/input-file": false, "forms/input-range": false, "forms/input-search": false, "components/accordion": false, "components/card": false, "components/dropdown": false, "components/loading": false, "components/modal": false, "components/nav": false, "components/progress": false, "components/tooltip": true, "utilities/accessibility": false, "utilities/reduce-motion": false)); As you can see above, I have semantic-root-element in use. From my HTML project, when it builds and is displayed in the browser, the DOM loads my custom form... As you can see above, all that beautiful styling on the input element is being applied like so from _basics.scss file through Pico CSS input, select, textarea {....} But I'm expecting it to look like this... #nffaac input, #nffaac select, #nffaac textarea {....} What am I missing in order to apply a parent element onto Pico CSS _basics.scss selectors?
tagged with: css

http://stackoverflow.com/comment/139251965
has text: a very quick solution to your problem might be getting rid of the `.keep-together` container at all. If you then style those `span` with a specific class having a css rule giving `display: inline-block;` they will also correctly wrap instead of overflowing. Now the only problem remains the gap between them... that could be removed just removing the newline between each of those elements in the html. That's because their parent takes those new line into account rendering its content causing the gap.
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78970177

http://stackoverflow.com/a/78915329
score: 1
accepted answer of: http://stackoverflow.com/q/78915295
type: AcceptedAnswer
has body: You can try using a wrapper too: .flex-container { display: flex; } .flex-wrapper { display: flex; justify-content: space-between; flex-grow: 1; } item item Item item
downvote count: 0
type: Answer
upvote count: 1
answers question: http://stackoverflow.com/q/78915295

http://stackoverflow.com/comment/139318376
type: QuestionComment
has text: Please visit [ask]
comment on: http://stackoverflow.com/q/79013958
type: Comment
score: 0

http://stackoverflow.com/comment/139409447
type: QuestionComment
type: Comment
score: 0
has text: Oh even more than that: You want to know how to calculate the width of the part of your 80% that overlaps with the side that is 25%. At the very least, just dividing for the calculation won't do, as you are finding a difference, meaning you'll need to do some subtraction as well.
comment on: http://stackoverflow.com/q/79063526

extjs7
tags question: http://stackoverflow.com/q/79063741
tag name: extjs7
type: Tag

http://stackoverflow.com/comment/139130191
score: 1
comment on: http://stackoverflow.com/q/78911526
type: Comment
has text: `display:` is likely your culprit, have you tried using `opacity` in your animation instead?
type: QuestionComment

http://stackoverflow.com/comment/139317864
score: 1
type: Comment
has text: You should show us a snippet of the HTML generated for a code chunk that includes output, so we know what bookdown is using as CSS classes on the various kinds of lines.
comment on: http://stackoverflow.com/q/79013297
type: QuestionComment

http://stackoverflow.com/a/78953944
upvote count: 1
has comment: http://stackoverflow.com/comment/139208480
answers question: http://stackoverflow.com/q/78953804
accepted answer of: http://stackoverflow.com/q/78953804
has comment: http://stackoverflow.com/comment/139210078
score: 1
type: AcceptedAnswer
has body: Styling an input element of type "color" have limited styling options for the native color input due to its complex structure. You'll often need to create a custom color picker using JavaScript or an external library. To achieve styling on the "inside rectangle" i.e. the rectangle filled with the color you'll have to use the browser webkit selector ::-webkit-color-swatch and here is your new code #myColorPicker::-webkit-color-swatch { border-radius: 50px; } Select a color:
downvote count: 0
type: Answer

http://stackoverflow.com/comment/139246999
comment on: http://stackoverflow.com/a/78966140
has text: Thanks for sending me on the right track to a solution.
type: Comment
score: 0
type: AnswerComment

http://stackoverflow.com/a/78918132
answers question: http://stackoverflow.com/q/78917961
accepted answer of: http://stackoverflow.com/q/78917961
has comment: http://stackoverflow.com/comment/139143932
has body: For the bouncy effect use transition with cubic-bezier easing. You can always animate (transition) the flex property. No JavaScript is necessary, just use CSS :hover and transition. The magic is also achieved in this example by using Container Type and enlarging the items on hover to the width related to the container in cqw unit: * {margin: 0; box-sizing: border-box; } .container { display: flex; gap: 0.5em; container-type: size; .item { flex: 1; background: var(--bg, #aaa); border-radius: 1em; padding: 2em; transition: flex 0.6s cubic-bezier(0.6, 0, 0.5, 1.3); height: min-content; overflow: hidden; .item-content { width: 50cqw; /* Set desired width */ } &:hover { flex: 50cqw; /* Transition flex to that same width */ } } } Property owners Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam enim explicabo, accusamus hic nesciunt facilis minima a tempora voluptas ratione voluptatem beatae quam! At vel eveniet asperiores, dicta suscipit omnis. Tenants Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam enim explicabo, accusamus hic nesciunt facilis minima a tempora voluptas ratione voluptatem beatae quam! At vel eveniet asperiores, dicta suscipit omnis. Partners Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam enim explicabo, accusamus hic nesciunt facilis minima a tempora voluptas ratione voluptatem beatae quam! At vel eveniet asperiores, dicta suscipit omnis.
type: AcceptedAnswer
type: Answer
score: 0

http://stackoverflow.com/comment/139411768
has text: You may like to add in a verbal explanation - pointing out what was wrong in the original and how this snippet corrects it so future readers know (they won't necessarily read all the comments on the original post).
type: Comment
score: 0
comment on: http://stackoverflow.com/a/79063961
type: AnswerComment

http://stackoverflow.com/comment/139332535
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/79014025
has text: Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer).
type: Comment

http://stackoverflow.com/a/79029631
answers question: http://stackoverflow.com/q/79028709
type: Answer
score: 0
has body: First, this is really bad UX imo. Second, does it has to be an ? If it just need to take user to a linked page, a would do the same. .container { position: relative; /* This is the important one, the rest is styling */ width: 200px; height: 200px; padding: 16px; border: solid 1px black; display: flex; justify-content: center; align-items: center; } .button { z-index: 1; /* This is the important one, the rest is styling */ width: min-content; height: min-content; padding: 8px; background: red; white-space: nowrap; color: white; } .button:hover { background: darkred; cursor: pointer; } .cover { appearance: none; display: block; position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; } Dummy link

styles
tags question: http://stackoverflow.com/q/78951136
tag name: styles
type: Tag

http://stackoverflow.com/comment/139346502
score: 1
type: Comment
has text: You need a **gradient mask**. Check this existing question: [Using CSS, can you apply a gradient mask to fade to the background over text?](https://stackoverflow.com/questions/9525215/using-css-can-you-apply-a-gradient-mask-to-fade-to-the-background-over-text). If you believe your question is different from this one, please [edit] your post, make it clear how it’s different and/or how the answers on the linked one are not helpful for your problem.
comment on: http://stackoverflow.com/q/79029341
type: QuestionComment

http://stackoverflow.com/q/79059000
has answer: http://stackoverflow.com/a/79059282
tagged with: css
has body: I'm compiling a report in R markdown with HTML output using CSS. The code for the figures works where I can colour the word "Figure" and the figure number which is generated through a function. But the same approach does not work for the table and I can't see why not. CSS: /* Custom styles for figure and table captions */ .figure .caption::before{ content: "Figure "; color: #AA3740; /* Change this to your desired color */ font-weight: bold; } .figure .caption .fig-number { color: #AA3740; /* Same color for the figure number */ font-weight: bold; } .figure .caption span { color: #000000; /* Desired color for the rest of the caption */ } R chunk (where the ref section is used to automatically assign figure numbers):. ```{r figure_1, fig.cap = paste0('', ref("fig:figure_1"), ': Title’)}``` For the tables I tried similar, but it doesn’t seem to work (I’m using the package flextable): CSS: /* Custom styles for figure and table captions */ .table .caption::before{ content: "Table "; color: #AA3740; /* Change this to your desired color */ font-weight: bold; } .table .caption .tab-number { color: #AA3740; /* Same color for the figure number */ font-weight: bold; } .table .caption span { color: #000000; /* Desired color for the rest of the caption */ } R chunk: ```{r table_1, tab.caption = paste0('', ref("tab:table_1"), ': title’)}``` No caption appears for my table.
has title: Why does colour work for figure caption number but it does not on table caption number?
type: UnansweredQuestion
tagged with: http://stackoverflow.com/tag/html
type: Question
tagged with: markdown
tagged with: http://stackoverflow.com/tag/r
has comment: http://stackoverflow.com/comment/139400749
answer count: 1
tagged with: r-markdown
score: 0

http://stackoverflow.com/comment/139317759
type: QuestionComment
has text: your question hides some arbitrary choices that you need to better focus. Showing the range spanning different months inside 2 different calendars will create some confusion in terms of usability in my opinion and I have no idea if it's supported in automatic by the library itself. Do you have a reference you are inspiring to? Did you see that exact scenario used in some web site like for flights for example?
type: Comment
comment on: http://stackoverflow.com/q/79013255
score: 0

http://stackoverflow.com/comment/139140858
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78916318
has text: OP mentioned that `Where the space between (1) and (2) is native and not being done by the flex (assume it's 1px between the two words) but the rest of the items are spaced due to justify-content: between; for example.`.
type: Comment

http://stackoverflow.com/comment/139268034
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78986363
type: QuestionComment
has text: You could use relative units (`vw` in this case) so the poster looks the same at different resolutions. But it is not recommendable because the text may become too small and difficult to read, causing accessibility issues.

http://stackoverflow.com/a/79018152
has comment: http://stackoverflow.com/comment/139340212
has body: From the posted HTML code, it appears that the Python output is in a labelled with class="co". I'm no CSS expert, but I believe the way to do this is to modify your CSS code to something like this: pre.sourceCode > code > span.not('co') { display: block; counter-increment: line; } pre.sourceCode > code > span.not('co'):before { content: counter(line); display: inline-block; border-right: 1px solid #ddd; padding-right: 0.5em; margin-right: 0.5em; color: #888; } Hopefully someone who does know CSS better will comment or correct this if I have the syntax wrong.
answers question: http://stackoverflow.com/q/79013297
has comment: http://stackoverflow.com/comment/139339143
type: Answer
score: 0

http://stackoverflow.com/comment/139137845
comment on: http://stackoverflow.com/q/78915244
has text: Every ID in a document must be unique. No ID can be repeated. In your code the `hamburger_menu` ID is repeated, which is invalid.
type: Comment
score: 0
type: QuestionComment

drag-and-drop
tags question: http://stackoverflow.com/q/78955529
tags question: http://stackoverflow.com/q/79051473
tag name: drag-and-drop
tags question: http://stackoverflow.com/q/78966243
type: Tag
tags question: http://stackoverflow.com/q/79113547
tags question: http://stackoverflow.com/q/79275057
tags question: http://stackoverflow.com/q/79493546
tags question: http://stackoverflow.com/q/79519378

http://stackoverflow.com/a/79058399
has body: Firstly, the code I wrote with 'const products =' does not work in a Json file. I need to delete the 'const products =' (see print img attached)[Json file][1], which is why I deleted it. Sorry about that. Second, as you can see, the style property you add with the 'width' and 'border' attributes does not work either. So my problem is not solved, unfortunately. [1]: https://i.sstatic.net/XIJhmRjc.jpg To answer the other comments, I would like to add a class to a specific image but I can't figure out how? Please let me know if you're able to do that. I just would like to know how to target ONE image with CSS so I can style it the way I want. Does not matter which image. I have tried to use the img:nth-child() CSS pseudo-selector but it would target several img, and I only want to target one image. Please let me know if you come up with something.
answers question: http://stackoverflow.com/q/79054258
type: Answer
score: 0
has comment: http://stackoverflow.com/comment/139404805

http://stackoverflow.com/a/79037252
score: 2
upvote count: 2
type: Answer
has body: Make the animation paused then use a negative delay. animation: load 5s forwards -2.5s paused linear; This will stop the animation at 50% since 2.5/5 = .5 = 50% Adjust between 0s and -5s to get between 0% and 100% .color-container { width: 100%; height: 200px; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; } .container { position: relative; width: 50%; border-radius: 4px; box-sizing: border-box; background: #fff; box-shadow: 0 10px 20px rgba(0, 0, 0, .5); } .Loading { position: relative; display: inline-block; width: 100%; height: 10px; background: #f1f1f1; box-shadow: inset 0 0 5px rgba(0, 0, 0, .2); border-radius: 4px; overflow: hidden; } .Loading:after { content: ''; position: absolute; left: 0; width: 0; height: 100%; border-radius: 4px; box-shadow: 0 0 5px rgba(0, 0, 0, .2); animation: load 5s forwards -2.5s paused linear; } @keyframes load { 0.0% { width: 0.0%; background: #94e02d; } 2.04% { width: 2.04%; background: #96e02c; } 4.08% { width: 4.08%; background: #98e12b; } 6.12% { width: 6.12%; background: #9ae12a; } 8.16% { width: 8.16%; background: #9ce229; } 10.2% { width: 10.2%; background: #9ee328; } 12.24% { width: 12.24%; background: #a1e327; } 14.29% { width: 14.29%; background: #a3e426; } 16.33% { width: 16.33%; background: #a5e525; } 18.37% { width: 18.37%; background: #a7e524; } 20.41% { width: 20.41%; background: #a9e623; } 22.45% { width: 22.45%; background: #ace622; } 24.49% { width: 24.49%; background: #aee721; } 26.53% { width: 26.53%; background: #b0e821; } 28.57% { width: 28.57%; background: #b2e820; } 30.61% { width: 30.61%; background: #b4e91f; } 32.65% { width: 32.65%; background: #b6ea1e; } 34.69% { width: 34.69%; background: #b9ea1d; } 36.73% { width: 36.73%; background: #bbeb1c; } 38.78% { width: 38.78%; background: #bdec1b; } 40.82% { width: 40.82%; background: #bfec1a; } 42.86% { width: 42.86%; background: #c1ed19; } 44.9% { width: 44.9%; background: #c4ed18; } 46.94% { width: 46.94%; background: #c…
has comment: http://stackoverflow.com/comment/139361140
downvote count: 0
answers question: http://stackoverflow.com/q/79036823

http://stackoverflow.com/comment/139342183
type: Comment
has text: _"The obvious attempt is to preventDefault() when the hash in the URL changes"_ - when you comment out the call to `horizontal_anchor` in that handler function, you'll see that the page still jumps so that the image aligns on top of the viewport - so apparently your attempt to prevent the event default there didn't work to begin with.
comment on: http://stackoverflow.com/q/79027028
type: QuestionComment
score: 1

http://stackoverflow.com/comment/139290048
type: Comment
score: 0
type: AnswerComment
has text: Hey Nathan, I can confirm that the gradient background works pretty well. Unfotunately, text is still being inverted. Also, on the black background I realized, that gmail ios is messing around with all other colors (borders, background button, etc) as well. As building the template new from scratch is no option at the moment, I think I will just play along with this. But I really appreciate your effort.
comment on: http://stackoverflow.com/a/78996025

http://stackoverflow.com/comment/139322939
type: AnswerComment
has text: @GoldenBags Yes, Bergi explained the `className` value implementation. So were you actually also rendering ***two*** `HeaderSearch` components on top of each one calling ***two*** `useOutsideClick` hooks? You should probably render just one and pass `screenWidth` dynamically, like `<HeaderSearch screenWidth={isMobile ? "mobile" : "desk"} />`.
type: Comment
comment on: http://stackoverflow.com/a/79015259
score: 0

http://stackoverflow.com/a/78995606
answers question: http://stackoverflow.com/q/78991428
accepted answer of: http://stackoverflow.com/q/78991428
type: AcceptedAnswer
has body: Depending on what exactly your goals are, you can use gsap.matchMedia to control at what client size a given set of instructions run, and choose to run them when the browser is resized to the desired width. const aboutContainer = document.querySelector(".about__container"); const aboutContent = gsap.utils.toArray(".about__container .about__content"); const aboutMask = document.querySelector(".about__mask"); let mm = gsap.matchMedia(); // add a media query. When it matches, the associated function will run mm.add("(min-width: 800px)", () => { let scrollTween = () => { gsap.to(aboutContent, { xPercent: -100 * (aboutContent.length - 1), ease: "none", scrollTrigger: { trigger: ".about__container", pin: true, scrub: 1, end: "+=3000", }, }); gsap.to(aboutMask, { width: "100%", scrollTrigger: { trigger: ".about__section", start: "top left", scrub: 1, }, }); let tl = gsap.timeline({ scrollTrigger: { trigger: ".about__container", start: "center bottom", }, }); tl.from(aboutContent, { x: 300, opacity: 0, duration: 1 }); }; scrollTween(); return () => { // optional cleanup instructions? } }); About Content About Container About Mask boilerplate code for matchMedia from here: https://gsap.com/docs/v3/GSAP/gsap.matchMedia()/
type: Answer
score: 0

http://stackoverflow.com/comment/139132405
comment on: http://stackoverflow.com/q/78912766
has text: Can you add image of what you really want because I am finding hard to understand what exactly is your goal.
type: Comment
type: QuestionComment
score: 0

http://stackoverflow.com/comment/139198116
has text: @C3roe - I'm confused. My reading of the duplicate is that it _is_ possible.
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78948175
type: QuestionComment

http://stackoverflow.com/comment/139248487
score: 1
type: Comment
comment on: http://stackoverflow.com/a/78975360
has text: This is the line with the missing closing parenthesis: `const rotateElement = \`rotate(${angle}deg\`;`
type: AnswerComment

http://stackoverflow.com/q/78967831
score: 2
has answer: http://stackoverflow.com/a/78968425
favorite count: 0
type: Question
tagged with: http://stackoverflow.com/tag/html
downvote count: 0
has title: Css vertical-rl does not rotate korean characters
answer count: 1
type: AnsweredQuestion
has body: I'm applying writing-mode: vertical-rl; to a div tag containing the word "A중385" but it only changes the direction of "A385" and the word 중 doesn't change direction. Please help me solve this problem. I am use css writing-mode: vertical-rl; but it's not working this is my sample code: .vertical{ writing-mode: vertical-lr; } A중385
accepted answer: http://stackoverflow.com/a/78968425
has comment: http://stackoverflow.com/comment/139233674
tagged with: css
upvote count: 2

http://stackoverflow.com/comment/139254065
type: AnswerComment
comment on: http://stackoverflow.com/a/78967953
has text: it is a JS issue, no CSS issue.
type: Comment
score: 0

http://stackoverflow.com/q/78971663
score: 0
tagged with: javascript
tagged with: css
tagged with: gallery
has body: So my goal is to have all my images display as the same size, i.e., if a horizontal image is 1300x1000px, then the vertical images in the gallery should be 1000x1300px. As it is now, the gallery-container has a static size based off the widest width image and that images height, it does not seem to incorporate the tallest images height. This results in a gallery where the horizontal images are larger than the vertical images, i.e., 1300x1000px for horizontals and 800x1000px for verticals. I've tried a ton of different CSS approaches and feel that I really am at a place where Javascript is required to achieve this behavior from the gallery-container. Thanks for helping! EDIT for visibility: I'm starting to wonder if this is just not possible with squarespace...
type: UnansweredQuestion
has answer: http://stackoverflow.com/a/78972283
type: Question
answer count: 1
has title: Dynamically resizing the Gallery Block Container in Squarespace so all images are the same size despite their orientation
tagged with: squarespace

http://stackoverflow.com/comment/139237711
comment on: http://stackoverflow.com/q/78968063
type: Comment
score: 0
type: QuestionComment
has text: Yes, reworked the css file and now it works. I did not know about caniuse.com - great help.

http://stackoverflow.com/comment/139408094
score: 1
type: Comment
comment on: http://stackoverflow.com/q/79052206
has text: @DrewReese Thanks for the suggestion on a minimal build for reproducing the problem. I should have thought to try that earlier, but regardless, your suggestion helped me isolate the issue in nginx, not react.
type: QuestionComment

http://stackoverflow.com/q/79005724
type: UnansweredQuestion
score: 1
favorite count: 0
tagged with: opera
tagged with: http://stackoverflow.com/tag/html
type: Question
downvote count: 0
has body: There is a gap at the top left corner. I tried with other images. Still it's the same. It's not the problem of the image. import { useState } from 'react' import './App.css' import Navbar from './components/Navbar' import { Outlet } from 'react-router-dom' function App() { return ( &lt;&gt; &lt;div className='bg'&gt;&lt;/div&gt; &lt;Navbar /&gt; &lt;Outlet /&gt; &lt;/&gt; ) } export default App .bg { background: url(./Assets/14731307_rm218-bb-07.jpg); height: 100%; width: 100%; background-size: cover; background-repeat: no-repeat; position: fixed; background-position: center; padding: 0%; margin: 0%; border: 0; }
upvote count: 1
has title: Background image is not covering the rounded corners of Opera browser
tagged with: background
answer count: 0
tagged with: css

http://stackoverflow.com/q/78934104
answer count: 0
tagged with: css-position
tagged with: stacking-context
type: UnansweredQuestion
tagged with: css
type: Question
linked to: http://stackoverflow.com/q/9191803
has comment: http://stackoverflow.com/comment/139171747
has title: How do these 2 stacking contexts interact with each other?
tagged with: z-index
has body: I have this code .red { width: 100px; height: 100px; background-color: red; transform: translateX(50px); } .blue { width: 100px; height: 100px; background-color: blue; margin-top: -50px; transform: translateX(1px); } Both 's establish a new stacking context, and when you have 2 competing 2 child contexts for sibling elements, the element that comes later in the HTML wins (comes on top). Correct me if I'm wrong. Now I was trying to make the "red" appear on top. I've tried 2 approaches: Adding z-index to each element. I've added a higher z-index to "red". This did not work. However, when I added position: relative in addition to z-index for both elements, suddenly the red element appeared on top. Here is the final (working version) on CodePen. My question was: I'm not quite sure why this works. I have 2 properties ("transform" and "position" which establish 2 stacking contexts). How do they interact with each other in a way that, when I add them in addition to z-index, I get what I want vs. using z-index separately?
score: 0
duplicate of: http://stackoverflow.com/q/9191803

scrollbar
tags question: http://stackoverflow.com/q/79004101
tags question: http://stackoverflow.com/q/79029100
tags question: http://stackoverflow.com/q/78971122
tag name: scrollbar
type: Tag
tags question: http://stackoverflow.com/q/79007402
tags question: http://stackoverflow.com/q/78979198
tags question: http://stackoverflow.com/q/79071270
tags question: http://stackoverflow.com/q/79142289
tags question: http://stackoverflow.com/q/79128894
tags question: http://stackoverflow.com/q/79166083
tags question: http://stackoverflow.com/q/79078080
tags question: http://stackoverflow.com/q/79260696
tags question: http://stackoverflow.com/q/79388023
tags question: http://stackoverflow.com/q/79271570
tags question: http://stackoverflow.com/q/79250936
tags question: http://stackoverflow.com/q/79409162
tags question: http://stackoverflow.com/q/79359091
tags question: http://stackoverflow.com/q/79474757
tags question: http://stackoverflow.com/q/79529201
tags question: http://stackoverflow.com/q/79472393
tags question: http://stackoverflow.com/q/79504394
tags question: http://stackoverflow.com/q/79479298

http://stackoverflow.com/a/79155744
type: Answer
score: 0
answers question: http://stackoverflow.com/q/79061205
has body: It is possible by styling in css and using javascript and in html use normal video tag function toggleFullscreen() { if (!document.fullscreenElement) { document.getElementById('vid-cont').requestFullscreen(); } else if (document.exitFullscreen) { document.exitFullscreen(); } } .video-container { position: relative; } .video { width: 100%; height: 100%; } video::-webkit-media-controls-fullscreen-button { display: none !important; } .fullscreen-button { position: absolute; top: 2%; left: 90%; z-index: 10; } .watermark { position: absolute; left: 3%; top: 3%; color: white; } Moud's Vid Toggle fullscreen Try this. and using it as iframe is will be hard ,so use video tag

http://stackoverflow.com/comment/139358660
type: QuestionComment
comment on: http://stackoverflow.com/q/79035820
type: Comment
has text: @AHaworth In my actual web-page, there is a paragraph & a title, I want the paragraph to pop out on hover. I cannot add padding before as then the title and paragraph won't be left-aligned.
score: 0

http://stackoverflow.com/comment/139139685
comment on: http://stackoverflow.com/q/78913129
type: QuestionComment
has text: @AllanCameron I've tried the Rselenium route before but it didn't pave a path forward, either. So I resorted back to this. How sure are you that rvest is not a viable option here?
type: Comment
score: 0

http://stackoverflow.com/q/79038954
has comment: http://stackoverflow.com/comment/139364110
tagged with: navbar
type: UnansweredQuestion
type: Question
has comment: http://stackoverflow.com/comment/139364272
has comment: http://stackoverflow.com/comment/139364234
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139364304
has body: I am building a navbar after clicking on a hamburger menu which will take the full screen , and inside the navbar there are many links. Focusing on the button will open the navbar but when I press somewhere on the navbar it will close again because of the button:focus. I tried to use button:focus to transform the navbar on the screen but it seems that the focus will still be triggered after opening the navbar. All I want is after pressing the button the navbar will be seen and I can press many times on it and it wont disappear. .openednavbar { /* Make full screen */ position: fixed; /*COMBINE WITH TRANSFORM TO KEEP OUT OF PAGE AND ADD SLIDE EFFECT UNLIKE DISPLAY NONE*/ top: 0; left: 0; height: 100vh; width: 100vw; background: linear-gradient(to bottom, #000000, #111111, #222222, #333333, #444444 90%); padding: 1rem; display: flex; flex-direction: column; transform: translateX(100%); transition: 0.8s; } .buttonmenu { background-color: transparent; outline: none; border: none; height: 24px; width: 24px; cursor: pointer; } .buttonmenu:focus+.openednavbar { transform: translateX(0); }
tagged with: button
score: 0
has title: How to keep Navbar open after pressing button using HTML/CSS?
tagged with: focus
answer count: 0
tagged with: css

http://stackoverflow.com/comment/139319602
score: 1
type: Comment
comment on: http://stackoverflow.com/q/79014407
has text: Have you considered not mounting the HeaderSearch component that isn't in use by conditionally rendering it rather than using CSS to show/hide it?
type: QuestionComment

http://stackoverflow.com/comment/139299508
type: Comment
type: QuestionComment
has text: Hello, I managed to fix it, thanks to the lord and some friends, the problem was in my output.css and now it is working normally. I thank you very much for helping me.
score: 1
comment on: http://stackoverflow.com/q/78996058

http://stackoverflow.com/comment/139238744
comment on: http://stackoverflow.com/q/78970518
type: Comment
score: 0
has text: The last row works fine for me in the snippet.
type: QuestionComment

http://stackoverflow.com/a/78922278
has body: What you're looking for can be done by using display: grid and specify areas. You can change the areas inside of your media query: .container { display: grid; grid-template-areas: "one two" "one three"; } .col-1 { background: red; grid-area: one; } .col-2 { background: green; grid-area: two; } .col-3 { background: lightblue; grid-area: three; } @media screen and (max-width: 1024px) { .container { grid-template-areas: "one two" "three three"; } } One Two Three
type: AcceptedAnswer
upvote count: 2
answers question: http://stackoverflow.com/q/78922197
type: Answer
accepted answer of: http://stackoverflow.com/q/78922197
score: 2
downvote count: 0

http://stackoverflow.com/comment/139148476
type: Comment
has text: Yes perfect, thank you for solution and your time.
type: AnswerComment
comment on: http://stackoverflow.com/a/78918300
score: 0

http://stackoverflow.com/a/78954866
downvote count: 0
answers question: http://stackoverflow.com/q/78954650
has body: You are missing object-position:bottom and align-item:end. Also, since the image is not a child element of the shape, they have to have the same size and position. /* There's no way to inherit from a sibling element. You could set custom properties on common ancestor if wanting to prevent duplicate. */ #banner { display: flex; align-items: end; justify-content: center; width: 50%; height: 87.4%; position: absolute; top: 0; right: 0; } .shape { background-color: #b3e4ff; width: 50%; height: 87.4%; position: absolute; border-radius: 40% 30% 20% 20%; top: 0; right: 0; display: flex; justify-content: center; align-items: center; } #banner img { max-height: 90%; max-width: 70%; object-fit: contain; object-position: bottom; } &lt;div class="shape"&gt;&lt;/div&gt; &lt;div id="banner"&gt; &lt;img src="https://i.sstatic.net/XZ4V5.jpg" alt=""&gt; &lt;/div&gt; That being said, if you move the image under shape, the CSS can be much simpler and more robust. .shape { background-color: #b3e4ff; width: 50%; height: 87.4%; position: absolute; border-radius: 40% 30% 20% 20%; top: 0; right: 0; display: flex; /*justify-content: center; remove if there's nothing else needing this*/ /*align-items: center; remove if there's nothing else needing this*/ } #banner { flex: 1; display: flex; align-items: end; justify-content: center; } #banner img { object-fit: contain; object-position: bottom; max-height: 90%; width: 70%; } &lt;div class="shape"&gt; &lt;div id="banner"&gt; &lt;img src="https://i.sstatic.net/XZ4V5.jpg" alt=""&gt; &lt;/div&gt; &lt;/div&gt;
accepted answer of: http://stackoverflow.com/q/78954650
type: AcceptedAnswer
score: 2
upvote count: 2
type: Answer

http://stackoverflow.com/q/79045030
tagged with: javascript
upvote count: 1
has comment: http://stackoverflow.com/comment/139375781
tagged with: css
answer count: 0
has body: I'm working on some debugging logging prettification and I noticed that when you do longer chunks of styled text, the console tends to add line breaks. I wonder if I can prevent this behavior. Maybe there's something in the styles that could prevent it elegantly? Here's an example: const cssHeadField = `border-bottom: 1px solid grey;font-family: 'Courier New',monospace;font-weight: 600;font-size: 1.2em;background-color: Orange; color: black`; const cssError = `background-color: Red; color: black`; console.log(`no formatting at all %c and now head field kicks in and now it stops: %c and now a bunch of text that has no formatting, oop! %can error here%c some more text with no for... %coh, another error!%c`, cssHeadField, "", cssError, "", cssError, "") console.log(`no formatting at all %c and now head field kicks in and now it stops: %c and now a bunch of text that has no formatting, oop! %can error here, maybe a longer error description too something that would be multiline or something right?%c some more text with no for... %coh, another error! This one is supposed to be long too just to test it out I guess%c`, cssHeadField, "", cssError, "", cssError, "");
has comment: http://stackoverflow.com/comment/139375635
type: UnansweredQuestion
score: 1
favorite count: 0
has title: JS console logging using styles (%c) adds unintended line breaks
type: Question
has comment: http://stackoverflow.com/comment/139375841
has comment: http://stackoverflow.com/comment/139375713
downvote count: 0
tagged with: google-chrome-devtools

http://stackoverflow.com/a/78994510
score: 1
type: AcceptedAnswer
downvote count: 0
type: Answer
answers question: http://stackoverflow.com/q/78994423
has body: For dynamic adjustment, you need to make the error message, from absolute to relative positioning and ensure the parent container is display: flex. Since it's absolute positioned the parent cannot take the dimensions of the child, hence this issue. SCSS: .example-container { .mat-mdc-form-field-subscript-wrapper { display: flex; } .mat-mdc-form-field-hint-wrapper, .mat-mdc-form-field-error-wrapper { position: relative; } } Stackblitz Demo This is the simplest way, you have to add bottom margin, to adjust for the long text. SCSS: .example-container { .first { margin-bottom: 50px; } } HTML: <mat-form-field class="first"> Enter your email <input ... Stackblitz Demo
accepted answer of: http://stackoverflow.com/q/78994423
upvote count: 1

http://stackoverflow.com/comment/139134358
has text: Have you tried without the —webkit? Also what happens in a container set with narrower width?
comment on: http://stackoverflow.com/q/78912045
type: Comment
score: 0
type: QuestionComment

http://stackoverflow.com/comment/139262372
score: 0
has text: You need to try by yourself and then show us, where you got problems and then we will help you.
comment on: http://stackoverflow.com/q/78979287
type: QuestionComment
type: Comment

http://stackoverflow.com/comment/139278796
score: 0
has text: I can't reproduce your issue in my side, I worked on a .net 8 blazor web app interactive server render mode, and everything worked well. Could you please help check in browser console window about whether the class name is set correctly and whether the class is attached, https://i.sstatic.net/QSTm5YnZ.png and whether the `projectName.style.css` is loaded into the browser? https://i.sstatic.net/3Gch5MMl.png
type: QuestionComment
comment on: http://stackoverflow.com/q/78987974
type: Comment

http://stackoverflow.com/q/78932108
type: UnansweredQuestion
tagged with: bootstrap-5
has comment: http://stackoverflow.com/comment/139168531
has body: How can I make my side menu in a Blazor Server application (.net 6 Blazor Server) like Gmail's left menu, where only icons are displayed at first, and hovering on the menu expands the menu and displays names, without narrowing the main body section? I have included my current menu and CSS files. Here is my current menu: Left Nav menu Here is the NavMenu.razor: @*Collapsible*@ Home @* Dashboard *@ Dashboard Orders @* Order List *@ Order List @* File Upload/Download *@ File Upload/Download @* Report *@ Report Vendors Vendor Management Customers Customer Management Administration User Management Warehouse Management Here is the MainLayout.razor: @inherits LayoutComponentBase Vorlance <NavMenu /> @*Register Log in*@ <LoginDisplay/> @Body <RadzenDialog /> <RadzenNotification/> @code { private bool collapseNavMenu = true; private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null; private void ToggleNavMenu() { collapseNavMenu = !collapseNavMenu; } } Here is the sidebar.css: body { min-height: 100vh; min-height: -webkit-fill-available; } html { height: -webkit-fill-available; } /*main { display: flex; flex-wrap: nowrap; height: 100vh; height: -webkit-fill-available; max-height: 100vh; overflow-x: auto; overflow-y: hidden; }*/ .sidebarmain { display: flex; flex-wrap: nowrap; height: 100vh; height: -webkit-fill-available; max-height: 100vh; overflow-x: hidden; overflow-y: hidden; background-color: #ced0da !important; } .b-example-divider { flex-shrink: 0; width: 1.5rem; height: 100vh; background-color: rgba(0, 0, 0, .1); border: solid rgba(0, 0, 0, .15); border-width: 1px 0; box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15); } .bi { vertical-align: -.125em; pointer-events: none; fill: currentColor; } .dropdown-toggle { outline: 0; } .nav-flush .nav-link { border-radius: 0; } .btn-toggle { display: inline-flex; align-items: center; padding: .25rem .5rem; font-weight: 600; color: rgba(0, 0, 0, .65); background-color: transpar…
has comment: http://stackoverflow.com/comment/139174550
type: Question
tagged with: asp.net-core
has comment: http://stackoverflow.com/comment/139168146
answer count: 1
has answer: http://stackoverflow.com/a/78937262
tagged with: blazor-server-side
score: 0
has title: How to make a responsive side nav like Gmail with Bootstrap 5?
tagged with: css
has comment: http://stackoverflow.com/comment/139170298

http://stackoverflow.com/a/79068383
score: 1
has comment: http://stackoverflow.com/comment/139421326
type: Answer
downvote count: 0
answers question: http://stackoverflow.com/q/79066201
upvote count: 1
has body: No, you cannot do this. A page can only modify the content document of an &lt;iframe&gt;: if its content document is served from the same origin as the page, or if its content document is served with the CORS header Access-Control-Allow-Origin set to the same origin as the page, or a wildcard value. From my experimentation, Microsoft Forms does not set this CORS header when serving the embedded form, neither does there appear to be a way to configure it to do so.

transition
tag name: transition
type: Tag
tags question: http://stackoverflow.com/q/79039982
tags question: http://stackoverflow.com/q/79003457
tags question: http://stackoverflow.com/q/79072394
tags question: http://stackoverflow.com/q/79132058
tags question: http://stackoverflow.com/q/79363330
tags question: http://stackoverflow.com/q/79393047
tags question: http://stackoverflow.com/q/79538849
tags question: http://stackoverflow.com/q/79476719

http://stackoverflow.com/a/78974992
type: AcceptedAnswer
type: Answer
has body: The specific problem here is that I used the tag to set up the background-image. This - i guess - forced django to send the request with Content-Type: application/xml that gets blocked. Changing the code to: ... fixed the problem.
answers question: http://stackoverflow.com/q/78948123
score: 0
accepted answer of: http://stackoverflow.com/q/78948123
has comment: http://stackoverflow.com/comment/139252269
has comment: http://stackoverflow.com/comment/139251948

http://stackoverflow.com/comment/139318350
has text: @0stone0 The question is different to https://stackoverflow.com/questions/1520429/is-there-a-css-selector-for-elements-containing-certain-text in that regard, that there is only a partial match needed/required, instead of an exact match
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/79013945

http://stackoverflow.com/q/79016921
has body: I’m working on a React.js project using Material UI. I want to change the color of the dropdown select icon when I hover over it. However, I only want the icon to change color only when I hover over the select icon, and not the entire select component. The current code is import ExpandMore from "@mui/icons-material/ExpandMore"; I tried using the &:hover attribute, but it changes the color of the entire select box when I hover over it. I also tried using inspect element to change the z-index of the icon. Lastly, I also tried passing the color change as a prop, but this caused the select icon to lose its functionality and become unclickable. //tsx file IconComponent={(iconProps) => ( <ExpandMore {...iconProps} className="MuiSelect-icon" /> )} //CSS file .MuiSelect-icon { color: #121212 !important; // pointer-events: visiblePainted; &:hover { color: #0645c5; } }
type: UnansweredQuestion
tagged with: hover
type: Question
has title: Changing the color of the dropdown select icon when hovering over the icon in Material UI
answer count: 1
tagged with: reactjs
score: 0
has answer: http://stackoverflow.com/a/79054130
has comment: http://stackoverflow.com/comment/139350575
tagged with: material-ui
tagged with: css
tagged with: dropdown

http://stackoverflow.com/a/79038077
type: Answer
has body: Assuming that the gif is inside a element and has its id attribute set to "elementId", you can do the following to display the gif: function displayExplosion() { document.getElementById('elementId').style.display = 'block'; } Also, be sure to handle your timer, i.e, reset it or clear it. Have a look at this for more info. To learn more about the display css property, visit: https://developer.mozilla.org/en-US/docs/Web/CSS/display
answers question: http://stackoverflow.com/q/79038018
score: 0

http://stackoverflow.com/comment/139240597
has text: if you change the `background-image: url("https://img.freepik.com/free-photo/sports-car-driving-asphalt-road-night-generative-ai_188544-8052.jpg");`, do you get any result?
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78971420

http://stackoverflow.com/comment/139281275
score: 0
type: Comment
comment on: http://stackoverflow.com/q/78993739
has text: @C3roe Thank you very much for your answer, I edited my message, indeed I tried src: url(), it is a wrong copy/paste on my side, my bad. For the local part, I understand I need to put a font name, but what are the steps so my custom font is taken into account? I guess if I just put local("testFont"), it needs to be integrated in the OS, right?
type: QuestionComment

http://stackoverflow.com/comment/139321297
type: AnswerComment
has text: @Bergi True... I think I initially went down the path of two sub-components, but then realized they render the same content and got stuck on the refactor into component path. I'll update.
type: Comment
comment on: http://stackoverflow.com/a/79015259
score: 0

http://stackoverflow.com/comment/139358999
type: QuestionComment
comment on: http://stackoverflow.com/q/79021330
has text: Can you please share the version in Chrome find issue, so I am helping us
score: 0
type: Comment

google-chrome-devtools
tag name: google-chrome-devtools
type: Tag
tags question: http://stackoverflow.com/q/79028325
tags question: http://stackoverflow.com/q/79045030
tags question: http://stackoverflow.com/q/78951014
tags question: http://stackoverflow.com/q/79231826
tags question: http://stackoverflow.com/q/79218159
tags question: http://stackoverflow.com/q/79235765
tags question: http://stackoverflow.com/q/79198956
tags question: http://stackoverflow.com/q/79386201
tags question: http://stackoverflow.com/q/79273129
tags question: http://stackoverflow.com/q/79480893

http://stackoverflow.com/a/78942210
has body: You are setting the background color of everything (including divs) to black. If you want to change the background color of the body, replace * with body: body { background-color: black; } .container { position: relative; text-align: center; color: white; } .bottom-left { position: absolute; bottom: 8px; left: 16px; } .top-left { position: absolute; top: 8px; left: 16px; } .top-right { position: absolute; top: 8px; right: 16px; } .bottom-right { position: absolute; bottom: 8px; right: 16px; } .centered { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } Image Text How to place text over an image: Bottom Left Top Left Top Right Bottom Right Centered
type: AcceptedAnswer
accepted answer of: http://stackoverflow.com/q/78942176
score: 2
downvote count: 0
type: Answer
upvote count: 2
answers question: http://stackoverflow.com/q/78942176

http://stackoverflow.com/comment/139219713
score: 1
comment on: http://stackoverflow.com/a/78960225
type: Comment
type: AnswerComment
has text: @rozsazoltan Thanks for your answer, but I did it like this to make the code shorter. You can also put it in the if block if you wish.

http://stackoverflow.com/comment/139166784
score: 0
has text: I provided live version of my code. Fsr, in your code, I see them rendered vertically. I want them to be horizontally. Check out the live version and be sure to set bigger width of your screen. Just then, it will render full content.
type: QuestionComment
comment on: http://stackoverflow.com/q/78925071
type: Comment

http://stackoverflow.com/comment/139192015
comment on: http://stackoverflow.com/a/78938039
has text: Awesome, thanks!
type: Comment
score: 0
type: AnswerComment

http://stackoverflow.com/comment/139352773
type: Comment
score: 0
type: AnswerComment
has text: @user27361334 You should use the path to your owne SVG files. The data URIs in the example are just for showing that it works with the limitations of StackOverflow.
comment on: http://stackoverflow.com/a/79030977

http://stackoverflow.com/a/78933247
has body: You have set the width of intro heading text which is 757px when your screen size is less than the width there will be white space to contain 757px width just remove the width. And one more issue is when your screen size is small responsive view you need to bring all your menu under a button like a dropdown which is much easy by using Bootstrap. body { margin: 0; padding: 0; } .page { display: flex; align-content: center; flex-direction: column; position: relative; width: 100%; font-family: "Poppins", sans-serif; } .head { position: relative; display: inline-flex; flex-direction: row; justify-content: space-between; width: 100%; background: linear-gradient(90deg, rgba(15, 34, 60) 0%, rgba(16, 25, 37) 100%); } .head img { width: 200px; } .head::before { display: inline-flex; content: ""; position: absolute; width: 100%; height: 1px; background: linear-gradient(90deg, rgba(217, 217, 217, 0) 0%, #D9D9D9 35%, #D9D9D9 65%, rgba(217, 217, 217, 0) 100%); top: 100%; z-index: 1; } .head ul { position: relative; display: inline-flex; list-style: none; width: 30%; justify-content: space-between; color: white; font-size: 16px; align-items: center; } .con { position: relative; display: inline-flex; width: 20%; justify-content: space-between; align-items: center; } .con button { border: none; background-color: #58B3C8; font-size: 16px; color: white; width: 135px; height: 36px; border-radius: 2px; } .con i { display: inline-flex; align-self: center; justify-content: flex-start; color: white; margin-left: 20px; } .con p { color: white; margin-right: 40px; } .intro { position: relative; display: flex; width: 100%; align-items: center; justify-content: center; height: 525px; background: linear-gradient(90deg, rgba(15, 34, 60) 0%, rgba(16, 25, 37) 100%); } .intro::before { display: flex; content: ""; position: absolute; background-image: url(../images/Asset.png); background-position: center; background-size: cover; background-blend-mode: darken; width: 100%; height: 525px; opacity: 0.…
type: Answer
score: 0
answers question: http://stackoverflow.com/q/78933097

http://stackoverflow.com/q/79003133
tagged with: javascript
type: UnansweredQuestion
tagged with: dictionary
tagged with: css
type: Question
score: 0
has title: The geolocation pin is not displayed on the map
tagged with: http://stackoverflow.com/tag/html
answer count: 0
has body: I'm a novice developer. The third day I can't understand what the problem is, I created an Aure Map, then I need to link it to the dynamics 365 fields, but the whole problem is that the map does not display a pin with geolocation, tell me what the problem is. My Code: Azure Map Integration I tried different things from azure map documentation to gpt the problem was not solved, the key if something is there and is also inscribed

http://stackoverflow.com/a/79024063
score: 1
has comment: http://stackoverflow.com/comment/139352452
has comment: http://stackoverflow.com/comment/139344169
upvote count: 2
has body: Here's an alternative to font-style property's animation with skewing, as @herrstrietzel suggested above, like so: .wrap { overflow: hidden; padding: 10px; } h1 { animation: slidein 3s infinite; } @keyframes slidein { from { transform: skew(0deg); /* Initial state */ } to { transform: skew(-30deg); /* Skew to create an oblique-like effect */ } } text
type: Answer
downvote count: 1
answers question: http://stackoverflow.com/q/79023867

http://stackoverflow.com/comment/139388469
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/79051111
has text: I will check it out... this seems to behave exactly the way I wanted. Thank you! I will mark it answered after taking a closer look.
type: Comment

http://stackoverflow.com/a/78988203
answers question: http://stackoverflow.com/q/78987305
type: Answer
score: 0
has body: Make sure that your JavaScript is executed as soon as possible. It is always a good idea to have you JavaScript defined in the element. You can add the defer attribute to the script tag to make sure that the code is executed before the DOMContentLoaded event. But having the inline JavaScript in the will also do that. The event DOMContentLoaded is fired when the DOM is ready and you can start manipulating the DOM. When that happens you can set the (dark/light) mode. In the following example I removed a lot of the JavaScript. The less you manipulate the DOM, the better. And I rely on CSS to switch between the two different modes. In the example I comment out the code for localStorage, because it doesn't work on StackOverflow. :root { --textColor: #313131; --backgroundColor: #e0e0e0; } :root:has(form[name="mode"] input:checked) { --textColor: #eaeaea; --backgroundColor: #333333; } body { color: var(--textColor); background-color: var(--backgroundColor); } form[name="mode"] input { display: none; } form[name="mode"] label { cursor: pointer; background-color: gray; border: thin black solid; border-radius: .2em; padding: .2em; } form[name="mode"] label::before { content: "Wechsel zu Darkmode"; } form[name="mode"] label:has(input:checked)::before { content: "Wechsel zu Lightmode"; }

charts
tag name: charts
type: Tag
tags question: http://stackoverflow.com/q/78975591
tags question: http://stackoverflow.com/q/79376671
tags question: http://stackoverflow.com/q/79531736

http://stackoverflow.com/comment/139152015
has text: which select box?
type: QuestionComment
score: 1
comment on: http://stackoverflow.com/q/78923550
type: Comment

http://stackoverflow.com/comment/139292384
type: QuestionComment
type: Comment
score: 0
has text: It's working fine when I tried to reproduce the issue, what installation of tailwind did you follow?
comment on: http://stackoverflow.com/q/78996058

http://stackoverflow.com/comment/139348828
type: Comment
score: 0
comment on: http://stackoverflow.com/q/79030490
type: QuestionComment
has text: @AHaworth I changed the example. The cell may have any backcolor and the span may have any backcolor and any color

http://stackoverflow.com/comment/139214300
comment on: http://stackoverflow.com/q/78957279
has text: You have some non-standard HTML tags and you tagged this with php and mpdf but none of that is included in the question or markup. You are going to have to explain that. In addition, the `align` attribute has been obsolete for over 20 years.
type: Comment
score: 0
type: QuestionComment

stylish
tag name: stylish
tags question: http://stackoverflow.com/q/79049581
type: Tag

http://stackoverflow.com/comment/139294446
score: 0
comment on: http://stackoverflow.com/q/79000658
has text: @SyndRain I know that, but notice that the later layer doesn't have `:hover` pseudo-class. What's wrong?
type: QuestionComment
type: Comment

http://stackoverflow.com/comment/139446674
comment on: http://stackoverflow.com/a/79057991
has text: Why would you need to prevent a CSS injection attack? Unless you're storing raw user input on the server and sending that raw input back to the client (which you hopefully aren't doing anyways)...
type: Comment
score: 0
type: AnswerComment

http://stackoverflow.com/comment/139158118
has text: using if(``element.style.border``) {} to check for it's existence. Even [cssText](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/cssText) works fine.
type: Comment
score: 3
comment on: http://stackoverflow.com/q/78926741
type: QuestionComment

http://stackoverflow.com/comment/139210847
type: AnswerComment
comment on: http://stackoverflow.com/a/78936086
type: Comment
has text: As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer).
score: 0

http://stackoverflow.com/comment/139142560
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78918565
has text: Can you be more clear about weird spacing? What do you mean exactly?
type: Comment

http://stackoverflow.com/q/78961384
upvote count: 1
favorite count: 0
has answer: http://stackoverflow.com/a/78961438
has title: Why is the font color not visible in this inline CSS formatting?
accepted answer: http://stackoverflow.com/a/78961438
tagged with: http://stackoverflow.com/tag/html
type: Question
answer count: 1
tagged with: background-color
type: AnsweredQuestion
score: -1
downvote count: 2
has body: I expected to see a white font, but everything is blue. Why does this happen? Hello, World! I tried running this on the Liveweave website.
tagged with: css

http://stackoverflow.com/comment/139174787
score: 0
type: AnswerComment
type: Comment
comment on: http://stackoverflow.com/a/78935743
has text: I tried creating a hidden cell in the fourth row ` &nbsp; ` with CSS height and width zero and border none, and putting the letter i in a fifth row, which gets pretty close, but not technically the answer. You can see the code here: https://jsfiddle.net/j3pydev/ayjguvm3/

http://stackoverflow.com/comment/139401361
comment on: http://stackoverflow.com/q/79059469
type: Comment
score: 0
type: QuestionComment
has text: Yeah, that's what spinning my head. I couldn't locate where I'm doing wrong. My best bet is that my initial_data function, I'll just rewrite it.

http://stackoverflow.com/comment/139284185
has text: Thank you for your help, actually, I wanted to load the font locally, I managed to do it, [you can see my post about it](https://stackoverflow.com/a/78995258/6386824)
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78994354

http://stackoverflow.com/a/79009326
answers question: http://stackoverflow.com/q/79009313
has body: The button has a class flex-end. Remove that and the button will go to the top since the container has a property of align-items: start. To align the button, you'll need to use margin-top to offset the height of labels on other components.
score: 1
type: AcceptedAnswer
downvote count: 0
type: Answer
upvote count: 1
accepted answer of: http://stackoverflow.com/q/79009313

http://stackoverflow.com/comment/139218636
score: 0
comment on: http://stackoverflow.com/q/78959474
type: QuestionComment
has text: Perhaps this helps: https://developer.mozilla.org/en-US/docs/Web/CSS/word-break
type: Comment

http://stackoverflow.com/comment/139248954
comment on: http://stackoverflow.com/q/78975591
type: QuestionComment
has text: No, there’s a “JavaScript/HTML/CSS snippet” button that will let readers run your code in place right in the question.
score: 1
type: Comment

header
type: Tag
tag name: header
tags question: http://stackoverflow.com/q/78921533
tags question: http://stackoverflow.com/q/79221989
tags question: http://stackoverflow.com/q/79429125

http://stackoverflow.com/comment/139200215
type: Comment
score: 0
type: QuestionComment
has text: I was able to resolve this issue by using JS and translateY. Updated version is up in codepen if you guys are curious.
comment on: http://stackoverflow.com/q/78933187

http://stackoverflow.com/comment/139296155
comment on: http://stackoverflow.com/q/79001690
type: QuestionComment
has text: I'm not familiar with webflow but I guess you should upload those images as assets and retrieve their absolute urls to use in the src of the correspondent img element. You asked this same question yesterday I remember and I think it didn't receive an answer because you were not clear about this aspect
type: Comment
score: 0

http://stackoverflow.com/q/78941501
has comment: http://stackoverflow.com/comment/139187085
has comment: http://stackoverflow.com/comment/139192686
tagged with: css
has title: box-shadow bleeding outside of clip-path bounds
has comment: http://stackoverflow.com/comment/139187603
has answer: http://stackoverflow.com/a/78941548
type: UnansweredQuestion
type: Question
tagged with: clip-path
tagged with: http://stackoverflow.com/tag/html
answer count: 1
has body: I'm seeing anti-aliased vertical lines between items in a horizontal menu that shouldn't be there to the best of my knowledge. I'm trying to create seamless shadows below all of items that aren't active, using a combination of box-shadow and clip-path to remove the shadow on all sides but the bottom, but it appears some of the shadow is escaping the clip-path. The lines are more or less visible at different zoom levels, leading me to think that the element bounds used by the box shadow and clip paths aren't the same (different by half pixels perhaps?) but I've not been able to validate that by specifying fixed widths - what am I doing wrong here? Any help much appreciated! * { box-sizing: border-box; } header { --color-text: rgba(0, 0, 0, 0.7); --color-theme-1: #00a99d; --shadow-bottom: 0 -4px 4px 4px rgba(0, 0, 0, 0.6); --shadow-side: 0 0 4px 2px rgba(0, 0, 0, 0.6); --shadow-clip: border-box inset(0 0 -4px 0); } nav { background: rgba(0, 0, 60, 0.3); display: flex; flex: 1; align-items: stretch; } .spacer { display: flex; flex: 1; } ul { padding: 0; margin: 0; height: 3em; display: flex; align-items: stretch; list-style: none; } li, .spacer { position: relative; box-shadow: var(--shadow-bottom); clip-path: var(--shadow-clip); } li[aria-current='page'] { background: white; box-shadow: none; clip-path: var(--shadow-clip); } li[aria-current='page'] a { color: var(--color-text-light); } li[aria-current='page']::before, li[aria-current='page']::after { content: ''; width: 1px; position: absolute; box-shadow: var(--shadow-side); top: 2px; bottom: 1px; } li[aria-current='page']::before { left: -3px; } li[aria-current='page']::after { right: -3px; } nav a { display: flex; height: 100%; align-items: center; padding: 0 0.5rem; color: var(--color-text); font-weight: 700; font-size: 1rem; letter-spacing: 0.1em; text-decoration: none; } Home About Contact Us
score: 0

http://stackoverflow.com/q/78933453
upvote count: 0
accepted answer: http://stackoverflow.com/a/78933480
score: -2
favorite count: 0
has comment: http://stackoverflow.com/comment/139171726
tagged with: http://stackoverflow.com/tag/html
downvote count: 2
type: Question
has body: When my Wordpress page at https://www.twerskitorah.com/ renders, it doesn't just appear on the page. Instead it kind of slides in from the left to the right and I want to stop this. I've looked for 'transition:' in several places and can't seem to locate where this should be changed. Is CSS causing this? How can I turn it off? This site uses the generatepress theme and the pagelayer plugin. I have added transition: none; to the html section of the all.css file but the content still slides in I have added this code to combined.css in pageplayer and the problem persists. I am not sure where to look or where to put the 'none' directive. Thank you!
answer count: 1
type: AnsweredQuestion
tagged with: wordpress
has comment: http://stackoverflow.com/comment/139170537
has answer: http://stackoverflow.com/a/78933480
has title: Is CSS making the content of my page slide in from the left to the right upon rendering?
tagged with: css

http://stackoverflow.com/comment/139281952
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78987974
has text: From the beggining I got errors in webbrowser console: ```Failed to load resource: the server responded with a status of 400 ()``` for ```KS24.styles.css:1, app.css:1, favicon.png:1``` The mark ```b-something``` is added to html, but there is no class in css. Only bootstrap is loaded. I can share all project to You, but not in public. Is there some possibility to make it? If yes, You can find contact to me in my profile.
type: Comment

http://stackoverflow.com/comment/139294344
type: QuestionComment
comment on: http://stackoverflow.com/q/78996274
type: Comment
score: 0
has text: @BrettDonald I basically want to have a bounding box around the glyph (tight), so I know what to expect when I add surrounding elements and padding, etc.. I would also like this to work for any font (not just Tibetan).

http://stackoverflow.com/comment/139173361
has text: It will work on all type browsers ?
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78930566

http://stackoverflow.com/comment/139322832
type: Comment
has text: @SyndRain I see, thank you, will do. Have a good day/evening wherever you are.
type: QuestionComment
score: 1
comment on: http://stackoverflow.com/q/79015820

http://stackoverflow.com/comment/139293736
comment on: http://stackoverflow.com/a/78997611
has text: Thank you for the answer. This actually did resolve the problem and I was unaware of using an existing image as a mask. Saved alot of time trying to generate a clip path :)
type: Comment
score: 0
type: AnswerComment

http://stackoverflow.com/a/78975023
answers question: http://stackoverflow.com/q/78974973
type: Answer
has body: The issue is how you linked to the script in your HTML. You should use the I'd also recommend a change to your JavaScript, since your current code will probably freeze the page. If you want the number to move up once per second, for example, your current JS won't work; it will just move the number up forever without any delay and probably crash. var number = 1; // Start with one, since setInterval won't run the code initially but waits until the first second has passed // Update the counter every second (1000 ms) setInterval(function() { document.getElementById("counter").innerHTML = number; number++; }, 1000); body { background-color: rgb(255, 169, 0); } h1, p { text-align: center; color: rgb(255, 69, 0); background-color: rgb(148, 43, 226); margin-left: auto; margin-right: auto; } JS Website Counter 0 You could keep your original counter implementation, but I don't recommend it. Also, you might want to add defer to your script to make sure that the HTML page is fully loaded before running it, or you'll get errors from JS when you try to select the counter element…
score: 0
has comment: http://stackoverflow.com/comment/139248980

http://stackoverflow.com/comment/139123314
type: QuestionComment
comment on: http://stackoverflow.com/q/78907243
has text: check this. and you can use wild card. https://stackoverflow.com/questions/32475702/turning-a-dynamic-css-selector-to-a-static-one
type: Comment
score: 0

http://stackoverflow.com/comment/139345188
type: AnswerComment
comment on: http://stackoverflow.com/a/79028000
has text: Highly doubtful performance will be a factor. I would expect good performance across the board -- but if worried, can always test on an old mobile device or something.
type: Comment
score: 0

http://stackoverflow.com/comment/139402462
has text: because `checkValidity` is a reserved word. change your name to `checkPassword` or anything else. Change also ` ` to ` `...
score: 3
comment on: http://stackoverflow.com/q/79060016
type: QuestionComment
type: Comment

http://stackoverflow.com/comment/139280744
has text: @DarkBee Can I somehow make the scrollbar be at 100vh and not 150vh?
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78993016

http://stackoverflow.com/comment/140064972
type: Comment
score: 0
comment on: http://stackoverflow.com/a/79063106
type: AnswerComment
has text: i experimented with clip-path on view-transition-group, and it partially works, but there is an initial flicker before the animation starts where the element is fully visible

http://stackoverflow.com/comment/139372569
score: 0
type: QuestionComment
has text: Could you create a CodeSandbox example or another resource to help us investigate the issue?
comment on: http://stackoverflow.com/q/79040050
type: Comment

http://stackoverflow.com/a/78925649
score: 1
has comment: http://stackoverflow.com/comment/139157581
has body: You can use an :nth-child() selector. table, th, td { padding: 10px; border: 1px solid black; border-collapse: collapse; } tr > :nth-child(2) { background-color: red; } q w e r t y q1 w1 e1 r1 t1 y1 q2 w2 e2 r2 t2 y2
downvote count: 0
type: Answer
upvote count: 1
answers question: http://stackoverflow.com/q/78924175
has comment: http://stackoverflow.com/comment/139161821

http://stackoverflow.com/comment/139141523
has text: Add a background color for `#gameFieldDraftPlayersPitch`, and you will easily see that your canvas is _on top_ of those links, on the z-axis. Either place it below them, or make the canvas element itself ignore any pointer events using `pointer-events: none`. (The latter would of course only make sense, if you don't need to interact with the canvas itself using the mouse/pointing device.)
type: Comment
comment on: http://stackoverflow.com/q/78918024
type: QuestionComment
score: 4

django-templates
tags question: http://stackoverflow.com/q/78908954
tag name: django-templates
type: Tag
tags question: http://stackoverflow.com/q/79069976
tags question: http://stackoverflow.com/q/79069585
tags question: http://stackoverflow.com/q/79192257
tags question: http://stackoverflow.com/q/79275584
tags question: http://stackoverflow.com/q/79537942

http://stackoverflow.com/q/78991516
type: Question
tagged with: css
has answer: http://stackoverflow.com/a/78991582
has title: How to align SVG icons in text without using flexbox while maintaining truncation?
score: 0
tagged with: http://stackoverflow.com/tag/html
has body: .box { width: 230px; border: 1px solid black; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } svg { /* The size of the icon can vary */ width: 24px; height: 24px; } This is text and it should truncate In this example we have some Text with an SVG in it. I gave the SVG a height & width of 24px but that size may change. Is there a way to consistently center the SVG regardless of the size of the SVG without breaking the truncation? (Adding display: flex breaks the ellipsis truncation). I have also tried the strategy listed here in this blog post but it requires the SVG to have height/width of 1em, if I increase that size I'm not sure how to dynamically calculate the top value.
has answer: http://stackoverflow.com/a/78992214
type: UnansweredQuestion
answer count: 2

http://stackoverflow.com/comment/139332423
comment on: http://stackoverflow.com/q/79021574
has text: This is snot a grid sturcture. It is a case where CSS float could be correctly used.
type: QuestionComment
score: 1
type: Comment

http://stackoverflow.com/q/78911849
tagged with: responsive-design
answer count: 0
tagged with: css
type: UnansweredQuestion
score: 0
has body: Say I have a text container, can the font auto adjust so that the text inside fits in exactly one line and takes up the entire container width without overflowing? With only CSS. Like hypothetically if I had a and I set the font size to auto, and auto did the thing I described earlier. (Note: This isn't a duplicate of this other question, because the solution to that question doesn't make the text fit in exactly one line and the font still has to be set to a magic number like 1em or 2em.)
type: Question
has comment: http://stackoverflow.com/comment/139193770
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139131145
has comment: http://stackoverflow.com/comment/139411503
linked to: http://stackoverflow.com/q/16056591
has title: Auto adjust the font size of a container so that the text is only one line but takes up the entire container width (CSS only)

http://stackoverflow.com/a/78986510
has comment: http://stackoverflow.com/comment/139270405
answers question: http://stackoverflow.com/q/78986438
downvote count: 0
has comment: http://stackoverflow.com/comment/139268007
upvote count: 1
has comment: http://stackoverflow.com/comment/139267993
score: 1
has body: Use flex property. See this doc .container { width: 500px; height: 300px; display: flex; } .section-a { flex: 0.4; background-color: coral; } .section-b { flex: 0.6; background-color: blueviolet; } /* Below code will center the content inside section a and b */ .section-a, .section-b { display: flex; justify-content: center; align-items: center; } Section A Section B
type: Answer

http://stackoverflow.com/comment/139232544
type: Comment
comment on: http://stackoverflow.com/a/78950019
score: 0
type: AnswerComment
has text: Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer).

biomejs
tag name: biomejs
tags question: http://stackoverflow.com/q/78929034
type: Tag

http://stackoverflow.com/comment/139163529
type: QuestionComment
comment on: http://stackoverflow.com/q/78926909
type: Comment
score: 0
has text: @AHaworth Surely inconvenient for other use cases, but the buggy output still doesn't make sense to me.

scrolltrigger
tag name: scrolltrigger
tags question: http://stackoverflow.com/q/79023206
type: Tag
tags question: http://stackoverflow.com/q/79498333
tags question: http://stackoverflow.com/q/79475090

http://stackoverflow.com/comment/139399669
has text: Thank you for showing those examples. So the ` ` slot is processed but doesn't replace the existing one, and doesn't work because it isn't prefixed with `::part()`. Then if we want to replace all the CSS of the shadow root then we need to wipe out the existing styles and append the slotted ones manually?
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/79058183

http://stackoverflow.com/q/79048332
has answer: http://stackoverflow.com/a/79048426
has title: Shortening the text in a block, relative to the width of the block
tagged with: css
tagged with: flexbox
has body: The problem is in the text. There is a card with information with a fixed width, consisting of 3 parts (checkbox, info, status). The checkbox and status have a fixed width, and the info takes up the remaining space. In the info block, there are 2 blocks that include a description of the information in the block and a link to it (block 1 is 2 times smaller than block 2(optional)). The link is very long and needs to be shortened with ellipses. This is easy to achieve if the block only contains text. But if there are other blocks, then everything goes beyond the boundaries. I am pasting an example code below. The application is on Next JS, so if the response uses React, then ok. bbb description aaaaaaaaaaaaaaaaaa copy description aaaaaaaaaaaaaaaaaa status .card { display: flex; align-items: end; width: 400px; gap: 10px; padding: 10px; border-radius: 10px; background-color: gray; } .card__checkbox { display: flex; justify-content: center; align-items: center; height: 65px; border-radius: 5px; background-color: lightblue; } .card__status { display: flex; justify-content: center; align-items: center; height: 65px; border-radius: 5px; background-color: lightgreen; } .card__info { display: flex; gap: 10px; } .info-block { display: flex; flex-direction: column; max-width: 100%; gap: 5px; padding: 5px; border-radius: 10px; background-color: bisque; } .info-block__text-wrapper { display: flex; gap: 10px; padding: 10px; background-color: gainsboro; border: 1px solid red; border-radius: 5px; } .info-block__text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } I spent about 3 hours and still no result. I tried many ways. I asked gpt many times and all to no avail. The closest result I got was with a plain text block. bbbbbbb aaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbb .wrapper { display: flex; align-items: center; width: 200px; gap: 10px; } .b { flex-shrink: 0; } .childs-wrapper { display: flex; flex-grow: 1; max-width: 100%; gap: 5px; over…
score: 0
accepted answer: http://stackoverflow.com/a/79048426
type: Question
answer count: 1
tagged with: http://stackoverflow.com/tag/html
type: AnsweredQuestion

adsense
type: Tag
tags question: http://stackoverflow.com/q/79023748
tag name: adsense
tags question: http://stackoverflow.com/q/79339166

http://stackoverflow.com/q/78925225
score: 0
tagged with: stimulusjs
favorite count: 0
has body: I'm working on a website with 9 sections and implemented an infinite scroll feature. When you reach the last section, the first one is added to the bottom of the page. This works fine in most browsers, but I'm encountering issues in Safari and on mobile devices after deploying to Heroku. I'm using Rails and Stimulus import { Controller } from "@hotwired/stimulus"; export default class extends Controller { static targets = ["section", "selectedImage", "dropbtn", "navbar"]; sectionIds = ["section1", "section2", "section3", "section4", "section5", "section6", "section7", "section8", "section9"]; connect() { this.prevScrollpos = window.scrollY; this.navbarTarget.style.transform = "translateY(-100%)"; this.scrollHandler = this.handleScroll.bind(this); this.infiniteScrollHandler = this.checkInfiniteScroll.bind(this); window.addEventListener("scroll", this.scrollHandler); window.addEventListener("scroll", this.infiniteScrollHandler); this.observeSections(); } disconnect() { window.removeEventListener("scroll", this.scrollHandler); window.removeEventListener("scroll", this.infiniteScrollHandler); } handleScroll() { let currentScrollPos = window.scrollY; if (this.prevScrollpos > currentScrollPos) { this.navbarTarget.style.top = "0"; } else { this.navbarTarget.style.top = "100px"; } this.prevScrollpos = currentScrollPos; } toggleDropdown() { const dropdown = document.getElementById("myDropdown"); dropdown.style.display = dropdown.style.display === "block" ? "none" : "block"; } scrollToSection(event) { event.preventDefault(); const imageSrc = event.currentTarget.getAttribute("data-image-src"); this.selectedImageTarget.src = imageSrc; this.toggleDropdown(); const sectionClassName = event.currentTarget.getAttribute("href").substring(1); const sectionName = event.currentTarget.innerText; const contentHTML = ` ${sectionName}`; this.dropbtnTarget.innerHTML = contentHTML; const sections = document.getElementsByClassName(sectionClassName); if (sections.length > 0) { const section = s…
tagged with: http://stackoverflow.com/tag/html
answer count: 0
tagged with: javascript
upvote count: 1
has comment: http://stackoverflow.com/comment/139163395
type: UnansweredQuestion
tagged with: ruby-on-rails
has comment: http://stackoverflow.com/comment/139179796
has title: Infinite scroll working on Chrome and Mozilla (localhost), but it is glitching on Safari. what am I doing wrong?
type: Question
tagged with: css
downvote count: 1
has comment: http://stackoverflow.com/comment/139156100

http://stackoverflow.com/q/79064314
tagged with: build
score: 0
tagged with: next.js
has body: I have created a NextJs project B as an independent module/framework which will have components/gui and css/scss files bundled as bundle.js using Webpack. Installing the above inside NextJs project A the expectation is for Projects A's common css styles to override project B's css styles, if not use default project B css styles. What I have achieved so far is creating bundle with project B. However, I am having 2 issues Q1) How to import project B's components inside project A ? Q2) I am getting this warning in the build logs? This is my webpack.development.config.js and I am invoking this via package.json using: "scripts": { "dev": "next dev", "build": "webpack --config webpack.development.config.js --stats detailed", "start": "next start", "lint": "next lint" }, webpack.development.config.js: const path = require('path'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { entry: './src/index.js', output: { filename: 'bundle.[contenthash].js', path: path.resolve('./dist'), }, mode: 'development', resolve: { extensions: [ '.js', '.jsx', '.ts', '.tsx' ], }, module: { rules: [ { test: /\.css$/, use: [ MiniCssExtractPlugin.loader, { loader: 'css-loader', options: { publicPath: (resourcePath, context) => { return path.relative(path.dirname(resourcePath), context) + "/"; }, }, options: { esModule: true, modules: { namedExport: true, localIdentName: "[name]__[contenthash]__[local]", }, importLoaders: 1, }, }, ], include: /\.module\.css$/, }, { test: /\.css$/, use: [ MiniCssExtractPlugin.loader, 'css-loader', ], exclude: /\.module\.css$/, }, { test: /\.scss$/, use: [ MiniCssExtractPlugin.loader, { loader: 'css-loader', options: { publicPath: (resourcePath, context) => { return path.relative(path.dirname(resourcePath), context) + "/"; }, }, options: { esModule: true, modules: { namedExport: true, localIdentName: "[name]__…
tagged with: css
type: UnansweredQuestion
tagged with: nextjs14
type: Question
has answer: http://stackoverflow.com/a/79069277
tagged with: webpack
answer count: 1
has title: NextJs Webpack - Import another NextJs project B as a module/framework inside NextJs project A

http://stackoverflow.com/comment/139334128
comment on: http://stackoverflow.com/q/79012295
type: QuestionComment
has text: Chris, I can now access codepen. I created an account which allows me to export the code as a zip file. The problem with my menu is that it depends on the user type, i.e. only certain options appear depending ion the type of user logged in. I've now looked at your second option, and, correct me if I'm wrong, but it seems to rely on the menu being hard coded rather than dynamic.
type: Comment
score: 0

http://stackoverflow.com/comment/139404704
type: AnswerComment
score: 1
comment on: http://stackoverflow.com/a/79060366
has text: string *is* a supported value (https://drafts.css-houdini.org/css-properties-values-api/#supported-names) but no browser is implementing it yet
type: Comment

http://stackoverflow.com/comment/139188260
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78942230
has text: @JaromandaX they're talking about a polyfill.

http://stackoverflow.com/q/78966903
type: Question
answer count: 1
tagged with: http://stackoverflow.com/tag/html
tagged with: input
score: 0
has title: I'm trying to create a responsive site but when I increase the size of the input fields it doesn't increase or become responsive
tagged with: css
has body: I have this login screen and I'm developing the registration screen, but I can't increase the size of my inputs so that they are the same as or close to the login screen. login screen Login screen The code for the registration screen that I have developed so far is as follows cadastro.html Cadastro - Tradlibras Cadastrar-se Você aceita os termos de uso Cadastrar novo Usuário cadastro.css body { background-image: url('../img/Bem vindo ao Tradlibras.png'); background-size: cover; background-position: center; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; font-family: Arial, sans-serif; } .fundo { background-color: rgba(0, 0, 0, 0.7); padding: 30px; /* Ajustado para combinar com o padding do login */ border-radius: 20px; width: 90%; max-width: 600px; /* Ajustado para combinar com o max-width do login */ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; align-items: center; text-align: center; } .fundo h1 { color: white; font-size: 2em; /* Ajustado para combinar com o font-size do login */ margin-bottom: 20px; /* Ajustado para combinar com o margin-bottom do login */ } .fundo input[type="text"], .fundo input[type="email"], .fundo input[type="password"] { width: 90%; /* Ajustado para combinar com a largura dos inputs do login */ padding: 10px; /* Ajustado para combinar com o padding dos inputs do login */ margin: 10px 0; /* Ajustado para combinar com a margin dos inputs do login */ border: none; border-bottom: 2px solid #ffffff; background-color: transparent; color: white; font-size: 1em; /* Ajustado para combinar com o font-size dos inputs do login */ } #text_termos { color: white; font-size: 0.9em; /* Ajustado para combinar com o font-size do link "Esqueci a senha" */ margin-bottom: 20px; } #termos_de_uso { color: #1a73e8; /* Cor do link para termos de uso */ text-decoration: none; } #botao_cadastrar_container { width: 100%; display: flex; justify-content: center; margin-top: 20px; margin-bottom: 2…
has answer: http://stackoverflow.com/a/78967208
tagged with: frontend
type: UnansweredQuestion

http://stackoverflow.com/comment/139135128
has text: @DarkBee I said only about this case. There are many more alternative you can try and implement. And why [not working](https://stackoverflow.com/questions/71860699/is-there-any-way-to-animate-a-conic-gradient-in-css/74079080#74079080). Please see this url once
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78914370

http://stackoverflow.com/comment/139293354
type: Comment
type: QuestionComment
score: 1
has text: Best if you could put the HTML into the question and mend the CSS.
comment on: http://stackoverflow.com/q/78991280

http://stackoverflow.com/q/78978707
tagged with: css
has title: import stylesheet in another stylesheet
downvote count: 1
type: UnansweredQuestion
has answer: http://stackoverflow.com/a/78978726
favorite count: 0
type: Question
tagged with: http://stackoverflow.com/tag/html
has body: I have 2 CSS files that I need to be merged into 1 CSS file. Normally this would work with @import. Using an @import at the top of one of the files and done. But I think this case is special. the first CSS part (the :root part) is dynamically generated with different colors each time. therefore I want both the css files being merged into 1 file before it is served to the html. NOTE: I cannot edit the html or any javascript. I can only manipulate the css-stylesheet. QUESTION Is it possible to let the first css part work in any shape or form where I don't stitch the 2 stylesheets together into 1 big css file? if possible I want to avoid this because of readability, upkeep and other things. Dummy Data dummy data will explain the problem. IRL file number 2 is over 5K lines of code. This will probably be split up in the future. So in the first CSS (this is also the css I want to use) I have decleared the following: :root { --var1: #7B82CE; --var2: #000000; --var3: #FFFFFF; } @import url('https://link.com/css.css'); in the https://link.com/css.css this file looks like this. body { background-color:(var(--var1)); } text { background-color:(var(--var2)); } button { background-color:(var(--var3)); } EDIT: Code below to solve this problem works, but i'm not looking for this. I don't want the css code (5K lines) to be easily accessable by humans. that is why I split this up. a user can interact with the first small part of the css code (root-colors) and nothing else @import url('https://link.com/variables.css'); body { background-color:(var(--var1)); } text { background-color:(var(--var2)); } button { background-color:(var(--var3)); }
answer count: 1
upvote count: 0
score: -1
has comment: http://stackoverflow.com/comment/139253867

http://stackoverflow.com/comment/139195126
has text: @Samuel that's exactly what I have done, creating space between image and text. If you want more space then increase gap to `100px` or whatever you like.
type: Comment
comment on: http://stackoverflow.com/a/78946752
score: 0
type: AnswerComment

http://stackoverflow.com/comment/139198669
has text: That worked perfectly! Thank you so much~
comment on: http://stackoverflow.com/q/78948897
type: Comment
score: 0
type: QuestionComment

http://stackoverflow.com/q/78949570
type: UnansweredQuestion
score: 1
has body: This is my HTML code. body { text-align: center; } ul { overflow: hidden; background-color: #1d6b0d; list-style-type: none; } li { float: left; } li a { text-decoration: none; color: white; padding: 0.5rem; } HTML Horizontal Unordered List Course Blogs Content This is the output. I changed overflow to visible. Now this is the output. According to what I studied, overflow:visible must make the overflowed content visible. But, here in my code, visible is making the list disappear. hidden is making the list visible. I tried asking AI, but did not get any satisfactory answer. Why is overflow:hidden making the list visible?
favorite count: 0
tagged with: http://stackoverflow.com/tag/html
type: Question
downvote count: 0
answer count: 1
upvote count: 1
has title: What is the difference between overflow Hidden and Visible
tagged with: css
has comment: http://stackoverflow.com/comment/139199770
has comment: http://stackoverflow.com/comment/139200214
has answer: http://stackoverflow.com/a/78950019
has comment: http://stackoverflow.com/comment/139199924

http://stackoverflow.com/comment/139158748
score: 0
type: QuestionComment
has text: You have already defined the `animation-delay` in your CSS - not sure why you'd need to set it again in your JS part then? Would it not make much more sense, if you just observed one of those elements for intersection (since they are all on the same position on the y axis anyway), then triggered the animation for all of them (for example by simply giving the container element a class) - with the delays already set in the CSS?
type: Comment
comment on: http://stackoverflow.com/q/78926774

http://stackoverflow.com/a/78912453
type: Answer
score: 0
answers question: http://stackoverflow.com/q/78912380
has body: Suggestion The layout you want is as follows if you use the bootstrap. There are many other methods. Method1 using grid .brown { width: 300px; height: 170px; background: brown; display: grid; grid-template-rows: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr); grid-template-areas: "yellow . blue" "yellow . ." "yellow . green"; } .yellow { background: yellow; width: 190px; height: 100%; grid-area: yellow; } .green { background: green; width: 100px; grid-area: green; } .blue { background: blue; width: 100px; grid-area: blue; } HTML + CSS Method2 using flex, align content .brown { width: 300px; height: 170px; background: brown; } .yellow { background: yellow; width: 190px; height: 100%; } .green { background: green; width: 100px; height: 50px; } .blue { background: blue; width: 100px; height: 50px; } HTML + CSS Method3 using flex, margin, flex-grow .brown { width: 300px; height: 170px; background: brown; } .yellow { background: yellow; width: 200px; height: 100%; } .green { background: green; width: 100px; height: 55px; } .blue { background: blue; width: 100px; height: 55px; } HTML + CSS

http://stackoverflow.com/comment/139350636
has text: To avoid truncating the text, you should avoid hard coding the size (preferred, minimum, and maximum) sizes. As noted in other comments, to reduce the space between the button content and the edge of the button, set the padding to values smaller than the default. Techniques for making the buttons the same size without hard-coding the sizes are shown in the [official layout tutorial](https://docs.oracle.com/javafx/2/layout/size_align.htm) (those use Java, not FXML, but the same properties can be set in FXML and with SceneBuilder if needed).
comment on: http://stackoverflow.com/q/79029522
type: Comment
score: 3
type: QuestionComment

http://stackoverflow.com/comment/139282414
type: Comment
has text: Use inline styles to override the colors on specific elements. External styles may not work in few email clients due to compatibility issues.
score: 0
comment on: http://stackoverflow.com/q/78994346
type: QuestionComment

http://stackoverflow.com/comment/139174619
type: QuestionComment
has text: @AHaworth The OP is looking for the HTML of the image, that is the question
comment on: http://stackoverflow.com/q/78935678
type: Comment
score: 0

http://stackoverflow.com/comment/139357587
type: Comment
has text: I appreciate all the answers, and I played with your proposals to see what worked, but this plugin is just not gonna work. The code is cryptic beyond my means and they lack a forum to address questions. So, I tackled it myself. I'm not posting the code because my brother ask AI to create some regular expressions code to deal with accents and case, and I can't do it. But you can check out the website here. Again, thanks for all the comments. Really pushed me in the right direction, even if to just drop the other plugin. https://www.lobotoradio.com/artistas/bandas/sentimiento-muerto/
score: 0
comment on: http://stackoverflow.com/a/79006371
type: AnswerComment

http://stackoverflow.com/comment/139281583
score: 0
comment on: http://stackoverflow.com/q/78992567
type: QuestionComment
has text: ok but you know in advance which elements are the culprit... because even when it's working on regular chrome, you can see which are the "sections" that on other conditions don't behave correctly. So how would you know which rules where engaged in the browser/device/screen where things don't work properly without using the inspector? you may add css rules using pseudoselectors adding content for diagnosing.. something like `.class::before{ content: 'this is the breakpoint x'; border: solid 1px red; }` ... inside each category you want to investigate inside each media query
type: Comment

http://stackoverflow.com/comment/139207296
has text: I'm not sure I understand, are you just asking how to do: `:last-child > .custom-class`? Or is there more to it?
comment on: http://stackoverflow.com/q/78953739
type: QuestionComment
score: 2
type: Comment

http://stackoverflow.com/comment/139314121
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/79010419
has text: It needs to work on images with different aspect ratios. So frustrating that the code above works on images that are smaller but not larger than the browser window. Do you have a suggestion for a Javascript solution? Thanks!

http://stackoverflow.com/comment/139177078
type: QuestionComment
type: Comment
score: 0
has text: Not reproducible, reading `offsetWidth` or `offsetHeight` forces layout _recalculation_ in the middle of the script execution. See [Layout thrashing](https://web.dev/articles/avoid-large-complex-layouts-and-layout-thrashing).
comment on: http://stackoverflow.com/q/78937046

http://stackoverflow.com/comment/139249214
has text: @htor then the problem goes away. See Raphael Oluwasanmi's answer for the explanation on why this was happening. The font-family in the class name selector was being applied to and being inherited by , so the rule being directly applied to takes precedence. Just a brain fart on my part.
type: QuestionComment
comment on: http://stackoverflow.com/q/78976062
type: Comment
score: 0

http://stackoverflow.com/comment/139229113
comment on: http://stackoverflow.com/q/78964909
has text: How about using `position: sticky` ?
type: QuestionComment
score: 3
type: Comment

http://stackoverflow.com/comment/139305732
type: AnswerComment
has text: I just tried to save the [data]-element and combine the date with the grid-item-class: Unfortunately this doesn't work: $(`div.grid-item-${(a.getMonth() + 1)}-${a.getDate()}`).addClass('today'); Any idea?
comment on: http://stackoverflow.com/a/79006973
type: Comment
score: 0

http://stackoverflow.com/a/78911311
type: AcceptedAnswer
answers question: http://stackoverflow.com/q/78911259
type: Answer
accepted answer of: http://stackoverflow.com/q/78911259
has body: the gap in the orange section that appears when you set a max-height on the top section (header), you'll need to make sure that the grid layout adapts dynamically to the height changes. The gap happens because when the header does not occupy the full height defined in the grid, the main section does not automatically stretch to fill the remaining space. Please try any of the below approaches. I think this will help you to solve the problem. Set the header's row height to auto to allow it to adjust based on its content without creating gaps. .gridcontainer { background-color: orange; height: 100vh; width: 100vw; display: grid; grid-template-columns: 2fr 6fr 2fr; grid-template-rows: auto 1fr auto; /* Adjusted */ } If you still want to control the maximum height of the header while allowing the main section to grow, use the minmax function: .gridcontainer { background-color: orange; height: 100vh; width: 100vw; display: grid; grid-template-columns: 2fr 6fr 2fr; grid-template-rows: minmax(50px, 100px) 1fr auto; /* Adjusted */ }
downvote count: 0
upvote count: 1
score: 1

http://stackoverflow.com/comment/139398220
type: Comment
has text: Putting code through a validator can often help track down things you can't see. Try putting it through e.g. https://validator.w3.org/
comment on: http://stackoverflow.com/q/79057460
type: QuestionComment
score: 1

http://stackoverflow.com/comment/139137830
has text: No this is no the problem, It can be a shorthand
comment on: http://stackoverflow.com/a/78915974
type: Comment
score: 0
type: AnswerComment

http://stackoverflow.com/comment/139140800
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78916876
has text: np. But Thanks!
type: Comment

http://stackoverflow.com/a/78930566
type: Answer
has comment: http://stackoverflow.com/comment/139173361
downvote count: 0
answers question: http://stackoverflow.com/q/78929415
has body: Use the muted Attribute Many mobile browsers, including Safari and Chrome, will not autoplay videos with sound. To get around this, you should ensure that the video is muted:
upvote count: 1
score: 1

http://stackoverflow.com/a/78991612
downvote count: 0
answers question: http://stackoverflow.com/q/78991592
accepted answer of: http://stackoverflow.com/q/78991592
type: AcceptedAnswer
score: 2
upvote count: 2
type: Answer
has body: Add checked=checked to your checkbox html element. The page should then load with it checked.

http://stackoverflow.com/comment/139159480
type: Comment
comment on: http://stackoverflow.com/a/78927325
score: 0
type: AnswerComment
has text: @Fantasterei then you should not add this in comment "There is no problem about a totally different solution, if it's pure css and working with images"

http://stackoverflow.com/q/78976538
upvote count: 1
has comment: http://stackoverflow.com/comment/139250256
has comment: http://stackoverflow.com/comment/139250292
has body: * {} .ShellBox { display:flex; } .Shell { background-color: #0f0; width: 100px; display: grid; } .Shell1 { grid-template-rows: 0.1fr; } .Shell2 { grid-template-rows: 0.5fr; } .Shell3 { grid-template-rows: 1fr; } .Box { min-height: 0; border: 1px solid #f00; border-top: 0 !important; } .Box>div { height: 99px; width: 98px; } The above describes the situation I encountered, and the following describes what I expected. What I don't understand is why this phenomenon occurs. grid-template-rows: n fr affected both the parent's and the child's height at the same time. Why wasn't .Shell expanded, but instead, it became the expected height of grid-template-rows: n fr? Then .Box was affected by grid-template-rows: n fr again, resulting in grid-template-rows: n*n fr. I find this phenomenon quite interesting. ============================= The result in Firefox matches what I expected. I encountered this issue in Google Chrome. Initially, I thought it was a CSS feature, but if it's caused by browser differences, I'm not sure whether this issue needs to be fixed.
tagged with: css
has comment: http://stackoverflow.com/comment/139252497
has comment: http://stackoverflow.com/comment/139252007
downvote count: 1
type: UnansweredQuestion
has answer: http://stackoverflow.com/a/78976656
favorite count: 0
type: Question
answer count: 1
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139253376
has title: "Why does grid-template-rows: n fr affect both the parent and child DOM elements at the same time?"
score: 0
has comment: http://stackoverflow.com/comment/139256896

http://stackoverflow.com/comment/139181314
has text: Weird mine still stays horizontally.... if I could I would add a picture to show how it looks.
comment on: http://stackoverflow.com/a/78939019
type: Comment
score: 0
type: AnswerComment

http://stackoverflow.com/q/79059904
score: 0
upvote count: 1
tagged with: css
has title: How to knit together two bits of CSS
downvote count: 1
type: UnansweredQuestion
favorite count: 0
has comment: http://stackoverflow.com/comment/139402130
has answer: http://stackoverflow.com/a/79059925
type: Question
has body: I am using Cornerstone Themeco Active X builder and I wanted to have a shimmering gold effect on my review stars. This was achieved by adding a class and some CSS, so them I wanted to animate this, however using the in-built animations made it go jerky and not run smooth. How do I structure my CSS so it does it all in the same class? Here are the two bits of CSS I would like to work: Shimmer CSS .css-selector-star-gold { background: linear-gradient(270deg, #eede5e, #dbbb0f, #f3f2e7, #ddcd4c, #eede5e); background-size: 1000% 1000%; -webkit-animation: GoldGradiant 8s ease infinite; -moz-animation: GoldGradiant 8s ease infinite; animation: GoldGradiant 8s ease infinite; } @-webkit-keyframes GoldGradiant { 0%{background-position:0% 11%} 50%{background-position:100% 90%} 100%{background-position:0% 11%} } @-moz-keyframes GoldGradiant { 0%{background-position:0% 11%} 50%{background-position:100% 90%} 100%{background-position:0% 11%} } @keyframes GoldGradiant { 0%{background-position:0% 11%} 50%{background-position:100% 90%} 100%{background-position:0% 11%} } Scale Effect On Scroll animation: StarScale 2s ease 0s 1 normal forwards; @keyframes StaScale { 0% { transform: scale(0.5); } 100% { transform: scale(1); } } How would I knit these together? I tried adding the CSS together but then the animation works, and the shimmer doesn't?
answer count: 1

http://stackoverflow.com/q/79027960
has body: Resolved (see bottom) I'm new to R, RStudio, and Bookdown so any help is appreciated! Versions: I am trying to implement a workshop that uses R, using Bookdown's Gitbook project template. I've been trying to implement R chunks and tables, and learn more about how the table of contents is produced. (It may note be relevant, at some point the bookdown::pdf_book could not build, but bookdown::gitbook and bookdown::epub_book could. Currently, the generated epub file is a binary file I can't open.) Here is the R code that caused problems initially: {r, out.width= "65%", out.extra='style="padding-right: 10%;"'} knitr::include_graphics("./_main_files/figure-html/nice-fig-1.png") I also created and deleted a very simple Markdown file. Soon after, my book stopped building into a regular book, and now looks like a weird HTML version. I am trying to figure out what went wrong and how to change it so that it builds into a regular Gitbook. I've commented out all R chunks. All R markdown files either are unedited files that came with the template, or reasonably simple R markdown files. I have checked _output.yml and _bookdown.yml, and they essentially match the template version (though I added output_dir: "docs" to _bookdown.yml). It seems to me somewhere in the build/config files, something changed so that the book no longer builds to look like a normal gitbook. When running bookdown::render_book() and then warnings(), I get these warnings: Warning messages: 1: In file.create(to[okay]) : cannot create file 'docs/libs/jquery-3.6.0/jquery-3.6.0.min.js', reason 'Permission denied' 2: In file.create(to[okay]) : cannot create file 'docs/libs/gitbook-2.6.7/css/style.css', reason 'Permission denied' 3: In file.create(to[okay]) : cannot create file 'docs/libs/gitbook-2.6.7/css/plugin-table.css', reason 'Permission denied' 4: In file.create(to[okay]) : cannot create file 'docs/libs/gitbook-2.6.7/css/plugin-bookdown.css', reason 'Permission denied' 5: In file.create(to[okay]) : cannot cre…
answer count: 0
downvote count: 0
tagged with: css
type: UnansweredQuestion
score: 1
favorite count: 0
upvote count: 1
type: Question
tagged with: bookdown
tagged with: http://stackoverflow.com/tag/r
tagged with: http://stackoverflow.com/tag/html
has title: Bookdown's gitbook building into a HTML looking website (does not look like Bookdown's gitbook)
tagged with: gitbook

http://stackoverflow.com/q/78979190
type: Question
score: 0
tagged with: javascript
answer count: 0
tagged with: css
has title: Control the draggable( object to X or Y when dragged
has body: draggable It can be dragged by mouse control, however now I want to control drag position only on X axis or Y axis, I found out there is some libraris for this purpose. However I would like to make this by normal javascript. If make this ,I think I have to control the dragged(transparent) object when user dragging by mouse. Maybe in this function, am I correct ? or how can I make this? const rowDragOver = (e) =>{ console.log("rowDragStart dragover:"); e.stopPropagation(); e.preventDefault(); }
type: UnansweredQuestion

http://stackoverflow.com/q/79033289
upvote count: 2
accepted answer: http://stackoverflow.com/a/79033309
favorite count: 0
type: Question
tagged with: http://stackoverflow.com/tag/html
downvote count: 2
answer count: 1
type: AnsweredQuestion
has title: I want to make an SVG a random color every time s is hit
has body: I managed to get the head and the color outline, two SVG files, lined up completely. But there's one problem: I wanna make the head color change to a random color every time "s" is hit. But somehow its not changing the color of the head, although getRandomColor does work; // Function to generate a random color function getRandomColor() { const letters = '0123456789ABCDEF'; let color = '#'; for (let i = 0; i < 6; i++) { color += letters[Math.floor(Math.random() * 16)]; } return color; } // Function to change the color of the path element function changePathFillColor() { const pathElement = document.getElementById('path-to-change'); if (pathElement) { const randomColor = getRandomColor(); pathElement.setAttribute('fill', randomColor); } } // Listen for the 'S' key press document.addEventListener('keydown', function(event) { if (event.key === 's' || event.key === 'S') { changePathFillColor(); } }); And as for the HTML code, I decided I would be getting the contents of the head color's svg file and re-organizing the code like this: Character Assembly <g transform="matrix(1.0, 0.0, 0.0, 1.0, 75.0, 45.0)"> <path d="M75.0 0.0 Q75.0 18.65 53.0 31.8 31.05 45.0 0.0 45.0 -31.05 45.0 -53.05 31.8 -75.0 18.65 -75.0 0.0 -75.0 -18.65 -53.05 -31.85 -31.05 -45.0 0.0 -45.0 31.05 -45.0 53.0 -31.85 75.0 -18.65 75.0 0.0" fill="#ffcc66" fill-rule="evenodd" stroke="none"/> </g> <image href="/svgs/head/shapes/9.svg" id="headoutline"/> and here is my CSS code. .character { position: relative; width: 200px; /* Adjust the size as needed */ height: 400px; /* Adjust the size as needed */ } .part { position: absolute; } .head { animation: float 2s ease-in-out infinite; position: relative; } .headcolor { z-index: 1; margin-top: -500px; position: relative; } .headoutline { z-index: 2; position: relative; margin width: 100%; height: 100%; } @keyframes float { 0%, 100% { transform: translateY(0); /* Starting position */ } 50% { transform: translateY(-5px); /* Float up by 10 pixels */ } } My guess on …
tagged with: javascript
score: 0
has answer: http://stackoverflow.com/a/79033309
tagged with: css

http://stackoverflow.com/comment/139195206
type: AnswerComment
comment on: http://stackoverflow.com/a/78946893
has text: Add .menu-icon width and height.
type: Comment
score: 0

http://stackoverflow.com/a/79063054
has body: The issue, it turns out was in the nginx config, not react. nginx was missing include mime.types under http and therefore was returning css as text/plain instead of text/css.
answers question: http://stackoverflow.com/q/79052206
accepted answer of: http://stackoverflow.com/q/79052206
type: AcceptedAnswer
type: Answer
score: 0

http://stackoverflow.com/comment/139314801
score: 0
type: QuestionComment
has text: That could be a workaround indeed, but not ideal because it's best to point out where the error is.
type: Comment
comment on: http://stackoverflow.com/q/79011753

http://stackoverflow.com/a/79030977
type: Answer
answers question: http://stackoverflow.com/q/79026458
accepted answer of: http://stackoverflow.com/q/79026458
score: 0
has body: Instead of using &lt;object&gt; for each SVG you can use the &lt;image&gt; element inside a SVG element. Here, I included the two SVG as data URIs, but this can of course be replaced by a URL to the right SVG. .head { animation: float 2s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0); /* Starting position */ } 50% { transform: translateY(-5px); /* Float up by 10 pixels */ } } &lt;div class="head"&gt; &lt;svg xmlns="http://www.w3.org/2000/svg" width="150" height="90"&gt; &lt;image href="[binary]" /&gt; &lt;image href="[binary]"/&gt; &lt;/svg&gt; &lt;/div&gt;
has comment: http://stackoverflow.com/comment/139352600
has comment: http://stackoverflow.com/comment/139352773
type: AcceptedAnswer

http://stackoverflow.com/comment/139205212
has text: You're having an XY issue here. You have a default theme that should be loaded first. A custom theme should simply override the default by either using a different CSS that is loaded afterward or using different names to not mix them up.
comment on: http://stackoverflow.com/q/78952466
type: Comment
score: 0
type: QuestionComment

http://stackoverflow.com/q/79058968
has answer: http://stackoverflow.com/a/79059479
accepted answer: http://stackoverflow.com/a/79059479
type: Question
has comment: http://stackoverflow.com/comment/139400392
has answer: http://stackoverflow.com/a/79058981
possible better answer: http://stackoverflow.com/a/79058981
has comment: http://stackoverflow.com/comment/139400286
type: AnsweredQuestion
has comment: http://stackoverflow.com/comment/139400258
has comment: http://stackoverflow.com/comment/139400558
has comment: http://stackoverflow.com/comment/139400402
has comment: http://stackoverflow.com/comment/139400338
score: 0
has body: I'm new to CSS (VERY new, third day), and have searched high and low for someone who had this same query, but I haven't found anything. So far I've tried making a class or an id for an image, and within that class/id I want one specific filetype (.gif) to vary in size from the other image types. I'm pulling my hair out, I can't figure out how to select any instance of the filetype, as opposed to a specific gif. I've tried :target, but I'm not sure how to target a filetype as opposed to an url with a specific name. My latest effort was this (I've also tried giving jpgs and pngs the same specific code above the gifs with the same content, but it didn't work): .items { clear: both; display: flex; position: relative; width: 100%; max-width: 200px; height: auto; max-height: 100%; object-fit: contain; margin: 5px; img[href*='.gif'] { width: 100%; max-width: 80px; height: auto; max-height: 100%; object-fit: contain; margin: 5px; } } What I was expecting was that all images within that class would have one style, EXCEPT gifs, which have another style. What I get is the .items class applied, but not the gifs selector. So, is it possible to select just .gifs within this class? Can someone please tell me what I'm doing wrong, or if it's simply not possible to include this in a class, or what? I have a script folder for javascript, but no idea how to write any if necessary (it's there with some legacy code for swapping images that someone gave me 20 years ago). My file structure is: named folder index.html subfolder: _CSS _name-of-folder styles.css _name-of-folder scripts.js subfolder: name-of-folder images/cast/items imageX.jpg imageY.png imageZ.gif
has comment: http://stackoverflow.com/comment/139400631
tagged with: jquery
answer count: 2
has comment: http://stackoverflow.com/comment/139400673
has title: CSS selector within a class or id that targets only one filetype
has comment: http://stackoverflow.com/comment/139400414
tagged with: css
tagged with: css-selectors
tagged with: flexbox

http://stackoverflow.com/q/79008926
has body: I'm trying to use CSS to place 2 or more div tags below some content. I want to keep the div's in order and place them always show at the bottom of the page. I cannot implicitly style each tag because I won't know how many there are up front because they are created dynamically, so I was hoping to apply on CSS class/tag to each div and have it automatically apply to all of them. My div 1 is above the content below but want it below it. My div 2 is above the content below but want it below it. My div 3 is above the content below but want it below it. My div 4 is above the content below but want it below it. My content is below the 'divs' tags above, but I want to place all the div's below this content, in order. But, I won't know up front how many div's there are because they are created dymaically
type: Question
tagged with: http://stackoverflow.com/tag/html
answer count: 1
type: AnsweredQuestion
score: 0
has answer: http://stackoverflow.com/a/79008951
has title: CSS to put 4 Divisions at the bottom of the Page
accepted answer: http://stackoverflow.com/a/79008951
tagged with: css

http://stackoverflow.com/comment/139234815
score: 0
has text: thank you so much, I followed you and used text-orientation: sideways; and it worked!!
comment on: http://stackoverflow.com/a/78968425
type: AnswerComment
type: Comment

http://stackoverflow.com/comment/139280935
score: 0
has text: @rkrish I better formatted your css because it was terribly hard to read .. especially because you mixed media queries with regular selectors and it was hard to understand the scope of each rule. By the way given the problem as you describe it occurring in some specific scenarios, maybe it's related to the fact that you may have media queries converging on the same scenario but setting `font-size` differently.
comment on: http://stackoverflow.com/q/78992567
type: QuestionComment
type: Comment

http://stackoverflow.com/comment/139160287
type: Comment
comment on: http://stackoverflow.com/a/78921243
type: AnswerComment
has text: First of all, if you don't know css I prefer you should start to learn css before work with bootstrap. But it's not mandatory, it will help you to understand bootstrap well. I will tell you how I learned css. I learned basic things about css from you tube. There were bunch of tutorials there. Then you can search you tube for html, css websites. I learned from "Easy Tutorials" channel. I do coding with the you tube video. When I couldn't understand something I search and learned more about it from google (documentries). Also you can easily aks from chatgpt.
score: 0

http://stackoverflow.com/q/79054198
possible better answer: http://stackoverflow.com/a/79054707
type: AnsweredQuestion
score: 0
has body: I am trying to use React and CSS with TailwindCSS to create a classic services component. Where 5 options are presented as cards, in 2 rows, with 3 on the top and 2 on the bottom row. Then i want the bottom two to be centered (like a upside down triangle). I have attached an image that gives the idea. I have been through a few pages of people doing it but not been able to replicate the results. I wanted the 5 cards to be reactive to screen size changes so they will shrink, but around certain screen sizes it will obviously drop a column for tablets and be singles for phone. import React from 'react'; import { MainServicesArray } from '../../utils/data/CompanyData'; function ServicesComponent() { return ( Our Services Our Professional and Independent Services {MainServicesArray.map((service) => ( <Card service={service} key={service.label} /> ))} ); } function Card({ service }) { return ( {service.label} {service.content} ); } export default ServicesComponent; .split_grid { display: grid; grid-template-columns: repeat(3, minmax(270px, 1fr)); gap: 15px; justify-content: center; justify-items: center; } /* Center the last two items when there are leftover items */ .split_grid > article:nth-last-child(2) { background: #000; grid-column: 1 / span 2; } I can make it work by creating a row of two and splitting it up, but then i lose responsiveness and the boxes become different sizes. I tried to justify the contents and create the 4th container 50% over the the right.
answer count: 2
has answer: http://stackoverflow.com/a/79054254
has comment: http://stackoverflow.com/comment/139392244
has answer: http://stackoverflow.com/a/79054707
tagged with: css
has title: How to make a responsive, centred, 5 item grid in 2 rows
accepted answer: http://stackoverflow.com/a/79054254
tagged with: http://stackoverflow.com/tag/html
type: Question

http://stackoverflow.com/a/79025283
has body: It could be simple (or maybe not). So, I suppose you want to activate the submenu when the user hovers over a menu option. So, the parent container needs to have a position: relative and the submenu one needs to have a position: absolute to get this overlapping effect. But you might need VanillaJS to toggle the position property of each submenu element
answers question: http://stackoverflow.com/q/79024264
has comment: http://stackoverflow.com/comment/139344910
type: Answer
score: 0
has comment: http://stackoverflow.com/comment/139346885

google-translate
tags question: http://stackoverflow.com/q/79055622
type: Tag
tag name: google-translate
tags question: http://stackoverflow.com/q/79521817

http://stackoverflow.com/comment/139332516
type: AnswerComment
comment on: http://stackoverflow.com/a/79021675
has text: Dang... Didn't know that had an influence over the result. Thanks, will validate soon.
type: Comment
score: 0

http://stackoverflow.com/q/78938537
type: Question
answer count: 1
score: 0
has answer: http://stackoverflow.com/a/78968305
tagged with: bootstrap-4
upvote count: 1
has comment: http://stackoverflow.com/comment/139230399
tagged with: css
downvote count: 1
type: UnansweredQuestion
favorite count: 0
has title: How can I overlap div elements with Bootstrap 4?
has body: I'm trying to achieve a the same overlapping elements same as the file attached. I ws wondering the best code to do it. I'm using bootstrap 4.6.2, does it can help? Thanks for your advice. So far I've can make it work with this code. But I'm not sure that is the best way since I have to adjust the 'top' position as the text and div height change. .text-container { top: 44%; left: 0; transform: translateY(-50%); width: 75%; z-index: 2; position: absolute; padding: 10% 4% 14% 2% !important; } .border-danger { border-color: #FF6F61 !important; border: solid 1px; } .text-danger { color: #FF6F61 !important; } .list-group-item { border-bottom: 1px solid black; } .list-group-item:last-child { border-bottom: none; } a.list-group-item:hover { color: #000; } .img-fluid { z-index: 1; position: relative; } .image-right { z-index: 1; position: relative; margin-left: auto; } #coaching-img { width: 50%; margin-top: 6%; } &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/css/bootstrap.min.css" integrity="sha512-rt/SrQ4UNIaGfDyEXZtNcyWvQeOq0QLygHluFQcSjaGB04IxWhal71tKuzP6K8eYXYB6vJV4pHkXcmFGGQ1/0w==" crossorigin="anonymous" referrerpolicy="no-referrer" /&gt; &lt;section id="main_content" class=""&gt; &lt;div class="container mt-5"&gt; &lt;div class="row justify-content-end"&gt; &lt;div class="col-md-12 position-relative d-flex justify-content-end"&gt; &lt;div class="text-container border border-danger rounded p-4"&gt; &lt;div class="col-md-8"&gt; &lt;h2 class="text-danger"&gt;Profitez d'un accompagnement et de coaching personnalisé&lt;/h2&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non est vitae nulla porttitor fringilla id eu dui. Donec eget cursus ex. Maecenas bibendum sodales augue.&lt;/p&gt; &lt;div class="list-group"&gt; &lt;a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"&gt; Bloc de 1 heure &lt;span&gt;&amp;#x2192;&lt;/span&gt; &lt;/a&gt; &lt;a href=…

http://stackoverflow.com/comment/139255888
type: QuestionComment
has text: Replaced comments with an answer.
comment on: http://stackoverflow.com/q/78975917
type: Comment
score: 0

http://stackoverflow.com/a/78913190
has body: Here are some suggestions that might help. Since it is not clear from your question how is editor.js importing db and how is editor.js included in the project, I am assuming something is not right with those parts. // firebase.js import { initializeApp } from "firebase/app"; import { getFirestore } from "firebase/firestore"; const firebaseConfig = { apiKey: "AIzaSyDQaVM5xjFB-WB4IQXnupSvWOJSQdlrN00", authDomain: "bloggin-site-c4727.firebaseapp.com", projectId: "bloggin-site-c4727", storageBucket: "bloggin-site-c4727.appspot.com", messagingSenderId: "170432646256", appId: "1:170432646256:web:f36807db85372e1956f8b5" }; const app = initializeApp(firebaseConfig); const db = getFirestore(app); // notice the usage of the getFirestore() method export { db }; I think you are trying to initialize Firebase using the older firebase.initializeApp(firebaseConfig); syntax, which is part of the Firebase namespace approach (used in older versions of Firebase). Secondly, do not forget to import db from the editor.js file // editor.js import { db } from './firebase.js'; // rest of your code Thirdly, ensure that the firebase.js script is loaded BEFORE editor.js in your HTML file, especially if you are using Here is more info about modules Let me know if these tips have helped.
type: AcceptedAnswer
type: Answer
downvote count: 0
upvote count: 1
answers question: http://stackoverflow.com/q/78913099
score: 1
accepted answer of: http://stackoverflow.com/q/78913099

http://stackoverflow.com/q/78986438
answer count: 1
has body: Apologies if my question is too naive. I'm new to front end development. On my page, I have two sections, one is the sectionA and the other one is the sectionB. The dimensions of sectionA are 828x161, and the dimensions of sectionB are 828x271. I have two issues here: SectionA should dynamically have the same dimensions as sectionB. How to do that in css? The ratio of sectionA to sectionB in the column should be 40:60. How should be sections-container class look like to achieve this? <gridToken=> {/* Content of Section A */} {/* Content of Section B */} I've tried out a few things and they don't seem to be working. Any help would be appreciated.
tagged with: reactjs
score: 0
has answer: http://stackoverflow.com/a/78986510
tagged with: css
type: UnansweredQuestion
has title: Dynamically resizing a section on my webpage to match the section right next to it
type: Question

http://stackoverflow.com/comment/139202931
type: QuestionComment
score: 0
comment on: http://stackoverflow.com/q/78951292
type: Comment
has text: Change second `span` tag class name with myLINK2, which is exists in your `css` but not your `html`.

http://stackoverflow.com/comment/139135890
score: 0
type: Comment
has text: Thank you for your continued search for a solution. I've applied your suggestion in a [CodePen](https://codepen.io/jazyx/pen/rNEKyRm), to keep it separate. I've used a more complex ruleset to for the `::after` styling, but the effect is similar to what you intended. Moving the mouse over the `::after` element does not highlight the blue square.
comment on: http://stackoverflow.com/q/78914275
type: QuestionComment

http://stackoverflow.com/comment/139299989
has text: you have to apply the filter to the content that you generate then try something like `<?php echo apply_filters("the_content", $row->ctp_texto);?>`
type: QuestionComment
score: 1
comment on: http://stackoverflow.com/q/79002715
type: Comment

http://stackoverflow.com/a/79008522
accepted answer of: http://stackoverflow.com/q/79008324
upvote count: 2
type: AcceptedAnswer
score: 2
downvote count: 0
has body: Don’t use floats, use flexbox or grid. This snippet uses nested flexboxes. body { background: black; } .d1 { position: absolute; top: 1em; right: 1em; background-color: yellow; display: flex; flex-direction: column; gap: 1vh; /* in a column-oriented flexbox, "align-items" controls the horizontal position, so "start" means align left and "end" means align right. */ align-items: end; } .d2 { display: flex; gap: 1vh; } .square { aspect-ratio: 1; } .magenta, .cyan { width: 10vh; } .red, .lime, .blue, .white { width: 7vh; } .magenta { background-color: magenta; } .cyan { background-color: cyan; } .red { background-color: red; } .lime { background-color: lime; } .blue { background-color: blue; } .white { background-color: white; }
type: Answer
answers question: http://stackoverflow.com/q/79008324

http://stackoverflow.com/q/79041692
accepted answer: http://stackoverflow.com/a/79041698
favorite count: 0
tagged with: web-frontend
type: Question
answer count: 1
tagged with: http://stackoverflow.com/tag/html
score: 2
downvote count: 0
type: AnsweredQuestion
has answer: http://stackoverflow.com/a/79041698
tagged with: javascript
tagged with: css
tagged with: popup
upvote count: 2
has title: How do I make a slideshow popup with next/prev arrows within the image?
has body: I want to make a popup with a slideshow but I have a problem, I can't get the naviagtion arrows be placed inside the image container, so when the website is resized they stay in the same place. I want to move the navigation arrows here (Purple indicating where I want them to be) Here's what I'd like it to look like Website showing what I have right now HTML Fragment: &lt;div id=&quot;popup&quot; class=&quot;popup hidden&quot;&gt; &lt;div class=&quot;popup-content&quot;&gt; &lt;span id=&quot;closePopup&quot; class=&quot;close&quot;&gt;&amp;times;&lt;/span&gt; &lt;button id=&quot;prevImage&quot; class=&quot;nav-button&quot;&gt;&amp;lt;&lt;/button&gt; &lt;img id=&quot;popupImage&quot; src=&quot;&quot; alt=&quot;Project Image&quot;&gt; &lt;button id=&quot;nextImage&quot; class=&quot;nav-button&quot;&gt;&amp;gt;&lt;/button&gt; &lt;div class=&quot;popup-text&quot;&gt; &lt;p id=&quot;popupName&quot;&gt;&lt;/p&gt; &lt;p id=&quot;popupDescription&quot;&gt;&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; CSS Fragment: /* Popup */ .popup { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100vw; height: 100vh; overflow: auto; background-color: rgba(0,0,0,0.5); } .popup-content { background-color: #494949; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 20px; padding-top: 30px; padding-bottom: 30px; padding-left: 30px; border-radius: 20px; width: 70vw; max-width: 1600px; height: auto; max-height: 1000px; text-align: left; display: flex; flex-direction: row; justify-content: center; align-items: center; position: relative; } #popupImage { width: 55%; height: auto; border-radius: 20px; margin-right: 8%; position: relative; } #popupName { font-size: 3vh; font-weight: bold; margin-bottom: 10px; } #popupDescription { font-size: 2vh; } /* Navigation Buttons */ .nav-button { background-color: transparent; border: none; color: #fff; font-size: 2em; cursor: pointer; position: absolute; top: 50%; transform: translateY(-50%); z-ind…

http://stackoverflow.com/q/78906496
tagged with: http://stackoverflow.com/tag/html
has body: I have recently started using m3.material.io's Web Library for my Login page and have noticed some issues. Since I have not been able to find proper documentation for this stuff, I must ask, can I somehow reduce a Text-Button shadow's size? Well, I have tried using the CSS properties like box-shadow, box-size and others, but since this is from a library that cannot really work. In this short video (Here, the shadow can be seen behind the "Forgot ID?" button. Here is my code in Replit. If anyone manages to find a solution, could you link the documentation where I can find these guides for future use?
tagged with: material-design
has comment: http://stackoverflow.com/comment/139181133
has title: Is it possible to reduce the size of the weird shadow my Google Material3 Text-Button makes?
tagged with: material-ui
answer count: 0
tagged with: css
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139140376
score: 0
type: Question

http://stackoverflow.com/comment/139409400
has text: You’ve made both only 50% wide and then cut them. Can you describe what final result you want - what is to remain constant as the size changes, is it the angle or the proportion that is cut away?
comment on: http://stackoverflow.com/q/79063602
type: Comment
score: 0
type: QuestionComment

http://stackoverflow.com/comment/139404742
has text: If the question linked to in the above comment doesn't solve your problem, please add the code you have tried into your question. Are you using position absolute or fixed?
comment on: http://stackoverflow.com/q/79061205
type: Comment
score: 0
type: QuestionComment

http://stackoverflow.com/a/78962097
score: 0
has comment: http://stackoverflow.com/comment/139243881
answers question: http://stackoverflow.com/q/78926371
has body: use this it might work: .sticky { will-change: transform, opacity; } also try this: .sticky { transform: translate(-50%, -50%) translate3d(0, 0, 0); }
type: Answer

http://stackoverflow.com/a/78968040
score: 1
answers question: http://stackoverflow.com/q/78967859
has comment: http://stackoverflow.com/comment/139234232
downvote count: 0
type: Answer
upvote count: 1
has body: Hope this solves your problem, below are very simple steps: 1 - I have hidden the overflow of the parent div, so that the padding remains the same with the parent div. 2 - Also added overflow to child div so it can be scrolled. .container { height: 100vh; overflow: hidden; padding: 2rem; } .flex-container { display: flex; gap: 0.5rem; overflow: scroll; } .card { width: 150px; flex-shrink: 0; background: #e5e7eb; padding: 1rem; border-radius: 4px; } h2 { font-family: sans-serif; } Test1 Test1 Test1 Test1 Test1 Test1

http://stackoverflow.com/comment/139137166
has text: @MarkSchultheiss correct, completely forgot about it. Fixed the code. Thanks for noting.
type: Comment
score: 0
comment on: http://stackoverflow.com/a/78915335
type: AnswerComment

http://stackoverflow.com/comment/139147436
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78920877
has text: An alternative approach I've considered is putting the image to the left side of the card and the text to the right side of the card but I haven't explored it quite yet
type: Comment

http://stackoverflow.com/comment/139160300
has text: Now I'm going to tell how fixed your error. I just simply go through the bootstrap documentation which is given in my answer. Then I use bootstrap classes to get needed output.
type: AnswerComment
type: Comment
comment on: http://stackoverflow.com/a/78921243
score: 0

http://stackoverflow.com/comment/139164591
type: Comment
has text: I did find 2 linear gradients at perhaps different angles? ExoIrisGradientTransition.module.scss
score: 0
comment on: http://stackoverflow.com/q/78930122
type: QuestionComment

http://stackoverflow.com/comment/139305006
score: 0
has text: Did you forget to put the image into the question?
type: QuestionComment
comment on: http://stackoverflow.com/q/79006685
type: Comment

http://stackoverflow.com/a/79024020
type: Answer
score: -1
downvote count: 1
upvote count: 0
has body: I think the answer here is actually height: auto or no height property at all. In my case it's needed to differentiate from mobile styling class.
answers question: http://stackoverflow.com/q/79023969

http://stackoverflow.com/comment/139412745
score: 1
type: Comment
has text: Please read [Why should I not upload images of code/data/errors?](https://meta.stackoverflow.com/q/285551/354577) You can [edit] your question and replace the images with [code block]s.
comment on: http://stackoverflow.com/q/79065331
type: QuestionComment

http://stackoverflow.com/comment/139295432
type: Comment
type: QuestionComment
has text: `:root { --button-primary-color: #fff; } .button.is-primary { color: var(--button-primary-color); } ` try this
comment on: http://stackoverflow.com/q/79000934
score: 1

http://stackoverflow.com/comment/139184372
type: Comment
score: 0
has text: You can do it with gap property
type: QuestionComment
comment on: http://stackoverflow.com/q/78941096

http://stackoverflow.com/q/79011753
tagged with: javascript
accepted answer: http://stackoverflow.com/a/79012509
tagged with: css
has comment: http://stackoverflow.com/comment/139314801
has comment: http://stackoverflow.com/comment/139314716
score: 0
has answer: http://stackoverflow.com/a/79012509
has title: How to position the browser validation message when using a Select2 component
has comment: http://stackoverflow.com/comment/139314830
type: Question
answer count: 1
type: AnsweredQuestion
has body: I'm trying to replace a standard with a Select2 in an existing form. The form logic was written in Vanilla JS, with the client-side validation left to the browser. The problem is the placement of the error message generated by the browser when I use a Select2 component: document.querySelectorAll("[data-is=select2]").forEach(el => { // the Select2 component only works with JQuery objects let $jqo = $(el); $jqo.select2({ width: "auto", placeholder: el.firstElementChild.textContent }); // making sure select2 works with the existing handlers $jqo.on("select2:select", ev => el.dispatchEvent(new Event("change"))); }); form { width: 20rem; } label { display: flex; align-items: center; column-gap: 1ch; } /* making select and Select2 occupy the remaining space */ select, .select2-container { flex-grow: 1; } <!-- Standard select example --!> Greetings: Select a Greetings Greetings: Select2 a Greetings As you can see after clicking on the buttons, the validation message of Select2 gets placed under the instead of the . How can I fix it? Preferably without JQuery.

http://stackoverflow.com/comment/139281272
type: QuestionComment
comment on: http://stackoverflow.com/q/78993739
type: Comment
has text: This question is similar to: [@Font-face not working on mobile](https://stackoverflow.com/questions/43327227/font-face-not-working-on-mobile). If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem.
score: 0

http://stackoverflow.com/a/78951810
score: 0
answers question: http://stackoverflow.com/q/78949483
has body: It's the width of your viewports. The word "Quiz" can't fit in the first example. (Well it can, but probably not with the css padding on the element) We need either a working example or a link to give you a detailed answer.
type: Answer

http://stackoverflow.com/comment/139392209
type: QuestionComment
has text: If that’s the case, then when I implement this on my page using WordPress as the framework, The issue arises, when I switch pages in responsive view; the design changes unexpectedly.
comment on: http://stackoverflow.com/q/79051072
score: 0
type: Comment

http://stackoverflow.com/comment/139203687
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78951292
type: QuestionComment
has text: Are you stuck with that HTML structure or can you change it?

http://stackoverflow.com/comment/139309292
type: AnswerComment
comment on: http://stackoverflow.com/a/79008951
has text: Wow. Easy enought Thanks!
type: Comment
score: 0

jsx
tag name: jsx
tags question: http://stackoverflow.com/q/79014407
type: Tag
tags question: http://stackoverflow.com/q/78959126
tags question: http://stackoverflow.com/q/78966188
tags question: http://stackoverflow.com/q/79237711
tags question: http://stackoverflow.com/q/79080111
tags question: http://stackoverflow.com/q/79107947

http://stackoverflow.com/a/78915510
type: Answer
score: 0
has body: Here's a way to do your layout using position:absolute. It's not entirely clear what you are trying to do with your layout. I needed to create div's e and f as fillers which is not the best way but you have the grey box basically going over and going under the red box. div{ margin:0; padding:0; } #a{ width:100%; height:100vh; background-color:white; position:relative; } #b{ position:absolute; width:80%; height:35%; background-color:white; z-index:13; } #c{ position:absolute; width:70%; height:50%; left:0; top:35%; background-color:grey; color:white; z-index:11; } #d{ position:absolute; background-color:red; height:100%; width:40%; right:0; z-index:12; } #e{ position:absolute; width:10%; height:10%; background-color:white; z-index:12; left:70%; top:35%; } #f{ position:absolute; width:10%; height:10%; background-color:grey; z-index:15; left:60%; top:35%; } body{ margin:0; padding:0; }
answers question: http://stackoverflow.com/q/78914768

http://stackoverflow.com/comment/139116944
type: QuestionComment
has text: thanks for the quick reply @tacoshy but that did not work and is not responsive. Also I am trying to achieve this via tailwind could you please suggest a tailwind approach?
comment on: http://stackoverflow.com/q/78904335
type: Comment
score: 0

http://stackoverflow.com/comment/139342854
score: 0
comment on: http://stackoverflow.com/q/79012295
type: QuestionComment
has text: I was considering "sidebar" and "nav" as separate things, but now I see I was wrong. Ultimately the design is up to you, but some people have the sidebar/nav "visible" at desktop resolutions, and then "hidden" on mobile. So you can use grid for desktop, and then use fixed positioning or a dialog in mobile.
type: Comment

http://stackoverflow.com/q/79023867
favorite count: 0
has answer: http://stackoverflow.com/a/79024063
possible better answer: http://stackoverflow.com/a/79024063
tagged with: css-animations
type: Question
upvote count: 2
score: 2
type: AnsweredQuestion
answer count: 2
has title: CSS animation with the oblique
has body: I'm trying to make a simple text animation with CSS. The text should slowly change value of font-style attribute. I have tried something like this: h1 { animation-duration: 3s; animation-name: slidein; } @keyframes slidein { from { font-style: oblique 30deg; } to { font-style: oblique 0deg; } }
has answer: http://stackoverflow.com/a/79025541
tagged with: css
downvote count: 0
accepted answer: http://stackoverflow.com/a/79025541

http://stackoverflow.com/q/79000658
score: 0
has title: CSS layer with class definition overrides style with pseudo-class in parent layer
tagged with: css
has body: The CSS layers the interesting thing, because it allows to circumvent cascading of CSS. But I don't understand why do inherited layer overlap the .item:hover selector? Did I write something wrong somewhere? @layer base, special; @layer base { .item { color: green; border: 5px solid green; font-size: 1.3em; padding: 0.5em; transition: all 0.3s ease; } .item:hover { color: red; } } @layer special { .item { color: rebeccapurple; } } Hello world! I expect the transition from rebeccapurple to red, but didn't get it.
has comment: http://stackoverflow.com/comment/139294498
has comment: http://stackoverflow.com/comment/139294472
type: UnansweredQuestion
has answer: http://stackoverflow.com/a/79000845
tagged with: css-layer
tagged with: http://stackoverflow.com/tag/html
type: Question
has comment: http://stackoverflow.com/comment/139294441
has comment: http://stackoverflow.com/comment/139294446
has comment: http://stackoverflow.com/comment/139294511
answer count: 1

http://stackoverflow.com/comment/139339703
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/79025648
has text: Does setting the opacity in the stylesheet not work? Because that's what I did using the class of the elements.
type: Comment

http://stackoverflow.com/q/79068052
has answer: http://stackoverflow.com/a/79068136
has comment: http://stackoverflow.com/comment/139417840
has comment: http://stackoverflow.com/comment/139417714
has answer: http://stackoverflow.com/a/79068289
tagged with: javascript
upvote count: 1
answer count: 2
has comment: http://stackoverflow.com/comment/139417410
tagged with: css
has comment: http://stackoverflow.com/comment/139417433
has comment: http://stackoverflow.com/comment/139417449
type: UnansweredQuestion
score: 1
has body: I have a small problem I have a theme switch button that turn the page to dark mode, but if I am in the home page and change to contact page the theme switch stops working, but this happens only on the other pages except the main one, and I don't know how to fix it. I have tried to mess around with the js code, but nothing. Here is my JavaScript code: // DarkMode let darkmode = localStorage.getItem("darkmode") const themeSwitch = document.getElementById("theme-switch") const enableDarkmode = () => { document.body.classList.add("darkmode") localStorage.setItem("darkmode", "active") document.getElementById("logo").src="../Imgs/logo-white.png" } const disableDarkmode = () => { document.body.classList.remove("darkmode") localStorage.setItem("darkmode", null) document.getElementById("logo").src="../Imgs/logo-blue.png"; } if (darkmode ==="active") enableDarkmode() themeSwitch.addEventListener("click", () => { darkmode = localStorage.getItem("darkmode") darkmode !== "active" ? enableDarkmode() : disableDarkmode() })
has comment: http://stackoverflow.com/comment/139417725
favorite count: 0
tagged with: http://stackoverflow.com/tag/html
type: Question
downvote count: 0
has title: After switching change page the dark mode toggle is not functioning

http://stackoverflow.com/a/79037018
answers question: http://stackoverflow.com/q/79036975
has body: position: relative means relative to itself. So position: relative; right: 0; does nothing since it's right edge is already at the far right of itself. The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements; thus, the space given for the element in the page layout is the same as if position were static. For moving the element to the far right, using only positioning, you need to move the element relative to the parent. which would require position: absolute or similar. The element is removed from the normal document flow, and no space is created for the element in the page layout. The element is positioned relative to its closest positioned ancestor (if any) or to the initial containing block. Its final position is determined by the values of top, right, bottom, and left. Other options to move the menu to the right include flexbox, text-align, css-grid and others.
type: Answer
score: 0

http://stackoverflow.com/comment/139267663
type: Comment
score: 0
has text: I mean, they could... I don't have a particular preference on this.
type: QuestionComment
comment on: http://stackoverflow.com/q/78986368

http://stackoverflow.com/a/79034736
type: Answer
accepted answer of: http://stackoverflow.com/q/79032875
has body: OK, the real, elegant solution is well described at https://piccalil.li/blog/creating-a-full-bleed-css-utility/ It's called a "Full-Bleed", and is just: .full-bleed { width: 100vw; margin-left: calc(50% - 50vw); } Or to leave a bit of margin, try calc(50% - 45vw), and setting your image to width:95vw;
answers question: http://stackoverflow.com/q/79032875
score: -2
has comment: http://stackoverflow.com/comment/139356464
upvote count: 0
downvote count: 2
type: AcceptedAnswer

http://stackoverflow.com/comment/139130599
comment on: http://stackoverflow.com/q/78911526
type: Comment
score: 0
has text: Probabaly not the most elegant approach, but you could use some JS to add/remove display after the opacity fires.
type: QuestionComment

http://stackoverflow.com/a/78937609
accepted answer of: http://stackoverflow.com/q/78937597
type: AcceptedAnswer
type: Answer
score: 0
has comment: http://stackoverflow.com/comment/139178203
answers question: http://stackoverflow.com/q/78937597
has comment: http://stackoverflow.com/comment/139178596
has body: Updated JavaScript Code: document.addEventListener("DOMContentLoaded", function () { console.log("Slider"); // Get the slider container element const sliderContainer = document.querySelector('.slider-container'); // Ensure sliderContainer is found if (!sliderContainer) { console.error("Slider container not found."); return; } // Get all slider item elements const sliderItems = document.querySelectorAll('.slider-item'); // Variable to keep track of the current item index let currentIndex = 0; // Function to scroll to the next item function scrollToNextItem() { // Increment the current index currentIndex = (currentIndex + 1) % sliderItems.length; // Scroll to the next item sliderItems[currentIndex].scrollIntoView({ behavior: 'smooth' }); // Automatically scroll to the next item after a delay setTimeout(scrollToNextItem, 3000); // Adjust the delay as needed } // Start the automatic scroll scrollToNextItem(); sliderContainer.addEventListener('scroll', () => { // Get the current scroll position const scrollPosition = sliderContainer.scrollLeft; // Loop through each slider item sliderItems.forEach((item, index) => { // Check if the item is in view if (scrollPosition >= item.offsetLeft && scrollPosition < item.offsetLeft + item.offsetWidth) { // Update the current index to the visible item currentIndex = index; } }); }); });
has comment: http://stackoverflow.com/comment/139178259
has comment: http://stackoverflow.com/comment/139178263

http://stackoverflow.com/comment/139368712
type: AnswerComment
type: Comment
comment on: http://stackoverflow.com/a/79041195
has text: Thanks so much for your answer. I upvoted it. This is an excellent starting point. Can this technique also be used to set the start / end time (e.g, 00:00 - 00:22) and control playback speed (1x, 1.25x, 1.5x)? As of now it seems only the play / pause button is working as well as the ability to rewind/fast forward the audio. If I understand correctly this solution works because the iframe is actually present, but invisible, and clicking the play button on the audio player is basically like clicking the play button on the video frame?
score: 0

http://stackoverflow.com/comment/139230722
comment on: http://stackoverflow.com/q/78966191
type: Comment
has text: https://frontendmasters.com/blog/custom-range-slider-using-anchor-positioning-scroll-driven-animations/
type: QuestionComment
score: 1

http://stackoverflow.com/a/79035967
has comment: http://stackoverflow.com/comment/139358583
answers question: http://stackoverflow.com/q/79035820
type: Answer
has body: Please check this code we have using padding normal class remove for hover: * { box-sizing: border-box; } .pop-out { position: relative; transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out, border-radius 0.2s ease-in-out, border 0.2s ease-in-out; /* Creating space between an element and its border */ border-radius: 10px; border-left: 1rem solid transparent; border-right: 1rem solid transparent; &amp;:hover { cursor: pointer; background-color: white !important; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); transform: scale(1.1); } } #wrapper { margin-left: 50px; display: flex; justify-content: center; } #my-element { background-color: gray; width: 200px; flex: 0 0 auto; } &lt;div id="wrapper"&gt; &lt;div class="pop-out" id="my-element"&gt; My element. &lt;/div&gt; &lt;/div&gt;
score: -1
has comment: http://stackoverflow.com/comment/139358555
downvote count: 1
upvote count: 0

http://stackoverflow.com/comment/139362845
score: 0
has text: Yes, it's currently based on the container's size as in your code. Indeed if you need to set the size to the original one, you need to pass through a smaller canvas used only to crop it. You need an example of that? Should be relatively trivial since no transform is needed for it.
type: AnswerComment
comment on: http://stackoverflow.com/a/79037831
type: Comment

http://stackoverflow.com/comment/139303630
type: QuestionComment
comment on: http://stackoverflow.com/q/79006007
type: Comment
has text: Provide html too and all necessary code.
score: 3

responsiveness
tags question: http://stackoverflow.com/q/78929444
tag name: responsiveness
type: Tag

http://stackoverflow.com/comment/139210226
score: 1
type: Comment
type: AnswerComment
comment on: http://stackoverflow.com/a/78948809
has text: Even weirder, the browser dev tools seem to think the colours are being applied differently to how they actually are: https://imgur.com/a/zcIPX4S There definitely could be a browser rendering bug here...

http://stackoverflow.com/comment/139377387
type: QuestionComment
comment on: http://stackoverflow.com/q/79040050
score: 0
has text: Here is the sandbox; you will see the problem when zooming between the categories. Don't hesitate to enlarge the preview; the components are responsive. https://codesandbox.io/p/devbox/c26qf2
type: Comment

http://stackoverflow.com/comment/139398288
score: 0
comment on: http://stackoverflow.com/q/79057850
type: QuestionComment
has text: Shouldn't it be `let sb = document.getElementById("sidebar");`?
type: Comment

http://stackoverflow.com/comment/139363249
has text: you should use `flex` for this type of lay out.
comment on: http://stackoverflow.com/q/79035255
type: Comment
score: 0
type: QuestionComment

http://stackoverflow.com/comment/139389447
type: QuestionComment
comment on: http://stackoverflow.com/q/79052599
type: Comment
score: 0
has text: I really didn't get what you are trying to say but when I checked the output of the `code`, I noticed that it has `overlfow-x` due to `margin: 0 -1rem;` set to `.cont`. When I removed it, it worked fine.

http://stackoverflow.com/comment/139337793
type: QuestionComment
score: 0
has text: @zer00ne Sorry - I wasn’t very clear- I meant to say that the video is supposed to span the whole width of the page without having to enter a special full/screen mode.
comment on: http://stackoverflow.com/q/79024470
type: Comment

http://stackoverflow.com/comment/139185437
score: 0
has text: In that case, you can decrease the speed of the transition from `2s` to something like `0.5s`.
type: AnswerComment
comment on: http://stackoverflow.com/a/78941635
type: Comment

http://stackoverflow.com/a/79048192
type: Answer
has body: After a LOT of debugging, I discovered that the Lenis instance I initialized was the culprit preventing me from horizontally scrolling. I didn't notice this earlier because this particular page on my app is meant to be 100svh, and the other pages did not need horizontal scrolling. After implementing a route check for the instance, I was able to come up with this, largely inspired by the original webpage: <Image src={`${src}?w=1024`} alt={title} placeholder='blur' blurDataURL={blurDataURL} width={4000} height={2500} className='h-[100svh] aspect-[16/10] lg:object-cover' priority /> {hotspots.map((hotspot, index) => ( <BedroomHotspot hotspot={hotspot} key={index} /> ))}
score: 0
answers question: http://stackoverflow.com/q/79042490

http://stackoverflow.com/comment/139269434
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78987305
type: QuestionComment
has text: i've been playing lately with dark/light modetoo , you can see what i mean : https://codepen.io/gc-nomade/pen/JjQOKrZ?editors=1111 . A solution could be to show a loader at first before dark or light mode are set

whitespace
tag name: whitespace
type: Tag
tags question: http://stackoverflow.com/q/78970177
tags question: http://stackoverflow.com/q/79302116

http://stackoverflow.com/a/78919751
score: 1
type: AcceptedAnswer
upvote count: 2
answers question: http://stackoverflow.com/q/78919468
type: Answer
downvote count: 1
accepted answer of: http://stackoverflow.com/q/78919468
has body: You are missing a Bootstrap container to wrap around the row. In Bootstrap, rows meant to be under containers (and/or possibily also under card-body in Bootstrap 4). Without that you will face the problem of not having the negative margins of the rows (accounting for being under container) being canceled out with the padding of the container. If you want a 100% width container just use container-fluid. That being said, if you really don't want to change your HTML structure for some reason, add g-0 on the row. As for why the scrollbar or the empty space appears, you can check out this detailed explanation. In short it's because margins don't grow/shrink the width of the container (body in your original code), but only effects the row's width itself (which is affected by w-100).

http://stackoverflow.com/comment/139179796
type: QuestionComment
comment on: http://stackoverflow.com/q/78925225
type: Comment
has text: Add information to the question- don’t bury it in a comment
score: 0

http://stackoverflow.com/q/78955699
upvote count: 1
answer count: 2
has title: How to add space between two buttons?
tagged with: css
accepted answer: http://stackoverflow.com/a/78955732
has body: In my homepage header, I have a login and register button. Currently, there is no space between these two buttons in wide screen. In smaller screen, I made it to collapse, and there is space. How do I keep the space regardless of the screen size? I've tried to add mb-2 in the li and ul tags, but it only works when they collapse. Register Log in
has answer: http://stackoverflow.com/a/78955753
tagged with: bootstrap-5
score: 1
favorite count: 0
tagged with: http://stackoverflow.com/tag/html
type: Question
has comment: http://stackoverflow.com/comment/139210957
possible better answer: http://stackoverflow.com/a/78955753
downvote count: 0
has answer: http://stackoverflow.com/a/78955732
type: AnsweredQuestion

http://stackoverflow.com/comment/139213928
type: QuestionComment
comment on: http://stackoverflow.com/q/78957279
has text: I'm using MPDF @mplungjan
type: Comment
score: 0

http://stackoverflow.com/comment/139278657
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78991280
has text: Fieldset would be the best solution. Failing that, here is a [reasonable solution](https://stackoverflow.com/a/60047680/2518285).
type: QuestionComment

http://stackoverflow.com/q/78914728
answer count: 0
tagged with: css
has title: Custom dialog opens on page load, instead of click
downvote count: 1
has comment: http://stackoverflow.com/comment/139135695
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139138851
favorite count: 0
has comment: http://stackoverflow.com/comment/139142531
tagged with: modal-dialog
has comment: http://stackoverflow.com/comment/139135568
type: Question
has comment: http://stackoverflow.com/comment/139135842
has comment: http://stackoverflow.com/comment/139135684
has body: I'm trying to develop a modal window for the first time using dialog. The problem is that the dialog window appears as soon as the page is loaded, instead of appearing when I click the selected button. When I click the button, it resizes the one that appears when the page loads. "use strict"; const openBtn = document.querySelector(".open_btn"); const dialog = document.querySelector(".nav_open-account-dialog"); const closeBtn = dialog.querySelector(".close_btn"); openBtn.addEventListener("click", () => { dialog.showModal(); }); closeBtn.addEventListener("click", () => { dialog.close(); }); * { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 62.5%; scroll-behavior: smooth; } body { font-family: "Roboto", sans-serif; background-color: #17152a; position: relative; } .circle-container { position: relative; margin-bottom: 22rem; } @keyframes moveCircle { 0% { transform: translateX(-50%) translateY(0); } 100% { transform: translateX(-50%) translateY(2vw); } } .circle { width: 35vw; height: 35vw; background-color: #f8f9fa; border-radius: 50%; position: absolute; top: 4vw; left: 50%; transform: translateX(-50%); z-index: -1; animation: moveCircle 3s infinite ease-in-out alternate; } .circle.two { width: 3vw; height: 3vw; background-color: #f8f9fa; border-radius: 50%; position: absolute; top: 10vw; left: 30%; transform: translate(-50%, -50%); z-index: -1; } .circle.three { width: 3vw; height: 3vw; background-color: #f8f9fa; border-radius: 50%; position: absolute; top: 18vw; left: 25%; transform: translate(-50%, -50%); z-index: -1; } .circle.four { width: 3vw; height: 3vw; background-color: #f8f9fa; border-radius: 50%; position: absolute; top: 28vw; left: 74%; transform: translate(-50%, -50%); z-index: -1; } .circle.five { width: 3vw; height: 3vw; background-color: #f8f9fa; border-radius: 50%; position: absolute; top: 35vw; left: 70%; transform: translate(-50%, -50%); z-index: -1; } .navbar { display: flex; justify-content: space-between; align-items: center…
tagged with: javascript
upvote count: 1
score: 0

http://stackoverflow.com/a/78960313
type: Answer
has comment: http://stackoverflow.com/comment/139219903
score: 0
has body: "use client"; import React, { useState, useEffect } from "react"; import { Link } from "react-scroll"; interface ButtonNavigationProps { navigateTo: string; children: React.ReactNode; } const ButtonNavigation: React.FC<ButtonNavigationProps> = ({ navigateTo, children, }) => { // State to track whether the page is fully loaded const [isLoaded, setIsLoaded] = useState(false); useEffect(() => { // Function to set the state when the page is fully loaded const handleLoad = () => { setIsLoaded(true); }; // Check if the page has already loaded if (document.readyState === "complete") { setIsLoaded(true); // Set to true immediately if the page is fully loaded } else { // If the page is not yet loaded, add an event listener to trigger once it finishes loading window.addEventListener("load", handleLoad); } // Cleanup event listener when the component unmounts return () => { window.removeEventListener("load", handleLoad); }; }, []); // Empty dependency array means this runs once when the component mounts return ( {children} <path d="m560-240-56-58 142-142H160v-80h486L504-662l56-58 240 240-240 240Z" /> ); }; export default ButtonNavigation;
answers question: http://stackoverflow.com/q/78960176

http://stackoverflow.com/comment/139137754
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78915933
type: QuestionComment
has text: how can I check what does the error says

http://stackoverflow.com/comment/139145019
score: 1
type: Comment
has text: You can the `m-0` class on the row element, that would help fix case 2.
type: QuestionComment
comment on: http://stackoverflow.com/q/78919468

http://stackoverflow.com/q/78921004
upvote count: 0
score: -1
tagged with: css
downvote count: 1
has title: Pages on /pages of my project working just with live server in VSCode, when i open the pages with a browser whitout live they dont work
has body: I have a problem in my project which is the following: I always run the html with the live server plugin in VSCode to facilitate my development. However, I noticed that when I have the plugin turned off, only the index.html page works and the other pages that are in a folder called pages do not have their CSS applied. With live server active: Login page correctly working With live server deactivated and login page open in browser: Login page dont working My project folders structure: project folders structure Pages code index.html GoLearn | Plataforma de estudos Sobre Contato Desenvolvedores LOGIN CRIAR CONTA CONCENTRE-SE NO APRENDIZADO, A ORGANIZAÇÃO É POR NOSSA CONTA! Adeus à bagunça e à complexidade das plataformas convencionais das Big Techs. Com a GoLearn, organização é a palavra-chave. SAIBA MAIS CONHEÇA A PLATAFORMA SOBRE NÓS A GoLearn é uma plataforma de estudos inovadora projetada para proporcionar organização, praticidade e eficiência aos alunos e professores. Ao se registrar como aluno de uma instituição, os usuários têm acesso a todo o conteúdo compartilhado por seus colegas e professores. Nossa plataforma apresenta uma interface intuitiva, com ícones que direcionam para materiais, vídeo aulas, listas de tarefas e atividades extras. Todos os conteúdos são submetidos a uma verificação para garantir sua qualidade e relevância. Com a GoLearn, estudar e colaborar nunca foi tão simples e eficaz. CONHEÇA A PLATAFORMA PARA PROFESSORES A GoLearn não é apenas para estudantes buscando organização; é uma ferramenta revolucionária para professores que desejam levar seu ensino para o próximo nível. Com a nossa plataforma intuitiva, você terá acesso a uma gama de recursos, projetados para otimizar seu tempo e aprimorar a experiência de aprendizado dos seus alunos. CONHEÇA A PLATAFORMA ENTRE EM CONTATO Entre em contato conosco para sanar dúvidas, discutir interesses e oportunidades de parceria. Estamos abertos para sugestões ou apenas para ter uma conversa. Nome comple…
type: UnansweredQuestion
favorite count: 0
type: Question
has answer: http://stackoverflow.com/a/78922166
answer count: 1
tagged with: http://stackoverflow.com/tag/html

http://stackoverflow.com/comment/139387305
type: QuestionComment
comment on: http://stackoverflow.com/q/79048712
type: Comment
score: 0
has text: I also tried adding this code: .is-menu-open { min-height: 100vh; background-color: red; } This seems to partially work, in that the menu now appears and takes over the entire screen (I added the red color for visual confirmation it's working, will remove later). However, the menu still won't overlay the other page elements, which is what i'm looking for. I tried adding z-index: 10000 to .is-menu-open, but there was no effect

http://stackoverflow.com/comment/139133078
comment on: http://stackoverflow.com/q/78906838
type: Comment
score: 0
has text: I'm not sure how the IntelliJ (new UI) window is set up, but it's done perfectly: they have a custom title bar, snap works, drop shadow, minimize/maximize/close animations, etc.
type: QuestionComment

d3.js
tags question: http://stackoverflow.com/q/78975591
tag name: d3.js
type: Tag
tags question: http://stackoverflow.com/q/79449720

http://stackoverflow.com/comment/139341172
score: 1
comment on: http://stackoverflow.com/q/79026518
type: Comment
has text: paste you code please not a photo of the code
type: QuestionComment

http://stackoverflow.com/comment/139210203
comment on: http://stackoverflow.com/q/78954874
type: QuestionComment
has text: Please provide a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example). Frankly, scaling a layout to match the current device widths is not really how responsive - design should work. But maybe you have good reasons for it so please add an example - ideally as a running snippet to illustrate your use case.
type: Comment
score: 2

http://stackoverflow.com/comment/139159289
comment on: http://stackoverflow.com/a/78927325
type: Comment
score: 0
type: AnswerComment
has text: This does not solve the problem at all, and it is an inconvenient solution to add a flexible number of images in css, while you can simply have images in html.

http://stackoverflow.com/a/78972198
has comment: http://stackoverflow.com/comment/139245880
answers question: http://stackoverflow.com/q/78971876
type: Answer
score: 0
has body: give the min height and width to max to outer wrapper and then gave width as fit-content to the children with max height and width this is my version of the answer and hope this works :) #introduction { display: flex; justify-content: center; background-color: grey; min-height: 100vh; min-width: 100vw; } #introduction-child { overflow-wrap: break-word; width: fit-content; max-width: 80%; max-height: 80%; background-color: #80b0ff; margin-top: 20vh; } #introduction h2 { font-size: 1.8em; } Max Mustermann Lorem ipsum dolor sit amet, consectetur ad Lorem amet, consectetur ad

squarespace
tags question: http://stackoverflow.com/q/79012618
type: Tag
tag name: squarespace
tags question: http://stackoverflow.com/q/78971663
tags question: http://stackoverflow.com/q/78980291
tags question: http://stackoverflow.com/q/79086756
tags question: http://stackoverflow.com/q/79123116
tags question: http://stackoverflow.com/q/79394858

http://stackoverflow.com/comment/139362344
score: 0
comment on: http://stackoverflow.com/q/79037371
type: QuestionComment
type: Comment
has text: Both files are in the same folder, one has tailwind, and the other does not

http://stackoverflow.com/comment/139207683
comment on: http://stackoverflow.com/q/78951420
score: 2
type: Comment
has text: Don't tag multiple versions. That's confusing.
type: QuestionComment

http://stackoverflow.com/comment/139117766
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78904561
type: QuestionComment
has text: Are you trying to replicate the image with CSS only?

http://stackoverflow.com/comment/139305286
score: 0
comment on: http://stackoverflow.com/q/79006902
has text: `getDay()` returns a day of the week, not the day of the month; I believe you want `getDate()`. Additionally, your attributes have padded zeroes, while the date functions do not, so the string compare won't work that way (because the `data-date` attributes are strings).
type: QuestionComment
type: Comment

http://stackoverflow.com/a/78960270
has body: Using getComputedStyle allows you to see the final CSS values applied to an element, even if they were changed by JavaScript or other styles. https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle function ToggleDiv() { var v = document.getElementById('equiv-submenu'); var style = getComputedStyle(v); if (style.display == '' || style.display == 'none') { v.style.display = 'block'; } else { v.style.display = 'none'; } } &lt;div id="equiv" onclick="ToggleDiv()"&gt; &lt;p&gt;&amp;equiv;&lt;/p&gt; &lt;/div&gt; &lt;div id="equiv-submenu"&gt; &lt;div id="equiv-submenu-content"&gt; ... &lt;/div&gt; &lt;/div&gt;
type: Answer
score: 0
answers question: http://stackoverflow.com/q/78960206

http://stackoverflow.com/comment/139224717
type: Comment
score: 0
has text: The CSS should work fine. Could it be the theme's CSS is simply overriding your rules? You could try a more specific rule like `*{font-family: "Sorts Mill Goudy"!important}` for testing - this should override even subsequent rules.
type: QuestionComment
comment on: http://stackoverflow.com/q/78962032

http://stackoverflow.com/a/79021898
has body: * { box-sizing: border-box; margin: 0; padding: 0; } .container { max-width: 1000px; margin: 0 auto; } .image { float:left; max-width:300px; padding: 0 20px 20px 0; } .image img { width: 100%; height: auto; border-radius: 50%; } p { margin-bottom: 10px; } Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed elit ex. Fusce vitae egestas magna. Vestibulum et aliquet diam. Curabitur vulputate est vel arcu vehicula sollicitudin. Nam iaculis neque nec lorem dignissim lobortis. Aliquam ultricies, dui a volutpat lobortis, ipsum nisi malesuada mi, ut gravida nisl velit et purus. Vivamus volutpat cursus elementum. Sed et nisi eu mauris dictum accumsan et id nisi. Sed bibendum quam velit, nec dictum nibh pretium ut. Fusce volutpat erat hendrerit dictum vehicula. Nam lobortis iaculis ligula in cursus. Sed eleifend sem feugiat, tempor justo vel, pulvinar felis. Quisque ante libero, aliquet sed quam sit amet, hendrerit egestas enim. Fusce fermentum ex sed neque venenatis pharetra. In elit neque, elementum sit amet felis eu, dignissim ultricies urna. Duis pharetra lacus sem. Proin maximus ipsum ultricies, commodo dui fermentum, dictum tortor. Vestibulum in ipsum eget ex eleifend consequat. Vestibulum ultrices lorem nisl, quis sollicitudin ex vehicula eget. Nunc eleifend turpis quis facilisis suscipit. Nunc et iaculis diam, et pharetra nisi. Donec sem arcu, imperdiet ut consequat quis, vehicula ac urna. Curabitur nisl enim, volutpat sit amet turpis eget, tristique suscipit neque. Etiam sed sagittis sapien. Sed venenatis dui non dolor tincidunt, eget iaculis urna aliquet. Vestibulum nibh neque, mattis eu nulla quis, tempus dictum velit. Integer vulputate, orci eget rhoncus semper, diam metus volutpat sapien, ut ultrices mi leo eget ex. Nunc et ipsum sed lectus facilisis blandit sed id leo. Aenean et dignissim mi. Fusce auctor quam erat, vitae viverra mi tincidunt in. Nunc sodales tortor nec justo elementum, sit amet gravida dolor dictum. Ut at neque ornare, varius me…
downvote count: 0
upvote count: 2
type: Answer
score: 2
answers question: http://stackoverflow.com/q/79021574

http://stackoverflow.com/comment/139136853
type: Comment
score: 0
type: QuestionComment
has text: So should I use something other than addEventListener() or would I need to add another click argument?
comment on: http://stackoverflow.com/q/78915487

http://stackoverflow.com/comment/139312688
type: Comment
comment on: http://stackoverflow.com/q/79010725
score: 0
has text: @LuisLobo Fixed: https://codesandbox.io/p/sandbox/image-container-wjw2ld
type: QuestionComment

http://stackoverflow.com/q/79059314
type: UnansweredQuestion
type: Question
has comment: http://stackoverflow.com/comment/139400939
tagged with: http://stackoverflow.com/tag/html
score: 0
tagged with: javascript
answer count: 0
has body: I'm trying to implement a dynamic subtask feature similar to what I've attached in the images below. Here's what I'm aiming for: The input field has a + icon by default. When the user starts typing in the input field, the + icon should change to X (cancel) and ✓ (confirm) buttons. When the user confirms (✓), the entered text should be added as a subtask below the input field. There should be options to edit (a pencil icon) and delete (a trash can icon) each added subtask. I've attached screenshots for reference:
tagged with: css
has title: "How to implement a dynamic subtask input field with icons that change and subtasks list below?"
tagged with: textinput
has comment: http://stackoverflow.com/comment/139400973

http://stackoverflow.com/comment/139163368
type: QuestionComment
comment on: http://stackoverflow.com/q/78926909
has text: The CSS isn't very simple if you need a general case (as many or as few images as you like). I will put up a general solution in JS which is much less wordy in case it is of use to future readers.
type: Comment
score: 0

printing
tag name: printing
tags question: http://stackoverflow.com/q/78966204
type: Tag
tags question: http://stackoverflow.com/q/79023748
tags question: http://stackoverflow.com/q/79222997
tags question: http://stackoverflow.com/q/79109546
tags question: http://stackoverflow.com/q/79080987
tags question: http://stackoverflow.com/q/79142368
tags question: http://stackoverflow.com/q/79079930
tags question: http://stackoverflow.com/q/79177557
tags question: http://stackoverflow.com/q/79080689
tags question: http://stackoverflow.com/q/79155749
tags question: http://stackoverflow.com/q/79167406
tags question: http://stackoverflow.com/q/79243640
tags question: http://stackoverflow.com/q/79153154
tags question: http://stackoverflow.com/q/79173731
tags question: http://stackoverflow.com/q/79272069
tags question: http://stackoverflow.com/q/79266636
tags question: http://stackoverflow.com/q/79352728
tags question: http://stackoverflow.com/q/79540387
tags question: http://stackoverflow.com/q/79493761

http://stackoverflow.com/q/78972128
tagged with: javascript
tagged with: canvas
downvote count: 0
tagged with: css
has title: How to keep the div 100% of the parent container when scaling the div?
has body: I am trying to build a canvas like element using div. I have a div element that is acting as a canvas, this div element can zoom and pan. This div.canvas element is placed inside a container. I achieve the zooming and panning effects using css transforms scale and translate. (the black is the container, the green is the div.canvas and inner red square is inner element) Every time, I zoom out the div(acting as canvas) width and height is also scaled down and not is not 100% to the container. here's a codesandbox that can replicate the problem. (use +, - keys for zooming) // import "./styles.css"; let scale = 1; window.addEventListener("keydown", (e) => { if (e.key === "+") { scale += 0.2; } else if (e.key === "-") { scale -= 0.2; } // console.log("scale: ", scale); document.getElementById("canvas").style.transform = `scale(${scale})`; }); body { font-family: sans-serif; height: 100vh; width: 100%; } #app { width: 100%; height: 100%; position: relative; display: flex; background-color: brown; } .canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: green; } .element { position: absolute; top: 50px; left: 50px; width: 100px; height: 100px; background-color: blue; } JavaScript Sandbox You'll notice every time you scale down pressing - key, the div.canvas becomes smaller as well. how can I ensure everytime I zoom, it affects only the contents inside the div.canvas instead of the div itself or how can I make sure that the div.canvas is always 100% of the parent container? Edit: My endgoal is something like this, but have infinite canvas(green div) fill the container.
type: UnansweredQuestion
has answer: http://stackoverflow.com/a/78972243
favorite count: 0
type: Question
answer count: 1
tagged with: http://stackoverflow.com/tag/html
score: 2
upvote count: 2

http://stackoverflow.com/comment/139417714
type: Comment
score: 0
type: QuestionComment
has text: Yes the theme-switch element exist in al pages
comment on: http://stackoverflow.com/q/79068052

http://stackoverflow.com/comment/139316882
type: AnswerComment
score: 1
comment on: http://stackoverflow.com/a/79013165
type: Comment
has text: Thank you so much for your help! Your solution worked perfectly and saved me a lot of time. Really appreciate it

slick.js
tag name: slick.js
type: Tag
tags question: http://stackoverflow.com/q/79055349
tags question: http://stackoverflow.com/q/79087160

http://stackoverflow.com/comment/139303418
comment on: http://stackoverflow.com/q/79005867
type: QuestionComment
has text: Yeah, I see, thx
type: Comment
score: 0

http://stackoverflow.com/comment/139324895
type: Comment
comment on: http://stackoverflow.com/q/79013255
score: 0
type: QuestionComment
has text: I undeleted the answer since you said you are curious to see a working demo with another library.. and it happens to be flatpickr (one of those you cited in that list).

http://stackoverflow.com/comment/139289210
has text: Yeah I checked everything, the image just get crop by the viewport dimensions. Not sure what I would like to realize is even possible
comment on: http://stackoverflow.com/q/78997951
type: Comment
score: 0
type: QuestionComment

http://stackoverflow.com/comment/139310893
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/79008614
has text: @ZzzZ please be sure to mark this post as the correct answer so it is helpful for others.

http://stackoverflow.com/comment/139326028
comment on: http://stackoverflow.com/q/79018085
type: Comment
score: 0
has text: When I remove the if-function around my count++ statement it works totally fine. But I can still click on the image and the count gets higher. I don't know how to tell my program that it should stop counting if the timer hits 00:00.
type: QuestionComment

http://stackoverflow.com/comment/139167862
type: Comment
score: 0
type: AnswerComment
has text: Might be cleaner to use classes than `style`.
comment on: http://stackoverflow.com/a/78932074

http://stackoverflow.com/comment/139305088
score: 0
has text: You have a rather strange element in your code. It is . It should be I can't tell which plugin and/or your own code added this. Its effect is that the HTML with the download button is interpreted as stylesheet content rather than HTML hence the button does not appear. Have a very close look at any code you have introduced.
type: QuestionComment
comment on: http://stackoverflow.com/q/79006685
type: Comment

http://stackoverflow.com/comment/139384031
type: QuestionComment
has text: Already refactored my website. Just needed to get rid of the containing div in my design. Still though, I am wondering why Chrome works this way and how is could be worked around without re-designing?
comment on: http://stackoverflow.com/q/79048767
type: Comment
score: 0

http://stackoverflow.com/comment/139132037
type: AnswerComment
comment on: http://stackoverflow.com/a/78912341
has text: Thank you for your help, especially that last selector you used I didn't know about it before. I ended up resorting to duplicating my HTML because I just didn't have a lot of content to expand my width. I was dealing with font awesome icons rather than sentences so I don't think it would've been a pleasant experience either for me or for the end-result.
type: Comment
score: 0

http://stackoverflow.com/comment/139298853
score: 0
type: AnswerComment
has text: A screen reader user can access content that normally wouldn’t be tabbable (like paragraphs, headings, and elements with `role="img"`) without making it explicitly tabbable. For example, I wouldn’t recommend adding `tabindex="0"` to improve accessibility. Only *interactive* elements should be focusable.
comment on: http://stackoverflow.com/a/79003163
type: Comment

http://stackoverflow.com/a/79064432
has body: You don't even need a wrapper. You can horizontally center a block-level element by giving it a margin-left and margin-right of 0 such as using margin: 0 auto. All you need to do is limit the width of the block-level element to the content by using: width: max-content #title { width: max-content; margin: 0 auto; border: 2px solid black; border-radius: 10px; padding: 10px; color: rgb(226, 35, 35); } Title If you want to use a container you can even make use of text-align: .borderedTitle { text-align: center; } #title { display: inline-block; border: 2px solid black; border-radius: 10px; padding: 10px; color: rgb(226, 35, 35); } Title
type: Answer
downvote count: 1
score: 2
upvote count: 3
answers question: http://stackoverflow.com/q/79064359

http://stackoverflow.com/a/78961812
answers question: http://stackoverflow.com/q/78957679
type: Answer
score: 0
has body: Use animation-duration and other animation properties properly. div.wrapper { width: 50%; height: 100%; background-color: red; /* animation-name: fadeIn; */ /* animation-duration: 2s; */ /* animation-delay: 0s; */ /* animation-timing-function: ease-in; */ /* animation-iteration-count: 5; */ animation: fadeIn 2s ease-in 5; /* &lt;--- Shorthand of top animation properties*/ } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

http://stackoverflow.com/comment/139384572
type: AnswerComment
has text: My proposed zoom calculation is wrong, its would be simply: `zoom: windowWidth/designWidth`. If you run your snippet, you can see.
comment on: http://stackoverflow.com/a/79044672
type: Comment
score: 0

http://stackoverflow.com/a/78976080
type: AcceptedAnswer
accepted answer of: http://stackoverflow.com/q/78976005
type: Answer
score: 0
has body: The problem is that when displaying the tooltip, you are providing scaled coordinates (canvas coordinates), but what you need to provide are unscaled coordinates (page coordinates). Remember that the tooltip is not a child of the canvas, it is a child of the page. So the fix is a simple one. Divide by the scale when calculating your tooltip coordinates: const tooltipMapX = cellCoords.col / scaleX + canvas.offsetLeft; const tooltipMapY = cellCoords.row / scaleY + canvas.offsetTop + gridSize; A snippet to demonstrate the fix: document.addEventListener('DOMContentLoaded', function() { const canvas = document.getElementById('gameMap'); const ctx = canvas.getContext('2d'); const tooltipMap = document.getElementById('tooltipMap'); const buyButton = document.getElementById('buyButton'); const img = new Image(); img.onload = function() { ctx.drawImage(img, 0, 0); const gridSize = 50; function drawGrid() { ctx.strokeStyle = '#D3D3D3'; ctx.setLineDash([5, 5]); ctx.lineWidth = 1; for (let x = 0; x <= 1000; x += gridSize) { ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, 1000); ctx.stroke(); } for (let y = 0; y <= 1000; y += gridSize) { ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(1000, y); ctx.stroke(); } } function drawCellNumbers() { ctx.setLineDash([]); ctx.fillStyle = 'black'; ctx.strokeStyle = 'white'; ctx.lineWidth = 3; ctx.font = 'bold 18px Arial'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; let cellNumber = 1; for (let y = 0; y < 1000; y += gridSize) { for (let x = 0; x < 1000; x += gridSize) { ctx.strokeText(cellNumber, x + gridSize / 2, y + gridSize / 2); ctx.fillText(cellNumber, x + gridSize / 2, y + gridSize / 2); cellNumber++; } } } drawGrid(); drawCellNumbers(); let highlightedCell = null; function getCellCoords(x, y) { return { col: Math.floor(x / gridSize) * gridSize, row: Math.floor(y / gridSize) * gridSize }; } function highlightCell(col, row) { ctx.strokeStyle = 'black'; ctx.setLineDash([]); ctx.lineWidth = 3; ctx.strokeRect(col, row, gridSize, …
answers question: http://stackoverflow.com/q/78976005

http://stackoverflow.com/q/79040884
downvote count: 1
has title: Div keeps on changing position with another div
type: UnansweredQuestion
favorite count: 0
type: Question
has body: I am trying to put the eye SVGs on my head. I have two separate SVGs which I put into two separate divs. Despite this, the black and white head guide which I temporarily implemented in my code to show where the eyes should be won't stay still and keeps moving with my other div. Here is my code: .character { /* position: relative;*/ } .part { position: absolute; } .head { /*animation: float 2s ease-in-out infinite;*/ /*position: relative;*/ margin-top:30px; } .headcolor { z-index: 1; margin-top: -500px; position: relative; } /*soon, i will have to temporarily disable the floating animation to position the eyes, mouth, and whatever*/ .headoutline { z-index: 2; position: relative; width: 100%; height: 100%; } /* @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }*/ Character Assembly <image href="/svgs/head/shapes/495.svg" id="headoutline"/> <g transform="matrix(1.0, 0.0, 0.0, 1.0, 75.0, 45.0)"> <path id="head_color" d="M75.0 0.0 Q75.0 18.65 53.0 31.8 31.05 45.0 0.0 45.0 -31.05 45.0 -53.05 31.8 -75.0 18.65 -75.0 0.0 -75.0 -18.65 -53.05 -31.85 -31.05 -45.0 0.0 -45.0 31.05 -45.0 53.0 -31.85 75.0 -18.65 75.0 0.0" fill="#ffcc66" fill-rule="evenodd" stroke="none" /> </g> <image href="/svgs/head/shapes/9.svg" id="headoutline"/> Here is something which happens when I open inspect element and then change the margin-top of the head div: .character { /* position: relative;*/ } .part { position: absolute; } .head { /*animation: float 2s ease-in-out infinite;*/ /*position: relative;*/ margin-top:100px; /*i tried to change this but the head in the guide div just came with it. the guide is supposed to stay where it is and not go with the colored head*/ } .headcolor { z-index: 1; margin-top: -500px; position: relative; } /*soon, i will have to temporarily disable the floating animation to position the eyes, mouth, and whatever*/ .headoutline { z-index: 2; position: relative; width: 100%; height: 100%; } /* @keyframes float { 0%, 100% { tra…
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139368319
upvote count: 1
score: 0
answer count: 0
tagged with: css

http://stackoverflow.com/q/78929444
score: 0
tagged with: overflow
tagged with: css
has body: Right now because my table has many columns, right side of table overflows outside of the screen. I want to make it responsive so that the table wraps itself below for more columns. I want the table rows to wrap together as a unit(header and data together). overflow can be observed in this pic I have looked for solution but the only responsive solution i got was that, add a horizontal scroll bar overflow-x: auto and make it horizontally responsive. But i dont want to apply this. I was wondering if wrapping was possible with tables. This is how i want the table to wrap My code: body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #ffffff; color: #ffffff; } .container { width: 100%; max-width: 600px; margin: 0 auto; background-color: #231F20; padding: 20px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); color: #000000; } .logo { text-align: center; margin-bottom: 20px; } .content { padding: 20px; font-size: 12px; color: white; } .content h2 { color: #ffffff; font-size: 14px; } .content table { width: 100%; border-collapse: collapse; margin: 20px 0; } .content table, .content th, .content td { border: 1px solid #ddd; } .content th, .content td { padding: 8px; text-align: left; white-space: nowrap; } Inquiry Confirmation Dep. Date Dep. Time Aircraft From To PAX Tour Type Tour Type 2 Tour Type 3 Tour Type 4 Tour Type 5 Tour Type 6 ##DATE## ##TIME## ##AIRCRAFT_TYPE## ##FROM## ##TO## ##PAX## ##TourType## ##TourType 2## ##TourType 3## ##TourType 4## ##TourType 5## ##TourType 6##
has comment: http://stackoverflow.com/comment/139163353
has answer: http://stackoverflow.com/a/78930960
upvote count: 1
type: UnansweredQuestion
favorite count: 0
tagged with: responsiveness
has title: How to make HTML table responsive?
tagged with: http://stackoverflow.com/tag/html
type: Question
answer count: 1
tagged with: html-table
downvote count: 1
has comment: http://stackoverflow.com/comment/139163590

http://stackoverflow.com/q/78971720
has title: CSS writing-mode and transform Not Working in Emails– How do i apply a vertical text in emails?
type: UnansweredQuestion
type: Question
tagged with: http://stackoverflow.com/tag/html
answer count: 1
has comment: http://stackoverflow.com/comment/139243626
score: 0
has answer: http://stackoverflow.com/a/78972034
tagged with: html-email
linked to: http://stackoverflow.com/q/8969901
has body: I'm trying to apply a CSS effect to display text with a vertical orientation in an HTML email. The following CSS works perfectly in browsers, but when viewed in Microsoft Outlook, the writing-mode and transform properties do not render as expected. What do you think seems to be the problem? what are other alternatives that I could do? This should be vertically aligned I have tried other solutions such as using writing-mode: tb-rl and also an attempt to use VML but to no avail. UPDATE 1 I was able to rotate the text with using something like this, the problem with this one is it the width doesnt really adjust well based on the line breaks, This should be vertically aligned Other attempt that I have made is using layout-flow:horizontal inside a span like the example below, the height automatically adjust based on the longest word but it seems like line-break does not apply at all since i tried adding This should be vertically aligned UPDATE 2 I was able to do a work around now to handle the sizing of the width by manually adding tags for every word. The only issue with this now is that it doesn't look good in some cases like when a word is too long or there are a lot of short words, so here is an example of my current code now. I might do it for every two words instead, but still its not completely fool proof This should be vertically aligned
tagged with: css
has comment: http://stackoverflow.com/comment/139241198

http://stackoverflow.com/comment/139314483
has text: @AHaworth you are right, I changed my proposal with the use of the aria PosInSet property
score: 1
type: Comment
type: AnswerComment
comment on: http://stackoverflow.com/a/79010927

http://stackoverflow.com/a/79024916
upvote count: 1
has body: I've found the most elegant solution to involve utilizing the ResizeObserver API and scrollIntoView with block: 'nearest': // On accordion open const observer = new ResizeObserver(() =&gt; myAccordion.scrollIntoView({ block: 'nearest' })); observer.observe(myAccordion); // Cleanup on completion observer.disconnect();
answers question: http://stackoverflow.com/q/79024915
score: 1
type: Answer
downvote count: 0

http://stackoverflow.com/comment/139295614
score: 1
type: Comment
has text: See this diagram on font-metrics from the Apple documentation: https://developer.apple.com/library/archive/documentation/Cocoa/Conceptual/FontHandling/Tasks/Art/glyph_metrics.gif x-height is not the full 1em.
comment on: http://stackoverflow.com/q/78998686
type: QuestionComment

http://stackoverflow.com/q/78958654
score: 1
has answer: http://stackoverflow.com/a/78963185
accepted answer: http://stackoverflow.com/a/78958721
tagged with: css
has title: Css mask-image corner pixelated
type: Question
upvote count: 2
downvote count: 1
type: AnsweredQuestion
has comment: http://stackoverflow.com/comment/139217739
favorite count: 0
answer count: 2
tagged with: http://stackoverflow.com/tag/html
possible better answer: http://stackoverflow.com/a/78963185
has answer: http://stackoverflow.com/a/78958721
has body: I've tried to create a curved box using mask-image property. I've achieved what i need but the issue is that the corner looks pixelated. Any solutions for this. .shape { width: 50px; height: 50px; background: #f00; mask-image: radial-gradient( circle 100px at 0 0, transparent 0, transparent 50px, black 21px); } &lt;div class="shape"&gt; &lt;/div&gt; Demo fiddle Here is the code .shape{ width: 50px; height: 50px; background: #f00; mask-image: radial-gradient( circle 100px at 0 0, transparent 0, transparent 50px, black 21px ); }

webfonts
tags question: http://stackoverflow.com/q/79023236
type: Tag
tag name: webfonts
tags question: http://stackoverflow.com/q/79231876
tags question: http://stackoverflow.com/q/79458448

underline
type: Tag
tag name: underline
tags question: http://stackoverflow.com/q/78972900

http://stackoverflow.com/comment/139348717
type: QuestionComment
has text: Thank you so much. But why does it work when we just use flex-basis instead of width?
type: Comment
comment on: http://stackoverflow.com/q/79030661
score: 0

http://stackoverflow.com/q/79050052
tagged with: hamburger-menu
has title: Navbar hamburger being cut off on the bottom of hamburger
type: UnansweredQuestion
type: Question
answer count: 1
tagged with: tailwind-css
score: 0
has answer: http://stackoverflow.com/a/79055360
tagged with: reactjs
has body: I am trying to implement a hamburger menu in a React + Tailwind component, but the bottom layer of the hamburger menu is being cut off half way through, so the bottom line is not completely full. I do not understand why. I am attaching a screenshot of the problem. I am also including the image below. import React, { useState } from 'react'; const Navbar: React.FC = () => { const [isOpen, setIsOpen] = useState(false); const toggleMenu = () => { setIsOpen(!isOpen); }; return ( Paolo's Pizza and Ristorante Home Menu Reservations About Us Contact {isOpen && ( Home Menu Reservations About Us Contact )} ); }; export default Navbar; I was expecting the hamburger menu to appear as normal, and I have tried adjusting various Tailwind utility classes, but I couldn't get it to work. Here is the image of the hamburger part of the navbar not appearing
has comment: http://stackoverflow.com/comment/139386662
tagged with: css

http://stackoverflow.com/q/79008222
downvote count: 1
upvote count: 0
accepted answer: http://stackoverflow.com/a/79011720
favorite count: 0
has answer: http://stackoverflow.com/a/79010299
type: Question
has body: I have a button and in it I have an svg image (defined in css) and some text. I'm trying to change the color of both the text and the svg on hover and active states of the button, but so far I'm only able to change the svg or the text.. This is the code in html: &lt;section class=&quot;header1 cid-uoclpABLMG&quot; id=&quot;nosotros&quot;&gt; &lt;div class=&quot;mbr-section-btn mt-3 ctowa&quot;&gt; &lt;a class=&quot;btn btn-default&quot; href=&quot;https://wa.me/5218448699192?text=some%20text&quot; target=&quot;_blank&quot;&gt; &lt;span class=&quot;fa-brands--whatsapp-square&quot;&gt;&lt;/span&gt; &lt;span&gt;&amp;nbsp;Contacto WhatsApp&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; &lt;/section&gt; And this is the CSS for the svgs: .fa-brands--whatsapp-square { display: inline-block; width: 2.63rem; height: 3rem; background-repeat: no-repeat; background-size: 100% 100%; background-image: url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='green' d='M224 122.8c-72.7 0-131.8 59.1-131.9 131.8c0 24.9 7 49.2 20.2 70.1l3.1 5l-13.3 48.6l49.9-13.1l4.8 2.9c20.2 12 43.4 18.4 67.1 18.4h.1c72.6 0 133.3-59.1 133.3-131.8c0-35.2-15.2-68.3-40.1-93.2c-25-25-58-38.7-93.2-38.7m77.5 188.4c-3.3 9.3-19.1 17.7-26.7 18.8c-12.6 1.9-22.4.9-47.5-9.9c-39.7-17.2-65.7-57.2-67.7-59.8s-16.2-21.5-16.2-41s10.2-29.1 13.9-33.1c3.6-4 7.9-5 10.6-5c2.6 0 5.3 0 7.6.1c2.4.1 5.7-.9 8.9 6.8c3.3 7.9 11.2 27.4 12.2 29.4s1.7 4.3.3 6.9c-7.6 15.2-15.7 14.6-11.6 21.6c15.3 26.3 30.6 35.4 53.9 47.1c4 2 6.3 1.7 8.6-1c2.3-2.6 9.9-11.6 12.5-15.5c2.6-4 5.3-3.3 8.9-2s23.1 10.9 27.1 12.9s6.6 3 7.6 4.6c.9 1.9.9 9.9-2.4 19.1M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48M223.9 413.2c-26.6 0-52.7-6.7-75.8-19.3L64 416l22.5-82.2c-13.9-24-21.2-51.3-21.2-79.3C65.4 167.1 136.5 96 223.9 96c42.4 0 82.2 16.5 112.2 46.5c29.9 30 47.9 69.8 47.9 112.2c0 87.4-72.7 158.5-160.1 158.5'/%3E%3C/svg%3E&quot;); } .fa-brands--whatsapp-square:h…
has comment: http://stackoverflow.com/comment/139308136
type: AnsweredQuestion
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139308003
tagged with: http://stackoverflow.com/tag/svg
has answer: http://stackoverflow.com/a/79011720
possible better answer: http://stackoverflow.com/a/79010299
has title: Change two objects inside a div on hover
answer count: 2
score: -1
tagged with: css

http://stackoverflow.com/comment/139287840
type: Comment
score: 0
has text: @okcoker Yup I fixed it, still facing the same issue.
type: QuestionComment
comment on: http://stackoverflow.com/q/78996817

http://stackoverflow.com/comment/139283711
score: 1
comment on: http://stackoverflow.com/q/78993240
has text: This question is similar to: [Show / hide a specific Div with checkboxes with HTML / CSS](https://stackoverflow.com/questions/49603161/show-hide-a-specific-div-with-checkboxes-with-html-css). If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem.
type: Comment
type: QuestionComment

http://stackoverflow.com/a/78957708
score: 0
answers question: http://stackoverflow.com/q/78957424
has body: Well and one more solution with pseudo-elements ::before and ::after function toggleBorders() { table.tHead.firstElementChild.children[1].classList.toggle('thick-border'); Array.from(table.tBodies[0].children).forEach(row => row.children[1].classList.toggle('thick-border')); } table { border-collapse: collapse; } th.thick-border, td.thick-border { position: relative; &::before, &::after { content: ''; position: absolute; display: block; top: 0; left: -1px; width: 3px; height: calc(100% + 2px); background: red; } &::after { left: unset; right: -1px; } } h1 h2 h3 h4 11 12 13 14 21 22 23 24 Click Me!
type: Answer

http://stackoverflow.com/a/78915736
type: Answer
has body: ul.this ul:not(ul.this ul ul) {/*...*/}
answers question: http://stackoverflow.com/q/78913738
downvote count: 0
score: 1
upvote count: 1

http://stackoverflow.com/comment/139180273
type: Comment
comment on: http://stackoverflow.com/q/78938648
has text: @JayCravens that did not seem to have any effect
type: QuestionComment
score: 1

http://stackoverflow.com/q/78990537
tagged with: css
downvote count: 1
has body: i want the a child element inside a parent element to follow the mouse cursor to only where the parent elements boundaries are, and to stop there and not go outside it main = document.getElementById("bar_2") ball = document.getElementById("ball") main.addEventListener("pointermove", (event =&gt; { const rect = main.getBoundingClientRect(); ball.style.left = (event.clientX - rect.left) + "px" ball.style.top = (event.clientY - rect.top) + "px" ball.style.transform = "translate(-50%, -50%)" })) html::-webkit-scrollbar{ width: 0; } body{ margin: 0%; background-color: #1c1a1b; display: flex; flex-direction: column; color: #cccccc; } #bar_1{ height: 7.5vh; background-color: #1c1a1b; display: flex; flex-direction: column; justify-content: center; } #bar_3{ height: 7.5vh; background-color: #1c1a1b; display: flex; flex-direction: column; } #bar_2{ max-height: fit-content; min-height: 90vh; } #ball{ position: relative; width: 50px; height: 50px; border-style: solid; border-radius: 50px; } &lt;div id="bar_1"&gt; &lt;/div&gt; &lt;div id="bar_2"&gt; &lt;div id="ball"&gt;&lt;/div&gt; &lt;/div&gt; &lt;div id="bar_3"&gt;&lt;/div&gt; so if i keep my mouse cursor at bar_1 the ball will appear at bar_1 but i want it to stop on the edge of bar_2
has title: Child Element going out of Parent Element
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139275525
favorite count: 0
has answer: http://stackoverflow.com/a/78990966
type: Question
tagged with: http://stackoverflow.com/tag/html
answer count: 1
score: 0
tagged with: javascript
upvote count: 1

http://stackoverflow.com/a/78968454
type: AcceptedAnswer
type: Answer
has body: The issue was occurring due to the max-width property in carousel class. it can be replaced with: .carousel { /* max-width: 100%; */ width: 50%; overflow: hidden; border-radius: 1rem; }
score: 0
answers question: http://stackoverflow.com/q/78952476
accepted answer of: http://stackoverflow.com/q/78952476

http://stackoverflow.com/comment/139191008
type: AnswerComment
has text: Unfortunately this isn't really doing the job, I get back a log for an empty string, I've gone ahead and set the timeout to a higher value just to be sure and even if I wait like 10 seconds it just returns me an empty string, I suspect that its because of the UI Library I use, its Radix.
type: Comment
comment on: http://stackoverflow.com/a/78940675
score: 0

http://stackoverflow.com/q/79021145
answer count: 1
tagged with: http://stackoverflow.com/tag/html
type: Question
upvote count: 2
has body: I have a navigation menu with overflow-y: scroll property, this navigation menu consists of multiple items. I want to know if there is a way that each time user moves the scrollbar, it moves exactly to next item of menu. this is my menu and once the user moves the scroll bar I want the navigation menu to snap to second item like this:
score: 2
tagged with: scroll
type: AnsweredQuestion
tagged with: javascript
has comment: http://stackoverflow.com/comment/139331774
tagged with: css
tagged with: frontend
downvote count: 0
has title: scrolling snapping to next item instead of moving continuously
has answer: http://stackoverflow.com/a/79021226
accepted answer: http://stackoverflow.com/a/79021226
favorite count: 0

react-select
tags question: http://stackoverflow.com/q/78989612
tag name: react-select
type: Tag

http://stackoverflow.com/comment/139319975
score: 0
has text: Damn, thanks a lot for the reply. And can the HTML be copied into Wordpress to achieve the same result? Or would there be an additional step required? Thank you!
type: Comment
comment on: http://stackoverflow.com/a/79007689
type: AnswerComment

http://stackoverflow.com/comment/139364321
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/79033371
has text: Can you explain "use JavaScript to operate styles and set the font path at run-time"? I've used clamping behavior on a component by doing this inside my own `.line-clamp` class in a global style scss sheet: `-webkit-line-clamp: var(--lines);` and then in my html: `[class]="maxLines > 0 ? ' line-clamp' : ''"` and `[style]="'--lines: ' + maxLines"` That works to dynamically adjust the clamping behavior. I assume it re-evaluates the --lines var in the scss every time it re-renders, but tbh I'm not 100% sure how it works. Is something like that possible here?

http://stackoverflow.com/comment/139259026
has text: The snippet here is not able to reproduce the issue for me; tested in Chrome on Mac.
score: 2
type: Comment
comment on: http://stackoverflow.com/q/78981553
type: QuestionComment

http://stackoverflow.com/a/79040390
has comment: http://stackoverflow.com/comment/139372374
type: Answer
has body: The problem is that initially the images don't have display: none so the last one is visible on top of the others. Make them have display: none to start with by setting that in the style sheet. This snippet uses images we can see and the dog is the first one so you can check it always shows first const imageResponsive = document.querySelectorAll('[data-image-responsive]'); const dot = document.querySelectorAll('[data-dot]'); let counter = 0; function changeImage() { // First hide all images imageResponsive.forEach(img => img.style.display = 'none'); // Show the current image based on the counter value imageResponsive[counter].style.display = 'block'; // First hide all slider dots dot.forEach((span) => { span.style.background = '#fff'; span.style.opacity = '0.5'; }); // Show the current slider dot based on the counter value dot[counter].style.background = '#ef4a23'; dot[counter].style.opacity = '1'; // Increment counter and reset if it exceeds the length of the image array counter = (counter + 1) % imageResponsive.length; } // Start the image change every 5 seconds setInterval(changeImage, 5000); // Initially display the first image and the slider dot changeImage(); .image-responsive-div { position: relative; width: 990px; height: 490px; padding: 0px 15px; } .image-responsive { width: 960px; height: 488px; position: absolute; box-shadow: 0 0.5px 4px 0 rgba(0, 0, 0, 0.3); display: none; } .slider-dot { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; padding: 10px 0; } .dot { display: inline-block; width: 30px; height: 8px; background: #fff; margin: 0 5px; opacity: .5; cursor: pointer; }
score: 0
answers question: http://stackoverflow.com/q/79040192
has comment: http://stackoverflow.com/comment/139372391

http://stackoverflow.com/comment/139294812
type: QuestionComment
comment on: http://stackoverflow.com/q/79000282
has text: I see the behavior you describe (and elaborated by @Barmar) on Edge/Chrome Windows11. However on Safari IOS I see the behavior you want, ie the second input remains visible (and focused) so I have a feeling the telative timings might be different for different browsers.
type: Comment
score: 0

http://stackoverflow.com/comment/139317801
type: QuestionComment
comment on: http://stackoverflow.com/q/79013255
has text: @DiegoD Exactly like flights datepicker that you select start-end date range. This is my scenrio I'm looking for and tried to implement it with vast datepicker libraries
type: Comment
score: 0

http://stackoverflow.com/a/78976432
type: Answer
score: 0
has body: The issue can be resolved with a simple code modification, although it may not be the most well-structured solution. Replacing the style="background-color: <%= user.color %>;" With <%- 'style = "background-color: ' %><%= user.color %><%- '"' %> This will resolve the issue for now, but it may occur again in the future. The issue has been raised on GitHub; you can check it out as well. GitHUB issue
answers question: http://stackoverflow.com/q/78972066

http://stackoverflow.com/comment/139121964
type: QuestionComment
type: Comment
comment on: http://stackoverflow.com/q/78906921
score: 3
has text: We seem to be missing some CSS. What does the first-cloud class do styling-wise? We will be much more able to help if you could create a runnable snippet, see https://stackoverflow.com/help/minimal-reproducible-example

http://stackoverflow.com/a/78910959
answers question: http://stackoverflow.com/q/78909194
upvote count: 2
downvote count: 1
score: 1
has body: Estimated cause you don't set background-position Suggestion set position background-position: center center; You need to resize the image or change the size of the loading animation. The image is long horizontally, so you need to modify the image to match the size of the circle. Otherwise, you can't fill the top and bottom. You can use photoshop's Content-Aware sacle or other program. The light source effect that looks like a string originally existed. The image is small. Because it's a test
type: Answer

http://stackoverflow.com/q/79039420
tagged with: animation
tagged with: clip-path
has body: I am trying to create a container with wavy, imperfect borders on both the top and bottom. My goal is for the top border to exactly match the pattern of the bottom border. I've attempted to achieve this using clip-path, but I'm having trouble getting the top border to match the exact ame pattern. Here’s the sample code I've tried so far: code Wavy Border Box <path d=" M0,0 C0.05,0 0.2,0.03 0.25,0.02 C0.3,0.015 0.35,0.02 0.35,0.025 C0.355,0.0225 0.45,0.03 0.5,0.035 C0.53,0.035 0.58,0.02 0.6,0.02 C0.63,0.015 0.74,0.0275 0.75,0.03 C0.78,0.0325 0.925,0.0125 0.95,0.015 C0.97,0.0125 1,0.025 1,0.025 L1,0.975 C0.97,0.9875 0.925,0.9875 0.9,0.985 C0.875,0.9825 0.78,0.9675 0.75,0.97 C0.725,0.9725 0.63,0.985 0.6,0.98 C0.58,0.98 0.53,0.965 0.5,0.965 C0.45,0.97 0.355,0.9775 0.35,0.975 C0.35,0.98 0.3,0.96 0.25,0.96 C0.2,0.96 0.05,1 0,1 Z"/> Your content here As you can see in the image, the top border is inverted, But I need the same pattern as the bottom border.
type: UnansweredQuestion
tagged with: css
type: Question
has title: How to create matching wavy borders for top and bottom of a container using css clip-path?
upvote count: 2
answer count: 1
score: 0
favorite count: 0
downvote count: 2
has answer: http://stackoverflow.com/a/79040587

http://stackoverflow.com/a/78964887
has body: p.upside-down-p { margin-top: 0; margin-bottom: 0; line-height: 8px; //adjust according to your requirement if needed else keep it 100% }
accepted answer of: http://stackoverflow.com/q/78964813
has comment: http://stackoverflow.com/comment/139257420
has comment: http://stackoverflow.com/comment/139228316
type: AcceptedAnswer
type: Answer
score: 0
answers question: http://stackoverflow.com/q/78964813

github
tags question: http://stackoverflow.com/q/79030647
tag name: github
type: Tag
tags question: http://stackoverflow.com/q/79083814

http://stackoverflow.com/comment/139135810
has text: @M.Riyan Good catch ! but there is actually a slight difference. It looks as expected with `border-purple-600/0`, which normally should render has completely transparent. There seems to be some sort of "inverse cumulative opacity" then …
type: QuestionComment
comment on: http://stackoverflow.com/q/78914830
score: 1
type: Comment

http://stackoverflow.com/comment/139216183
type: QuestionComment
has text: The table in question is not immediately found at that link and I'm not going to go poking around to find it. The code your posted here seems to work. What steps have you taken to debug it?
type: Comment
comment on: http://stackoverflow.com/q/78957954
score: 0

http://stackoverflow.com/a/78933172
has comment: http://stackoverflow.com/comment/139174266
has body: What you’re trying to do isn’t directly possible. I chatted with @Temani Afif about this on Mastodon a while back. His comment: You are a facing complex situation where the nested grid configuration (combined with other stuff) will first evaluate the width of the tracks without the height:100% then later calculate the height:100% then update the element width considering aspect-ratio but we won't get back to recalculate the width of the track again to not run into an infinite loop. Those situation are always a headaches. Thinking about it in your case, you can see why this working might be undesirable and could lead to infinite loops. As you make the container narrower (by making the viewport narrower, for example), the text in the second column will wrap, making the container taller. Then, the first column will also have to get wider because it’s now taller. That makes the second column even narrower, potentially making the container taller, which then makes the first column wider, which makes the second column narrower and, because it’s wrapping even more, taller. Etc.
type: Answer
score: 0
answers question: http://stackoverflow.com/q/78929318

ms-office
type: Tag
tags question: http://stackoverflow.com/q/78927597
tag name: ms-office

http://stackoverflow.com/a/79055360
type: Answer
score: 0
has body: It seems like the d command in the element for the SVG would not draw what you intend: Start at 0,0 0 ↘ ↘ 1 ━━━━━━━━━━━━━━━━━━━━━━━━━━ 2 h16 M4 6 ↙ Draw horizontally 16 units Move to 4,6 ← ← ← ← ↙ ← ← ← ← ← ← ↙ 3 ━━━━━━━━━━━━━━━━━━━━━━━━━━ 4 h16 M4 12 ↙ Draw horizontally 16 units Move to 4,12 ← ← ↙ ← ← ↙ 5 ━━━━━━━━━━━━━ 6 h7 m-7 6 Draw horizontally 7 units Move left 7 units and move down 6 units The last command only moves the "pointer" back 7 units, whereas the other commands move back to 4 on the x-axis. Thus, the last line starts from 13 instead of 4 (like the other lines). You could consider reworking the last 2 commands to be the same as the other commands, to draw the line fully: Start at 0,0 0 ↘ ↘ 1 ━━━━━━━━━━━━━━━━━━━━━━━━━━ 2 h16 M4 6 ↙ Draw horizontally 16 units Move to 4,6 ← ← ← ← ↙ ← ← ← ← ← ← ↙ 3 ━━━━━━━━━━━━━━━━━━━━━━━━━━ 4 h16 M4 12 ↙ Draw horizontally 16 units Move to 4,12 ← ← ← ← ↙ ← ← ← ← ← ← ↙ 5 ━━━━━━━━━━━━━━━━━━━━━━━━━━ 6 h16 M4 18 Draw horizontally 16 units Move to 4,18 const { useState } = React; const Navbar = () => { const [isOpen, setIsOpen] = useState(false); const toggleMenu = () => { setIsOpen(!isOpen); }; return ( Paolo's Pizza and Ristorante Home Menu Reservations About Us Contact {isOpen && ( Home Menu Reservations About Us Contact )} ); }; ReactDOM.createRoot(document.getElementById('app')).render(<Navbar/>);
answers question: http://stackoverflow.com/q/79050052

http://stackoverflow.com/comment/139410674
type: Comment
type: QuestionComment
score: 1
has text: Side-note: A span as an inline element can not contain a block-level element such as a h1.
comment on: http://stackoverflow.com/q/79064359

partials
tags question: http://stackoverflow.com/q/78979860
tag name: partials
type: Tag

http://stackoverflow.com/comment/139236975
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78967491
has text: Yes, that's exactly what it is

http://stackoverflow.com/comment/139198231
score: 1
comment on: http://stackoverflow.com/q/78948175
has text: `.nav_menu>li:nth-last-child(n + 2 of li:not(.button))`
type: Comment
type: QuestionComment

http://stackoverflow.com/comment/139262763
type: QuestionComment
comment on: http://stackoverflow.com/q/78982161
type: Comment
has text: @DiegoD , it was not an answer just an example for you that should take any ratio and hopefully without overflowing. It is just that for plain CSS with flex or grid + place-content:center, it won't work. that was about my comments ;) I don't either think that container queries could be of any help here.
score: 0

http://stackoverflow.com/comment/139339954
type: AnswerComment
comment on: http://stackoverflow.com/a/79016879
type: Comment
has text: Oh wow, thank you. That seems like it was a lot of work. That's exactly what I needed. :)
score: 0

http://stackoverflow.com/a/79021631
has comment: http://stackoverflow.com/comment/139350784
has body: If you could add a screenshot of the design it would be great for visual interpertation If i understand the question correctly, I would set a specific heigth and width for the images. And for different viewporst different height and widths. What you also could do, but that would be really MacGyver style, is to use an empty div with the background color so you can overlay that on the area that you do not want to have the image backgrounds.
type: Answer
score: 0
answers question: http://stackoverflow.com/q/79021456

http://stackoverflow.com/comment/139231998
type: QuestionComment
comment on: http://stackoverflow.com/q/78966886
score: 1
type: Comment
has text: Welcome to Stack Overflow. We need to see the HTML for your code as well; please edit your question to include the HTML like you've already done for the CSS. See [mcve] for more information on what I mean, if you have questions.

http://stackoverflow.com/comment/139314846
type: QuestionComment
score: 0
comment on: http://stackoverflow.com/q/79011645
type: Comment
has text: You might find reading the site [help section](https://stackoverflow.com/help) useful when it comes to [asking a good question](https://stackoverflow.com/help/how-to-ask). To get the best answers to your question we like to see that you've attempted to solve the problem yourself first using a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example). Here's a [question checklist](https://meta.stackoverflow.com/questions/260648/stack-overflow-question-checklist) you might find useful...

http://stackoverflow.com/comment/139383610
type: QuestionComment
comment on: http://stackoverflow.com/q/79045034
has text: @Scott Z thanks for your response...now the errors went away but still is printing empty. can you let me know how to fix it https://codesandbox.io/p/sandbox/yxtwjg?file=%2Fsrc%2Fcomponents%2Fhabits-list.tsx%3A8%2C16-8%2C22
type: Comment
score: 0

http://stackoverflow.com/a/79047783
score: 2
has comment: http://stackoverflow.com/comment/139389384
upvote count: 2
downvote count: 0
type: Answer
has body: Yes there is! The code works with use of css z-index, so you shift colors for your blob while keeping the linear gradient document.addEventListener('mousemove', function(e) { const cave = document.querySelector('.cave'); const x = e.clientX; const y = e.clientY; cave.style.setProperty('--x', `${x}px`); cave.style.setProperty('--y', `${y}px`); cave.style.background = `radial-gradient(circle at ${x}px ${y}px, transparent 10px, rgba(0, 0, 0, 1) 100px)`; }); body, html { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; display: flex; justify-content: center; align-items: center; background-color: #000; color: #fff; font-family: Arial, sans-serif; position: relative; } .content { z-index: 1; } .cave { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.9); pointer-events: none; z-index: 2; } Welcome to the Cave This is some hidden text that will be revealed by the light around the mouse cursor.
answers question: http://stackoverflow.com/q/79045280

http://stackoverflow.com/a/79042941
type: Answer
score: 0
has body: Instead of display:none use max-height:0 and opacity:0 and when clicked add properties opacity:100 and max-height:100px adjust the max-height accordingly.
answers question: http://stackoverflow.com/q/79039982
has comment: http://stackoverflow.com/comment/139389418

http://stackoverflow.com/comment/139324529
type: Comment
score: 0
has text: Skip/jump links are now deprecated by their inventor and rightly so in my opinion. Another repeated annoyance to be read out every time.
type: AnswerComment
comment on: http://stackoverflow.com/a/79017211

http://stackoverflow.com/comment/139315527
score: 0
type: AnswerComment
has text: If its by design then ig I will now have to find a work around, anyways thanks. Also the code you provided doesn't solve the issue :(. anyways thanks!
comment on: http://stackoverflow.com/a/79012419
type: Comment

http://stackoverflow.com/tag/pdf
tags question: http://stackoverflow.com/q/79042281
tags question: http://stackoverflow.com/q/79040807
tags question: http://stackoverflow.com/q/78905081
tags question: http://stackoverflow.com/q/78971306
type: Tag
tags question: http://stackoverflow.com/q/79024535
tag name: pdf
tags question: http://stackoverflow.com/q/78950013
tags question: http://stackoverflow.com/q/78966204
tags question: http://stackoverflow.com/q/79184745
tags question: http://stackoverflow.com/q/79243640
tags question: http://stackoverflow.com/q/79140211
tags question: http://stackoverflow.com/q/79413299
tags question: http://stackoverflow.com/q/79287743
tags question: http://stackoverflow.com/q/79376772
tags question: http://stackoverflow.com/q/79361012
tags question: http://stackoverflow.com/q/79350634
tags question: http://stackoverflow.com/q/79268603
tags question: http://stackoverflow.com/q/79420247
tags question: http://stackoverflow.com/q/79503809
tags question: http://stackoverflow.com/q/79469681

http://stackoverflow.com/comment/139258581
has text: Indeed, it's a BS5 class.
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78981277
type: QuestionComment

http://stackoverflow.com/comment/139316009
comment on: http://stackoverflow.com/a/79012651
type: Comment
score: 0
type: AnswerComment
has text: Updated, you cannot use those classes as they are dynamically genereated each reload you need add your own classes to those elements.

http://stackoverflow.com/comment/139332786
type: QuestionComment
comment on: http://stackoverflow.com/q/79018578
type: Comment
has text: So does that mean you were able to fix it by now, or what are you saying?
score: 0

http://stackoverflow.com/a/79082352
answers question: http://stackoverflow.com/q/79064015
accepted answer of: http://stackoverflow.com/q/79064015
score: 1
upvote count: 1
type: AcceptedAnswer
downvote count: 0
type: Answer
has body: You want to format the output of the header based on an existing script. Specifically: Background color setBackground Font weight setFontWeight Font size setFontSize Wrap cells setWrap Vertical alignment setVerticalAlignment Horizontal alignment setHorizontalAlignment Set row height setRowHeight Set column widths setColumnWidth INSERT NEW ROWS Existing code newWs.getRange(3, 3, 1, headers.length).setValues([headers]); } else { New code newWs.getRange(3, 3, 1, headers.length).setValues([headers]) // format the header range newWs.getRange(3, 3, 1, headers.length) .setBackground("#a4c2f4") .setFontWeight("bold") .setFontSize(12) .setWrap(true) .setVerticalAlignment("middle") .setHorizontalAlignment("center") // set the row height newWs.setRowHeight(3, 57); // set the column widths var colWidths = [247,100,206,106,110,114,115,130] // loop through the columns and set width from array // Column 3 to Column 10 for (var c=3;c<11;c++){ newWs.setColumnWidth(c, colWidths[+c-3]); } } else { BEFORE AFTER

http://stackoverflow.com/q/78948718
has comment: http://stackoverflow.com/comment/139198243
has body: If I understand correctly, the correct behavior of color:inherit is that it climbs its ancestor chain until it finds an explicitly set color value, and uses that. As part of a normalize.css/default.css type file, I'm wondering if there's a way to replace this rule: button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]) { color: inherit; } With something which "respects" the color-scheme of the nearest ancestor which has it specified. If the element has color-scheme:dark and a on the page has color-scheme:light, then the text in a child of that , will be black, but due to the above color:inherit rule the text within a child of that will be white/light. So, in summary, I'm looking for a way to make inherit color in the same way that the inherits color. The problem with simply removing the above rule is that browsers use color:fieldtext for textareas, color:buttontext for buttons, etc. which I don't want.
has comment: http://stackoverflow.com/comment/139198258
has answer: http://stackoverflow.com/a/78948809
downvote count: 0
tagged with: css
has title: A way to (in effect, at least) make `color:inherit` take ancestor `color-scheme` into account? (i.e. make inherit colors like )
type: UnansweredQuestion
favorite count: 0
type: Question
upvote count: 2
answer count: 1
tagged with: http://stackoverflow.com/tag/html
score: 2

http://stackoverflow.com/a/78915974
answers question: http://stackoverflow.com/q/78915933
upvote count: 1
has body: You need to separate background-image the position, size, and repeat in different line. .hero { background-image: url('../images/header-background.png'); background-position: center; background-size: cover; background-repeat: no-repeat; margin-top: 8rem; padding: 11.5rem 2rem 8rem; position: relative; overflow-x: hidden; }
score: 1
has comment: http://stackoverflow.com/comment/139137782
type: Answer
has comment: http://stackoverflow.com/comment/139137830
downvote count: 0

http://stackoverflow.com/a/79011332
has body: Just add the following to you CSS stylesheet, and it will work. .stars, .review-date { display: flex; align-content: center; flex-wrap: wrap; padding-right: 5px; } Display: flex is needed for the alignment features of flex to work. Align-content: center; centers the content. Flex-wrap: wrap is needed for the align-content: center to work. Padding-right: 5px; is for a 5px distance between the .stars and the .review-date. For more information on flex, you can visit this site: https://demo.agektmr.com/flexbox/ The code in action: .reviews { color: black; } .review-name { font-weight: 700; margin-bottom: 2px; margin-top: 40px; } .review-location { font-weight: 400; } .stars-container { vertical-align: center; } .review-date { font-weight: 400; } .review-content { font-size: .9rem; } /*new code from here*/ .stars, .review-date { display: flex; align-content: center; /*this centers the content*/ flex-wrap: wrap; /*this is needed for the align-content: center to work*/ padding-right: 5px; /*to put a 5px distance between the stars and the date*/ } Brian C. REVIEW LOCATION <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" /> <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" /> <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" /> <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197…
has comment: http://stackoverflow.com/comment/139314671
has comment: http://stackoverflow.com/comment/139315002
has comment: http://stackoverflow.com/comment/139313539
type: Answer
has comment: http://stackoverflow.com/comment/139313642
score: 0
upvote count: 1
answers question: http://stackoverflow.com/q/79010977
downvote count: 1

http://stackoverflow.com/a/79025648
upvote count: 1
has comment: http://stackoverflow.com/comment/139339719
has comment: http://stackoverflow.com/comment/139339703
downvote count: 1
answers question: http://stackoverflow.com/q/79025615
accepted answer of: http://stackoverflow.com/q/79025615
has body: The problem with the original snippet is that image.style.opacity is not set initially: const img = document.querySelector('img'); img.onclick = function() { console.log('Opacity:'+this.style.opacity); console.log(this.style.opacity == '' ? 1 : 0); } You can solve your problem by adjusting the if-statement: function lootDarken(x) { image = document.getElementById(x); if (image.style.opacity === "1" || image.style.opacity === "") { image.style.opacity = "0.5"; } else { image.style.opacity = "1"; } } function lootDarken(x) { image = document.getElementById(x); if (image.style.opacity === "1" || image.style.opacity === "") { image.style.opacity = "0.5"; } else { image.style.opacity = "1"; } } Instead of trying to modify the opacity with the style attribute, you could also toggle a class which lowers the opacity. By doing so you can also add a CSS transition to the effect const loots = document.querySelectorAll('img.Loot'); loots.forEach(function(loot, index) { loot.onclick = function() { this.classList.toggle('dark'); }; }); img.Loot { opacity: 1; transition: opacity 0.5s ease-in-out; } img.Loot.dark { opacity: 0.5; }
type: AcceptedAnswer
type: Answer
score: 0

http://stackoverflow.com/a/79031647
type: AcceptedAnswer
type: Answer
score: 0
answers question: http://stackoverflow.com/q/78987424
accepted answer of: http://stackoverflow.com/q/78987424
has comment: http://stackoverflow.com/comment/139358355
has body: If anyone was interested, I managed to create something that looks like a 3D rounded-edge button by stacking 10 divs on top of each other, each one 1 pixel to the top and 1 pixel to the left of the previous one. I haven't figured out how to add an outline to all the edges but it looks ok!

http://stackoverflow.com/a/79028919
has comment: http://stackoverflow.com/comment/139345840
answers question: http://stackoverflow.com/q/79028709
type: Answer
score: 0
has body: You can safely place inside - it will be valid. Next, you can disable the styles for and provide a cursor: pointer to the button: .container { all: unset; position: relative; /* This is the important one, the rest is styling */ width: 200px; height: 200px; padding: 16px; border: solid 1px black; display: flex; justify-content: center; align-items: center; } .button { padding: 8px; background: red; white-space: nowrap; color: white; cursor: pointer; } .button:hover { background: darkred; cursor: pointer; } Dummy link

http://stackoverflow.com/comment/139203519
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78951292
type: QuestionComment
has text: The **+** selector Takes the very next element, while **~** takes the next siblings found . That is why only one works. Beside you could use id instead class since you want couples of elements interactions.

http://stackoverflow.com/comment/139240393
has text: @mrconcerned the back button is supposed to be sticky but instead it scrolls, the children section has two screen heights worth of content
type: QuestionComment
comment on: http://stackoverflow.com/q/78970641
type: Comment
score: 0

http://stackoverflow.com/a/78986169
score: 0
answers question: http://stackoverflow.com/q/78984268
has body: Aside from the above, you can apply internal css to center button
type: Answer

http://stackoverflow.com/a/78936656
upvote count: 1
has comment: http://stackoverflow.com/comment/139177834
answers question: http://stackoverflow.com/q/78936472
has body: There are a couple of small problems in your code. The first ul isn't closed explicitly but more importantly the flex is on the parent of the first ul (the navbar) rather than on the ul itself. As it stands, the flex has only one item as a child and it centers it. If you put the flex on the ul then it will have spece between its items. Testing Home Teams Cubs Braves Coaches Videos Contact I guess you will want to sort out whether the linear gradient on the navbar is what you want seen as at the moment the ul covers it so the background is a plain blue.
score: 1
accepted answer of: http://stackoverflow.com/q/78936472
type: AcceptedAnswer
type: Answer
downvote count: 0

http://stackoverflow.com/q/78911526
score: 0
tagged with: javascript
duplicate of: http://stackoverflow.com/q/3508605
answer count: 0
tagged with: css
has comment: http://stackoverflow.com/comment/139130599
has title: Accordion is working but transition not working
has body: I made an accordion using html, CSS and JavaScript and the accordion is working fine but the problem is that the transition that I'm applying on it is not working properly and I don't know why so please guide me I tried adding transition property on all classes in hopes that any single one will work or will be inherited someway (I know its stupid of me but still tried to get the results so added) but its not working and don't know where I am messing up. My first question in here so if asked the question in wrong way then let me know let FAQs = document.querySelectorAll(".faq"); FAQs.forEach((faq) => { faq.onclick = function () { if (!faq.classList.contains("active")) { FAQs.forEach((content) => { content.classList.remove("active"); }); faq.classList.add("active"); } else { faq.classList.remove("active"); } }; }); #FAQs { margin: 128px 0px; padding: 0px 200px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 64px; } .accordion { display: flex; flex-direction: column; gap: 32px; width: 100%; } .faq { padding: 32px; display: flex; flex-direction: column; gap: 16px; background: white; border-radius: 18px; transition: 1s ease-out; } .question { display: flex; justify-content: space-between; transition: 1s ease-out; } .question img { width: 24px; height: 24px; transition: 0.3s; } .faq.active .question img { transform: rotate(180deg); } .answer { display: none; } .faq.active .answer { display: block; transition: 1s ease-out; } .faq active { transition: 1s ease-out; } FAQs Can we expect long term updates? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis perspiciatis porro minus earum nostrum, odit nobis culpa voluptatem delectus cumque inventore soluta quas ipsam exercitationem molestiae dolorum ratione, eligendi asperiores ex hic eius iure? Veritatis cumque ratione quod? Sit sed laboriosam odit modi id non consectetur ipsam minima quo eos? How much secure is the game? Lorem ipsum dolor sit amet consectetur adipisicing e…
linked to: http://stackoverflow.com/q/3508605
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139130191
has comment: http://stackoverflow.com/comment/139130446
has comment: http://stackoverflow.com/comment/139130233
has comment: http://stackoverflow.com/comment/139135151
type: Question
tagged with: http://stackoverflow.com/tag/html

http://stackoverflow.com/comment/139276568
type: QuestionComment
comment on: http://stackoverflow.com/q/78991117
type: Comment
has text: It's not centered. It's floated, and snagging on a floated element above it. Try clearing the float
score: 3

http://stackoverflow.com/a/79025726
answers question: http://stackoverflow.com/q/79023414
has body: Try to explicitly show and hide depending on the media query. Also add the !important in case there is an overriding css in instagram web view /* Default: Show desktop form, hide mobile form */ .form-container { display: block !important; } .form-container-m { display: none !important; } /* Mobile: Show mobile form, hide desktop form */ @media only screen and (max-width: 800px) { .form-container { display: none !important; } .form-container-m { display: block !important; } }
type: Answer
score: 0

http://stackoverflow.com/comment/139131677
type: QuestionComment
score: 0
type: Comment
comment on: http://stackoverflow.com/q/78912182
has text: read this: https://verpex.com/blog/website-tips/how-to-create-a-css-only-infinite-scroll-animation

http://stackoverflow.com/comment/139362086
score: 0
comment on: http://stackoverflow.com/a/79037267
type: AnswerComment
has text: Sorry, But that didn't work
type: Comment

mern
tag name: mern
type: Tag
tags question: http://stackoverflow.com/q/78976713

http://stackoverflow.com/a/78941061
has body: You don't need to write JavaScript code yourself with W3E (W3.CSS w/JavaScript) just add w3e-slider to the container element. The W3E will assign the click events automagically. Check this example on CodePen: https://codepen.io/emnawer/pen/zYVZOwm ❮ ❯ It utilities W3E (W3.CSS w/JavaScript): https://w3e.uk
has comment: http://stackoverflow.com/comment/139205049
answers question: http://stackoverflow.com/q/78921718
type: Answer
score: 0
has comment: http://stackoverflow.com/comment/139191441

http://stackoverflow.com/comment/139198084
type: Comment
score: 0
type: QuestionComment
has text: Perhaps I'm missing the point of this question, but have you considered applying `min-height: 100vh` to the `body`?
comment on: http://stackoverflow.com/q/78948544

http://stackoverflow.com/comment/139396317
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/79051989
has text: In that case you can apply inline css using style attribute; eg: or you can have a look at https://stackoverflow.com/questions/30661650/how-does-firefox-reader-view-operate

http://stackoverflow.com/q/79025318
type: Question
answer count: 1
has comment: http://stackoverflow.com/comment/139368715
has body: I am trying a simple dropdown on a vue project. But the dropdown doesnt drop when I click on it. I have put the console inside the function. The message gets displayed on console that means the function is being called. But it doesnt work. {{ option }} When I checked the console, it seems perfectly fine, the click function is called as shows.
tagged with: javascript
has answer: http://stackoverflow.com/a/79041752
tagged with: drop-down-menu
has title: Dropdown on vue template not working even if the toggle function is called
has comment: http://stackoverflow.com/comment/139370589
tagged with: css
tagged with: dropdown
has comment: http://stackoverflow.com/comment/139476626
has comment: http://stackoverflow.com/comment/139339175
type: UnansweredQuestion
score: 0
tagged with: vue.js

http://stackoverflow.com/comment/139369661
comment on: http://stackoverflow.com/a/79039692
score: 0
type: AnswerComment
has text: Wouldn't be better to add a `max-width` for the children element instead of your parent element?
type: Comment

figma
tag name: figma
type: Tag
tags question: http://stackoverflow.com/q/79013129
tags question: http://stackoverflow.com/q/79239410
tags question: http://stackoverflow.com/q/79263301

http://stackoverflow.com/q/78920993
has title: Why does my text in tag go off the screen? (HTML, CSS)
has answer: http://stackoverflow.com/a/78921012
tagged with: css
tagged with: css-selectors
tagged with: flexbox
downvote count: 1
upvote count: 1
has body: I am new to web development and was playing around with HTML and CSS. I used a tag with a bunch of text in it, and it's not fully visible on the screen. I can barely see half a character on the left side of the screen, and I am unsure what is wrong. The element has a class intro_text under the section tag. Initially, I hadn't played around with CSS for the tag or intro_text class when this issue occurred. However, after using display: flex and justify-content: center, a few words started appearing on the left side of the screen. I am still not sure what the issue is or what is causing it. .website_title { float: left; display: inline-block; } .navigation ul { list-style: none; float: right; } .navigation ul li { display: inline; margin: 10px; } .navigation ul li:hover { text-decoration: underline; } .logo .logo_img { height: 400px; width: auto; margin-top: 150px; } .logo { display: flex; justify-content: center; } .section1 { margin-top: 300px; display: flex; justify-content: center; align-items: center; } .images_anime { height: 300px; width: 250px; margin: 20px; } .intro_text p { display: flex; justify-content: center; } Document Anime Site Section1 Section2 Section3 Section4 This is some text about the website, so let'sThe .logo .logo_img class applies a margin-top of 150px and the .section1 class applies a margin-top of 300px. These large margins might be pushing content, including your tag, off the visible part of the screen, especially on devices with smaller screens. Try reducing these margins to see if it brings the text back into view. go. This text is getting bThe .logo .logo_img class applies a margin-top of 150px and the .section1 class applies a margin-top of 300px. These large margins might be pushing content, including your tag, off the visible part of the screen, especially on devices with smaller screens. Try reducing these margins to see if it brings the text back into view.igger and bigger and bigger and bigger and bigger and bigger and bigger and…
type: UnansweredQuestion
favorite count: 0
tagged with: web-developer-toolbar
type: Question
answer count: 1
tagged with: http://stackoverflow.com/tag/html
score: 0

http://stackoverflow.com/q/79066173
type: UnansweredQuestion
score: -4
favorite count: 0
tagged with: http://stackoverflow.com/tag/html
type: Question
has answer: http://stackoverflow.com/a/79066212
has comment: http://stackoverflow.com/comment/139413788
downvote count: 5
tagged with: css-float
upvote count: 1
answer count: 2
has title: how to float divisions side by side like professional web developers?
has body: I am not getting how to float the second division to the upper right corner of the main division. html { width: 100%; height:100%; } body { width: 100%; height: 100%; font-family: 'Noto Sans', sans-serif; background-color: #1b1b1b; } .container { background-color: #313131; width: auto; height: calc(100%-30%); padding: 20px; } .img-wrapper { width: 144px; height: 216px; } img { width: 100%; height: 100%; } .pfmr-info { float: right; } Cherie Deville I need the second div to move to the upper-right corner but it just moves to the right. What should I do?
tagged with: css
has answer: http://stackoverflow.com/a/79066480

http://stackoverflow.com/comment/139174578
score: 1
has text: Could you show us HTML which corresponds to the picture you have shown as it’s a bit confusing at the moment. Also, is you real-use data definitely tabular?
comment on: http://stackoverflow.com/q/78935678
type: QuestionComment
type: Comment

bundle
tags question: http://stackoverflow.com/q/78965453
type: Tag
tag name: bundle

http://stackoverflow.com/comment/139244475
comment on: http://stackoverflow.com/a/78973672
type: Comment
score: 0
type: AnswerComment
has text: I think that explanation should be part of your answer. You do realize that your code is completely [unresponsive](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design)? Which is fine because the question doesn't mention this, but the code in the question probably is.

http://stackoverflow.com/a/78959123
downvote count: 0
type: Answer
answers question: http://stackoverflow.com/q/78959027
has comment: http://stackoverflow.com/comment/139217753
upvote count: 1
has body: Interesting question! I would have calculated the tooltip DIV left and right positions based on its' width property like this. I can see the width is given in --px128 CSS variable. .message-tooltip-shift { left: calc(-1 * var(--px128)); right: calc(1 * var(--px128)); } I did play around with resizing the window this requires a bit of fine tuning when icon reaches left and right margins of the parent.
has comment: http://stackoverflow.com/comment/139217812
score: 1

http://stackoverflow.com/comment/139375988
type: QuestionComment
comment on: http://stackoverflow.com/q/79044837
type: Comment
score: 0
has text: Where is your `Header.js` located? I'm trying to see if the relative location of your `Header.js` matches the content pattern on your tailwind config.

http://stackoverflow.com/a/78976347
has body: To solve this you can use a custom hook to detect route changes, then a wrapper component to use it wherever we want : import { useEffect, useRef } from 'react'; import { usePathname, useSearchParams } from 'next/navigation'; export function useIsFirstMount() { const isFirst = useRef(true); const pathname = usePathname(); const searchParams = useSearchParams(); useEffect(() =&gt; { if (isFirst.current) { isFirst.current = false; return; } // This will run on route changes, but not on the initial mount as you wanted console.log('Route changed'); }, [pathname, searchParams]); return isFirst.current; } Then create a client-side component wrapper that uses this hook (After that we can use this wrapper to wrap any component and apply this styling logic): 'use client'; import React, { ReactNode } from 'react'; import { useIsFirstMount } from './useIsFirstMount'; interface TransitionWrapperProps { children: ReactNode; } export function TransitionWrapper({ children }: TransitionWrapperProps) { const isFirstMount = useIsFirstMount(); return ( &lt;div className={`transition-bg ${isFirstMount ? '' : 'bg-changed'}`}&gt; {children} &lt;/div&gt; ); } For example i can use it inside the layout.tsx file : return ( &lt;html lang="en"&gt; &lt;body&gt; &lt;TransitionWrapper&gt;{children}&lt;/TransitionWrapper&gt; &lt;/body&gt; &lt;/html&gt; ); After this one you can try to create some routes and try this out. By the way i added these styles but you can try more : .transition-bg { transition: background-color 1.5s ease; } .bg-changed { background-color: blue; }
answers question: http://stackoverflow.com/q/78959933
type: Answer
score: 0

css-specificity
tags question: http://stackoverflow.com/q/78976062
tag name: css-specificity
type: Tag

http://stackoverflow.com/comment/139398300
type: QuestionComment
has text: Also, avoid using inline `on*` handlers. Use `addEventListener()` instead like i.e: `document.querySelector("#Button").addEventListener("click", handleSidebar);`
comment on: http://stackoverflow.com/q/79057850
type: Comment
score: 0

http://stackoverflow.com/comment/139129307
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78908435
has text: @TalhaSaleemi It was supposed to keep textarea visible when hovering but I haven't add all of it so sorry for that confusion.

http://stackoverflow.com/comment/139248834
has text: It’s helpful if you provide a runnable snippet of code. That said, the issue may be that there isn’t room in your SVG for the axes and ticks, so try a non-zero bottom margin.
score: 2
type: Comment
type: QuestionComment
comment on: http://stackoverflow.com/q/78975591

http://stackoverflow.com/comment/139314671
comment on: http://stackoverflow.com/a/79011332
has text: I've updated my answer. @KIKOSoftware. Many thanks.
type: Comment
score: 0
type: AnswerComment

http://stackoverflow.com/q/78907430
type: AnsweredQuestion
has title: How to Center Navigation Content and Ensure Background Stretches Full Width on Large Screens?
answer count: 2
accepted answer: http://stackoverflow.com/a/78907487
tagged with: responsive-design
has body: I'm trying to optimize my website's navigation bar for large screens, and I'm facing two issues: The content inside the navigation bar is not centered when the screen width exceeds 800px. The background color of the navigation bar doesn't stretch across the full width of the screen; it stops at 800px. How can I modify my CSS to ensure the content inside the .max-width container is centered within the 800px limit. Secondly make the background color of the navigation bar extend across the entire width of the screen, while keeping the content centered? Here is my code: body { font-family: Arial, sans-serif; margin: 0; padding: 0; color: white; } .max-width { max-width: 800px; margin: 0 auto; } nav { background-color: #333; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); display: flex; justify-content: space-between; align-items: center; padding: 0 20px; } nav ul { list-style-type: none; margin: 0; padding: 0; display: flex; } nav ul li a { color: white; text-decoration: none; padding: 15px 20px; display: block; } nav ul li a:hover { background-color: #555; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); border-radius: 4px; } Home About Services Contact Light | Dark
tagged with: css
possible better answer: http://stackoverflow.com/a/78907464
tagged with: flexbox
score: 0
tagged with: navigation
has answer: http://stackoverflow.com/a/78907487
tagged with: http://stackoverflow.com/tag/html
type: Question
has answer: http://stackoverflow.com/a/78907464

http://stackoverflow.com/comment/139409035
type: Comment
score: 0
type: QuestionComment
has text: (Note that in my demo image the up/down arrows are not a value spinner; qty is a *text* input. Those are handlebars for drag and drop.)
comment on: http://stackoverflow.com/q/79060918

http://stackoverflow.com/comment/139315800
type: Comment
type: QuestionComment
comment on: http://stackoverflow.com/q/79010977
score: 1
has text: I tried .stars { vertical-align: 2px; } first and it worked immediately. I didn't know that property could take numerical values! Great Suggestion.

http://stackoverflow.com/q/79024912
answer count: 0
tagged with: css
tagged with: angular
type: UnansweredQuestion
tagged with: datepicker
type: Question
has body: I'm currently working Angular 15 with Angular Material's Datepicker and have encountered a limitation that I would like to address. The default Datepicker provides basic functionality, but I want to enhance it by adding shortcuts for date ranges such as "Past Week," "Past Month," and "Past Year." Currently, my Datepicker looks like this: // angular material datepicker Enter a date range MM/DD/YYYY – MM/DD/YYYY I’ve searched through the documentation and various forums, but the solutions I found only discuss changing the format, headers, and styles, without addressing the addition of custom date range shortcuts. My Question: How can I efficiently customize the Angular Material Datepicker to include these shortcut options? Any guidance or examples would be greatly appreciated! What I’ve tried so far : Customizing the date format using the matDateFormats configuration. Modifying the header titles with mat-datepicker-header. Implementing a custom input field for quick selection but haven’t integrated it seamlessly with the existing Datepicker. How I want it to look like:
score: 0
tagged with: javascript
has title: How to customize (adding more features) Angular Material Datepicker Calender efficiently?
tagged with: calendar

http://stackoverflow.com/comment/139250435
type: QuestionComment
comment on: http://stackoverflow.com/q/78976713
type: Comment
score: 0
has text: Using CSS modules requires some extra configuration depending on the bundler(webpacker, vite) that you are using. You will have to search how to use CSS modules with the bundler that you are using.

http://stackoverflow.com/q/78919137
score: 0
accepted answer: http://stackoverflow.com/a/78919471
tagged with: safari
tagged with: http://stackoverflow.com/tag/html
type: Question
has title: lang="ur" changes how safari displays text
has comment: http://stackoverflow.com/comment/139143941
answer count: 1
type: AnsweredQuestion
has body: I'm facing an issue where setting lang="ur" on the html element changes the way Safari displays text: const base = ` ٹیسٹ ` const a = document.createElement('iframe') a.src = "data:text/html;charset=utf-8," + base; const b = document.createElement('iframe') b.src = "data:text/html;charset=utf-8," + base.replace('ar','ur'); document.body.appendChild(a); document.body.appendChild(b); Why is this happening and how can I prevent it?
has comment: http://stackoverflow.com/comment/139143772
has comment: http://stackoverflow.com/comment/139143633
has comment: http://stackoverflow.com/comment/139143697
has answer: http://stackoverflow.com/a/78919471
tagged with: font-family
tagged with: css
has comment: http://stackoverflow.com/comment/139143669
has comment: http://stackoverflow.com/comment/139143681

http://stackoverflow.com/q/78912357
tagged with: reactjs
score: 0
tagged with: css
tagged with: next.js
has comment: http://stackoverflow.com/comment/139134687
tagged with: frontend
has title: Infinite Scrolling Background Image extends the page width. How do I fix this
accepted answer: http://stackoverflow.com/a/78913035
type: Question
has body: I am trying to build a page where I need to create a Infinite Scrolling Background Image where the image is looped to create an infinite effect. And over the image a card shows the content appearing over the background. The image overflows the page width on smaller screens and ends up leaving huge space horizontally and messes up the layout. Here is the React Code: "use client"; import React from "react"; import { Button } from "./ui/button"; import Link from "next/link"; import Image from "next/image"; import { useMedia } from "react-use"; const Landing = () => { const isMobile = useMedia("(max-width: 576px)", false); const isTablet = useMedia( "(min-width: 577px) and (max-width: 1023px)", false ); const isDesktop = useMedia("(min-width: 1024px)", false); let height = 40; let width = 40; if (isMobile) { height = 20; width = 200; } else if (isTablet) { height = 300; width = 300; } else if (isDesktop) { height = 300; width = 300; } return ( My CLUB XYZ ABC <Image src="/banner.png" alt="logo" width={width} height={height} /> <Irrelevant/> ); }; export default Landing; And here is the CSS used: .infinite-scrolling { background: url("../public/background_large.jpg") repeat-x; height: 100vh; width: 5076px; animation: slide 60s linear infinite; filter: grayscale(80%); } .glassy { background: rgba(27, 26, 85, 0.35); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.18); } @keyframes slide { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-1920px, 0, 0); /* The image width */ } } Code demo link: <a href="https://codesandbox.io/p/sandbox/musing-blackburn-4h6pjm?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%25…
has answer: http://stackoverflow.com/a/78913035
has comment: http://stackoverflow.com/comment/139131762
answer count: 1
type: AnsweredQuestion

http://stackoverflow.com/a/78971440
answers question: http://stackoverflow.com/q/78970641
has body: The sticky class requires that the element’s parent container doesn’t interfere with the sticky behavior, which could happen if there’s no space for the element to scroll within or if the layout creates unexpected behavior. In your case, the grid layout might be causing issues, especially the way flex, grid, and sticky behave together. You may try to adjust your layout as: export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( <BackButton /> {children} ); } where following three adjustments have been made: Moved the sticky class directly on the element holding the BackButton and ensured md:top-[100px] sets the top sticky distance correctly. Removed unnecessary flex classes in the outer containers that could interfere with the layout. The sticky element is now inside a simpler flex container, which should avoid conflicts with grid layout behavior. As a side note: sticky only works if there’s enough scrollable content. Make sure your children content is large enough (it seems like you have a 200vh tall element, so that should work). ensure that nothing breaks scroll behavior. If you are using overflow: hidden or something similar on parent containers, it can prevent sticky from working properly.
type: Answer
score: 0

http://stackoverflow.com/a/79004507
score: 1
type: AcceptedAnswer
accepted answer of: http://stackoverflow.com/q/79004164
downvote count: 0
type: Answer
has comment: http://stackoverflow.com/comment/139317355
upvote count: 1
has body: Is this what you're hoping to accomplish? The major change is I added min-height: 100dvh; to your .session_tabs to make sure they're always full screen. dvh is the dynamic viewport height, taking up the full viewport minus the address bar on mobile. You could also use absolute positioning to force a full view if needed, depending on your design needs. Additionally, I removed margin from the body and .session_tabs to prevent it from having awkward gaps. If anything needs clarification, don't hesitate to ask body { margin: 0; } .season_tabs { position: relative; min-height: 100dvh; clear: both; } .season_tab { float: left; clear: both; width: 286px; } .season_tab label { background: #eee; padding: 10px; border: 1px solid #ccc; margin-left: -1px; font-size: 21px; vertical-align: middle; position: relative; left: 1px; width: 264px; height: 68px; display: table-cell; } .season_tab [type=radio] { display: none; } .season_content { position: absolute; top: 0; left: 286px; background: white; right: 0; bottom: 0; padding: 20px; border: 1px solid #ccc; } .season_content span { animation: 0.5s ease-out 0s 1 slideInFromTop; } [type=radio]:checked ~ label { background: white; border-right-color: #FFF; border-left: 2px solid #2C71DA; font-weight: bold; z-index: 2; } [type=radio]:checked ~ label ~ .season_content { z-index: 1; } tab 1 content 1 tab 2 content 2 tab 3 content 3 tab 4 content 4
has comment: http://stackoverflow.com/comment/139305675
answers question: http://stackoverflow.com/q/79004164

http://stackoverflow.com/comment/139137420
type: AnswerComment
has text: Thanks but it's just for a basic coding assignment.
comment on: http://stackoverflow.com/a/78915704
type: Comment
score: 0

http://stackoverflow.com/comment/139125297
type: QuestionComment
has text: @Paulie_D From what I have read online, the ID shouldn't be relied on.
comment on: http://stackoverflow.com/q/78907243
type: Comment
score: 0

http://stackoverflow.com/a/78944807
answers question: http://stackoverflow.com/q/78943230
type: Answer
score: 0
has body: Add border to the circle and apply box-shadow to the top and left side of it using box-shadow: -1px -1px 0px 0px rgb(0, 0, 0); and border: 6px solid #4caf50; to the circle to achieve your result. .node { position: relative; display: flex; align-items: center; background-color: #4CAF50; /* Green background color */ color: white; font-weight: bold; border-radius: 15px; width: 200px; /* Adjust as needed */ height: 80px; /* Adjust as needed */ padding-left: 50px; /* Space for the image */ margin-top: 5%; border: 1px solid #000; } .node-image { position: absolute; left: -7px; /* Half of the circle's diameter */ width: 50px; height: 50px; background-color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden; top: -7px; box-shadow: -1px -1px 0px 0px rgb(0, 0, 0); border: 3px solid #4caf50; } .node-image i { width: 40px; height: 40px; } .node-text { margin-left: 10px; } Name

http://stackoverflow.com/comment/139210449
type: Comment
comment on: http://stackoverflow.com/a/78947295
score: 0
type: AnswerComment
has text: @Rob i tried making modifications to the code and it seems to be back to its faulty layout again, is this what you meant that it no longer works?

http://stackoverflow.com/comment/139298411
type: QuestionComment
score: 0
comment on: http://stackoverflow.com/q/79000858
has text: I thought any other solution rather than margin top
type: Comment

http://stackoverflow.com/comment/139423141
score: 0
has text: Thank you, this was exactly the solution I needed. Much appreciated!
type: AnswerComment
comment on: http://stackoverflow.com/a/79067325
type: Comment

http://stackoverflow.com/q/78978700
tagged with: javascript
answer count: 2
tagged with: css
has answer: http://stackoverflow.com/a/78979115
has body: I have a simple textarea and a preview modal, which shows me how the content of the textarea looks in an email (so it basically loads and shows the content as HTML). Now, this preview is affected by my website's styles, and I want to isolate it so that it's as plain and exact as it would show when sent as an email. I don't want to use an iframe as it's not responsive. Are there better ways to do it? I'm using VueJS, but ideally, I would like a solution that doesn't require installing a plugin just for this. The solution I'm looking for is either in CSS, vanilla JavaScript, or built-in Vue functionality.
downvote count: 1
type: UnansweredQuestion
score: 1
tagged with: vue.js
has title: Isolate container div from website's styles without iframe
favorite count: 0
type: Question
tagged with: email
has answer: http://stackoverflow.com/a/78978797
tagged with: http://stackoverflow.com/tag/html
upvote count: 2

http://stackoverflow.com/q/78944941
upvote count: 1
has answer: http://stackoverflow.com/a/78944990
tagged with: css
score: 1
favorite count: 0
type: Question
accepted answer: http://stackoverflow.com/a/78944990
tagged with: http://stackoverflow.com/tag/html
has body: I am trying to build a webapps. However I can't create a css and folders in appscript. Is there anyway for me to add css? heres my simple code : I need help. I would like to use css in appscript since I cannot create .css file
downvote count: 0
tagged with: google-apps-script
answer count: 1
type: AnsweredQuestion
tagged with: web-applications
has title: Use bootstrap, css in appscript HTML

http://stackoverflow.com/comment/139163383
comment on: http://stackoverflow.com/q/78926909
score: 0
type: QuestionComment
has text: @AHaworth What's not simple about the css? I could do a JS solution as well. But go ahead, maybe someone is happy to have one.
type: Comment

http://stackoverflow.com/a/79000250
answers question: http://stackoverflow.com/q/79000228
has body: Looks like this does the job; could have sworn I had tried it already .img-wrapper { min-height: 0px; } .img-wrapper img { height: 100%; width: 100%; object-fit: cover; }
type: Answer
score: 0

http://stackoverflow.com/comment/139145491
score: 0
type: AnswerComment
type: Comment
has text: Where is the body? "Add flex-direction: column; to your body" is that in my html or CSS? I'm still new to web development. so i really apricate the help! I haven't gotten this far into my schooling on course careers so I've been having to rely on you tube tutorial's. Thank you again for helping me. I'm trying to make the text H1 & H2 left of the 3d pictures so there on the same line & lvl. If that's not possible then if i could make the 3d pics under the text but the 3d pictures in the middle and not to the left of the page.
comment on: http://stackoverflow.com/a/78913998

http://stackoverflow.com/comment/139367014
type: Comment
score: 0
type: QuestionComment
has text: @AHaworth Thanks for your reply. Can you clarify what you mean by "Bunny takes over click handling"? I was under the impression this issue had to do with the way Chrome handles it as the code works perfectly on Firefox.
comment on: http://stackoverflow.com/q/79021330

http://stackoverflow.com/comment/139325870
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/79017132
has text: https://caniuse.com/css-nesting
type: Comment

http://stackoverflow.com/q/78979042
tagged with: overflow
has body: I have created an interface as shown above. The blue part is my sidenav, and the red part is my page title. The orange part is my body, and in case it is longer than the container, I want to add scrollbars, that scrolls only that part. Here is the code: The problem is instead of getting scrollbars on div#body, it simply stretches to fit the contents then the whole page scrolls. Interestingly if I remove div#sidebar (and remove .grid from div#container of course), it scrolls as expected. Also if I change .h-[2000px] to .h-[2000%] on the div inside div#body as shown below, it scrolls as expected. What could be causing this, and how do I change things to get the expected results? Full code: Grid overflow
tagged with: css
has answer: http://stackoverflow.com/a/78984558
accepted answer: http://stackoverflow.com/a/78984558
tagged with: css-grid
type: Question
tagged with: http://stackoverflow.com/tag/html
has title: How to add overflow:auto to a grid item using CSS
answer count: 1
type: AnsweredQuestion
tagged with: tailwind-css
score: 0

http://stackoverflow.com/a/79005586
type: Answer
answers question: http://stackoverflow.com/q/79002604
has body: To ensure the video element continues to autoplay when navigating back to the page you'll need to re-trigger the autoplay attribute after each page transition. For Example: document.addEventListener('DOMContentLoaded', function () { barba.init({ const video = document.querySelector('video'); if (video) { video.play(); } }); });
score: 0

http://stackoverflow.com/a/79043503
downvote count: 0
has body: In order for z-index to have any affect you need to make sure that the position is not static. Any element that is positioned statically has the characteristics below. The element is positioned according to the Normal Flow of the document. The top, right, bottom, left, and z-index properties have no effect. This is the default value. Since setting the position: relative is like position: static except that it allows you to change an element's position that would be the appropriate option here. In the code snippet above if you find the element with the id of header and apply some CSS that looks like this you will end up with the header going behind the aside navigation menu. #header { position: relative; z-index: 1; }
upvote count: 1
score: 1
answers question: http://stackoverflow.com/q/79042220
type: Answer

http://stackoverflow.com/comment/139268581
type: Comment
comment on: http://stackoverflow.com/q/78986891
score: 0
has text: do you have some image to illustrate the problem? (and some smaller code?) maybe some textual example as well?
type: QuestionComment

http://stackoverflow.com/comment/139181433
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78939256
type: QuestionComment
has text: By only using CSS you have two options. If you use `position: fixed` for the menu, you would need another relative positioned element that acts as a spacer. Place it at the very top of your DOM and set its height accordingly. Another way would be to set `position: sticky` and 'top: 0' to place the navigation element on top and keep it there. It will respect the following content until scrolled.

http://stackoverflow.com/a/78937857
score: 0
answers question: http://stackoverflow.com/q/78937649
has body: You can use a clip-path on the containerinside element. Set it to inset and add a rounded border radius. See more at MDN on clip-path. I have further explanation in the CSS comments. I placed a border on the background element for some visual reference on positioning. For code use in snippet only -> 1: #cont { /* parent element should have a position of relative so child elements can be positioned relative to its postion on the page. */ position: relative; display: inline-flex; justify-content: center; background: #555; } #img { z-index: 2; /* higher index than the clipped background */ } #iphoneBG-clip { position: absolute; /* position set to absolute */ padding: 5px; width: calc(120px - (5px * 2)); /* make your clip element as close to the same size in width/height */ height: calc(230px - (5px * 2)); /* used a calc with padding calc'd */ background: red; justify-content: center; z-index: 1; /* set z-index lower than the element you are clipping to */ /* clip-path left/right top/bottom then specify round and give a number to apply border-radius on clip-path */ clip-path: inset( 0% 5% round 16px); display: flex; justify-content: center; align-items: center; text-align: center; margin: 1rem; } #iphoneBG-without-clip-without-positioning { position: absolute; padding: 5px; width: calc(120px - (5px * 2)); /* make your clip element as close to the same size in width/height */ height: calc(230px - (5px * 2)); /* used a calc with padding calc'd */ display: flex; align-items: center; justify-content: center; text-align: center; left: 0; background: orange; z-index: 1; /*clip-path: inset( 0% 5% round 16px); /* clip-path commented out */ } non-positioned element with clip-path commented out for reference Clipped Background positioned with flex
type: Answer

http://stackoverflow.com/comment/139185396
has text: quick questions does the item we are using have to be right next to it? LIke in your code, heading is just above words here. Does it have to be like directly above or directly under for it to work? Thanks
comment on: http://stackoverflow.com/a/78941635
type: Comment
score: 0
type: AnswerComment

email
tags question: http://stackoverflow.com/q/79042462
tags question: http://stackoverflow.com/q/78978700
type: Tag
tag name: email
tags question: http://stackoverflow.com/q/79181737
tags question: http://stackoverflow.com/q/79265392
tags question: http://stackoverflow.com/q/79384854
tags question: http://stackoverflow.com/q/79306655
tags question: http://stackoverflow.com/q/79418443
tags question: http://stackoverflow.com/q/79272406
tags question: http://stackoverflow.com/q/79510502
tags question: http://stackoverflow.com/q/79483982
tags question: http://stackoverflow.com/q/79515731

viewport-units
tags question: http://stackoverflow.com/q/78912512
tag name: viewport-units
type: Tag

http://stackoverflow.com/comment/139213866
type: Comment
type: QuestionComment
comment on: http://stackoverflow.com/q/78957189
has text: QSS are only *based* on CSS, they don't support the full specification. In fact, they fundamentally follow just the basic concepts and syntax of CSS2.1 (with some custom properties/attributes) and almost nothing of CSS3, therefore, they do **not** support inline/embedded contents (not even using base64). The `url` property can only be a path corresponding to a physical file in the system or in the Qt resource system. Check the [syntax](//doc.qt.io/qt-5/stylesheet-syntax.html) and [reference](//doc.qt.io/qt-5/stylesheet-reference.html) docs, if you don't see something there, it's not supported.
score: 1

http://stackoverflow.com/comment/139169724
type: Comment
has text: What I expected is: 1. The second column is filled with text (2 lines) thereby gaining the necessary height for itself 2. The container gets the height of the second column 3. The first column reacts to the expansion of the container and takes 100% of the height of the container 4. The first column uses aspect-ratio to set the width of the block (width = height), and the container uses auto to give it the width it needs. As a result, the logic worked in Chrome and IE, but Firefox does not want to accept the block width (although visually you can see that the block is square)
type: QuestionComment
score: 1
comment on: http://stackoverflow.com/q/78929318

http://stackoverflow.com/comment/139336245
type: Comment
score: 0
comment on: http://stackoverflow.com/q/79023236
type: QuestionComment
has text: @herrstrietzel Ohh, thank you, my eyes somehow skipped that.

http://stackoverflow.com/comment/139169078
type: AnswerComment
comment on: http://stackoverflow.com/a/78932578
score: 1
type: Comment
has text: Right. The issue I was referring to is that Angular has a mode that uses proper shadow DOM. If these properties are registered in the component CSS, I don’t know whether Angular is smart enough to move the `@property` rules into app css from component’s constructed stylesheets.

http://stackoverflow.com/comment/139342333
has text: So I just needed to replace the `100%` by `100vh`. Thank you so much! I knew there was something simple to be done, just couldn't find it. Thanks again!
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/79026163

code-injection
tag name: code-injection
type: Tag
tags question: http://stackoverflow.com/q/79057952
tags question: http://stackoverflow.com/q/79268912

http://stackoverflow.com/comment/139124995
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78906368
has text: thank you so much, this does exactly what i wanted it to do!

http://stackoverflow.com/q/78931755
tagged with: css
type: Question
answer count: 1
downvote count: 1
tagged with: bootstrap-5
upvote count: 0
favorite count: 0
score: -1
has body: Can you help me to do infinite images and translate 3d like this link [https://public.work/] I'm use html,css, js, and bootstrap 5 Your response is very helpful to me, if there is alternative other than that code, just tell me what should i do:) I'm expect the result like this link [https://public.work/] my code html: css: main { width: 100vw; height: 100vh; overflow: auto; } .container-fluid { width: 150%; height: 100%; } .img-fluid:hover { cursor: pointer; } @media (max-width: 576px) { .container-fluid { width: 200%; height: 200%; } } js: document.addEventListener("DOMContentLoaded", (event) => { const images = document.querySelectorAll("main .img-fluid"); images.forEach((img) => { img.style.cursor = "pointer"; img.addEventListener("mousedown", (e) => { img.style.cursor = "grabbing"; const shiftX = e.clientX - img.getBoundingClientRect().left; const shiftY = e.clientY - img.getBoundingClientRect().top; const moveAt = (pageX, pageY) => { img.style.left = pageX - shiftX + "px"; img.style.top = pageY - shiftY + "px"; }; const onMouseMove = (e) => { moveAt(e.pageX, e.pageY); }; document.addEventListener("mousemove", onMouseMove); img.onmouseup = () => { document.removeEventListener("mousemove", onMouseMove); img.style.cursor = "grab"; img.onmouseup = null; }; }); img.ondragstart = () => { return false; }; }); });
tagged with: http://stackoverflow.com/tag/html
has answer: http://stackoverflow.com/a/78931835
has title: Infinite images and translate 3D use HTML, SSC, JS and Bootrstrap
tagged with: javascript
type: UnansweredQuestion

http://stackoverflow.com/q/78951292
answer count: 3
tagged with: css
has answer: http://stackoverflow.com/a/78951310
has comment: http://stackoverflow.com/comment/139202931
type: UnansweredQuestion
type: Question
has comment: http://stackoverflow.com/comment/139203975
has answer: http://stackoverflow.com/a/78951317
has comment: http://stackoverflow.com/comment/139203009
has answer: http://stackoverflow.com/a/78951324
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139203519
has title: Only one span element takes CSS rules
has body: Not sure if I'm tired or what. Trying to make setup where there are multiple elements with span class which when hovered upon will make appear some text in a Div. Any tips on how to make this work and maybe even make it more compact. Thanks. .hide { display: none; min-height: 200px; } .hide2 { display: none; border: solid #ff8900 2px; border-radius: 20px; padding: 20px; min-height: 200px; } .myLINK:hover + .hide { display: block; color: gray; } .myLINK2:hover + .hide2 { display: block; color: gray; } Display an Element on Hover Hover over me 1. | Hover over me 2. I am shown when someone hovers over the div above. I am shown when someone hovers over the div above2. Need to show text in a div when hovering on top of span/class element.
has comment: http://stackoverflow.com/comment/139203687
score: 0

http://stackoverflow.com/a/79028786
type: Answer
answers question: http://stackoverflow.com/q/79028695
downvote count: 0
upvote count: 1
has body: Have the left corner radii be 999px via rounded-l-full. Also for a true semicircle, you'd want to have the width to be half of the height.
score: 1

http://stackoverflow.com/comment/139127113
type: Comment
comment on: http://stackoverflow.com/q/78909799
has text: thanks Kosh, but I struggle a lot with resolution definition. How do I convert dpi to screen size for a mobile? I cannot see the connection.
score: 0
type: QuestionComment

http://stackoverflow.com/comment/139207540
comment on: http://stackoverflow.com/q/78953804
type: QuestionComment
has text: Are you aware that different browsers/OS show color pickers in different ways? Try e.g. Chrome on Windows versus Safari on an iPhone. If you want consistency you'll probably have to implement your own.
score: 1
type: Comment

http://stackoverflow.com/comment/139336474
score: 0
has text: thank you @DiegoD for looking at my question. Your suggestion looks promising. I will let people know in this thread. Thank you.
comment on: http://stackoverflow.com/q/79023183
type: QuestionComment
type: Comment

http://stackoverflow.com/comment/139293535
comment on: http://stackoverflow.com/q/79000282
score: 0
type: Comment
has text: When you change focus, you first remove focus from the old element, then add it to the new element. This is not atomic, they're two separate operations, and there's a brief window where no element has focus. This allows the `blur` event to fire on the old element before the `focus` event fires on the new one.
type: QuestionComment

http://stackoverflow.com/a/79048426
has body: fixed with this: .card { display: grid; grid-template-columns: auto 1fr auto; align-items: end; width: 400px; gap: 10px; padding: 10px; border-radius: 10px; background-color: gray; } .card__checkbox { display: flex; justify-content: center; align-items: center; height: 65px; border-radius: 5px; background-color: lightblue; } .card__status { display: flex; justify-content: center; align-items: center; height: 65px; border-radius: 5px; background-color: lightgreen; } .card__info { position: relative; display: flex; gap: 10px; background-color: red; overflow: hidden; } .info-block { display: flex; flex-direction: column; gap: 5px; padding: 5px; border-radius: 10px; background-color: bisque; flex: 0 1 30%; overflow: hidden; } .info-block-1 { flex: 1 1 30%; } .info-block-2 { flex: 2 1 30%; } .info-block__text-wrapper { display: flex; gap: 10px; padding: 10px; background-color: gainsboro; border: 1px solid red; border-radius: 5px; overflow: hidden; } .info-block__text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-grow: 1; } bbb description aaaaaaaaaaaaaaaaaa copy description aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa status
type: AcceptedAnswer
type: Answer
score: 0
answers question: http://stackoverflow.com/q/79048332
accepted answer of: http://stackoverflow.com/q/79048332
has comment: http://stackoverflow.com/comment/139383198

http://stackoverflow.com/comment/139408809
type: QuestionComment
has text: Matter of opinion, but I would always try to avoid adding elements to the DOM if they are just for visual effect.
score: 1
type: Comment
comment on: http://stackoverflow.com/q/79062969

http://stackoverflow.com/comment/139155216
has text: Apparently ::selection doesn't work on IOS (https://caniuse.com/?search=%3A%3Aselection) so even workarounds sensing scroll with JS and altering colors is not going to work.
comment on: http://stackoverflow.com/q/78923550
type: QuestionComment
score: 2
type: Comment

http://stackoverflow.com/comment/139421326
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/79068383
has text: Yeah I do know the limitations of the iframe so thats why i'm looking into if there a way to put embed a Microsoft forms into a website with another method than iframe.
type: Comment

http://stackoverflow.com/comment/139354894
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/79034015
has text: All the code I have seen are focused on the element to which a css class has been applied, not the css class itself. have you searched for libraries created to manipulate css files?
type: Comment

http://stackoverflow.com/q/79044394
tagged with: grid
has comment: http://stackoverflow.com/comment/139387797
has body: I have one grid that displays a bunch of buttons to the left of the screen. On the right of the screen is a grid (though I don't know if it really needs to be) that shows contact information. I am trying to insert a third grid below both of the first two that will have a separate series of buttons. But, when I try to insert that third grid, it shows up in between the first and second grids. The only way I can get the third grid to be below the first two is if I put in a banner div before the third grid, but then the banner is floated to the right. div { font-family: 'Arial', sans-serif; } .banner { text-align: center; color: green; font-size: 46px; text-transform: uppercase; font-weight: bold; padding: 15px; } .buttonGrid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr; grid-column-end: auto; grid-row-end: auto; float: left; gap: 5px; width: 75px; height: auto; } .buttons { text-align: center; color: green; font-weight: bold; text-transform: uppercase; border: 1px solid black; border-radius: 10px; padding: 15px; box-shadow: inset 0 0 10px black; align-content: center; text-wrap: nowrap; } .pocTable { /* this is the one I don't know if it needs to be a grid, but I can't get it to display how I want without it being a grid */ text-align: center; border: 2px dashed black; padding: 10px; float: right; display: grid; } .usefulLinks { display: grid; grid-auto-columns: 1fr; } .usefulLinks div { border: 1px solid black; text-align: center; } .usefulLinks>div:first-child { grid-column: span 3; text-align: center; color: green; text-transform: uppercase; font-weight: bold; font-size: 36px; padding-bottom: 10px; } banner things and stuff things and stuff things and stuff things and stuff things and stuff things and stuff things and stuff things and stuff things and stuff things and stuff contact info: Phone: 123-4567 Email: email@email.com manager: First Last manager: First Last useful links first second third As stated before, if I put useful l…
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139374472
type: Question
has title: How to add spacing below a CSS grid and start a new grid
tagged with: http://stackoverflow.com/tag/html
answer count: 1
score: 0
has comment: http://stackoverflow.com/comment/139375071
has answer: http://stackoverflow.com/a/79044447
tagged with: css
has comment: http://stackoverflow.com/comment/139374492

http://stackoverflow.com/comment/139243260
type: Comment
has text: for CSS, see https://stackoverflow.com/questions/74026514/how-to-apply-css-style-to-quarto-output For PDF export you either need to change the LaTeX template or [choose a PDF engine that understands HTML/CSS](https://quarto.org/docs/reference/formats/pdf.html#format-options)
comment on: http://stackoverflow.com/q/78971306
type: QuestionComment
score: 1

http://stackoverflow.com/comment/139380521
type: Comment
score: 0
has text: A snippet of my scenario is included below: https://codepen.io/mblaise0/pen/oNKbmOg
type: QuestionComment
comment on: http://stackoverflow.com/q/79044235

http://stackoverflow.com/comment/139281556
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78992567
type: QuestionComment
has text: @DiegoD Okay I guess I should use chrome remote debug tool as the browsers which the font size is weird do not have Dev tools at all.

http://stackoverflow.com/comment/139249487
type: Comment
score: 0
comment on: http://stackoverflow.com/a/78972034
has text: yeah I was able to set the height using css, but the problem now with it is that the width doesn't adjust well based on the line breaks of the words, so there are cases where when the rotated words are too long it overflows outside the container horizontally.
type: AnswerComment

http://stackoverflow.com/comment/139411503
comment on: http://stackoverflow.com/q/78911849
type: Comment
has text: Not an answer, because it's not CSS only, but you might be interested in [Big As](https://github.com/GrahamHannington/bigas).
type: QuestionComment
score: 0

http://stackoverflow.com/comment/139172179
type: QuestionComment
comment on: http://stackoverflow.com/q/78930649
has text: I know that you got a lot of answers for you question, but instead of asking how you remove the red color, it would be a good idea to share what the goal is. What is it that you would like to achieve?
score: 2
type: Comment

http://stackoverflow.com/comment/139275049
comment on: http://stackoverflow.com/q/78987974
type: QuestionComment
has text: Normally speaking, when we faced issue like: it worked before and I didn't make any changes on the app, but now it doesn't work, we always clean and rebuild the app and run the app to see whether the issue still exist. If still exsit, then let's make sure whether there's someone else update the code or configurations. If no, or can't find, then we start troubleshooting the issue. Here what trapped us is the [css isolation](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation?view=aspnetcore-8.0).
type: Comment
score: 0

http://stackoverflow.com/a/79010299
has body: Might be easier to use a modern Web Component, no JS required with a declarative shadowDOM I will leave the CSS fine tuning to you <path fill="green" d="m226 92c-73 0-132 59-132 132 0 25 7 49 20 70l3 5-13 49 50-13 5 3c20 12 43 18 67 18h0c73 0 133-59 133-132 0-35-15-68-40-93-25-25-58-39-93-39m78 188c-3 9-19 18-27 19-13 2-22 1-48-10-40-17-66-57-68-60s-16-22-16-41 10-29 14-33c4-4 8-5 11-5 3 0 5 0 8 0 2 0 6-1 9 7 3 8 11 27 12 29s2 4 0 7c-8 15-16 15-12 22 15 26 31 35 54 47 4 2 6 2 9-1 2-3 10-12 13-16 3-4 5-3 9-2s23 11 27 13 7 3 8 5c1 2 1 10-2 19m97-279h-352c-26 0-48 22-48 48v352c0 27 22 48 48 48h352c27 0 48-22 48-48v-352c0-27-22-48-48-48m-176 381c-27 0-53-7-76-19l-84 22 23-82c-14-24-21-51-21-79-1-88 71-159 158-159 42 0 82 17 112 47 30 30 48 70 48 112 0 87-73 159-160 159" /> Contacto WhatsApp
type: Answer
score: 0
answers question: http://stackoverflow.com/q/79008222

http://stackoverflow.com/comment/139279608
comment on: http://stackoverflow.com/q/78991280
type: Comment
score: 1
type: QuestionComment
has text: Could you show us the relevant HTML/CSS as I am unclear what element it is that has that background (e.g. body or a parent container...) and is the background of the input itself to be white? I also didn't understand the CSS you have already given as the input border is set at none.

http://stackoverflow.com/comment/139212253
comment on: http://stackoverflow.com/q/78955926
score: 0
type: Comment
has text: Your questions is a bit confusing to answer. Elaborate more on your question so that we can have a better idea about the problem.
type: QuestionComment

http://stackoverflow.com/a/79002598
score: 2
upvote count: 2
type: Answer
has body: The correct semantic element for an image with description is and (see MDN WebDocs). So you simply should use that element. To ensure that border-radius will also clip the image, you should simply use overflow: hidden. To reverse the image and text you an simply use flex-direction: row-reverse figure { display: flex; border: 2px solid orange; border-radius: 1em; overflow: hidden; img, figcaption { width: 50%; } figcaption { display: flex; justify-content: center; align-items: center; } &:nth-of-type(even) { flex-direction: row-reverse; } } An elephant at sunset An elephant at sunset Thanks to actual coding knowledge rather than relying on ChatGPT.
downvote count: 0
answers question: http://stackoverflow.com/q/79002494

http://stackoverflow.com/comment/139313635
type: QuestionComment
type: Comment
has text: They are both aligned horizontally. The reason it looks misaligned is because the text of each paragraph in ` ` is left-aligned, leaving the right part empty.
score: 2
comment on: http://stackoverflow.com/q/79011399

scaling
tags question: http://stackoverflow.com/q/79002065
type: Tag
tags question: http://stackoverflow.com/q/78948236
tag name: scaling
tags question: http://stackoverflow.com/q/79087907
tags question: http://stackoverflow.com/q/79284657

http://stackoverflow.com/q/79003190
tagged with: tailwind-css
linked to: http://stackoverflow.com/q/42758815
score: 0
tagged with: css
answer count: 0
has comment: http://stackoverflow.com/comment/139299245
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139299252
has body: <%= button_content %> The following button works great on Firefox and Chrome, but fails to show focus on iOS and MacOS safari, any ideas?
type: Question
has title: Tailwind focus-bg-customColor does not work on ios
tagged with: safari

http://stackoverflow.com/a/79082156
type: Answer
answers question: http://stackoverflow.com/q/79039846
score: 0
has body: Well, in your situation, it's possible that the screen of the iPad Pro is too large and your CSS code didn't take this into consideration. Your media query, which is the min width: 375px, may be too small for an iPad. The screen width of an iPad is much wider than 375px, so your media query may not be effective. You can try increasing the min width a bit, such as changing it to min width: 1024px, which should trigger it on the iPad. Alternatively, you could simply remove the min width and make all vertical mode devices display only one column. However, I have to say that I am not 100% sure because I have not tried it on your devices. You can try it and see how it works. If it doesn't work, it may need to be adjusted again. @media only screen and (max-width: 1024px) and (orientation: portrait) { article { columns: 1; } } That's it, I hope it's helpful to you.

http://stackoverflow.com/q/79040017
has body: I'd like to visually center .projects__content div while keeping the cards aligned on the left: screenshot I understand that a wrapped div calculates its width also including gaps when a line isn't perfectly filled, but I'd like to find a solution so that this isn't the case. Maybe I'm missing something - it's a seemingly simple problem, but I can't seem to solve it. Here is my code: Mes projets Site web Site web réalisé avec HTML, CSS et JavaScript. #projects { max-width: 1200px; } .projects__content { display: flex; justify-content: left; align-items: center; gap: 1em; flex-wrap: wrap; } .card { --card-width: 16em; --card-padding: calc(.025 * var(--card-width)); width: var(--card-width); aspect-ratio: 7/10; padding: var(--card-padding); border-radius: calc(.03 * var(--card-width)); border: 1px solid rgba(0, 0, 0, .05); transition: transform .4s ease-out, box-shadow .4s ease-out; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); box-shadow: 0 .25em .75em rgba(17, 12, 46, .1); } I've already tried centering the .projects__content div with its parent #project using flex in almost every possible way.
has title: How to center a wrap div when justify-content: left
duplicate of: http://stackoverflow.com/q/65395106
has comment: http://stackoverflow.com/comment/139366291
answer count: 0
tagged with: css
tagged with: flexbox
type: UnansweredQuestion
score: 0
type: Question
linked to: http://stackoverflow.com/q/65395106
tagged with: http://stackoverflow.com/tag/html

http://stackoverflow.com/q/79046527
tagged with: css
has body: I need help with this site. I’ve been trying to make the mobile navigation larger but the letters are still small no matter what. What could i be doing wrong this is one of my css codes that i found in another forum. .wp-block-navigation .wp-block-navigation_responsive-container.is-menu-open{ font-size: 50px;!important} The px is not the real one i just wanted something big to see the difference. The page I need help with: any ideas? I used a plugin wpcode to add css but nothing. I tried additional css but still nothing.
tagged with: wordpress-theming
has answer: http://stackoverflow.com/a/79046565
tagged with: mobile
has title: make the mobile navigation letter larger size in wordpress theme twenty twenty four
tagged with: navigation
type: Question
answer count: 1
type: AnsweredQuestion
tagged with: wordpress
accepted answer: http://stackoverflow.com/a/79046565
score: 0

http://stackoverflow.com/comment/139365643
type: AnswerComment
type: Comment
has text: @EthanG https://stackoverflow.com/questions/62349536/is-it-possible-to-dynamically-change-font-to-a-custom-typeface-with-javascript
score: 0
comment on: http://stackoverflow.com/a/79033371

http://stackoverflow.com/q/79009310
has title: Is this the only way to get DaisyUI colors based on the theme in Svelte?
type: UnansweredQuestion
type: Question
tagged with: svelte
has body: I'm using Svelte with DaisyUI and need to retrieve the current theme colors dynamically. I rely on these colors in chroma-js, so it’s crucial to get them correctly. The code below works for me, but it feels like there might be a more efficient or idiomatic way to achieve this. Is this the only/best approach to get the current theme colors from DaisyUI? Here’s the relevant code snippet: {#each colorKeys as key} {/each} This approach creates hidden div elements with DaisyUI color classes, and then I use getComputedStyle to extract the background color from these elements. While this works, it feels a bit hacky, especially with the hidden elements. Is there a more direct or efficient way to access the current DaisyUI theme colors in Svelte, particularly for use with chroma-js? Any suggestions would be appreciated!
tagged with: tailwind-in-js
score: 0
tagged with: javascript
tagged with: daisyui
answer count: 0
tagged with: css

http://stackoverflow.com/comment/139178208
score: 0
has text: Not working I am getting error in ```sliderContainer.addEventListener('scroll', () => {``` this line
type: QuestionComment
comment on: http://stackoverflow.com/q/78937597
type: Comment

http://stackoverflow.com/comment/139213156
comment on: http://stackoverflow.com/a/78956802
type: Comment
score: 0
type: AnswerComment
has text: This is very cool! Only thing I am not sure how to do or if it is possible is to put the table header above each column. Is that possible at all?

http://stackoverflow.com/comment/139405437
has text: Indeed. the text overflows and that can be removed with overflow hidden
type: Comment
score: 0
comment on: http://stackoverflow.com/q/79061543
type: QuestionComment

http://stackoverflow.com/a/78912898
upvote count: 1
has comment: http://stackoverflow.com/comment/139133186
score: 1
answers question: http://stackoverflow.com/q/78912644
type: AcceptedAnswer
accepted answer of: http://stackoverflow.com/q/78912644
downvote count: 0
type: Answer
has body: When using ion-button inside ion-toolbar its recommended to wrap those in ion-buttons components. Wrapping the buttons in the ion-buttons component will automatically handle the styling and will align the content properly. 911

http://stackoverflow.com/comment/139320325
type: Comment
score: 0
type: AnswerComment
has text: If this resolves your question, please click the check mark (✓) on the left to accept the answer and consider upvoting it. This helps others in the community who might have similar questions know that this solution works. If you cannot see the accept button, please let me know. For more information, you can refer to [help/accepted-answer](https://stackoverflow.com/help/accepted-answer)
comment on: http://stackoverflow.com/a/79007689

http://stackoverflow.com/comment/139230160
score: 1
type: Comment
comment on: http://stackoverflow.com/q/78948123
type: QuestionComment
has text: See https://github.com/annevk/orb. What's the `Content-Type` response header of your image?

http://stackoverflow.com/comment/139393203
type: Comment
score: 0
has text: yes @PeterJames ..
comment on: http://stackoverflow.com/q/79054875
type: QuestionComment

http://stackoverflow.com/q/78947618
tagged with: reactjs
score: 0
answer count: 0
tagged with: css
has title: Ionic IonButton design issues
type: UnansweredQuestion
tagged with: ionic-framework
has body: I use ionic to build a react webapp. Of course there are various buttons and I use the "IonButton" class from Ionic. As you can see in the screenshot, it looks like it uses two designs at the same type or that each button has two overlapping buttons. In the screenshot, the "--company-color-hover" is active, so you can see that the red on the login button is different around the text compared to the border and you can see a round shape, which resembles the border-radius for IonButton from the global.css. You can see it even clearer in the google login button, which i colored blue but still uses the "company-color" variable from the css (the red color). The issue seems to exist, even when i use a clean IonButton with no classes and only text. I tried to delete classes, added edges for Ion-Button but i cannot get rid of the design or whatever hides behind the button. To make it more clear: for all buttons, for exmaple the one with the class "googleLoginButton" I only want to see the part that is now blue and rounded, but not the red surrounding shape. Login <IonInput name="email" type="email" placeholder="Email" value={email} onIonChange={e => setEmail(e.detail.value!)} required /> <IonInput name="password" type="password" placeholder="Password" value={password} onIonChange={e => setPassword(e.detail.value!)} required /> Login or Login with Google <IonLoading isOpen={isLoading} message="Please wait..." /> And here the css lines: /* global.scss */ :root { --company-color: #800020; --company-color-hover: #a00030; --app-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } ion-button { --background: var(--company-color); --background-hover: var(--company-color-hover); --color: white; --box-shadow: none; /* This removes any shadow */ --padding-top: 0px; --padding-bottom: 0px; --border-radius: 100px; } /*login.css*/ ion-button.googleLoginButton { --background: #4285F4; --background-hover: …
type: Question
tagged with: web-applications

html5-video
tags question: http://stackoverflow.com/q/78959297
tag name: html5-video
tags question: http://stackoverflow.com/q/79035901
type: Tag
tags question: http://stackoverflow.com/q/79101849
tags question: http://stackoverflow.com/q/79071329
tags question: http://stackoverflow.com/q/79200705
tags question: http://stackoverflow.com/q/79300814
tags question: http://stackoverflow.com/q/79284738
tags question: http://stackoverflow.com/q/79489514
tags question: http://stackoverflow.com/q/79501459

http://stackoverflow.com/comment/139252103
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78977782
type: QuestionComment
has text: Please make your question a little more clear, what exactly do you wanna achieve?

http://stackoverflow.com/a/78964412
has comment: http://stackoverflow.com/comment/139228997
has comment: http://stackoverflow.com/comment/139228644
answers question: http://stackoverflow.com/q/78964387
type: Answer
has body: It looks as though the idea of using a linear-gradient is already in your code (albeit commented out currently). Here's a simple, pure CSS, example of gradually increasing the size of that background on hover. Note that setting background-repeat to no-repeat is necessary, otherwise the linear-gradient will repeat and fill the space. Hover me
has comment: http://stackoverflow.com/comment/139228842
score: 0

http://stackoverflow.com/a/79051111
answers question: http://stackoverflow.com/q/79044610
upvote count: 2
has body: Use clipPath to trim the inner part of each sector, then adjust the conditions like this: * { margin: 0px 0px 0px 0px; /* Top Right Bottom Left */ padding: 0px 0px 0px 0px; /* Top Right Bottom Left */ border: 0px solid #00FF00; box-sizing: border-box; } body { background-color: #002233; color: #FFC355; font-family: "Helvetica", "Arial", sans-serif; font-size: 16px; overflow-y: scroll; } /* fade transitions on hover - DIV, SVG, TEXT */ #parent>div, path, text { transition: 0.2s; transition-delay: 5ms; } /* fade ALL out on hover (but not when .center is hovered) */ #donut-chart:hover:not(:has(.center:hover)) .parent>path { filter: opacity(50%) blur(0px) brightness(80%); } /* Also hide all text */ #donut-chart:hover:not(:has(.center:hover)) .parent>:is(circle, text) { filter: opacity(0%); } /* fade ONE in on hover*/ #donut-chart:hover:not(:has(.center:hover)) .parent>path:hover { filter: none; } /* Hide the .center... */ #donut-chart:hover:not(:has(.center:hover)) .center { filter: opacity(0%); } /* ...and show the hovered sector's text */ #donut-chart:hover:not(:has(.center:hover)) .parent:has(path:hover)>:is(circle, text) { filter: none; } <path d="M 10, 250 a 240,240 0 1,0 480,0 a 240,240 0 1,0 -480,0 M 126.25, 250 a 123.75,123.75 0 1,0 247.5,0 a 123.75,123.75 0 1,0 -247.5,0" clip-rule="evenodd" /> <circle cx='250' cy='250' r='240' stroke='black' fill='black' stroke-width='0' fill-opacity='1' /> <g id="donut-chart" stroke-width='2.5' stroke-linecap='butt' stroke-linejoin='miter' stroke='black'> <g class='parent'> <path d='M 250 250 L 250 25 A 225 225, 0, 0, 1, 458.7056796681 334.06508950971 Z' fill='#d35400' clip-path='url(#myClip)' /> <circle cx='250' cy='250' r='123.75' stroke='black' fill='black' stroke-width='0' fill-opacity='1' /> 8.21 KH/s 31.1% </g> <g class='parent'> <path d='M 250 250 L 458.7056796681 334.06508950971 A 225 225, 0, 0, 1, 171.59428106039 460.89699674856 Z' fill='#aa2200' clip-path='url(#myClip)' /> <circle cx='250' cy='250' r='123.75' stroke=…
has comment: http://stackoverflow.com/comment/139388469
score: 2
has comment: http://stackoverflow.com/comment/139393589
has comment: http://stackoverflow.com/comment/139392673
downvote count: 0
type: Answer

http://stackoverflow.com/comment/139233433
type: QuestionComment
type: Comment
comment on: http://stackoverflow.com/q/78967649
score: 0
has text: In what way does the dimensions of the "bottom-up" manner not match your expectations?

http://stackoverflow.com/comment/139169631
comment on: http://stackoverflow.com/a/78933008
type: Comment
has text: Hello, i really appreciate your answer ! However, we were all using Iphone and it was on Safari, so i don't really understand why it doesn't work on all Iphone
score: 0
type: AnswerComment

http://stackoverflow.com/a/79060673
downvote count: 0
type: Answer
has body: Use a container with overflow: hidden to contain the entire thing. We will flex (or grid) the slides in one line, which then we can slide (translateX) to the correct location. var index = 0 var slider = document.querySelector(".slider") var length = document.querySelectorAll(".slider .slide").length; function showSlide(index) { slider.style.transform = `translateX(-${index * 100}%)`; } document.querySelector("#next-button-display").addEventListener('click', function(ev) { showSlide(++index % length) }) document.querySelector("#prev-button-display").addEventListener('click', function(ev) { showSlide((--index % length + length) % length) }) .container { background-color: blue; padding: 10px; position: relative; } .inner-container-for-padding { overflow: hidden; } .slider { display: flex; transform: translateX(0); /* optional */ transition: transform 0.3s ease-in-out; } .slide { flex-grow: 0; width: 100%; flex-shrink: 0; background: lightblue; } .first { background-color: purple; } .second { background-color: yellow; } panel one panel two which has two lines panel three
upvote count: 1
score: 1
answers question: http://stackoverflow.com/q/79060590

http://stackoverflow.com/comment/139155233
type: QuestionComment
comment on: http://stackoverflow.com/q/78921718
type: Comment
has text: I agree that when looking in your raw HTML there are no repeated ID's, but you use quite a bit of Javascript in which you also copy HTML from one place to another. That probably causes the duplication of ID's. Have you ever use [your browser's developer tools](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools)? You can use its inspector to see what Javascript has done to your HTML.
score: 0

http://stackoverflow.com/comment/139185414
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78941635
has text: You're welcome, my friend!

google-chrome-extension
tag name: google-chrome-extension
tags question: http://stackoverflow.com/q/79033583
tags question: http://stackoverflow.com/q/79052392
type: Tag
tags question: http://stackoverflow.com/q/78911681
tags question: http://stackoverflow.com/q/79235765
tags question: http://stackoverflow.com/q/79419857
tags question: http://stackoverflow.com/q/79286740
tags question: http://stackoverflow.com/q/79456670
tags question: http://stackoverflow.com/q/79488335

http://stackoverflow.com/q/78970641
has answer: http://stackoverflow.com/a/78971440
type: UnansweredQuestion
has title: Cant get sidemenu button to be sticky
has comment: http://stackoverflow.com/comment/139239020
has comment: http://stackoverflow.com/comment/139240498
tagged with: http://stackoverflow.com/tag/html
type: Question
answer count: 1
has body: I need assistance in making the component within my grid sticky, i am using tailwindcss react/nextjs. The "back button" is just a button, the "footer" is just my name and the {children} element is a two screen tall wall of text. Layout component, wrapping page.tsx: import type { Metadata } from "next"; import { Inter } from "next/font/google"; import "./globals.css"; import Footer from "@/components/ui/Footer"; import BackButton from "@/components/ui/BackButton"; const inter = Inter({ subsets: ["latin"] }); export const metadata: Metadata = { title: "title", description: "desc", }; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( <BackButton /> {children} ); } Page.tsx is just a wall of text 200vh tall. this is a snippet of my code found in layout on my react/nextjs app, i am using tailwind, can someone help me with why my back button is not working as intended? (it is meant to be position sticky) I Have tried various solutions and asked chat gpt but to no avail.
tagged with: tailwind-css
score: 0
has comment: http://stackoverflow.com/comment/139240393
has comment: http://stackoverflow.com/comment/139240416
has comment: http://stackoverflow.com/comment/139238939
tagged with: css

http://stackoverflow.com/q/78941336
type: Question
tagged with: responsive
answer count: 1
has answer: http://stackoverflow.com/a/78942509
score: 0
tagged with: javascript
tagged with: css
has title: How to make responsive on Slider Group on Vutify?
has body: Now I am developing simple project, and facing some issues in develop. I can't make responsive with this slider group components. This is the source code. <content /> I am looking for your support. Thank you in advance. I tried to make responsive by changing the width of v-card, it didn't work. So I used mobile-breakpoint. But I am not sure how to use it.
type: UnansweredQuestion
tagged with: vue.js

http://stackoverflow.com/comment/139237383
type: Comment
comment on: http://stackoverflow.com/q/78969855
score: 1
type: QuestionComment
has text: I don't see this on iPad (5th gen) IOS 16.7.10. I do see that 'Back to the top' gets revealed just at the end on overscroll and then immediately covered.

http://stackoverflow.com/q/79050057
downvote count: 0
has comment: http://stackoverflow.com/comment/139385581
has answer: http://stackoverflow.com/a/79050768
tagged with: reactjs
tagged with: javascript
has comment: http://stackoverflow.com/comment/139384674
has comment: http://stackoverflow.com/comment/139384900
upvote count: 1
type: UnansweredQuestion
score: 1
has title: Fill boxes with text in React then continue to the next box
has body: Here's a photo of what I have in mind: I have a simple card component like so: function Card({ width, height, text }) { return ( {text} ); } Each card has an arbitrary width and height. There is a very long text to be spread out across several cards. The next card should pick up the rest of the string that did not fit in the previous card. It is important that the card must not be scrollable and the card's size must not expand. I created a Codepen here to demonstrate, but the filled text is hardcoded. Ideally of course I'd supply one very long string and there's a way to spread out that string across several cards. https://codepen.io/skeithtan/pen/gOVrMLR How do I go about doing this?
tagged with: frontend
tagged with: css
type: Question
answer count: 1
has comment: http://stackoverflow.com/comment/139384719
has comment: http://stackoverflow.com/comment/139384813
has comment: http://stackoverflow.com/comment/139384630
has comment: http://stackoverflow.com/comment/139384581
favorite count: 0

http://stackoverflow.com/comment/139362568
has text: You miss the question. The question was not how to stop a timer!
type: AnswerComment
score: 1
comment on: http://stackoverflow.com/a/79038090
type: Comment

http://stackoverflow.com/comment/139422168
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/79068048
has text: Hello, thank you very much! Yes, despite the IntelliJ warning pointing the href to ./main and updating the tailwind config as per your suggested has fixed the issue. Thanks a million!
type: Comment

http://stackoverflow.com/comment/139188206
type: QuestionComment
comment on: http://stackoverflow.com/q/78942849
has text: OK, thanks. That's the slightly more difficult bit, the rotation marquee is simply implemented with rotated divs with a flag at the top of each.
score: 1
type: Comment

http://stackoverflow.com/q/78935770
type: Question
answer count: 1
downvote count: 0
has answer: http://stackoverflow.com/a/78935771
type: AnsweredQuestion
has title: How to set rendered Mermaid diagrams width to be based on screen size in Obsidian?
upvote count: 1
tagged with: obsidian
tagged with: css
has body: By default, Obsidian is overflowing my large Mermaid diagrams on vertical (small width) screens: This is quite inconvenient for users with vertical screens. For example, I place my Obsidian window on a vertical screen and large diagrams becomes unreadable as result. I am aware Obsidian allows setting CSS. How can I leverage this to set my Mermaid diagrams to render 100% screen width by default?
accepted answer: http://stackoverflow.com/a/78935771
tagged with: mermaid
score: 1
favorite count: 0

http://stackoverflow.com/comment/139325061
comment on: http://stackoverflow.com/a/79016683
type: Comment
score: 0
has text: if you replied to my comments trying to understand what I meant with my words, there's a solution to achieve the result you are aiming to
type: AnswerComment

http://stackoverflow.com/q/79013945
has comment: http://stackoverflow.com/comment/139318328
duplicate of: http://stackoverflow.com/q/1520429
score: 0
has title: CSS selector for element with exact text match
tagged with: css
has comment: http://stackoverflow.com/comment/139318350
answer count: 0
has comment: http://stackoverflow.com/comment/139318352
has comment: http://stackoverflow.com/comment/139318345
type: UnansweredQuestion
linked to: http://stackoverflow.com/q/1520429
type: Question
has body: With :contains("Test") I can select elements that include Test, but this also matches Test 123 for example. How can I only select elements where its text is exactly Test? :contains("^Test$") did not work unfortunately...
tagged with: http://stackoverflow.com/tag/html

http://stackoverflow.com/a/79093050
answers question: http://stackoverflow.com/q/79032409
type: Answer
upvote count: 1
downvote count: 1
score: 0
has body: clamp() flui (relative) value can be computed using two targeted breakpoints, at which you want your two fixed vakues to be assigned - exactly as you do it with media queries. Example: 15px until 600px - the fluid values - the 18px from 1280px. It's just about maths. Take a look at my article about clamp calculation here (in french, use FireFox or Safari translate function if you don't speak french) and my clamp generator here if you want a clean and speed solution.

http://stackoverflow.com/comment/139119564
score: 0
comment on: http://stackoverflow.com/q/78904561
type: QuestionComment
has text: @prettyinpink trying definitely, i don't mind using javascript but this can be achieveable with only CSS I think... right?
type: Comment

http://stackoverflow.com/comment/139147663
type: AnswerComment
has text: I've just made a new version of the card and uploaded the code. I've just posted a different question here: https://stackoverflow.com/questions/78921098/how-can-i-make-a-card-like-this-which-is-responsive-in-html-css
score: 0
type: Comment
comment on: http://stackoverflow.com/a/78920877

http://stackoverflow.com/a/78915849
answers question: http://stackoverflow.com/q/78915498
has comment: http://stackoverflow.com/comment/139170517
has body: Resizers work on only their specific os.
type: Answer
score: 0

http://stackoverflow.com/comment/139248070
type: Comment
score: 0
type: AnswerComment
has text: I do have parenthesis tho ```circle.style.transform = `${translateElement} ${rotateElement} ${scaleElement}`;```
comment on: http://stackoverflow.com/a/78975360

http://stackoverflow.com/q/79052180
linked to: http://stackoverflow.com/q/62969250
score: -1
downvote count: 2
tagged with: overflow
tagged with: css
type: UnansweredQuestion
upvote count: 1
has answer: http://stackoverflow.com/a/79052221
has body: I'm having a lot of trouble with this issue. I'm trying to create a Canva-like drawing sheet that can be zoomed in and out. The problem is that when I zoom in, the sheet enlarges, but it distorts according to the page dimensions. Instead, I want it to overflow equally in all directions based on its size, so it remains centered on the page, just like in the Canva app. How can I achieve this feature using CSS? I tried everything I know about CSS (not so much), but I can't find any solution. Can someone show me a little example?
favorite count: 0
type: Question
answer count: 1
duplicate of: http://stackoverflow.com/q/62969250
has title: How can I make an element overflow equally in every direction?

tabs
tags question: http://stackoverflow.com/q/79007606
type: Tag
tags question: http://stackoverflow.com/q/79017200
tags question: http://stackoverflow.com/q/79067314
tag name: tabs
tags question: http://stackoverflow.com/q/79004164
tags question: http://stackoverflow.com/q/79206166
tags question: http://stackoverflow.com/q/79128563
tags question: http://stackoverflow.com/q/79134790
tags question: http://stackoverflow.com/q/79388325
tags question: http://stackoverflow.com/q/79447949

python-sphinx
type: Tag
tags question: http://stackoverflow.com/q/79041478
tag name: python-sphinx
tags question: http://stackoverflow.com/q/78962032
tags question: http://stackoverflow.com/q/79201509
tags question: http://stackoverflow.com/q/79112627
tags question: http://stackoverflow.com/q/79409430
tags question: http://stackoverflow.com/q/79437267

http://stackoverflow.com/comment/139214985
score: 0
has text: Hi, thanks for the info. There is indeed an AJAX script. there are a number of other specific stylesheets and one separate on the page to which I have added the suggested addition:
comment on: http://stackoverflow.com/q/78956414
type: QuestionComment
type: Comment

http://stackoverflow.com/q/79057952
tagged with: content-security-policy
accepted answer: http://stackoverflow.com/a/79057991
has answer: http://stackoverflow.com/a/79062243
has body: I am using CSP on my website to keeps things locked down as much as possible. I have an HTML editor on the website, and I wanted to allow users to choose text colors from a color picker. This involves adding style="color:#XXXXXX" to the affected elements, where XXXXXX is a 24-bit value from the color picker. I am temporarily using style-src 'self' 'unsafe-inline' on my test rig to allow inline styles to be used to define the colors. But this would open me up to CSS injection attacks if I did it on the live system. Is there any way to reliably sanitise CSS to allow inline styles to be used safely in this situation, or is there another way to safeguard inline styles so that only the editor can define them (maybe using nonces, which I use to add JS event handlers to HTML elements)?
has title: CSP and inline styles from color picker
type: Question
tagged with: code-injection
type: AnsweredQuestion
score: 0
has answer: http://stackoverflow.com/a/79057991
answer count: 2
possible better answer: http://stackoverflow.com/a/79062243
tagged with: css

ng-style
tags question: http://stackoverflow.com/q/79018578
type: Tag
tag name: ng-style

http://stackoverflow.com/comment/139153278
has text: Thanks, it did most of I want. Only thing left is can I keep the Status square in the same size(%10) when it's expanded? Basically keep the collapsed %10 and when the sub-item %100 when it's expanded?
type: Comment
comment on: http://stackoverflow.com/q/78920429
score: 0
type: QuestionComment

http://stackoverflow.com/comment/139269512
type: QuestionComment
has text: Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a **Stack Snippet** using the `<>` icon.. Although you have provided a link, if it was to become invalid, your question would be of no value to other future SO users with the same problem. See [**Something in my website/example doesn't work can I just paste a link**](http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to-it).
comment on: http://stackoverflow.com/q/78987424
type: Comment
score: 0

http://stackoverflow.com/comment/139310477
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/79009569
has text: I have just run the W3C CSS validator ‘jigsaw’ on the file welcome.css, with no errors (note TLS ie https:). I validated everything early this morning, all xhtml and all CSS.
type: Comment

http://stackoverflow.com/comment/139147703
comment on: http://stackoverflow.com/a/78920877
type: Comment
has text: Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/258380/discussion-between-braxton-and-nine).
type: AnswerComment
score: 0

http://stackoverflow.com/comment/139195816
comment on: http://stackoverflow.com/a/78946960
type: Comment
score: 0
type: AnswerComment
has text: @JacksonChassereau I have updated my responses to make dropdown work, check that out.

http://stackoverflow.com/comment/139256896
score: 0
type: Comment
type: QuestionComment
has text: Wow, that's true! So, is this caused by differences in the browser?@TemaniAfif
comment on: http://stackoverflow.com/q/78976538

http://stackoverflow.com/comment/139384888
type: QuestionComment
has text: PS: Why would you ever want to position absolute a Strong tag element?
comment on: http://stackoverflow.com/q/79050234
type: Comment
score: 0

http://stackoverflow.com/comment/139417119
comment on: http://stackoverflow.com/q/79067744
type: Comment
score: 0
has text: @Paulie_D it's actually the shortest code here.
type: QuestionComment

http://stackoverflow.com/comment/139370758
score: 0
type: AnswerComment
has text: try to provide a print button like the below code: Print this page
comment on: http://stackoverflow.com/a/79026980
type: Comment

http://stackoverflow.com/comment/139401778
type: Comment
score: 0
comment on: http://stackoverflow.com/q/79059761
type: QuestionComment
has text: Look at the dev tools these floating menus have class: ```f12-floating-menu-6860``` and icons are Fas icon with class ```fas```; You can use these classes to change colors of icons ex: ```.f12-floating-menu-6860 .fas { color:red;} ``` should work.

http://stackoverflow.com/a/78937262
type: Answer
answers question: http://stackoverflow.com/q/78932108
score: 0
has body: Let me tell you how I succeeded, maybe someone will need it. First I changed my NavMenu.razor to this: Dashboard Order List File Upload/Download Report Vendor Management Customer Management User Management Warehouse Management @code { private bool collapseNavMenu = true; private string? NavMenuCssClass => collapseNavMenu ? "collapsed" : "expanded"; private void ToggleNavMenu() { collapseNavMenu = !collapseNavMenu; } private void ExpandNavMenu() { collapseNavMenu = false; } private void CollapseNavMenu() { collapseNavMenu = true; } } Then I changed Mainlayout.razor to this: <NavMenu /> <LoginDisplay/> @Body <RadzenDialog /> <RadzenNotification/> And finally used this CSS for the sidebar: .sBar { position: fixed; z-index: 100; left: 0; top: 0; height: 100%; width: 45px; background-color: #ced0da; transition: width 0.3s ease; } .sBar:hover { width: 250px; } .sBar ul { list-style-type: none; padding: 0; margin-top: 0; /* Top margin */ margin-right: 0; /* Right margin */ margin-bottom: 0; /* Bottom margin */ margin-left: 0; /* Left margin */ } .sBar ul li { padding: 10px; text-align: center; white-space: nowrap; } .sBar ul li a { color: black; text-decoration: none; } .sBar ul li span { display: none; } .sBar ul li:hover { background-color: darkgray; } .sBar:hover a { display: flex !important; align-items: center !important; } .sBar:hover a span{ display: flex !important; align-items: center !important; } .sBar:hover a i { margin-right: 15px !important; margin-left: -1px !important; /* Move the icon more to the left */ }

microsoft-edge-extension
tags question: http://stackoverflow.com/q/79052392
type: Tag
tag name: microsoft-edge-extension

bulma
type: Tag
tag name: bulma
tags question: http://stackoverflow.com/q/79000934
tags question: http://stackoverflow.com/q/79130607

http://stackoverflow.com/comment/139331337
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/79021002
has text: You can create two different divs. One at top containing your content and another at bottom containing footer. You can also see same behavior with stackoverflow website if you use dev tools and inspect it.
type: Comment

http://stackoverflow.com/q/78937649
type: UnansweredQuestion
type: Question
tagged with: user-interface
has title: borders in divs appearing when animating with jquery
has comment: http://stackoverflow.com/comment/139178233
tagged with: http://stackoverflow.com/tag/html
answer count: 1
has body: Hi, I couldn't find anything on this, so, basicly, when I animate the containers with this: $(document).ready(function() { $('#startJourneyContainer').click(function() { $("#time").animate({color: "white"}, 800); $("#containerInside").animate({opacity: '0',left: '-=300px'}, 800); $("#containerInsideIniciar").animate({opacity: '1',left: '-=300px',}, 800); }); }); .containerInsideIniciar { position: absolute; overflow: hidden; height: 670px; width: 310px; border-radius: 50px; top: 38px; opacity: 0; /* left: 0px; */ left: 310px; background: rgb(34,190,82); background: linear-gradient(187deg, rgba(34,190,82,1) 6%, rgba(33,169,196,1) 24%, rgba(255,255,255,1) 55%, rgba(255,255,255,1) 100%); pointer-events: none; z-index: 4; } .containerInside { position: absolute; overflow: hidden; height: 670px; width: 310px; border-radius: 50px; top: 38px; left: 0px; background-image: linear-gradient(white,#deeefa,#deeefa); } And, when they move, their borders appear there (in the image), how would I make them not show?
score: 0
tagged with: javascript
tagged with: jquery
tagged with: css
has answer: http://stackoverflow.com/a/78937857

http://stackoverflow.com/comment/139358561
comment on: http://stackoverflow.com/q/79035820
has text: By 'misaligned' do you mean that actually you don't want the text to move at all, but for some padding to appear to its left hand side?
type: QuestionComment
score: 0
type: Comment

http://stackoverflow.com/comment/139317726
type: QuestionComment
has text: Please [edit] and then click `[<>]` and provide a [mcve]
comment on: http://stackoverflow.com/q/79013624
score: 2
type: Comment

http://stackoverflow.com/a/78979546
downvote count: 0
answers question: http://stackoverflow.com/q/78979394
has body: You could use an SVG with a stroke-dasharray. :root { --value: 100; --time: 3s; } svg { height: 90vh; ] } path { fill: transparent; stroke-width: 20; stroke-linecap: butt; } .circle { stroke: lightblue; stroke-dasharray: 15 5; } &lt;svg viewbox="0 0 320 320"&gt; &lt;path class="circle" d="M160,10 A150,150 0 0 1 160,310 A150,150 0 0 1 160,10 " pathLength="120"/&gt; &lt;/svg&gt;
accepted answer of: http://stackoverflow.com/q/78979394
type: AcceptedAnswer
upvote count: 2
type: Answer
score: 2

http://stackoverflow.com/comment/139401400
comment on: http://stackoverflow.com/q/79058041
type: Comment
score: 0
type: QuestionComment
has text: https://codepen.io/Paulie-D/pen/vYoKrLV - Assumes the grid will always be 5 columns wide even if there are less than 5 tubes. I do not believe that you can have an `inline-grid` with `auto-fill/fit` so a defined number of columns is required. That said, it would certainly be possible to count the number of tubes and set that as the number of columns with a variable.

http://stackoverflow.com/a/79010120
has body: Try and remove the min-height so that the text can cover the cover the entire backround-color and not overflow
answers question: http://stackoverflow.com/q/79010036
has comment: http://stackoverflow.com/comment/139311364
has comment: http://stackoverflow.com/comment/139311373
type: Answer
score: 0

http://stackoverflow.com/a/79038234
answers question: http://stackoverflow.com/q/79038018
type: Answer
score: 0
has body: window.onload = function() { var time = 9, // your time in seconds here display = document.querySelector('#timer'); startTimer(time, display); }; function startTimer(duration, display) { var timer = duration, minutes, seconds; var countdown = setInterval(function() { minutes = parseInt(timer / 60, 10); seconds = parseInt(timer % 60, 10); minutes = minutes &lt; 10 ? "0" + minutes : minutes; seconds = seconds &lt; 10 ? "0" + seconds : seconds; display.textContent = minutes + ":" + seconds; if (--timer &lt; 0) { clearInterval(countdown); showExplosion(); } }, 1000); } function showExplosion() { var explosion = document.getElementById('explosion'); explosion.style.display = 'block'; } #explosion { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1000; /* Make sure it overlays other content */ } #timer-container { position: relative; width: 100%; height: 100vh; } &lt;div id="timer-container"&gt; &lt;div id="timer"&gt;&lt;/div&gt; &lt;img id="explosion" src="path/to/your/explosion.gif" alt="Explosion"&gt; &lt;/div&gt; please refer the above code

http://stackoverflow.com/comment/139160135
type: Comment
score: 0
has text: Yeah they suggested to use `e.preventDefault()` but using that in my code makes the code not work at all
type: QuestionComment
comment on: http://stackoverflow.com/q/78927456

http://stackoverflow.com/comment/139334592
type: QuestionComment
has text: Did you check you dev-tool for any given error or what font is being used?
comment on: http://stackoverflow.com/q/79022864
type: Comment
score: 0

http://stackoverflow.com/comment/139158067
comment on: http://stackoverflow.com/q/78919901
type: QuestionComment
has text: To stick something to the corner like that I'd be looking at using an absolutely-positioned pseudo-element rather than a background image.
score: 2
type: Comment

http://stackoverflow.com/comment/139158494
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78926845
has text: `const toggleStyle = (el, style, value) => el.style[style] = el.style[style] ? '' : value;`

http://stackoverflow.com/comment/139314487
has text: Thanks for clarification, @Jens - as i was finishing my post I realised this might actually not be the effect you're trying to achieve.
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/79011841
type: Comment

http://stackoverflow.com/comment/139118250
has text: I'm not sure if that is a solution. As I said, the dynamic content consists of a wide array of custom angular components, with dynamic data binding, images, etc.
type: QuestionComment
comment on: http://stackoverflow.com/q/78905081
type: Comment
score: 0

http://stackoverflow.com/comment/139134925
has text: @DarkBee that's why mentioned `in this case`. Please let me know as well how we can sort this.
type: Comment
comment on: http://stackoverflow.com/a/78914370
score: 0
type: AnswerComment

http://stackoverflow.com/comment/139182232
score: 1
has text: The content is jumping above the fixed header when I apply the styling
type: Comment
comment on: http://stackoverflow.com/a/78939581
type: AnswerComment

http://stackoverflow.com/comment/139323269
type: QuestionComment
has text: Adobe & MIcrosoft proposed [CSS regions](https://drafts.csswg.org/css-regions) 13 years ago. Sadly. it was opposed by the other browser makers so it has never progressed beyond that early draft status.
type: Comment
score: 0
comment on: http://stackoverflow.com/q/79016277

http://stackoverflow.com/comment/139269076
has text: Hi, Welcome. You used flex on `#shadowBox`, but `dropdown` is out of `#shadowBox`. I think you'd better check it out :)
type: QuestionComment
type: Comment
comment on: http://stackoverflow.com/q/78986984
score: 0

http://stackoverflow.com/comment/139252461
type: AnswerComment
score: 1
has text: Does this answer the question? Still not inside the green.
type: Comment
comment on: http://stackoverflow.com/a/78977848

http://stackoverflow.com/comment/139155909
score: 0
comment on: http://stackoverflow.com/q/78925311
type: QuestionComment
has text: @KIKOSoftware yeah, I understand that this is very hard to reproduce. Lots of HTML and CSS is missing and I am using JSReport for rendering which is not readily accessible so I may be out of luck getting any help here. This is just a shot in the dark mostly. In any case, I appreciate your effort.
type: Comment

http://stackoverflow.com/a/78994088
type: Answer
has comment: http://stackoverflow.com/comment/139286858
score: 0
has body: In your case just remove the .thumb height: 1200px; because your itemFeatures div height is approx 1400px up. So when the imageContainer height is over the sticky container is removed. If you set imageContainer sticky when scrolling till the end then remove your parent div height. .thumb { display: grid; grid-template-columns: 1fr; grid-template-rows: auto; .imageContainer { height: 442px; width: 340px; @media screen and (min-width: 768px) { height: 925px; width: 712px; } @media screen and (min-width: 1360px) { position: sticky; top: 0; height: 800px; width: 650px; } .swiper { width: 100%; height: 300px; margin-left: auto; margin-right: auto; } .swiper-slide { background-size: cover; background-position: center; } .mySwiper3 { height: 80%; width: 100%; } .mySwiper4 { height: 20%; box-sizing: border-box; padding: 10px 0; } .mySwiper4 .swiper-slide { width: 25%; height: 100%; opacity: 0.4; } .mySwiper4 .swiper-slide-thumb-active { opacity: 1; } .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; } } .itemImg { display: block; height: 100%; width: 100%; * { display: block; } } .itemDescription { font-size: 18px; font-weight: 600; padding-top: 40px; @media screen and (min-width: 768px) { font-size: 20px; padding-top: 60px; } } .itemDescriptionText { font-size: 12px; padding: 20px 0 40px 0; text-align: justify; @media screen and (min-width: 768px) { font-size: 18px; padding: 30px 0 60px 0; } } @media screen and (min-width: 1360px) { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; .itemImg { img { width: 650px; } } } } &lt;div class="cardContainer"&gt; &lt;nav aria-label="breadCrumb"&gt; &lt;ul class="breadCrumb"&gt; &lt;li class="breadCrumbItem"&gt;&lt;a href="index.html" title="На головну сторінку"&gt;&lt;svg width="12px" height="12px" class="homeIcon"&gt; &lt;use href="~images/svg/house.svg#house"&gt;&lt;/use&gt; &lt;/svg&gt;&lt;/a&gt;&lt;/li&gt; &lt;li class="breadCrumbItem"&gt;&lt;span&gt;&amp;#62;&lt;/span&gt;&lt;/li&gt; &lt;l…
answers question: http://stackoverflow.com/q/78993924
has comment: http://stackoverflow.com/comment/139285130

drupal
type: Tag
tags question: http://stackoverflow.com/q/78936282
tag name: drupal
tags question: http://stackoverflow.com/q/79424304

http://stackoverflow.com/comment/139343981
score: 1
comment on: http://stackoverflow.com/a/79028000
has text: Now corrected. The answer I used to generate the polygons is imperfect and so I manually cleaned up some fo the points.
type: Comment
type: AnswerComment

http://stackoverflow.com/comment/139250256
type: QuestionComment
has text: Your question is not clear. Please edit your post to make it clearer what you are asking. Make sure you clearly explain your desired result and your chosen solution, and clarify the difference between your desired result and the actual results we are seeing in the snippet. Ideally you would add some sketches or mockups ... a picture is worth a thousand words.
comment on: http://stackoverflow.com/q/78976538
type: Comment
score: 0

http://stackoverflow.com/q/78930153
has body: I have a tabular layout which contains graphical contents. I understand that using tables for layout is no longer a best practice, but I'm exploring this approach for educational purposes and to understand why this specific issue occurs: despite setting all relevant margins, paddings, and border-spacing to zero, a small gap remains between the bottom borders of the table cells and their contents. I've inspected the code with developer tools, which indicate that the height of the table cells is larger than the contents, but provides no clues as to why. Here's the code: body{ margin: 40px; } table{ border-collapse: collapse; border-spacing: 0px; margin-left: auto; margin-right: auto; } table, tr, td { padding: 0px; margin: 0px; } tr, td { border: 0px; } .box{ display: inline-block; width: 300px; height: 120px; margin: 0; } .box-blue{ background-color: blue; } .box-red{ background-color: red; } .box-blue{ background-color: blue; } .box-maroon{ background-color: maroon; } .box-violet{ background-color: violet; } Document The snippet shows that all proper margins, borders and paddings are set to zero. The table's border-spacing is also zeroed - with no effect though, the annoying bottom gap survives no matter what I do. Inspecting the code with dev tools is of little help since it says that the height of the table cells are larger than their contents, but doesn't explain why this is happening. If I change the value of the divs' display to "block", the gap disappears. According to an expert (ChatGPT), this works because the issue could be related to "how inline-block elements behave inside table cells. They can sometimes introduce whitespace or gaps due to the way they are rendered, often because of baseline alignment." This explanation is wonderful, but does not really solve the issue: if I use img elements instead of divs, the gaps return - even if the imgs' display is set to "block" (p.s.: my divs' display had been set to "inline-block" to simulate the img behavior in …
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139166376
has title: Vertical gaps between table cells and their contents
tagged with: css
type: Question
linked to: http://stackoverflow.com/q/5804256
score: 0
has comment: http://stackoverflow.com/comment/139170149
duplicate of: http://stackoverflow.com/q/5804256
tagged with: http://stackoverflow.com/tag/html
tagged with: html-table
duplicate of: http://stackoverflow.com/q/22092724
answer count: 0

http://stackoverflow.com/comment/139245140
type: Comment
comment on: http://stackoverflow.com/q/78974025
has text: If you can post more complete HTML structure that will help. As you mentioned, z-index is dependent on the items being on the same level so it's possible that the nesting isn't exactly right. If it's an intermittent problem, you can also try adding this rule to both elements: -webkit-transform: translateZ(0);. This was the solve for an old question about video z-index problems https://stackoverflow.com/questions/49653475/video-and-z-index-inside-scaled-element-some-divs-disappear/49885529#49885529
type: QuestionComment
score: 1

http://stackoverflow.com/comment/139674431
comment on: http://stackoverflow.com/a/79029558
type: Comment
score: 0
has text: Hi @haolt, is there a way to remove that extra scrolling height at the bottom?
type: AnswerComment

http://stackoverflow.com/a/78946752
has comment: http://stackoverflow.com/comment/139195886
type: Answer
answers question: http://stackoverflow.com/q/78946665
has body: As you are already using display: flex; for image and text then adding gap:50px would be best to create space between image and text. Below is working example. html, body { height: 100%; margin: 0; } body { background-color: white; background-image: url('file:///C:/xampp/htdocs/templatemo_591_villa_agency/assets/images/techno%20background.jpg'); background-position: center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; display: flex; justify-content: center; align-items: center; } .data-container { display: flex; align-items: center; justify-content: space-between; padding: 20px; } .about-us-image { display: flex; justify-content: flex-end; align-items: center; width: 50%; gap: 45; } .about-image { height: 500px; width: 400px; box-sizing: border-box; } .about-us-text { text-align: left; padding: 100px; width: 50%; box-sizing: border-box; align-self: start; padding: 80px 50px 0 0; padding-left: none; padding-top: 0%; padding-right: 25px; } Who We Are With more than a decade of experience, we are a trusted team of business and financial planners to help you start your business or retirement in Bali, Indonesia and other islands
has comment: http://stackoverflow.com/comment/139195126
has comment: http://stackoverflow.com/comment/139195072
has comment: http://stackoverflow.com/comment/139195748
score: 0
has comment: http://stackoverflow.com/comment/139195806
has comment: http://stackoverflow.com/comment/139195855

http://stackoverflow.com/comment/139370589
has text: Do you mean "drop down" like it having animation? like it doesnt slowly appear or simply doesnt appear at all? Currently I cant find anything wrong with the code, it works well so I need to know what you actually mean. Use dev tool to inspect the and see if it changes when button is clicked
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/79025318

http://stackoverflow.com/comment/139205720
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78952895
has text: please add code using code-sandbox where I can see How it's currently looks like.

padding
type: Tag
tag name: padding
tags question: http://stackoverflow.com/q/78924442
tags question: http://stackoverflow.com/q/79348075
tags question: http://stackoverflow.com/q/79487508
tags question: http://stackoverflow.com/q/79473809

http://stackoverflow.com/comment/139223255
score: 0
type: AnswerComment
has text: I have tried doing it with the unique class, elementor-element... but that didnt work. Would you happen to know how to change the ID with a Class with Jquery. Is that even possible?
type: Comment
comment on: http://stackoverflow.com/a/78962197

http://stackoverflow.com/q/79039316
answer count: 0
tagged with: css
tagged with: pkgdown
type: UnansweredQuestion
type: Question
tagged with: http://stackoverflow.com/tag/r
tagged with: http://stackoverflow.com/tag/html
score: 0
has title: How to increase main column width in pkgdown without breaking layout?
has body: I’m trying to increase the width of the main content column in my pkgdown site using the following custom pkgdown/extra.css file: .row &gt; main { max-width: 65rem; } This works, but if I go beyond 70rem, the &lt;aside&gt; shifts below the main content, breaking the layout. I suspect this is due to exceeding the container size. Here’s part of my _pkgdown.yml: template: bootstrap: 5 bootswatch: simplex math-rendering: mathjax assets: css: ['extra.css'] I’d like a Bootstrap-compliant solution to increase the main column width without breaking the layout. Should I adjust col-* classes or take a different approach? Any suggestions would be appreciated!

http://stackoverflow.com/comment/139304363
score: 0
type: AnswerComment
has text: This was a big help, thanks you.
comment on: http://stackoverflow.com/a/79004766
type: Comment

http://stackoverflow.com/comment/139363231
type: Comment
type: QuestionComment
has text: @Paulie_D I see. So you mean this can't be achieved through flexbox. Is it?
comment on: http://stackoverflow.com/q/79038356
score: 0

http://stackoverflow.com/comment/139265814
has text: @Brett Donald, so thank you but I don't really want to have to rely on intersectionObserver as I am less familiar with it and (i think) it is an API so not baked in to js(or maybe it is i'm not sure). This is probably me being very picky and maybe I should just use it. But if it turns out that intersection Observer is the only way to go then I will be fine to use it.
type: QuestionComment
comment on: http://stackoverflow.com/q/78984963
type: Comment
score: 0

http://stackoverflow.com/comment/139409521
score: 1
type: Comment
type: QuestionComment
has text: You're probably looking for margin. If you have to use padding for whatever reason, you'll add a wrapper with padding. Also li's should be children to ol or ul
comment on: http://stackoverflow.com/q/79063788

http://stackoverflow.com/a/78932578
answers question: http://stackoverflow.com/q/78932524
downvote count: 1
has body: Love seeing this kind of CSS-based component API! The main thing is that initial-value is required in most cases for @property. As MDN says, The initial-value descriptor is also required, unless the syntax is the * universal syntax definition (e.g., syntax: &quot;*&quot;). To get around this issue, I generally use the pattern of having an internal custom prop that gets the value of the public variable when its set, but falls back to a default value. @property --grid-row-gap { syntax: &quot;&lt;length&gt;&quot;; inherits: false; /* I generally prefer the `true` inheritance behavior, but it's up to you */ initial-value: 0px; /* doesn't really matter */ } .table-container { /* an internal prop with a default fallback value */ --_row-gap: var(--grid-row-gap, 0px); /* ✂️ */ row-gap: var(--_row-gap); } Now, when --grid-row-gap is set from the outside, it’ll use that value, but if it’s not it’ll be --_row-gap’s fallback value. Edit: I would downvote my own answer but will leave it for the comments. Issues: I had overlooked the fact that a registered custom property’s initial value means that from var()’s perspective it has a value even if not “set” in the usual way. When not using @property, there’s no need to do the --_internal property thing when a property is only used once in a component; just use a fallback value as OP did.
type: Answer
has comment: http://stackoverflow.com/comment/139168997
score: 0
has comment: http://stackoverflow.com/comment/139169055
has comment: http://stackoverflow.com/comment/139168809
has comment: http://stackoverflow.com/comment/139169040
upvote count: 1
has comment: http://stackoverflow.com/comment/139169078

http://stackoverflow.com/comment/139241977
type: Comment
score: 0
type: AnswerComment
has text: Hey, right now I am only using one element, but the users can have as many elements as they want. Also, with the current method, it would be harder to zoom to a point as shown [here](https://imgur.com/X1acOCw). <- I am trying to achieve this but also keeping the div.canvas infinite at the same time.
comment on: http://stackoverflow.com/a/78972243

http://stackoverflow.com/comment/139184388
type: QuestionComment
has text: but what about responsiveness @Tim
comment on: http://stackoverflow.com/q/78941096
type: Comment
score: 0

http://stackoverflow.com/comment/139203281
type: QuestionComment
comment on: http://stackoverflow.com/q/78951532
has text: Note that you have a typo in CSS line 175: `)` instead of `}`. Besides that, pay extra attention to the word **minimal** the next time you're posting a [repro]. 175 CSS lines for such a small part are excessive!
score: 2
type: Comment

http://stackoverflow.com/comment/139323023
type: Comment
score: 0
comment on: http://stackoverflow.com/q/79016277
has text: Understood. I have been using WeasyPrint.
type: QuestionComment

http://stackoverflow.com/a/79052245
score: 0
answers question: http://stackoverflow.com/q/79049572
type: Answer
has body: The following worked: .reveal li { list-style-image: url('images/tree-solid.svg'); list-style-position: inside; padding-left: 10; }

http://stackoverflow.com/comment/139360030
comment on: http://stackoverflow.com/q/79036821
type: QuestionComment
has text: Note how you have errors. You need to import the HTTP client service. The component loading is dying before the text-box is rendered because of that.
score: 2
type: Comment

display
tags question: http://stackoverflow.com/q/78936068
tags question: http://stackoverflow.com/q/78933097
type: Tag
tags question: http://stackoverflow.com/q/79039982
tag name: display
tags question: http://stackoverflow.com/q/79207399
tags question: http://stackoverflow.com/q/79069315
tags question: http://stackoverflow.com/q/79233888
tags question: http://stackoverflow.com/q/79090486
tags question: http://stackoverflow.com/q/79341264
tags question: http://stackoverflow.com/q/79371775

http://stackoverflow.com/comment/139415033
has text: Thanks @Paulie_D . I don't know how I missed that comment :( I've read the article about 10 times over the last week & I tried several other things but the solution he/you present is quite obvious when you take a step back & think about it... Thanks again....
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/79059236

http://stackoverflow.com/comment/139133186
has text: exactly what I need! Thx
comment on: http://stackoverflow.com/a/78912898
type: Comment
score: 0
type: AnswerComment

http://stackoverflow.com/comment/139314429
type: QuestionComment
has text: OK, thanks, that makes it clearer. I still think you'll need some JS which can work out what the relative aspect-ratios of the viewport and the image are.
comment on: http://stackoverflow.com/q/79010419
type: Comment
score: 0

http://stackoverflow.com/comment/139345184
comment on: http://stackoverflow.com/q/79024929
type: Comment
score: 0
has text: The project doesn't allow to use third part libraries. This has to be made from scratch
type: QuestionComment

http://stackoverflow.com/comment/139406232
type: Comment
score: 0
comment on: http://stackoverflow.com/a/79062015
type: AnswerComment
has text: Thank you. Regarding your suggestion, I should check the impact of gap-2, because spaxe-x-2 is already widely used though the whole application.

http://stackoverflow.com/comment/139145789
type: Comment
score: 0
has text: @NijatMursali Just a heads up for future reference—the order of answers on a page is not fixed. So it's best to link to another answer instead of saying "Above solution..." etc.—since it might actually be below for some users.
comment on: http://stackoverflow.com/a/78915335
type: AnswerComment

http://stackoverflow.com/comment/139275072
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78989831
has text: @AHaworth When I selected the label associated to the checkbox, therefore marking the checkbox as checked, the ul would not translate at all. When I changed the file name from navbar.module.scss to navbar.scss it then worked. So essentially, I'm only addressing the last CSS selection in the bottom of the media query #check:checked~ul{}. No code change was made, just changing the file from a module to a non-module. My question is why is this the case that just changing the file from a module to a non module made it work?
type: Comment

http://stackoverflow.com/a/78939881
upvote count: 1
answers question: http://stackoverflow.com/q/78939802
accepted answer of: http://stackoverflow.com/q/78939802
has body: Add a bottom padding. It won't affect the layout since you are dealing with an inline element a { -webkit-box-decoration-break: clone; box-decoration-break: clone; text-decoration: underline; text-underline-offset: 5px; padding-bottom: 3px; background: linear-gradient(#000 0 0) left bottom no-repeat; background-size: 0 1px; } a:hover { text-decoration: none; background-size: 100% 1px; transition: all 0.8s; } body { line-height: 1.5; } Bacon ipsum dolor amet picanha pork leberkas tail pig capicola. Fatback bacon rump biltong pastrami meatball cow. Meatloaf venison doner, flank swine pig beef bresaola corned beef capicola tri-tip bacon. Tri-tip rump ham short loin. Prosciutto porchetta corned beef rump. Pork chislic tri-tip short loin landjaeger andouille alcatra jerky sausage turkey. Chuck pastrami t-bone boudin doner pancetta pork chop flank pork shank spare ribs drumstick. Hover this link Andouille pork t-bone beef pig burgdoggen jowl. Shank short loin landjaeger rump alcatra pork belly jerky hamburger. Pig cupim tongue meatball hamburger fatback flank prosciutto pork belly shank.Chuck bresaola buffalo, short loin cow tongue tenderloin landjaeger beef cupim boudin shankle chislic t-bone. Sausage tenderloin hamburger leberkas kielbasa doner corned beef frankfurter tri-tip venison pastrami burgdoggen shankle. Kielbasa pancetta chicken strip steak. Cow bresaola biltong, boudin frankfurter filet mignon chislic andouille ham pork belly pastrami kevin. Biltong alcatra venison burgdoggen landjaeger, ball tip kielbasa prosciutto boudin tri-tip sirloin ribeye. Jowl buffalo pork belly sirloin cow porchetta. Salami prosciutto chuck doner swine buffalo beef andouille hamburger flank turkey short loin pork chop. Leberkas boudin ribeye chicken. Ball tip pancetta pork loin hamburger flank corned beef tongue meatloaf alcatra doner t-bone biltong buffalo rump. Sausage shankle beef beef ribs. T-bone ham hock rump venison swine sausage.
score: 1
has comment: http://stackoverflow.com/comment/139182461
type: AcceptedAnswer
type: Answer
downvote count: 0

http://stackoverflow.com/a/79043484
has comment: http://stackoverflow.com/comment/139372991
has body: See https://developer.mozilla.org/en-US/docs/Web/CSS/important. In short, use it immediately prior to any semicolon in the style attribute values to place precedence on that particular rule. It cannot be applied globally or to groups of rules. Note that your style rules don't always have optional trailing semicolons, so you'd use !important right before the closing quotation mark, as: style="font-family: 'Trebuchet MS', ..., sans-serif !important"
answers question: http://stackoverflow.com/q/79043462
type: Answer
score: 0
has comment: http://stackoverflow.com/comment/139373108

http://stackoverflow.com/comment/139372271
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/79040293
has text: Thank you. I was stuck with this problem for two days but finally solved it. And you're correct; it was indeed the actual problem. So what really was happening was that when the webpage was loaded, the 3rd image + 1st dot was shown by default. After 5 seconds, the 1st image + 1st dot was shown, which made it seem like the image was moving, but the dot was not.
type: Comment

blazor
tags question: http://stackoverflow.com/q/79052029
tag name: blazor
tags question: http://stackoverflow.com/q/78989496
tags question: http://stackoverflow.com/q/79026380
type: Tag
tags question: http://stackoverflow.com/q/79018918
tags question: http://stackoverflow.com/q/79066620
tags question: http://stackoverflow.com/q/79052687
tags question: http://stackoverflow.com/q/79173982
tags question: http://stackoverflow.com/q/79135033
tags question: http://stackoverflow.com/q/79227198
tags question: http://stackoverflow.com/q/79211743
tags question: http://stackoverflow.com/q/79171401
tags question: http://stackoverflow.com/q/79186768
tags question: http://stackoverflow.com/q/79116921
tags question: http://stackoverflow.com/q/79163405
tags question: http://stackoverflow.com/q/79134680
tags question: http://stackoverflow.com/q/79131219
tags question: http://stackoverflow.com/q/79114153
tags question: http://stackoverflow.com/q/79205940
tags question: http://stackoverflow.com/q/79094021
tags question: http://stackoverflow.com/q/79121410
tags question: http://stackoverflow.com/q/79245111
tags question: http://stackoverflow.com/q/79344069
tags question: http://stackoverflow.com/q/79312743
tags question: http://stackoverflow.com/q/79356633
tags question: http://stackoverflow.com/q/79390317
tags question: http://stackoverflow.com/q/79248212
tags question: http://stackoverflow.com/q/79245215
tags question: http://stackoverflow.com/q/79315896
tags question: http://stackoverflow.com/q/79395143
tags question: http://stackoverflow.com/q/79501873
tags question: http://stackoverflow.com/q/79500322
tags question: http://stackoverflow.com/q/79482611
tags question: http://stackoverflow.com/q/79473128
tags question: http://stackoverflow.com/q/79503152
tags question: http://stackoverflow.com/q/79423252

http://stackoverflow.com/comment/139366200
has text: @Paulie_D Okay, I get it. I didn't use the built-in snippet because there was no way to add scss code.
type: Comment
comment on: http://stackoverflow.com/q/79039117
score: 0
type: QuestionComment

http://stackoverflow.com/a/78963185
answers question: http://stackoverflow.com/q/78958654
upvote count: 2
has body: You can "smooth" the gradient: .shape { width: 50px; height: 50px; background: #f00; mask-image: radial-gradient( circle 100px at 0 0, transparent 0, transparent 50px, black 51px, black 21px); }
downvote count: 0
type: Answer
score: 2

http://stackoverflow.com/comment/139195023
comment on: http://stackoverflow.com/q/78940358
type: QuestionComment
type: Comment
has text: Reported bug here: https://bugs.webkit.org/show_bug.cgi?id=279105 Thanks !!
score: 0

http://stackoverflow.com/comment/139203010
type: Comment
has text: Can you create a sandbox that will help us reproduce it?
type: QuestionComment
comment on: http://stackoverflow.com/q/78951136
score: 1

http://stackoverflow.com/comment/139137331
type: QuestionComment
comment on: http://stackoverflow.com/q/78915026
score: 1
has text: @SyndRain Could you please share a modified codepen which works for you? I just tried again and I have only the column sticky, the header is just scrolled away to the top: https://codepen.io/shau-kote/pen/VwJdMjg
type: Comment

http://stackoverflow.com/a/78906107
type: AcceptedAnswer
type: Answer
score: 0
has comment: http://stackoverflow.com/comment/139120325
has body: HTML structure is very important, and the way you have it right now makes it a little bit complicated to do what you're wanting. I would structure my HTML more like in the following example. html, body { margin: 0; padding: 0; } .startup-screen { display: flex; justify-content: center; align-items: start; width: 100vw; min-height: 100vh; background: black; } .startup-screen__eclipse-wrapper { position: relative; border: 2px solid red; width: 40%; aspect-ratio: 1; } .startup-screen__eclipse-image { width: 100%; height: 100%; object-fit: cover; object-position: center; mix-blend-mode: hard-light; } .startup-screen__eclipse-overlay { position: absolute; top: 47%; left: 47%; width: 52%; aspect-ratio: 1; transform: translate(-50%, -50%); box-shadow: 17px 17px 18px rgba(255, 255, 255, 1), 5px 5px 5px rgb(255, 213, 0), 6px 6px 6px rgb(66, 230, 255), 50px 50px 100px rgb(230, 207, 255); border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; } &lt;div class="startup-screen" id="startupScreen"&gt; &lt;div class="startup-screen__eclipse-wrapper"&gt; &lt;img src="https://i.sstatic.net/6OwwlZBM.png" class="startup-screen__eclipse-image"&gt; &lt;div class="startup-screen__eclipse-overlay"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; I added a wrapper for both the image and the custom overlay, and then placed the image and overlay as sibling elements inside. That way I can size and position both precisely without worrying about it messing up child elements.
has comment: http://stackoverflow.com/comment/139121042
answers question: http://stackoverflow.com/q/78904561
has comment: http://stackoverflow.com/comment/139120409
accepted answer of: http://stackoverflow.com/q/78904561

http://stackoverflow.com/comment/139493670
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/79036586
has text: Using Chrome I do not see a shift, just the border/padding change in the same location

http://stackoverflow.com/comment/139337551
comment on: http://stackoverflow.com/q/79021330
type: Comment
score: 0
type: QuestionComment
has text: @AHaworth "Do you have to have the video in an iframe as opposed to played directly" the video is being hosted on bunny.net while I believe they offer direct access to video (without iframe) we need DRM functionality. With Bunny.net it is built into the iframe. We don't want to roll out our own DRM solution.

http://stackoverflow.com/a/79001016
score: 0
answers question: http://stackoverflow.com/q/78976328
has body: Okay, I've got an answer from my colleague... This is really simple one which doesn't have to be related to tailwind css or NextJS. The issue occurred because of a scroll bar which appeared on cv page for its lengthy content. The solution I am suggested is to force all pages to have a scroll bar, which normally wouldn't be a problem due to consistency in lengthy contents over all pages.
accepted answer of: http://stackoverflow.com/q/78976328
type: AcceptedAnswer
type: Answer

http://stackoverflow.com/a/78905851
type: Answer
score: 0
has body: use instead of also make sure your table tag should look like this if it is still not working then add this style to global css file thead { display: table-header-group; height: 43px } or you can add Safari specific style @supports (-webkit-appearance: none) { thead { height: 43px } }
answers question: http://stackoverflow.com/q/78905381

http://stackoverflow.com/comment/139382374
score: 1
has text: Here are a few of my answers where I am doing some matrix calculation, it may help you better understand: (1) https://stackoverflow.com/a/53672795/8620333 (2) https://stackoverflow.com/a/64962024/8620333 (3) https://stackoverflow.com/a/65161832/8620333
type: Comment
comment on: http://stackoverflow.com/q/79048247
type: QuestionComment

http://stackoverflow.com/a/78939027
type: Answer
answers question: http://stackoverflow.com/q/78938279
has body: You should remove the transform property from you title::before because when you add it the background image starts behaving as if it is attached to the transformed element rather than the viewport, breaking the parallax effect. Hope that helps. .t1.title::before { background-image: url(https://images.unsplash.com/photo-1659691273337-99bd8d0630fc?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MjUyMTU4MzJ8&ixlib=rb-4.0.3&q=85); } .t1.color { background-color: #00ff00; } .t2.title::before { background-image: url(https://images.unsplash.com/photo-1722325009084-6bfc230f0860?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MjUyMTU4MzJ8&ixlib=rb-4.0.3&q=85); } .t2.color { background-color: #ff0000; } .t3.title::before { background-image: url(https://images.unsplash.com/photo-1659691273337-99bd8d0630fc?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MjUyMTU4MzJ8&ixlib=rb-4.0.3&q=85); } .t3.color { background-color: #0000ff; } .t4.title::before { background-image: url(https://images.unsplash.com/photo-1722325009084-6bfc230f0860?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MjUyMTU4MzJ8&ixlib=rb-4.0.3&q=85); } @font-face { font-family: TT-Drugs; src: url(/static/font/TT\ Drugs\ Regular.otf); } * { box-sizing: border-box; text-decoration: none; font-family: "TT-Drugs"; } body, html { margin: 0; padding: 0; } body { top: 0; min-height: 100lvh; min-width: 100lvw; } #navbar { z-index: 5; position: fixed; top: 0; width: 100%; display: flex; height: 5lvh; justify-content: space-around; align-items: center; } #navbar a { text-align: center; position: relative; white-space: nowrap; height: 100%; display: grid; align-content: center; flex-grow: 1; } .title { width: 100%; overflow: hidden; position: relative; display: flex; justify-content: center; align-items: center; height: 100lvh; transform-style: preserve-3d; z-index: -1; } .title::before { content: ""; position: absolute; height…
score: 0

http://stackoverflow.com/a/78916496
type: Answer
answers question: http://stackoverflow.com/q/78914182
score: 0
has body: Here I used your initial CSS and HTML as a starting point, trimmed CSS and HTML to the minimal necessary. All you need to add then is a CSS @property of &lt;percentage&gt; (or &lt;number&gt;) with an initial value of 0% that animates to any end-value stored inside an element's style=&quot;--data-bar:N%;&quot; attribute. PS: you don't need an entire jQuery library in order to assign classes to elements, and also you don't need the wrapping .icon element parent document.querySelectorAll(".bar").forEach(el =&gt; el.classList.add("animate")); @property --stat-bar { syntax: '&lt;percentage&gt;'; inherits: true; initial-value: 0%; } .bar { display: inline-flex; position: relative; height: 150px; aspect-ratio: 1; inset: 0; mask: radial-gradient(#0000 32%, #000 calc(32% + 1px)); /* Hole */ border-radius: 50%; &amp;::before { content: ""; position: absolute; inset: 0; background: conic-gradient(#00a451 var(--stat-bar), #e1e1e1 0%); } &amp;.animate::before { animation: statBar 1s forwards; } } @keyframes statBar { from { --stat-bar: 0%; } } &lt;div class="bar" style="--stat-bar:75%;"&gt;&lt;/div&gt; &lt;div class="bar" style="--stat-bar:25%;"&gt;&lt;/div&gt;

http://stackoverflow.com/comment/139336292
type: QuestionComment
comment on: http://stackoverflow.com/q/79021330
type: Comment
score: 0
has text: @AHaworth Your observation seems correct "the error in the console that seems most relevant is the one saying that can't play the video because the user has not interacted.." I have made a similar observation myself: If I remove `iframe { display: none; }` & the video player loads alongside the audio player, the audio player has NO effect on the video player. However, if I click play on the **video** player and then **hide it** using CSS I am now able to **fully control** the video player through the audio player.. So it seems the right approach is to force "interactivity" but how?

events
tags question: http://stackoverflow.com/q/78906838
type: Tag
tag name: events
tags question: http://stackoverflow.com/q/79298906
tags question: http://stackoverflow.com/q/79309541

http://stackoverflow.com/comment/139243809
has text: Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer).
comment on: http://stackoverflow.com/a/78960583
type: Comment
score: 0
type: AnswerComment

http://stackoverflow.com/comment/139391786
type: Comment
score: 0
comment on: http://stackoverflow.com/a/79051668
type: AnswerComment
has text: I have corrected the issue the issue was not because of outside elements but it was because of img was under them. I have added a snippet

http://stackoverflow.com/comment/139240921
type: Comment
has text: Great edit! With your current code, `.draw-area` and `.result` are grouped together and that group is horizontally centered. If I understand correctly, you want instead for `.draw-area` to be horizontally centered, and for `.result` to be in the white-space off to the right? If so, @Paulie_D 's answer might be a good fit.
score: 0
comment on: http://stackoverflow.com/q/78970645
type: QuestionComment

http://stackoverflow.com/comment/139398206
comment on: http://stackoverflow.com/q/79057813
type: Comment
has text: Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/) using the `<>` icon. See [**How to create a Minimal, Reproducible Example**](http://stackoverflow.com/help/reprex)
type: QuestionComment
score: 1

http://stackoverflow.com/q/79049832
has answer: http://stackoverflow.com/a/79049956
score: 0
type: UnansweredQuestion
has title: Grid displays content as rows and not columns
has body: I have a very simple index.tsx file which should render a grid with several columns and rows. I am taking the example code as is from: https://v6.mantine.dev/core/simple-grid/ This is how it should look like And this is how my webpage renders: The source code is: import React from 'react'; import ReactDOM from 'react-dom/client'; import { MantineProvider, SimpleGrid } from '@mantine/core'; const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement ); root.render( <React.StrictMode> 1 2 3 4 5 6 </React.StrictMode> ); Things that I've tried: Initially the UI was in several objects; I removed all and added it to the top-most layer, without file dependencies. Still same result Removed all CSS just in case something was causing it. Still same results. Changed from "div" to other components such as "p" or "Card" components, with same result. My feeling is that there must be something forcing the divs to take 100% of the width causing the Grid not to be able to place several divs next to each other, but I don't know what else to try. Any tip would be appreciated.
tagged with: http://stackoverflow.com/tag/html
type: Question
answer count: 1
tagged with: typescript
tagged with: mantine
has comment: http://stackoverflow.com/comment/139384192
tagged with: reactjs
tagged with: css

http://stackoverflow.com/comment/139323539
has text: My bad, I'm going to upload it too!
type: QuestionComment
comment on: http://stackoverflow.com/q/79013297
type: Comment
score: 0

http://stackoverflow.com/comment/139317705
comment on: http://stackoverflow.com/q/79013255
type: Comment
score: 0
type: QuestionComment
has text: @DiegoD Thank you for the detailed resonse! I did try to use it with the "Minimum and maximum dates" but as you said it will not work on the two month together as one. like it will not marked the selected date-range with this option. I'm not sure this libary support it at this time :/

http://stackoverflow.com/a/78959685
type: AcceptedAnswer
answers question: http://stackoverflow.com/q/78959643
has comment: http://stackoverflow.com/comment/139219077
has comment: http://stackoverflow.com/comment/139219052
downvote count: 0
accepted answer of: http://stackoverflow.com/q/78959643
type: Answer
upvote count: 1
score: 1
has body: Your question is little bit confusing, but is this what you wanted?: HTML: &lt;button&gt; &lt;img src=&quot;./images/iconok.png&quot; alt=&quot;Submit&quot; /&gt; &lt;label class=&quot;btn-label&quot;&gt;&amp;nbsp;Submit&lt;/label&gt; &lt;/button&gt; CSS: .btn-label { display: none; } button:hover .btn-label { display: inline-block; }
has comment: http://stackoverflow.com/comment/139219047

http://stackoverflow.com/comment/139285491
has text: You need to decide which part of the image (the part needs to be a square) is to be in the circle.
type: Comment
comment on: http://stackoverflow.com/q/78995721
score: 0
type: QuestionComment

http://stackoverflow.com/comment/139147340
type: QuestionComment
has text: remove `margin-bottom` of `label.form-label`
comment on: http://stackoverflow.com/q/78920900
type: Comment
score: 0

http://stackoverflow.com/a/79006973
has comment: http://stackoverflow.com/comment/139305769
has comment: http://stackoverflow.com/comment/139306349
type: AcceptedAnswer
has comment: http://stackoverflow.com/comment/139305732
type: Answer
score: 2
downvote count: 0
has comment: http://stackoverflow.com/comment/139306296
has comment: http://stackoverflow.com/comment/139305629
has body: Your first steps are to use the browser's development console to see what values are actually produced here: if (a.getMonth() + "-" + a.getDay() == specifiedDate) { For example: const a = new Date(); console.log(a.getMonth()); console.log(a.getDay()); Are those values what you expect? Currently today the values are 8 and 5. Combined into a string in the format you're using that would be "8-5". Which simply doesn't match any of the HTML elements you're using. Your next step is to look at documentation for these functions if the results are unexpected. For getMonth we learn that the values are 0-based. So September is 8. We'd need to either add 1 to the result or subtract 1 from the values in the data. For getDay we learn that it returns the current day of the week, not the current day of the month. For that we'd need to use getDate instead. Putting these things together, we can correct the logic: $(function() { var a = new Date(); $(".grid-item").each(function() { var specifiedDate = $(this).data('date'); if ((a.getMonth() + 1) + "-" + a.getDate() == specifiedDate) { $(this).addClass('today'); } }); }); .grid-item { height: 130px; width: 130px; float: left; background: red; margin: 10px; } .today { background: yellow; border: red 1px solid; } Observe that the leading "0" has been removed from the months in the HTML, we're adding 1 to getMonth(), and we're using getDate(). Though it's of course also worth noting that as another user points out the loop isn't even necessary. Additional improvements could also involve using template literals instead of concatenating strings. For example: $(function() { var a = new Date(); $(`div.grid-item[data-date="${(a.getMonth() + 1)}-${a.getDate()}"]`).addClass('today'); }); .grid-item { height: 130px; width: 130px; float: left; background: red; margin: 10px; } .today { background: yellow; border: red 1px solid; }
has comment: http://stackoverflow.com/comment/139305810
answers question: http://stackoverflow.com/q/79006902
has comment: http://stackoverflow.com/comment/139306206
accepted answer of: http://stackoverflow.com/q/79006902
has comment: http://stackoverflow.com/comment/139306100
upvote count: 2

ios
tags question: http://stackoverflow.com/q/79033570
tags question: http://stackoverflow.com/q/78994346
tag name: ios
tags question: http://stackoverflow.com/q/78969855
tags question: http://stackoverflow.com/q/78949483
tags question: http://stackoverflow.com/q/78968063
tags question: http://stackoverflow.com/q/78994787
tags question: http://stackoverflow.com/q/79032861
type: Tag
tags question: http://stackoverflow.com/q/79124924
tags question: http://stackoverflow.com/q/79182907
tags question: http://stackoverflow.com/q/79122000
tags question: http://stackoverflow.com/q/79080689
tags question: http://stackoverflow.com/q/79168311
tags question: http://stackoverflow.com/q/79306655
tags question: http://stackoverflow.com/q/79289665
tags question: http://stackoverflow.com/q/79249704
tags question: http://stackoverflow.com/q/79395975
tags question: http://stackoverflow.com/q/79318160
tags question: http://stackoverflow.com/q/79252565
tags question: http://stackoverflow.com/q/79368243
tags question: http://stackoverflow.com/q/79281334
tags question: http://stackoverflow.com/q/79471491
tags question: http://stackoverflow.com/q/79482613
tags question: http://stackoverflow.com/q/79420251
tags question: http://stackoverflow.com/q/79503885
tags question: http://stackoverflow.com/q/79420641
tags question: http://stackoverflow.com/q/79425976

http://stackoverflow.com/comment/139154971
type: QuestionComment
type: Comment
has text: I've checked my code a few times and I don't see any duplicate IDs. I've also tried my best to include a barebones CodePen that shows only one product and included the HTML above.
score: 0
comment on: http://stackoverflow.com/q/78921718

http://stackoverflow.com/comment/139135728
type: QuestionComment
comment on: http://stackoverflow.com/q/78914830
score: 1
has text: The border needs a lesser opacity than the background
type: Comment

http://stackoverflow.com/comment/139145137
score: 1
type: Comment
type: QuestionComment
comment on: http://stackoverflow.com/q/78919468
has text: @sofiyullahiOlamilekanJ. `g-0` will be better since it preserves the ability of using margin.

http://stackoverflow.com/a/79064207
upvote count: 1
score: 1
answers question: http://stackoverflow.com/q/79064146
type: AcceptedAnswer
accepted answer of: http://stackoverflow.com/q/79064146
type: Answer
has body: Yes it is convertible. The css url function expects a absolute URL, a relative URL, a blob URL, or a data URL. In your example the css is using a Data URL, URLs prefixed with the data: scheme, allow content creators to embed small files inline in documents.. We can surely build a data URL from that svg by following the expected syntax. Note: the svg must contain xmlns="http://www.w3.org/2000/svg" data:[<mediatype>][;encoding], mediatype for svg is image/svg+xml. from Common MIME types encoding can be omitted but let's use charset=utf8 data has to be encoded. The easiest way will be to use encodeURIComponent("<svg...") Putting all together: let mySvg = ` <path d="M575.8 255.5c0 18-15 32.1-32 32.1l-32 0 .7 160.2c0 2.7-.2 5.4-.5 8.1l0 16.2c0 22.1-17.9 40-40 40l-16 0c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1L416 512l-24 0c-22.1 0-40-17.9-40-40l0-24 0-64c0-17.7-14.3-32-32-32l-64 0c-17.7 0-32 14.3-32 32l0 64 0 24c0 22.1-17.9 40-40 40l-24 0-31.9 0c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2l-16 0c-22.1 0-40-17.9-40-40l0-112c0-.9 0-1.9 .1-2.8l0-69.7-32 0c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z"/> `; // ensure xmlns attr if (!mySvg.includes('xmlns="http://www.w3.org/2000/svg"')) { mySvg = mySvg.replace('<svg', '<svg xmlns="http://www.w3.org/2000/svg"'); } const encoding = "charset=utf8"; const mediaType = "image/svg+xml"; const data = encodeURIComponent(mySvg); const dataURL = `data:${mediaType};${encoding},${data}`; const el = document.getElementById("my"); el.style.background = `url(${dataURL})`; #my { width: 50px; height: 50px; }
downvote count: 0

http://stackoverflow.com/comment/139239706
comment on: http://stackoverflow.com/q/78970645
score: 0
type: Comment
has text: @MrZane2u I added some more context, hope that helps.
type: QuestionComment

http://stackoverflow.com/comment/139224424
type: QuestionComment
type: Comment
has text: Why constrain the copied images to just 3 rather than all of them, and then used a CSS animation to translateX by just -50% of the total width. [I can't see that the JS doing the animation is adding anything - have I missed something?]
score: 0
comment on: http://stackoverflow.com/q/78961161

http://stackoverflow.com/q/79042496
has title: sub-menu full width on twenty twenty four wordpress theme
tagged with: css
type: UnansweredQuestion
type: Question
has body: I have an issue with twenty twenty four theme. I have a submenu "Shop", where so far I have a block that arrears when you click the arrow. I would like this submenu to appear full-width, under my header, but I cannot figure out how to fix that in CSS. Here is the website URL : https://staging2.ateliermauny.fr/ website screenshot I tried different fixes changing float, position, display:block, width:100% etc..., but it never moves
has comment: http://stackoverflow.com/comment/139371249
answer count: 1
has answer: http://stackoverflow.com/a/79043479
tagged with: wordpress
score: 0

http://stackoverflow.com/a/78986055
has body: Here you go: let DLC = document.getElementById("DLC"); for (let choice of document.querySelectorAll("[name=choice]")) { choice.addEventListener("change", function() { DLC.classList[((choice.id === "yes") === choice.checked) ? "remove" : "add"]("invisible"); }); } .invisible { display: none; } Do you own the DLC? `(select one) Yes No 1 2 3 4 Explanation: Javascript we get the elements whose name is choice we loop the result set iterating it with a variable called choice we get the select whose appearance we want to toggle we check whether the id is yes and is checked or is not yes and is unchecked, in which case we remove the invisible class showing it, or adding the invisible class, hiding it we have a change event for both checkboxes CSS we have an invisible class to easily hide elements by adding this class or showing elements by removing it HTML Created a dummy structure for this purpose In CSS you can create a next sibling selector rule with pseudo-selectors, but unless you are okay by holding the click button, I advise against it in this case.
score: 0
answers question: http://stackoverflow.com/q/78985952
type: Answer

http://stackoverflow.com/comment/139288783
type: Comment
score: 3
type: QuestionComment
has text: clip-path is CSS
comment on: http://stackoverflow.com/q/78997824

http://stackoverflow.com/q/78986891
tagged with: css
has title: How to get "Results per Row" (from a 'clicked entry' off a "dropdown menu") to show up correctly?
tagged with: menu
favorite count: 0
upvote count: 0
has answer: http://stackoverflow.com/a/78987017
type: Question
score: -3
has comment: http://stackoverflow.com/comment/139268581
answer count: 1
has body: Coding Hobbyist here trying to figure out how to: "Create a Digital Archive." more specifically: A.) "when someone stumbles upon this (HTML/CSS/JavaScript only) webpage, they'll see a list of items (that, when their mouse hovers over such an item, such an item zooms in). B.) The list of items they'll see, will be either: 3 entries per row, 5 entries per row, or 10 entries per row. (almost like, you're looking through someone's archive of artwork. (a random passerbyer, can click from the dropdown menu, if they wanna see "3,5,or 10" images at a time (that's the code we're working on together today.). C.) I have coded together something that shows 3 entries per row. C.1) I'm stuck. i do not know what's the best method/code/ability to move forward. Like: C.1.1) If a random person comes to my webpage, and wants to see "5 entries per row." How do i get "image number 4" to show up after the third entry? but then BOUNCE BACK TO THE NEXT ROW, if someone chooses "theyd rather see 3 entries per row." Here is my provided code before i continue further: Digital Archive 3-5-10 Images Per Row Items Per Page: 3,5 or 10? How many Results would you like? 3 5 10 Upload Image Upload Image Upload Image Upload Image Upload Image Upload Image Upload Image Upload Image Upload Image Thank you for checking this code out! C.1.2.) Like, what i tried was plugging in the "fourth and fifth image" (and then the 6th to 10th) into the first row, (and such equivalents in the second two rows) but that didnt work. when someone would change from 5 rows back to 3, or 10 rows back to 3, those "IDs, that represented other images, would disappear from view, and only the next visible set of rows would show their IDs". D.) Which leads to my question, (for I think I'm seeing this too much from one point of view and not wanting to abandon it cause I worked on it for a hot minute). "How do i properly fix/upgrade this so that when a random passerbyer sees this webpage, they can choose if they want to see 3, 5, 10…
downvote count: 3
tagged with: http://stackoverflow.com/tag/html
type: AnsweredQuestion
tagged with: javascript
accepted answer: http://stackoverflow.com/a/78987017
tagged with: drop-down-menu

http://stackoverflow.com/comment/139182652
type: AnswerComment
has text: This is other code which is not posted in the question. @Meet
comment on: http://stackoverflow.com/a/78939581
score: 1
type: Comment

http://stackoverflow.com/comment/139160335
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78922037
has text: Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer).

http://stackoverflow.com/comment/139313588
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/79011275
has text: You are inconsistent in your usage of the closing slash on your tags. Not a fix but you should remove them because no HTML specification requires them and they do nothing and browsers ignore them.
type: Comment

http://stackoverflow.com/a/78967078
has comment: http://stackoverflow.com/comment/139247554
has comment: http://stackoverflow.com/comment/139243018
has comment: http://stackoverflow.com/comment/139235370
score: 1
has comment: http://stackoverflow.com/comment/139249213
type: AcceptedAnswer
has body: You can use an event listener on the range and then use the ranges value as an index to query the class .value's children, then set the tooltip text after some basic formatting with in a callback method for a change eventListener. To lock in the tooltip, you can use a helper function to track the step of the range and calculate the percentage using the inputs max attribute. Then change the left position depending on step calculated against 100% of the ranges max. See comments in the snippet below and let me know if this is not what you were looking for. // get elements and assign variables const values = document.querySelector('.values'); // query the child divs in the class 'values' const valueDivs = values.querySelectorAll('div'); // get the tooltip const tooltip = document.querySelector('.tooltip'); // get the input const inputRange = document.querySelector('.input-range'); // added a method to calculate the intrest on princliple amount // pass in interest and principle as params, // make sure to parse strings as Number() const interest = 4.25; const calculation = (p, i) => { return Number(p.replace(/[^0-9.]+/g, '')) * (Number(i)/100); } // run same code in method initially to get proper calculation of interest on principle to display in tooltip const num = calculation(valueDivs[inputRange.value].textContent, interest) // format using Number() and .toLocalString() and assign to tooltip textContent tooltip.textContent = `$${Number(num).toLocaleString()}`; // move tooltip to proper step on load setToolTip(inputRange, tooltip); // callback method to assign and format tooltip, pass in event const changeValue = e => { // get the number using the returned value from the slider input // then query the values child element using the ranges index // format the textContent and replace all but numbers (remove parenthesis) const num = calculation(valueDivs[e.target.value].textContent, interest); // format using Number() and .toLocalString() and assign to tooltip textContent …
downvote count: 0
answers question: http://stackoverflow.com/q/78966191
type: Answer
has comment: http://stackoverflow.com/comment/139247676
upvote count: 1
accepted answer of: http://stackoverflow.com/q/78966191
has comment: http://stackoverflow.com/comment/139239696

http://stackoverflow.com/a/78994858
has comment: http://stackoverflow.com/comment/139284716
downvote count: 1
type: Answer
has comment: http://stackoverflow.com/comment/139285427
upvote count: 0
score: -1
has comment: http://stackoverflow.com/comment/139285411
has comment: http://stackoverflow.com/comment/139285438
answers question: http://stackoverflow.com/q/78991428
has body: Simple CSS Approach This might not be the answer you are looking for if you DO NEED to create it using JavaScript and GSAP. If not: usually, you can achieve that in a more simple way using CSS media queries. If you want the scroll to only happen when the device width &gt; 1200px I assume the overflow only exists from that point on, so this simple CSS would achieve what you are aiming for. .container { /*set containers width to match window/device width*/ width: 100%; /*initially hide horizontal overflow in case it exists,*/ /*since inherently do not want horizontal scrolling*/ overflow-x: hidden; } @media only screen and (min-width: 1200px){ /*if device's width is &gt;=1200px*/ .container { /*prevents line breaks -&gt; avoids wrapping*/ /*so that children do not move down*/ white-space: nowrap; overflow-x: scroll; /*activate scroll*/ } &lt;div class="container"&gt; &lt;div&gt; This is a child element &lt;/div&gt; &lt;/div&gt; I do not think you can resize the output window here so I made a jsFiddle so you can see it in action (I may be mistaken but just to be sure). There I used a Lorem Ipsum text just to emulate the overflow. Here I removed it to avoid unnecessary scrolling in my answer, since resizing would not be possible anyways. Code Notes With this code the scrollbar will appear as soon as the width hits 1200px. If you want it to happen specifically only when &gt;1200px, than just change the 1200px in the media query for 1201px. Why CSS over JavaScript? It avoids the overhead that JavaScript solutions might introduce for handling scrolling behavior, especially on larger sites. Which leads to a better performance. Learn More You can learn more about the overflow-x property in this mdn web doc. You can learn more about the white-space property in this mdn web doc. You can learn more about media queries in this w3Schools doc and in this mdn web doc.

http://stackoverflow.com/comment/139274393
type: Comment
type: QuestionComment
has text: Could you share a simple snippet with minimal code on stackblitz, so that the issue is reproducible and expected output from the stackblitz you need. thanks!
comment on: http://stackoverflow.com/q/78989661
score: 1

http://stackoverflow.com/comment/139286925
type: QuestionComment
comment on: http://stackoverflow.com/q/78993853
has text: I would say that without CSS modules, it's the same rules as for vanilla CSS: it's your responsability to make sure your styles only target what you want. Use parents `id`/`class` and nesting.
type: Comment
score: 0

http://stackoverflow.com/comment/139164570
type: QuestionComment
score: 2
has text: I would start with layering `radial-gradient`s, rather than linear.
comment on: http://stackoverflow.com/q/78930122
type: Comment

http://stackoverflow.com/a/78954017
downvote count: 1
has body: You can even use the ::after property to achieve what you want, without any additional element. .buttonrot { padding: 50px; border-radius: 10px; animation: rotateinf 10s linear infinite; position: relative; display: inline-block; cursor: pointer; overflow: hidden; } .buttonrot::after { content: attr(data-text); display: inline-block; animation: rotateinf 10s linear reverse infinite; } @keyframes rotateinf { 100% { transform: rotate(360deg); } } &lt;button id="trns" class="buttonrot" onmousedown="redirect()" data-text="About Me"&gt;&lt;/button&gt;
upvote count: 0
score: -1
type: Answer
answers question: http://stackoverflow.com/q/78953791

margin
tags question: http://stackoverflow.com/q/78971885
type: Tag
tags question: http://stackoverflow.com/q/78933545
tags question: http://stackoverflow.com/q/78935425
tags question: http://stackoverflow.com/q/79066820
tag name: margin
tags question: http://stackoverflow.com/q/79153154
tags question: http://stackoverflow.com/q/79344301
tags question: http://stackoverflow.com/q/79455640
tags question: http://stackoverflow.com/q/79517440
tags question: http://stackoverflow.com/q/79442241
tags question: http://stackoverflow.com/q/79473809

http://stackoverflow.com/q/79058917
has body: I've created this form page which lets you search and insert elements into a database. It's simple, there are two buttons "ricerca" (search) and 'inserimento'(insert) each one opening a different 'bootstrap card'. Each card contains a form. I can't explain why, when I click on the insert button, all the elements move slightly to the left. Can you guess why? Benvenuto Ricerca Inserimento Postazione: Seleziona... Tutte Da: A: Cerca Postazione: Seleziona... Data: Ora: Tipo di verbale: Seleziona... Set: Seleziona... Flash: Seleziona... Protocollo: Scatti da: a: SCARICO DATI Data cartelle da: Data cartelle a: Numero Cartelle: Data Scarico: Ora Scarico: VERBALIZZANTI E NOTE Agente 1: Seleziona... Agente 2: Note: Inserisci By deleting some of the elements in the 'inserimento' card, the problem is solved, and the two cards remain alignet to the center. I can't explain why.
has answer: http://stackoverflow.com/a/79059508
tagged with: css
has comment: http://stackoverflow.com/comment/139400732
has title: Aligment problem after switching from one form 'card' to another
score: 0
accepted answer: http://stackoverflow.com/a/79059508
tagged with: http://stackoverflow.com/tag/html
type: Question
answer count: 1
has comment: http://stackoverflow.com/comment/139400184
type: AnsweredQuestion
has comment: http://stackoverflow.com/comment/139400177

http://stackoverflow.com/a/78986571
score: 0
answers question: http://stackoverflow.com/q/78982848
has body: This look similar. Update values and use it .text { font-size: 250px; font-weight: bold; color: #212423; /* Gradient text */ background: linear-gradient(to bottom, #212423, #0d0d0d); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; /* Inner shadow (mimicked using text-shadow) */ text-shadow: -4px 4px 8px rgba(0, 0, 0, 0.4), /* Inner shadow */ -1px 1px 2px rgba(255, 255, 255, 0.8); /* Drop shadow */ } 250
type: Answer

http://stackoverflow.com/a/78922166
has body: For the files which are inside pages folder, according to your folder structure, try to use ../ for all href. For example: href="../styles/global.css" Because just / may not accessing the file correctly.
type: Answer
score: 0
answers question: http://stackoverflow.com/q/78921004

http://stackoverflow.com/a/78912042
answers question: http://stackoverflow.com/q/78912015
type: Answer
has body: To make the Bootstrap grid fill the remaining height of the page: Set HTML and Body to Full Height: html, body { height: 100%; margin: 0; } Make Container Flex and Fill Height: #container { display: flex; flex-direction: column; height: 100%; } Make Grid Row Fill Remaining Space: ...
score: 0

http://stackoverflow.com/comment/139190437
type: QuestionComment
comment on: http://stackoverflow.com/q/78936069
has text: @AHaworth boiling that down any further (it already is a fraction for the original CSS) could lead to getting the correct answer on the wrong question.
type: Comment
score: 0

http://stackoverflow.com/comment/139306967
score: 1
comment on: http://stackoverflow.com/q/79007606
has text: note that your markup is invalid. `li`can only be a direct child element of an `ul`, `ol`, or `menu`. Besides that using radio buttons to hack labels as navigation elements is a real bad idea.
type: Comment
type: QuestionComment

http://stackoverflow.com/comment/139127675
score: 0
has text: `image-set` does not address your use case. But that shouldn't matter. You can use media queries to select a background image of a suitable size for the device.
type: QuestionComment
type: Comment
comment on: http://stackoverflow.com/q/78909799

http://stackoverflow.com/a/79006688
accepted answer of: http://stackoverflow.com/q/78931612
has body: In the useEffect hook, it will only run when the dependencies you passed are updated. Additionally, you can include pathname as a dependency to trigger the effect whenever the URL changes. For Example: import { useEffect } from 'react'; import { useLocation } from 'react-router-dom'; function MyComponent() { const { pathname } = useLocation(); useEffect(() =&gt; { console.log('Pathname changed to:', location.pathname); }, [pathname]); return ( {/* your content*/} ); } export default MyComponent;
answers question: http://stackoverflow.com/q/78931612
type: AcceptedAnswer
type: Answer
score: 0

http://stackoverflow.com/comment/139186653
comment on: http://stackoverflow.com/a/78942209
type: Comment
score: 0
type: AnswerComment
has text: Not correcting the `*` select all elements is a mistake in my eyes. There can be no good reason to set the background of all elements to black in the first place.

webpack
type: Tag
tags question: http://stackoverflow.com/q/78905228
tags question: http://stackoverflow.com/q/78971849
tags question: http://stackoverflow.com/q/79014373
tags question: http://stackoverflow.com/q/78903909
tags question: http://stackoverflow.com/q/78944756
tag name: webpack
tags question: http://stackoverflow.com/q/78905678
tags question: http://stackoverflow.com/q/79064314
tags question: http://stackoverflow.com/q/78915126
tags question: http://stackoverflow.com/q/79317205
tags question: http://stackoverflow.com/q/79288362
tags question: http://stackoverflow.com/q/79353507
tags question: http://stackoverflow.com/q/79403226
tags question: http://stackoverflow.com/q/79538929
tags question: http://stackoverflow.com/q/79522372
tags question: http://stackoverflow.com/q/79486451
tags question: http://stackoverflow.com/q/79495539
tags question: http://stackoverflow.com/q/79546772
tags question: http://stackoverflow.com/q/79462719

http://stackoverflow.com/comment/139369206
type: AnswerComment
comment on: http://stackoverflow.com/a/79037983
score: 1
has text: If you use **border-box** as your box-sizing, *it tells the browser to account for any border and padding in the values you specify for an element's width and height*, however if you use **content-box** *the width of any border or padding will be added to the final rendered width*. See the following MDN article on [box-sizing](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing)
type: Comment

http://stackoverflow.com/q/78934678
tagged with: http://stackoverflow.com/tag/html
type: Question
answer count: 1
tagged with: tailwind-css
score: 0
has comment: http://stackoverflow.com/comment/139172690
has title: The justify-between tailwind is working on the other files, but it's not working on the file I am currently working on
tagged with: css
has body: This is the output that tailwind is giving me instead of: Here is the code block of the calendar style that I am currently working on. The code block in the &lt;!--The section is not working --&gt; is the thing that's not working. I tried using the developer console and I don't understand what's the thing I did wrong. &lt;!-- Calendar Section Start --&gt; &lt;section class=&quot;pt-24&quot;&gt; &lt;div class=&quot;flex&quot;&gt; &lt;div class=&quot;calendar-container mx-10 my-5 rounded-md border border-black py-10&quot; &gt; &lt;div class=&quot;appointment-counselor-container mx-5 flex justify-between&quot;&gt; &lt;div class=&quot;text-2xl font-semibold text-green-700&quot;&gt; &lt;h1&gt;Appointments&lt;/h1&gt; &lt;/div&gt; &lt;!-- Counselor toggle --&gt; &lt;div class=&quot;relative select-none&quot;&gt; &lt;!--The section is not working --&gt; &lt;div id=&quot;counselor-lists&quot; class=&quot;bg-berde flex w-full cursor-pointer items-center justify-between rounded px-10 py-1 text-white&quot; &gt; &lt;div class=&quot;my-auto&quot;&gt; &lt;h1 id=&quot;selected-counselor&quot;&gt;Counselor 1&lt;/h1&gt; &lt;/div&gt; &lt;div class=&quot;text-lg&quot;&gt; &lt;p&gt;&amp;#8744;&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id=&quot;dropdown-options&quot; class=&quot;absolute left-0 top-full mt-2 hidden w-full rounded border border-black bg-white&quot; &gt; &lt;div class=&quot;cursor-pointer px-4 py-2 hover:bg-green-400&quot; data-value=&quot;counselor1&quot; &gt; Counselor 1 &lt;/div&gt; &lt;div class=&quot;cursor-pointer px-4 py-2 hover:bg-green-400&quot; data-value=&quot;counselor2&quot; &gt; Counselor 2 &lt;/div&gt; &lt;div class=&quot;cursor-pointer px-4 py-2 hover:bg-green-400&quot; data-value=&quot;counselor3&quot; &gt; Counselor 3 &lt;/div&gt; &lt;div class=&quot;cursor-pointer px-4 py-2 hover:bg-green-400&quot; data-value=&quot;counselor4&quot; &gt; Counselor 4 &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- Counselor toggle end --&gt; &lt;/div&gt; &lt;div class=&qu…
has answer: http://stackoverflow.com/a/78934714
type: UnansweredQuestion

http://stackoverflow.com/a/78930960
type: Answer
score: 0
answers question: http://stackoverflow.com/q/78929444
has body: If you decide to follow David's suggestion, I recommend using CSS Grid for a more flexible and responsive layout. Below is an example of how you can implement a grid layout using CSS: .grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; } Example Demo (with your original code as CSS Grid) Item 1 Item 2 Item 3 Item 4 .grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 10px; max-width: 600px; margin: auto; } .grid-item { background: #333; color: white; padding: 10px; border-radius: 5px; text-align: center; }

http://stackoverflow.com/comment/139368409
type: AnswerComment
type: Comment
has text: Today I learned about the :empty CSS pseudo-class thanks to Sigurd!
score: 0
comment on: http://stackoverflow.com/a/79038610

http://stackoverflow.com/comment/139215221
type: Comment
score: 3
has text: Yes, you'll definitely need JavaScript. However unless someone is feeling overly generous, your question is too broad and doesn't show any effort from you to write the code to do what you described
type: QuestionComment
comment on: http://stackoverflow.com/q/78957954

http://stackoverflow.com/comment/139325948
type: Comment
score: 0
type: AnswerComment
has text: @overflowed-stacker oh, I get it now after your Q update. OK, in that case the above will not suit the exact needs. Secondly, design-wise, the proposed progress-bar design is odd at best, I would rather use a simpler, visually and UI/UX nicer solution over a 1px border that rounds at a specific narrow % with no actual purpose/meaning.
comment on: http://stackoverflow.com/a/79015918

http://stackoverflow.com/a/78955965
type: AcceptedAnswer
answers question: http://stackoverflow.com/q/78954084
type: Answer
has body: if there was a way to let deface show me the concrete pseudo HTML markup of an ERB file (...) That, in fact, wasn't so difficult: require 'deface' raw_erb = File.open(path_to_erb_template).read puts Deface::Parser.erb_markup!(raw_erb) Which produces... &lt;erb silent&gt; if provider_partial_exist?(@host.compute_resource, &amp;amp;#39;network&amp;amp;#39;) &lt;/erb&gt; &lt;erb silent&gt; hidden = f.object.virtual? ? &amp;amp;quot;hidden&amp;amp;quot; : &amp;amp;quot;&amp;amp;quot; &lt;/erb&gt; &lt;fieldset data-erb-class="compute_attributes &amp;lt;%= hidden %&amp;gt;"&gt; &lt;h3 class="col-md-offset-1"&gt; &lt;erb loud&gt; @host.compute_resource.provider_friendly_name &lt;/erb&gt; &lt;erb silent&gt; if f.object.compute_attributes[&amp;amp;quot;from_profile&amp;amp;quot;] &lt;/erb&gt; &lt;span class="profile"&gt;( &lt;erb loud&gt; _(&amp;amp;quot;from profile %s&amp;amp;quot;) % f.object.compute_attributes[&amp;amp;quot;from_profile&amp;amp;quot;] &lt;/erb&gt; )&lt;/span&gt; &lt;erb silent&gt; end &lt;/erb&gt; &lt;/h3&gt; &lt;erb silent&gt; new_vm = @vm ? @vm.persisted? : new_vm?(@host) &lt;/erb&gt; &lt;erb loud&gt; f.fields_for &amp;amp;#39;compute_attributes&amp;amp;#39;, OpenStruct.new(f.object.compute_attributes) do |f| &lt;/erb&gt; &lt;erb loud&gt; render provider_partial(@host.compute_resource, &amp;amp;#39;network&amp;amp;#39;), :f =&amp;amp;gt; f, :disabled =&amp;amp;gt; f.object.persisted?, :compute_resource =&amp;amp;gt; @host.compute_resource, :new_host =&amp;amp;gt; new_vm, :new_vm =&amp;amp;gt; new_vm &lt;/erb&gt; &lt;erb silent&gt; end &lt;/erb&gt; &lt;/fieldset&gt; &lt;erb silent&gt; end &lt;/erb&gt; On www.videlibri.de I could interactively test CSS selectors against that. The solution then was found quickly and is rather simple: :root:last-child [foreman@host ~]# foreman-rake deface:get_result[nic/_provider_specific_form] ---------------- Before ---------------- &lt;% if provider_partial_exist?(@host.compute_resource, 'network') %&gt; &lt;% hidden = …
accepted answer of: http://stackoverflow.com/q/78954084
score: 0

http://stackoverflow.com/comment/139274201
type: AnswerComment
comment on: http://stackoverflow.com/a/78989599
has text: I use chrome...
type: Comment
score: 0

http://stackoverflow.com/comment/139360686
type: QuestionComment
comment on: http://stackoverflow.com/q/79036823
score: 0
has text: @AHaworth I would want the color to stop at the same/similar value as width/percentage.
type: Comment

http://stackoverflow.com/a/78972122
answers question: http://stackoverflow.com/q/78971876
type: Answer
score: -1
has body: I want the text div to be centered but the text to be aligned left. This is exactly what happens in your snippet. No problem. The inner div (#introduction-child) is wider than its content. Instead it should be the width of the text (max-width 80vw). No, your snippet shows that the the inner div is the same width as the text. No problem. The font-size seems to be changing the font size without changing its containers width. I do not understand what you mean, and the font-size does not appear to change.
upvote count: 0
downvote count: 1

http://stackoverflow.com/a/79058076
downvote count: 0
answers question: http://stackoverflow.com/q/79058055
has comment: http://stackoverflow.com/comment/139399090
has body: One simple solution could be to add a filter to your h1 and a backdrop filter to your div, if you have some background-image or so. Then add content to the ::after pseudo element. document.querySelectorAll('#gridALBUM > div').forEach((D,_,A)=> { D.addEventListener('click', e=> { if (D.classList.toggle('span')) A.forEach(d =>{ if(d!=D) d.classList.remove('span') }); }) }) #gridALBUM { margin: 50px auto; max-width: 908px; display: grid; grid-gap: 0 4px; grid-template-columns: repeat(3, 300px); grid-auto-flow: dense; background-color: lightblue; } #gridALBUM > div { border : 1px solid black; display : flex; &:hover { backdrop-filter: blur(10px); h1 { filter: blur(10px); } &::after { content: 'Click for more info'; align-self: center; justify-self: center; } } } #gridALBUM > div:not(.span) > div { display : none; } #gridALBUM > div.span { grid-column : 1 / 4; background-color : #47479c; } 1 one 2 two 3 three 4 four 5 five 6 six 7 seven 8 eight 9 nine 10 ten If you want to have the possibility of maintaining text and image, you could use an img and a p tag inside your div. You can stack them on top of each other with display: grid and have them behave differently: body { display: grid; place-content: center; width: 100svw; height: 100svh; } .container { display: grid; place-content: center; overflow: hidden; >* { grid-column: 1; grid-row: 1; } &:hover { .image { filter: blur(20px); } .text { opacity: 1; z-index: 2; } } .text { align-self: center; justify-self: center; font-family: sans-serif; font-size: 2rem; font-weight: bold; opacity: 0; } } .image, .text { transition: all .2s ease-out; } Show this text
has comment: http://stackoverflow.com/comment/139399170
type: Answer
score: 3
upvote count: 3

http://stackoverflow.com/comment/139137340
has text: @SyndRain By "breaking the basic layout" I mean that I had to remove the `overflow-x: auto;` property and such a change causes the content above the table to also be scrollable when the table is too wide.
type: QuestionComment
type: Comment
comment on: http://stackoverflow.com/q/78915026
score: 1

import
type: Tag
tags question: http://stackoverflow.com/q/78917075
tag name: import
tags question: http://stackoverflow.com/q/79288362

http://stackoverflow.com/comment/139252497
comment on: http://stackoverflow.com/q/78976538
type: Comment
score: 0
has text: Regarding the requirements, I have already resolved them. What I don't understand now is why .Box is affected by fr twice and why .Shell is affected by fr. I originally thought that 0.5fr would make .Shell expand to 100px and .Box to 50px, but now it turns out that .Shell is 50px and .Box is 25px. When set to 0.1fr, .Shell is 10px and .Box is 1px. @AHaworth
type: QuestionComment

http://stackoverflow.com/a/78946594
has comment: http://stackoverflow.com/comment/139210129
has body: This article demonstrates a CSS method for switching the (text) color between black and white based on the (perceived) luminance of the background color. So it’s not exactly what you’re asking for, but it’s close. A simpler alternative you could consider is using a contrasting text-shadow to improve readability when the text and background colours are similar. :root { --clr-white-80: rgb(255 255 255 / 0.8); } body { background: lightsalmon; font-size: 2.5em; } p { color: peru; margin: 0; } .p2 { text-shadow: 0 0 5px var(--clr-white-80); } .p3 { text-shadow: 0 0 20px var(--clr-white-80); } .p4 { text-shadow: 2px 2px 0 var(--clr-white-80); } Is this readable? What about now? Or with a larger spread Or with an offset
upvote count: 2
answers question: http://stackoverflow.com/q/78946419
has comment: http://stackoverflow.com/comment/139194942
has comment: http://stackoverflow.com/comment/139194964
accepted answer of: http://stackoverflow.com/q/78946419
type: AcceptedAnswer
score: 2
downvote count: 0
type: Answer

http://stackoverflow.com/comment/139312696
comment on: http://stackoverflow.com/q/79010725
type: QuestionComment
has text: min-height: 50px; it worked
type: Comment
score: 0

http://stackoverflow.com/comment/139345830
has text: Thank you for the response. This pointed out to me that I forgot an important detail. I have since updated my question.
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/79028763

http://stackoverflow.com/comment/139520220
type: Comment
score: 0
has text: It's `encodeURIComponent`, not `encodeURI`: https://jsfiddle.net/rgy5w4n8/ The issue is the `#` character. Here I used it for a color, but it can also appear in local href.
type: AnswerComment
comment on: http://stackoverflow.com/a/79064223

http://stackoverflow.com/comment/139387714
has text: Thanks for the answer @khusbu-patel but that didn't work :/
comment on: http://stackoverflow.com/a/79051720
type: Comment
score: 0
type: AnswerComment

http://stackoverflow.com/comment/139130827
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78911856
type: QuestionComment
has text: What I understood from the sides is that for top and bottom maybe needs to be translateY because Y axis is for up and down? I think...

http://stackoverflow.com/comment/139337231
comment on: http://stackoverflow.com/q/79024254
type: Comment
has text: Maybe this article ["Pure CSS Horizontal Scrolling"](https://css-tricks.com/pure-css-horizontal-scrolling/) is what you're looking for
type: QuestionComment
score: 0

http://stackoverflow.com/comment/139417433
score: 0
type: Comment
comment on: http://stackoverflow.com/q/79068052
has text: I have trouble understanding, your question mixes the concepts of darkmode and color theme... To determine if a browser is in darkmode use : `window.matchMedia('(prefers-color-scheme: dark)').matches;`
type: QuestionComment

http://stackoverflow.com/a/78945424
downvote count: 0
type: Answer
upvote count: 1
answers question: http://stackoverflow.com/q/78945251
has body: When the LABEL is clicked, the first thing that happens is the label is sent a focus event. Since the label isn't focusable, the event is passed to the LI, and then to the UL, which since it has a tabindex becomes the focused element. This causes the label to be hidden so it does not receive the click event and the checkbox cannot receive the activation action. When the checkbox is clicked, it receives the focus, the UL doesn't. and the label is not hidden, so it receives the click event and the checkbox receives the activation action. You can verify this by giving the label a tabindex so that it can receive the focus. :root { --menu-padding:0.5em; --menu-checkmargin:0.5em; --menu-checksize:1em; } nav ul { position:absolute; white-space:nowrap; display:flex; width:fit-content; list-style-type:none; margin:0; padding:0; } nav ul > li:has(> a) { padding: 0; } nav ul > li:has(> a) > a { display: inline-block; padding: var(--menu-padding); } nav ul li:focus-within > ul { display: flex; } nav ul li:focus-within > ul:focus { height: 0 !important; width: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; content-visibility: hidden; } nav li { position: relative; align-items: left; display: flex; box-sizing: border-box; justify-content: space-between; line-height: 1; padding: var(--menu-padding); } ul.qm-tiled { position: relative; text-align: left; flex-direction: column; white-space-collapse: collapse; left: 0; } ul.qm-tiled > li:focus-within:has(ul) { flex-direction: column; justify-content: space-between; } ul.qm-tiled > li:has(> ul:focus) { flex-direction: row; } ul.qm-tiled > li { display: flex; } ul.qm-tiled > li > ul { bottom: calc(-1 * var(--menu-padding)); } ul.qm-tiled ul { position: relative; margin: 0 calc(-1 * var(--menu-padding)); width: auto; } ul.qm-tiled li:not(:has(ul)):hover:focus { visibility: hidden; } ul.qm-tiled:has(> li > label) > li:not(ul.qm-tiled:has(> li > label) > li:has(> label)) { padding-left: calc(var(--…
score: 1
has comment: http://stackoverflow.com/comment/139194426
has comment: http://stackoverflow.com/comment/139195609
has comment: http://stackoverflow.com/comment/139194530

http://stackoverflow.com/comment/139273756
comment on: http://stackoverflow.com/a/78989599
type: Comment
score: 0
type: AnswerComment
has text: unfortunately line between blocks is still visible :(

http://stackoverflow.com/a/79011686
answers question: http://stackoverflow.com/q/79011645
type: Answer
upvote count: 3
has body: I have tried your code, but most probably you are missing to include position: relative; to the ul.custom li: ul.custom li { position: relative; padding-left: 30px; /* some padding to text */ } ul { list-style: none; margin:0; padding: 0; } ul.custom li { position: relative; padding-left: 30px;/* some padding to text */ } ul.custom li:before { content: ""; position: absolute; height: 23px; width: 23px; left: 0; top: 50%; transform: translateY(-50%); background-size: contain; background-repeat: no-repeat; background-image: url('data:image/svg+xml, <g fill="%23CC902D" clip-path="url(%23a)"><path d="M10.748 16.251a.65.65 0 0 1-.461-.191l-4.53-4.54a.652.652 0 0 1 0-.922l2.165-2.165a.652.652 0 0 1 .46-.19h.001a.65.65 0 0 1 .461.191l1.905 1.913 3.408-3.408a.652.652 0 0 1 .921 0l2.165 2.165a.652.652 0 0 1 0 .921l-6.035 6.036a.651.651 0 0 1-.46.19Zm-3.61-5.191 3.61 3.618 5.114-5.113-1.244-1.244-3.41 3.41a.652.652 0 0 1-.46.19h-.001a.65.65 0 0 1-.461-.191L8.38 9.816 7.138 11.06Z"/><path d="M22.349 23H.65A.651.651 0 0 1 0 22.349V.65C0 .291.292 0 .651 0h21.697c.36 0 .652.292.652.651v17.302a.651.651 0 1 1-1.303 0V1.303H1.303v20.394h21.045a.651.651 0 1 1 0 1.303Z"/><path d="M19.184 19.836H3.815a.651.651 0 0 1-.651-.651V6.929a.651.651 0 1 1 1.303 0v11.604h14.066V4.467H3.815a.651.651 0 1 1 0-1.303h15.37c.36 0 .65.292.65.652v15.369c0 .36-.29.651-.65.651Z"/></g> <path fill="%23fff" d="M0 0h23v23H0z"/> '); } First Second Third
score: 3
has comment: http://stackoverflow.com/comment/139315829
downvote count: 0
has comment: http://stackoverflow.com/comment/139315314
has comment: http://stackoverflow.com/comment/139315331
has comment: http://stackoverflow.com/comment/139315830

http://stackoverflow.com/comment/139259155
type: Comment
score: 0
has text: This question is similar to: [Using dynamic position values in Tailwind CSS](https://stackoverflow.com/questions/72560190/using-dynamic-position-values-in-tailwind-css). If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem.
type: QuestionComment
comment on: http://stackoverflow.com/q/78981552

http://stackoverflow.com/comment/139313471
comment on: http://stackoverflow.com/q/79011275
type: QuestionComment
has text: @mrconcerned Or the other way round, you know. Changing it to `fontawesome` in the code :)
score: 1
type: Comment

http://stackoverflow.com/q/78944756
tagged with: reactjs
tagged with: css-loader
has title: Moduled css not working in React App with custom webpack app (not CRA or Vite)
tagged with: css
answer count: 0
tagged with: micro-frontend
type: UnansweredQuestion
score: 0
tagged with: webpack
type: Question
has body: Trying to use moduled css in React Microfrontend apps, the styles are getting into browser but not scoped in html dom on refering in chrome devtools. Versions of loaders: ├── css-loader@7.1.2 └── style-loader@2.0.0 I have this webpack config file: { test: /\.module\.css$/, use: [ 'style-loader', { loader: 'css-loader', options: { modules: { localIdentName: '[name]__[local]___[hash:base64:5]', // Custom format }, importLoaders: 1, }, }, ], }, { test: /\.css$/i, exclude: /\.module\.css$/, use: ['style-loader', 'css-loader'], }, } In component file: import styles from './cssFilename.module.css'; I have used the same pattern and worked in CRA and Vite.. Like that I am trying here.. I can able to get the style file to the browser, But not scoped in HTML DOM. So that is not getting scoped any styles, simply getting empty without any class names.

http://stackoverflow.com/comment/139229818
type: QuestionComment
score: 1
comment on: http://stackoverflow.com/q/78965578
type: Comment
has text: @AHaworth sorry for the confusion, I didn't mean to scale the image differently, that was a bad copy paste by me

http://stackoverflow.com/comment/139393603
score: 1
has text: @jonrsharpe I think the percentage fill works for stars because the human eye is not looking for the percentage of the shape filled, but just how much of the left is filled. And people are not going to say that's only 21%, not 27%. With that said, I'd be fine with a [1/4 and 3/4 filled star](https://stackoverflow.com/questions/79054987/how-to-create-a-star-1-4-and-3-4-filled) and use the closest. What is off is a rating of 3.26 and 3.74 use a half filled star - that's too far off. And you are correct that there should be a number - but it should be there *also*, not instead. I see that a lot.
type: Comment
type: QuestionComment
comment on: http://stackoverflow.com/q/79054912

http://stackoverflow.com/comment/139280511
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78992567
type: QuestionComment
has text: @everyone Thing is this issue only occurs in chrome, samsung internet and some other browsers not in Kiwi browser. And everything works perfectly fine in desktop (pc) chrome dev tools.

http://stackoverflow.com/comment/139142123
type: Comment
score: 0
has text: I have converted this file from word document , that's why it looks so weird
type: QuestionComment
comment on: http://stackoverflow.com/q/78918363

http://stackoverflow.com/comment/139178167
comment on: http://stackoverflow.com/q/78937247
type: Comment
score: 0
has text: Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/) using the `<>` icon. See [**How to create a Minimal, Reproducible Example**](http://stackoverflow.com/help/reprex)
type: QuestionComment

http://stackoverflow.com/comment/139362698
score: 0
type: AnswerComment
has text: yeah, sorry for that, so you need to add some HTML code and JavaScript code.
comment on: http://stackoverflow.com/a/79038090
type: Comment

http://stackoverflow.com/comment/139310444
type: Comment
score: 0
has text: I and my wife both have double-checked the spelling of the filename and have copy-pasted it from the Files app into the CSS just in case of utter madness. The files are on the www for all to inspect. There’s no initial forward-slash in the CSS and no path name.
type: QuestionComment
comment on: http://stackoverflow.com/q/79009569

http://stackoverflow.com/comment/139340266
type: QuestionComment
comment on: http://stackoverflow.com/q/79023183
type: Comment
has text: when you say floating it's not very meaningful.. as long as you have 5 distinct selects .. each one of them requires to have its own dataset despite being duplicated. But the point is you don't need to have it already hardcoded in the html. Such data can be an array defined once (or retrieved from an ajax request in real time) and be used to populate 5 different selects with 5 single statements
score: 1

http://stackoverflow.com/comment/139143633
type: QuestionComment
has text: Perhaps this one explains it? https://apple.stackexchange.com/questions/304520/why-is-the-arabic-font-on-my-iphone-different-from-what-it-is-supposed-to-be
comment on: http://stackoverflow.com/q/78919137
type: Comment
score: 0

http://stackoverflow.com/a/78978395
upvote count: 1
answers question: http://stackoverflow.com/q/78966048
score: 1
accepted answer of: http://stackoverflow.com/q/78966048
has body: I wouldn't rely on classes like .st-bd, .st-bb, or .st-b7 they are dynamically generated by Streamlit and can change (versions or runs). I would rather use aria-label. import streamlit as st st.markdown(""" """, unsafe_allow_html=True) st.text_input("test color") st.text_input("test color2")
has comment: http://stackoverflow.com/comment/139253564
type: AcceptedAnswer
type: Answer
downvote count: 0

http://stackoverflow.com/comment/139230399
score: 0
has text: Bootstrap doesn't have facilities to do this. I suggest using negative right margin and matching right padding on the left column element in your custom stylesheet.
type: QuestionComment
comment on: http://stackoverflow.com/q/78938537
type: Comment

http://stackoverflow.com/a/78993208
accepted answer of: http://stackoverflow.com/q/78989351
score: 1
has body: Figured out the issue. It wasn't anything to do with how the scss is set up but rather using an incompatible version of igniteui-theming. It had to be changed to version 3.3.3. Once this was done, I no longer got that error and the application builds
type: AcceptedAnswer
downvote count: 0
type: Answer
upvote count: 1
answers question: http://stackoverflow.com/q/78989351

http://stackoverflow.com/comment/139171014
type: AnswerComment
score: 1
comment on: http://stackoverflow.com/a/78933480
has text: Also, it looks like you accidentally added some CSS in the wrong place because it’s showing up at the top of the site.
type: Comment

http://stackoverflow.com/a/78936756
type: Answer
has comment: http://stackoverflow.com/comment/139177184
score: -1
has body: i add this line to css in your jsfillde .description{ display: flex; flex-direction: column; justify-content: space-between; } .main { background-color: green; padding: 0 55px; } .section { display: flex; width: 100%; gap: 40px; justify-content: space-between; padding-bottom: 160px; } and also removed p height.
has comment: http://stackoverflow.com/comment/139178883
has comment: http://stackoverflow.com/comment/139176708
downvote count: 1
upvote count: 0
answers question: http://stackoverflow.com/q/78936697

http://stackoverflow.com/comment/139209525
comment on: http://stackoverflow.com/q/78954897
score: 2
type: Comment
has text: Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/) using the `<>` icon. See [**How to create a Minimal, Reproducible Example**](http://stackoverflow.com/help/reprex)
type: QuestionComment

http://stackoverflow.com/comment/139322397
score: 0
comment on: http://stackoverflow.com/q/79015820
type: QuestionComment
has text: @mrconcerned Sorry for not tagging you, I'm new to being a user on this platform. I've got the snippet up and running now.
type: Comment

http://stackoverflow.com/q/78925071
has comment: http://stackoverflow.com/comment/139156984
answer count: 0
has body: I'm having trouble styling a dropdown menu for my portfolio site using React TypeScript and TailwindCSS. I'm currently using a hover method to trigger the dropdown, and it remains open when you hover over the dropdown menu itself, which is expected behavior. However, I'm facing an issue when I add more links to the dropdown menu. The menu is currently centered based on the text above it, and I've set the width to be full-screen (w-screen). This causes the dropdown menu to overflow the screen width, which is not the desired outcome. I want the dropdown menu to be both centered and take up the full width of the screen without causing overflow. Here’s the code snippet for my current setup: import React, { useState } from "react"; import { AnimatePresence, motion } from "framer-motion"; import { DownOutlined } from "@ant-design/icons"; import { Link } from "react-router-dom"; import profilePicture from "../../assets/Profile-picture-without-me.jpg"; import MenuIcon from "./MenuIcon.tsx"; import Menu from "./Menu.tsx"; interface NavbarProps { children: React.ReactNode; FlyoutContent?: React.FC; }; const Example = () => { const [isOpen, setIsOpen] = useState(false); const toggleMenu = () => { setIsOpen(!isOpen); }; return ( {/* Logo Section */} {/* Projects 1 */} Projects <DownOutlined className="py-auto" /> {/* Projects 2 */} Projects <DownOutlined className="py-auto" /> {/* Menu Button for Mobile */} <MenuIcon /> {/* Mobile Menu Display */} { isOpen && ( <Menu /> ) } ); }; const FlyoutLink: React.FC<NavbarProps> = ({ children, FlyoutContent }) => { const [open, setOpen] = useState(false); const showFlyout = FlyoutContent && open; return ( setOpen(true)} onMouseLeave={() => setOpen(false)} className="relative w-fit h-fit" > {children} {showFlyout && ( <motion.div initial={{ opacity: 0, y: 15 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: 15 }} transition={{ duration: 0.3, ease: "easeOut" }} className="absolute left-1/2 top-12 w-[calc(100vw-17px)] !-translate-x-1…
tagged with: css
has comment: http://stackoverflow.com/comment/139158108
type: UnansweredQuestion
has title: How to Center a Full-Width Dropdown Menu in React TypeScript Using TailwindCSS
has comment: http://stackoverflow.com/comment/139166784
tagged with: http://stackoverflow.com/tag/html
type: Question
tagged with: tailwind-css
tagged with: centering
tagged with: reactjs
score: 0

http://stackoverflow.com/a/79167717
has body: Try to create files in vs-code and preview it by an extension "LIVE-SERVER" or access it from chrome If still your facing any problem, specify that kind of problem facing!!
answers question: http://stackoverflow.com/q/79017763
has comment: http://stackoverflow.com/comment/139612728
type: Answer
has comment: http://stackoverflow.com/comment/139601741
upvote count: 0
score: -2
downvote count: 2

http://stackoverflow.com/comment/139344470
type: QuestionComment
comment on: http://stackoverflow.com/q/78967040
type: Comment
score: 0
has text: Could you add any example code if possible?

react-native
tags question: http://stackoverflow.com/q/78915642
tags question: http://stackoverflow.com/q/79004878
tags question: http://stackoverflow.com/q/78909882
type: Tag
tag name: react-native
tags question: http://stackoverflow.com/q/78954702
tags question: http://stackoverflow.com/q/79048394
tags question: http://stackoverflow.com/q/79007150
tags question: http://stackoverflow.com/q/78949908
tags question: http://stackoverflow.com/q/79141656
tags question: http://stackoverflow.com/q/79082909
tags question: http://stackoverflow.com/q/79102712
tags question: http://stackoverflow.com/q/79184839
tags question: http://stackoverflow.com/q/79298889
tags question: http://stackoverflow.com/q/79314471
tags question: http://stackoverflow.com/q/79388939
tags question: http://stackoverflow.com/q/79354511
tags question: http://stackoverflow.com/q/79289665
tags question: http://stackoverflow.com/q/79278670
tags question: http://stackoverflow.com/q/79367715
tags question: http://stackoverflow.com/q/79246208
tags question: http://stackoverflow.com/q/79372295
tags question: http://stackoverflow.com/q/79507940
tags question: http://stackoverflow.com/q/79435096
tags question: http://stackoverflow.com/q/79513975
tags question: http://stackoverflow.com/q/79476241

http://stackoverflow.com/comment/139400297
comment on: http://stackoverflow.com/a/79058981
has text: have you place `items img[src$=".gif"]` below `.items img` ? also try `!important`
type: Comment
score: 0
type: AnswerComment

http://stackoverflow.com/comment/139343020
has text: Please click [edit], then `[<>]` and post a [mcve] HERE so we do not need to go to a possibly changed or deleted external link
comment on: http://stackoverflow.com/q/79027028
type: Comment
score: 0
type: QuestionComment

http://stackoverflow.com/comment/139377786
type: Comment
score: 0
has text: Have you tried styling `textarea.markup-input`?
type: QuestionComment
comment on: http://stackoverflow.com/q/79029152

http://stackoverflow.com/comment/139316211
score: 1
comment on: http://stackoverflow.com/q/79012295
type: Comment
has text: Seems that `echo '</menubtn';` is missing a closing `>`?
type: QuestionComment

http://stackoverflow.com/comment/139399535
type: Comment
score: 0
has text: Trying to clarify what you want - do you want it to be visually vertically centered on the W?
type: QuestionComment
comment on: http://stackoverflow.com/q/79057755

http://stackoverflow.com/comment/139216692
score: 1
type: Comment
comment on: http://stackoverflow.com/a/78958221
has text: thanks! the last code snipped actually worked.
type: AnswerComment

http://stackoverflow.com/a/78921529
type: AcceptedAnswer
has comment: http://stackoverflow.com/comment/139148714
type: Answer
downvote count: 0
answers question: http://stackoverflow.com/q/78921276
has body: The issue is with bootstrap modal messing with your custom modal. So if you use dev tools and then delete the bootstrap modal from html then your custom modal with google link works normally and you can add value to inputs too. Talking about solution. I have tried fixing issue with z-index but it didn't worked so I have used js in which when your custom modal visibility is set to visible it also sets bootstrap modal display to none. Below is working example also small note don't use js directly inside html element it's not good practice. function toggleSecondModal() { let bootstrapModal = document.querySelector(".modal"); let customModal = document.getElementById('overlapDivCon1'); customModal.style.visibility = 'visible'; bootstrapModal.style.display = "none"; } body { margin: 0; padding: 0; } .mainDiv { color: white; width: 100%; height: 100vh; background-color: #1e1e1e; display: flex; align-items: center; justify-content: center; } .overlapDivContainer { background-color: rgba(0, 0, 0, .6); width: 100%; height: 100%; position: fixed; z-index: 1056; visibility: hidden; } .overlapDiv { width: 60%; margin-top: 2%; } Document show modal Sample Modal overlap div1 overlap div2 Close check google 1 2
upvote count: 1
accepted answer of: http://stackoverflow.com/q/78921276
score: 1

http://stackoverflow.com/comment/139343433
has text: Have you tried setting the width and height of `#section-to-print` using inches instead of pixels?
score: 2
type: Comment
comment on: http://stackoverflow.com/q/79027340
type: QuestionComment

http://stackoverflow.com/comment/139151153
comment on: http://stackoverflow.com/q/78922065
has text: You cant just use object fit cover because the effect I need involves rendering the image in a canvas on top of the initial container as canvas will have a higher z index than the initial container.
type: Comment
score: 0
type: QuestionComment

http://stackoverflow.com/a/79037429
has comment: http://stackoverflow.com/comment/139361179
upvote count: 1
answers question: http://stackoverflow.com/q/79037411
has body: Use :not(:has(*)) to select an empty element (more detail from my blog: https://css-tip.com/number-elements-has-selector/) h3 span:last-child:not(:has(*))::after { border: solid 1px transparent; content: '\2199'; display: inline-block; color: gray; } Title and Title linklink
accepted answer of: http://stackoverflow.com/q/79037411
score: 1
type: AcceptedAnswer
type: Answer
downvote count: 0

http://stackoverflow.com/a/78935589
answers question: http://stackoverflow.com/q/78935425
accepted answer of: http://stackoverflow.com/q/78935425
type: AcceptedAnswer
has comment: http://stackoverflow.com/comment/139174270
type: Answer
score: 0
has body: I guess you should review your CSS basics... You can simply use: #boxes_1 { margin-top: 0; } The ID will override the class, or: #boxes_1.boxess { margin-top: 0; } Or even: .boxess:first-child { margin-top: 0; } Or even: .boxes &gt; .boxess { margin-top: 0; }

http://stackoverflow.com/comment/139315896
has text: @DamianChudobiński I have updated it
comment on: http://stackoverflow.com/q/79012618
type: QuestionComment
score: 0
type: Comment

http://stackoverflow.com/a/79106771
upvote count: 1
score: 1
type: AcceptedAnswer
answers question: http://stackoverflow.com/q/79051473
accepted answer of: http://stackoverflow.com/q/79051473
has body: As I did not get any response, I tried to solve it myself. I also found a working solution which I have added in the codepen link. Here is the link to the working solution - https://codepen.io/gokunik/pen/YzmqQJV Below is a small snippet function onPointerDown(e, element) { const originalRect = element.getBoundingClientRect(); const rect = scaleRect(element.getBoundingClientRect(), scale); initialCoords = { x: e.clientX + (rect.right - e.clientX) + (e.clientX - originalRect.right) * scale, y: e.clientY + (rect.bottom - e.clientY) + (e.clientY - originalRect.bottom) * scale, }; draggedPreview = element; translateDragPreview(e.clientX, e.clientY); } Approach used to solve the question. I used a simple approach. I initially thought about this while solving this but did not pursue it then but it worked when I tried it now. So the idea is the element is scaled down when it is dragged so it's either shrinks or increases in size, changing it's rect values like x, y, top, left etc which displaces the dragged element which needs to be adjusted. So first I added a function to give me a updated rect for a element when scaling is applied. Now I have the rect of both original and dragged scaled element. If you notice in the screenshot I have shared, the scaled element shrinks and increases in size by maintaining it's centre with the original element so first I tried to align the scaled element edges with the initial point of click using (rect.right - e.clientX) and (rect.bottom - e.clientY) which just aligned the element to the bottom right corner. Now All I had to do is to find where the click has happened in the original rect and scale it down for the updated scaled rect. So I repeated the same same thing and multiply it with the scale value (e.clientX - originalRect.right) * scale and (e.clientY - originalRect.bottom) * scale so it adjust it according to the scaled element. I hope you find this helpful. I did not find the answer to this problem no where on the internet that's…
type: Answer
downvote count: 0

http://stackoverflow.com/q/78915295
type: AnsweredQuestion
has title: Flexbox justify content, but not include first item
has answer: http://stackoverflow.com/a/78915363
score: 0
has answer: http://stackoverflow.com/a/78915329
answer count: 3
has answer: http://stackoverflow.com/a/78916318
accepted answer: http://stackoverflow.com/a/78915329
possible better answer: http://stackoverflow.com/a/78916318
tagged with: css
tagged with: flexbox
has body: Simply put, is there a way to justify the content of a flexbox but exclude the first item from this? The easiest way is to take the item out of the flexbox, but I'm just wondering if it's possible to skip over the first item before the justify-content takes effect. exclude item item item item Theoretically it should look like: (1) (2) (3) (4) (5) exclude item item item item Where the space between (1) and (2) is native and not being done by the flex (assume it's 1px between the two words) but the rest of the items are spaced due to justify-content: between; for example.
type: Question

http://stackoverflow.com/comment/139320380
type: Comment
score: 0
type: QuestionComment
has text: So you want the background image for the header to shrink down when you either scale the window/device/page size up or down, correct?
comment on: http://stackoverflow.com/q/79015030

http://stackoverflow.com/a/78956802
has comment: http://stackoverflow.com/comment/139213264
has body: Yes ... use the often-overlooked columns property. .d1 { columns: 4; } R1 C1 R1 C2 R2 C1 R2 C2 R3 C1 R3 C2 R4 C1 R4 C2 R5 C1 R5 C2 R6 C1 R6 C2 R7 C1 R7 C2 R8 C1 R8 C2 R9 C1 R9 C2 R10 C1 R10 C2 R11 C1 R11 C2 R12 C1 R12 C2 R13 C1 R13 C2 R14 C1 R14 C2 R15 C1 R15 C2 R16 C1 R16 C2 R17 C1 R17 C2 R18 C1 R18 C2 R19 C1 R19 C2 R20 C1 R20 C2 R21 C1 R21 C2 R22 C1 R22 C2 R23 C1 R23 C2
has comment: http://stackoverflow.com/comment/139214134
answers question: http://stackoverflow.com/q/78956711
accepted answer of: http://stackoverflow.com/q/78956711
has comment: http://stackoverflow.com/comment/139213156
has comment: http://stackoverflow.com/comment/139213183
type: AcceptedAnswer
type: Answer
downvote count: 0
score: 1
upvote count: 1
has comment: http://stackoverflow.com/comment/139213178

http://stackoverflow.com/a/78960583
answers question: http://stackoverflow.com/q/78960567
type: Answer
has comment: http://stackoverflow.com/comment/139243809
score: 0
has body: const windowHeight = window.innerHeight; const browserHeight = document.documentElement.clientHeight; console.log("Pencere Yüksekliği:", windowHeight); console.log("Tarayıcı Yüksekliği:", browserHeight); // İç öğenin genişliğinin ana öğeyi aşıp aşmadığını kontrol etme function checkOverflow(innerElement, outerElement) { const innerWidth = innerElement.scrollWidth; // İç öğenin tam genişliği const outerWidth = outerElement.clientWidth; // Ana öğenin görünür genişliği if (innerWidth > outerWidth) { console.log("İç öğe, ana öğeyi aşıyor."); } else { console.log("İç öğe, ana öğeye sığıyor."); } } // Örnek kullanım: const innerElement = document.querySelector('.inner-child'); // İç öğe const outerElement = document.querySelector('.outer-parent'); // Ana öğe checkOverflow(innerElement, outerElement); enter code here

http://stackoverflow.com/comment/139375904
type: Comment
comment on: http://stackoverflow.com/q/79045034
score: 0
has text: Put the console.log in the body of the function component, not in the return. And unless your state is structured like this {habits:{habits:"stuff"}} I don't think you should be destructuring the return from the selector.
type: QuestionComment

http://stackoverflow.com/comment/139351472
score: 1
has text: This answer could be improved by explaining what you changed and why. I also don't think this is what the desired functionality is. I think they're not looking for it to go back to the beginning, but instead always advance to the right with the images cycling.
type: Comment
comment on: http://stackoverflow.com/a/79032111
type: AnswerComment

http://stackoverflow.com/comment/139232986
type: Comment
has text: set `.nav2 {top: 100px}` which is the height of nav1
type: AnswerComment
comment on: http://stackoverflow.com/a/78965584
score: 1

http://stackoverflow.com/comment/139759629
type: Comment
comment on: http://stackoverflow.com/q/79047851
type: QuestionComment
has text: I haven't used Vue or Tailwind, but I've seen similar behavior when there's a gap in the menu layout. Even one pixel is enough. When the pointer enters the gap, it's technically not hovering over the menu, so the menu closes. Can you investigate the menu layout by disabling the popup autohide (e.g., with [Browser Toolbox](https://firefox-source-docs.mozilla.org/devtools-user/browser_toolbox/index.html))?
score: 0

http://stackoverflow.com/a/79059925
answers question: http://stackoverflow.com/q/79059904
has body: Combine the HTML elements, not the CSS. Just place an element with animation A inside element with animation B. .padding { padding: 10px; margin: 5px; } .css-selector-star-gold { background: linear-gradient(270deg, #eede5e, #dbbb0f, #f3f2e7, #ddcd4c, #eede5e); background-size: 1000% 1000%; -webkit-animation: GoldGradiant 8s ease infinite; -moz-animation: GoldGradiant 8s ease infinite; animation: GoldGradiant 8s ease infinite; } @-webkit-keyframes GoldGradiant { 0% { background-position: 0% 11% } 50% { background-position: 100% 90% } 100% { background-position: 0% 11% } } @-moz-keyframes GoldGradiant { 0% { background-position: 0% 11% } 50% { background-position: 100% 90% } 100% { background-position: 0% 11% } } @keyframes GoldGradiant { 0% { background-position: 0% 11% } 50% { background-position: 100% 90% } 100% { background-position: 0% 11% } } .star-scale { animation: StarScale 2s ease 0s 1 normal forwards; } @keyframes StarScale { 0% { transform: scale(0.5); } 100% { transform: scale(1); } } &lt;div class="padding css-selector-star-gold"&gt; hello world &lt;/div&gt; &lt;div class="padding star-scale"&gt; how are you? &lt;/div&gt; &lt;div class="star-scale"&gt; &lt;div class="padding css-selector-star-gold"&gt; both &lt;/div&gt; &lt;/div&gt;
downvote count: 0
upvote count: 1
score: 1
type: Answer

http://stackoverflow.com/comment/139165991
type: Comment
comment on: http://stackoverflow.com/a/78930971
has text: Hi there, Thank you for replying to this question. This did not seem to work in my case, it just took off the blur effect from the entire container of cards? Rather than just the first child. And hovering does nothing
score: 0
type: AnswerComment

http://stackoverflow.com/a/79036443
score: 0
answers question: http://stackoverflow.com/q/79023236
has body: I was able to resolve the issue from the comments made. I realized I omitted the comma between the different font formats. Before (Not working) @font-face { font-family: "RecoletaAlt"; src: local("RecoletaAlt") url("./assets/fonts/RecoletaAlt.woff") format("woff") url("./assets/fonts/RecoletaAlt.woff2") format("woff2"); font-weight: bold; font-style: normal; } After (works fine) @font-face { font-family: "RecoletaAlt"; src: local("RecoletaAlt"), url("./assets/fonts/RecoletaAlt.woff") format("woff"), url("./assets/fonts/RecoletaAlt.woff2") format("woff2"); font-weight: bold; font-style: normal; } I hope it helps someone.
accepted answer of: http://stackoverflow.com/q/79023236
type: AcceptedAnswer
type: Answer

http://stackoverflow.com/comment/139118763
type: Comment
score: 0
type: AnswerComment
has text: But you may also take in count that with current implementation removing `fixed` would move your content further down, as part of it is would not be covered by header
comment on: http://stackoverflow.com/a/78905399

http://stackoverflow.com/comment/139135832
has text: Is this an answer to your question? If so, please add an explanation. If not, delete it and edit your question
comment on: http://stackoverflow.com/a/78914917
type: Comment
score: 0
type: AnswerComment

http://stackoverflow.com/q/79055654
has comment: http://stackoverflow.com/comment/139394376
type: UnansweredQuestion
answer count: 1
tagged with: css
type: Question
downvote count: 1
upvote count: 0
score: -1
has body: I'm trying to make a webpage uniform across all screen types, here is a snippet of the code, this is the header... style.css @import url('https:fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900&display=swap'); * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: Arial, sans-serif; background-color: #f0f0f0; } /* Header Styles */ header { position: absolute; top: 0; left: 0; width: 100%; padding: 30px 100px; display: flex; justify-content: space-between; align-items: center; background-color: #333; color: #fff; } header .logo { color: #fff; font-weight: 700; text-decoration: none; font-size: 2em; text-transform: uppercase; letter-spacing: 2px; } header ul { display: flex; justify-content:center; align-items: center; } header ul li { list-style: none; margin-right: 20px; } header ul li a { text-decoration: none; padding: 6px 15px; color: #fff; border-radius: 20px; } header ul li a:hover { background: #fff; color:#333; } ''' ''' LOGO Home Search Videos ''' A responsive design code was put in, but it doesn't seem to work perfectly... The different elements have been edited but did not seem to have a perfect result once the screen was reduced. It would be nice to get a review and help on this
favorite count: 0
has title: Webpage display across different screen types
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139394619
has answer: http://stackoverflow.com/a/79055818

http://stackoverflow.com/q/79055839
type: Question
has answer: http://stackoverflow.com/a/79057637
has body: I’m working on a React app that includes a live video feed from the user’s webcam. The video feed is displayed using HTML and processed by the MediaPipe pose model, alongside a Three.js scene for rendering 3D objects. Problem: When using objectFit: 'cover', the video fills the container, but it is too zoomed in. When using objectFit: 'contain', the video displays correctly, but introduces white spaces above and below on mobile (or on the sides in landscape mode). I want the video to display naturally without zooming too much and without introducing white spaces. I’ve tried different combinations of width, height, objectFit, and CSS transforms, but haven’t found a solution that works well on both desktop and mobile. Code: Here’s the relevant part of my React component: &lt;video ref={videoRef} style={{ position: 'absolute', top: '50%', left: '50%', width: '100%', height: '100%', transform: 'translate(-50%, -50%) scaleX(-1)', objectFit: 'cover', }} autoPlay playsInline muted /&gt; What I’ve tried: Using objectFit: 'cover': Fills the container but results in a zoomed-in video, which cuts off parts of the video. Using objectFit: 'contain': Shows the entire video, but results in white space at the top and bottom on mobile and on the sides in landscape. Adjusting width, height, and transform properties doesn’t seem to resolve the issue for all screen sizes. My Goal: I want the video feed to: Display naturally (without zooming in). Not introduce white spaces on any device (both mobile and desktop). Any advice on how to achieve this behavior would be greatly appreciated!
tagged with: mediapipe
tagged with: http://stackoverflow.com/tag/html
answer count: 1
score: 0
tagged with: reactjs
tagged with: css
type: UnansweredQuestion
has title: Video feed in React app using objectFit: contain introduces white spaces, but cover zooms in too much

http://stackoverflow.com/comment/139512950
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/79035820
has text: @MarkSchultheiss A handdrawn examples is hard given that my question is regarding an animation -- bountyScript's answer is essentially what I want to do except for the fact that on hover, when it gets a shadow, you can see that there is no padding. I want there to be some space between the border and the text, but due to alignment issues I cannot place a padding before hand. The problem is if you add padding after, the text suddenly has less space and thus shifts weirdly. I tried adding a border instead of padding but that did not work either.
type: Comment

http://stackoverflow.com/comment/139296358
score: 0
type: Comment
has text: @CrazyEight looking back on this now, if you remove the `height: calc(100vh...` on the first MudContainer then I think passing down just max-height might work.
comment on: http://stackoverflow.com/a/78991510
type: AnswerComment

http://stackoverflow.com/comment/139381156
type: Comment
score: 0
has text: is there a way to resolve this? @KIKOSoftware
type: QuestionComment
comment on: http://stackoverflow.com/q/79044235

http://stackoverflow.com/q/78987811
upvote count: 1
downvote count: 4
accepted answer: http://stackoverflow.com/a/78987871
tagged with: css
has body: I have a bootstrap table-striped table. In this case, odd rows typically have gray background. Bootstrap CSS version is v5.3.2. But if I add style="background-color: red" directly to the elements, cells on odd rows shows a slight darker tint than the even rows. Why would the background still appear differently between odd and even rows? I would have thought inline styles have the highest specificity and is the final. It's the same on both Chrome and Edge browsers. Below is a very simple example (as originally provided by one of the answers), showing that the cells in odd rows being slightly darker, despite having inline style setting the background to red. Bootstrap demo # 1 2 3 The example output is below: The odd rows show #e82516, while the even rows show #f42717.
has comment: http://stackoverflow.com/comment/139270729
has title: Inline CSS for background-color not showing
favorite count: 0
has comment: http://stackoverflow.com/comment/139270391
type: Question
tagged with: http://stackoverflow.com/tag/html
score: -3
answer count: 1
type: AnsweredQuestion
has answer: http://stackoverflow.com/a/78987871

http://stackoverflow.com/comment/139289195
type: Comment
score: 3
has text: @MuhammadAleemHashmi we talk about an HTML table. This question has nothing to do with the backend or a database. As a matter of fact, an HTML table does not even require any kind of backend or database but could be hardcoded. In the end, it is purely a CSS question.
type: QuestionComment
comment on: http://stackoverflow.com/q/78998005

http://stackoverflow.com/comment/139212986
type: Comment
has text: why not use `inline-block` instead of setting the width?
type: QuestionComment
score: 1
comment on: http://stackoverflow.com/q/78956780

http://stackoverflow.com/comment/139259203
has text: I confirm that it looks weird both on Chrome and FF (on Windows) where the ` ` earns a big height.. the font type has surely wrong metrics and needs to be fixed. If you try to download the woff file and upload it to https://opentype.js.org/font-inspector.html you will see for example a very huge value on `OS/2 and Windows Metrics table > usWinAscent` as `59624`.. the solution is for sure fixing the woff.. in the meantime you may use something like `transform: translateY(-1200px);` on the element
comment on: http://stackoverflow.com/q/78981553
score: 2
type: Comment
type: QuestionComment

http://stackoverflow.com/a/78924920
answers question: http://stackoverflow.com/q/78921797
type: AcceptedAnswer
accepted answer of: http://stackoverflow.com/q/78921797
score: 2
downvote count: 0
type: Answer
has comment: http://stackoverflow.com/comment/139157578
upvote count: 2
has body: Draw the line and the half circle in one go. The SVG gets a very wide viewBox="0 0 10000 120", but with preserveAspectRatio="xMidYMid slice" only the middle part is shown, always filling the height of the header, and cutting off the superfluous length at the sides. Now you draw a long horizontal line from the left side to the middle of the viewbox minus the radius of the half circle: M 0,60 H 4950 add the half circle (with a relative comand, the end of the half circle can be written as "100 to the right") a 50,50 0 0 0 100,0 and continue the horizontal line to the right side H 10000 body { margin: 0vh 0vw; } .header { position: relative; width: 100%; height: 12vh; background-color: #004d40; display: flex; align-items: center; justify-content: center; overflow: hidden; top: 0; } svg { width: 100%; height: 100%; fill: none; stroke: white; stroke-width: 3; } SVG Header with Half Circle <path d="M 0,60 H 4950 a 50,50 0 0,0 100,0 H 10000"/>

http://stackoverflow.com/comment/139172937
comment on: http://stackoverflow.com/a/78934131
score: 0
type: AnswerComment
has text: @lnaie - I would have said there was a exact number of columns (i.e. colspan=3 means 3 columns) but you can think of it as a max number it that works for you, yes.
type: Comment

http://stackoverflow.com/comment/139358677
type: QuestionComment
has text: @AHaworth Sorry, I'm doing a bad job of explaining -- the alignment when the text is actually being hovered upon does not matter. I am saying I cannot add extra padding beforehand because it would cause misalignment, which is causing the whole problem. When I add padding upon hover, some of the text no longer fits and shifts. I have updated my example to show what is happening better.
type: Comment
comment on: http://stackoverflow.com/q/79035820
score: 0

http://stackoverflow.com/a/78945697
answers question: http://stackoverflow.com/q/78945584
has body: You have the right idea, that essentially you have 'two copies' of the content and at the end of the animation time only half will have been moved across and the first half comes back - as they are identical we think it's continuous. For this to work well you need certain things - removal of any spacing that the browser might insert by default (e.g. the 8px margin on body), enough copies of what you want to show to cover the viewport twice (we achieve this by using flex as you have done, but make sure the whole is at least 200vw wide). I have removed some of the structure - it works fine if you just have one continuous set of what you want to show, doesn't necessarily need to be split in two. I've made sure there is an even number of items. They are justified space-around, not center. space-around puts even space between each item and half that space at each end. TEES MAKE YOUR MARK WITH EXCITISM TEES MAKE YOUR MARK WITH EXCITISM TEES MAKE YOUR MARK WITH EXCITISM TEES MAKE YOUR MARK WITH EXCITISM TEES MAKE YOUR MARK WITH EXCITISM TEES MAKE YOUR MARK WITH EXCITISM
type: Answer
score: 0

http://stackoverflow.com/comment/139206552
type: Comment
type: AnswerComment
score: 1
comment on: http://stackoverflow.com/a/78953349
has text: You're welcome, my friend!

http://stackoverflow.com/comment/139175571
score: 1
has text: What's being imported? Is it just function definitions, or is there code that runs on import?
type: Comment
type: QuestionComment
comment on: http://stackoverflow.com/q/78936245

http://stackoverflow.com/q/79041461
has answer: http://stackoverflow.com/a/79041580
tagged with: reactjs
tagged with: css
has body: I'm trying to implement a vertical scrollbar in my React app within a specific div (.thelist) where tasks are displayed. Despite setting overflow-y: auto; and a fixed height, the scrollbar either doesn’t appear, or the tasks overflow the container. Here’s the relevant code: Below is my ListNote.js component: function ListNote({ title, onDelete, onEdit, id }) { return ( {title} onEdit(id)}>Edit onDelete(id)}>Delete ); } CSS: .thelist { padding: 8px; height: 300px; overflow-y: auto; } .task-item { display: flex; justify-content: space-between; align-items: center; background: #8758ff; border-radius: 10px; padding: 5px 15px 5px 15px; box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.3), 0 5px 15px rgba(0, 0, 0, 0.2); max-width: 80%; margin-left: auto; margin-right: auto; } .task-name { color: #fff; } I also have a header containing the title that should stay fixed at the top.
type: UnansweredQuestion
score: 0
type: Question
has title: Scrollbar not appearing inside a div in React
answer count: 1

drag
tags question: http://stackoverflow.com/q/79051473
tag name: drag
type: Tag

http://stackoverflow.com/comment/139388360
type: Comment
comment on: http://stackoverflow.com/q/79052168
type: QuestionComment
score: 0
has text: You're almost certainly right about having too much CSS. I actually took the CSS from an existing site that had the look I wanted and trimmed, trimmed, trimmed. You should've seen how much was there initially.

view-transitions-api
type: Tag
tags question: http://stackoverflow.com/q/79059408
tag name: view-transitions-api
tags question: http://stackoverflow.com/q/79154776
tags question: http://stackoverflow.com/q/79216806
tags question: http://stackoverflow.com/q/79201522
tags question: http://stackoverflow.com/q/79137836
tags question: http://stackoverflow.com/q/79314585
tags question: http://stackoverflow.com/q/79392063
tags question: http://stackoverflow.com/q/79444199
tags question: http://stackoverflow.com/q/79475674
tags question: http://stackoverflow.com/q/79454855
tags question: http://stackoverflow.com/q/79443989

http://stackoverflow.com/a/78950329
has body: You are probably looking for the clamp() function: .arrow-down { --size: clamp(4px, 3vmin, 20px); width: 0; height: 0; border-left: var(--size) solid transparent; border-right: var(--size) solid transparent; border-top: var(--size) solid #f00; } &lt;div class="arrow-down"&gt;&lt;/div&gt;
answers question: http://stackoverflow.com/q/78950094
upvote count: 0
score: -2
downvote count: 2
type: Answer

theforeman
type: Tag
tag name: theforeman
tags question: http://stackoverflow.com/q/78954084

http://stackoverflow.com/comment/139213505
comment on: http://stackoverflow.com/a/78956881
has text: Well, this works with the absolute values xou gave it, but not in the dynamic context I need it (based on parent container size). So unfortunatly, this does not solve the problem.
type: Comment
score: 0
type: AnswerComment

http://stackoverflow.com/q/78978054
has title: How to create a text mask with a reverse color of the SVG background using CSS?
tagged with: http://stackoverflow.com/tag/svg
has comment: http://stackoverflow.com/comment/139252622
has comment: http://stackoverflow.com/comment/139252687
has body: I have an SVG image as the background-image for the footer of my webpage. The logo text appears over this background, and its color needs to adapt to the background's light or dark sections. On large screens, the logo text falls entirely on the white part of the background, so a black text works fine. On mobile screens, it appears over the dark part of the image, so I switch the text color to white, which also works. The issue arises with intermediate screen sizes, where the logo text might overlap both light and dark areas of the background. This causes parts of the text to blend into the background, making it unreadable. I would like to create a solution where the SVG acts as a mask for the text, automatically changing the logo text color (e.g., from black to white) based on the background it overlaps. How can I achieve this effect? What are some effective techniques or CSS properties that would help solve this issue? Here is a simple fiddle, the SVG is set as background-image in the original code. I have tried to use something like mix-blend-mode but it's not what I am looking for: footer { background-image: url("../assets/images/mountains.svg"); z-index: 0; } .logo { position: relative; z-index: 1; } .logo::after { position: absolute; content: "Relaps"; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; color: white; mix-blend-mode: difference; } This is what I would archieve:
tagged with: css
has comment: http://stackoverflow.com/comment/139252732
type: Question
accepted answer: http://stackoverflow.com/a/78978167
answer count: 1
type: AnsweredQuestion
score: 0
has comment: http://stackoverflow.com/comment/139252738
has comment: http://stackoverflow.com/comment/139252712
has answer: http://stackoverflow.com/a/78978167
tagged with: http://stackoverflow.com/tag/html

http://stackoverflow.com/comment/139323963
type: QuestionComment
type: Comment
comment on: http://stackoverflow.com/q/79016813
score: 0
has text: [This](https://stackoverflow.com/a/79016850/23142049) solution might be helpful check it out

http://stackoverflow.com/comment/139372458
type: AnswerComment
has text: fetch(`https://dummyjson.com/users/search?q=${searchTerm}`) .then((res) => { return res.json(); })
comment on: http://stackoverflow.com/a/79035320
type: Comment
score: 0

http://stackoverflow.com/comment/139137698
comment on: http://stackoverflow.com/q/78915933
type: Comment
type: QuestionComment
score: 1
has text: "On devtools it shows next to the image a warning sign" and what does the error say? Is the path to the image correct?

http://stackoverflow.com/comment/139207392
type: Comment
score: 0
has text: It' supposed to be inside the `.custom-class` like done in sass fashion. I'll edit the question.
type: AnswerComment
comment on: http://stackoverflow.com/a/78953766

http://stackoverflow.com/comment/139138295
score: 0
comment on: http://stackoverflow.com/a/78912102
has text: I have edited the code but the CSS requires more xters.
type: Comment
type: AnswerComment

http://stackoverflow.com/comment/139149697
score: 0
comment on: http://stackoverflow.com/q/78922197
type: QuestionComment
has text: Ok, is there another solution?
type: Comment

http://stackoverflow.com/comment/139252118
type: Comment
has text: Given that React is in no way relevant to the problem, you will get far more accurate answers much more quickly if you create a working example of the issue using the plain HTML/CSS/JS alone
type: QuestionComment
comment on: http://stackoverflow.com/q/78977674
score: 1

http://stackoverflow.com/comment/139163920
type: Comment
comment on: http://stackoverflow.com/q/78929400
score: 0
type: QuestionComment
has text: @AHaworth I added a snippet. You can open it in full page view so it's easier to see

http://stackoverflow.com/q/79048027
possible better answer: http://stackoverflow.com/a/79129230
has comment: http://stackoverflow.com/comment/139381183
tagged with: accessibility
type: Question
has answer: http://stackoverflow.com/a/79048352
tagged with: http://stackoverflow.com/tag/html
accepted answer: http://stackoverflow.com/a/79048352
has title: Make a first level menu vertical when there is an overflow caused from a change in the font-size in the browser setting for accessibility reasons
type: AnsweredQuestion
score: 0
tagged with: javascript
has answer: http://stackoverflow.com/a/79129230
answer count: 2
tagged with: responsive-design
tagged with: css
has comment: http://stackoverflow.com/comment/139381277
has body: I'm creating a simple first level menu (here I have a minimum reproducible example) with flexbox. When there isn't enough horizontal space for the seven links I make the menu vertical with a simple media query (the breackpoint is 650 pixels and I'm using the desktop first approach). However for accessibility reasons I must ensure that with a zoom of the text the content is still OK (no overflow) but it's not the case. If I make a zoom with CTRL + is ok but if I increase the font-size in the browser setting the seven links exceeds the container and in this case I don't know the right breakpoint. I could use flex-wrap:wrap on the ul tag but in this way the links breaks to a new line one at a time instead I would the menu becomes vertical right away. You can simulate an increased font-size in the browser with font-size:2em on the html tag (there is a comment in the code). Here it is the code: * { box-sizing: border-box; } /* html { font-size: 2em; } */ body { margin: 0; } .main-menu { border: 3px solid rgb(230, 121, 38); padding-block: 0.5rem; margin: 0 auto; display: flex; justify-content: center; } .main-menu ul { list-style: none; padding: 0; margin: 0; display: flex; } .main-menu ul li a { display: block; padding: 0.7rem; text-decoration: none; color: black; text-transform: uppercase; font-weight: bold; font-size: 1.2rem; border: 1px solid black; text-align: center; } @media (max-width: 650px) { .main-menu ul { flex-direction: column; } } Link 1 Link 2 Link 3 Link 4 Link 5 Link 6 Link 7 I could anticipate the breakpoint (a bigger breackpoint) to make the menu vertical for a font-size:2em but I don't like thi solution. Is there a solution in css only to handle this situation? If not, does it exist a javascript solution?

font-family
tags question: http://stackoverflow.com/q/78919137
tag name: font-family
type: Tag
tags question: http://stackoverflow.com/q/79496503
tags question: http://stackoverflow.com/q/79505037

http://stackoverflow.com/q/78933187
score: 1
has comment: http://stackoverflow.com/comment/139172388
tagged with: vue.js
has answer: http://stackoverflow.com/a/78949894
linked to: http://stackoverflow.com/q/78906471
favorite count: 0
has comment: http://stackoverflow.com/comment/139200215
has body: I'm working on a layout where I need the header of a horizontally scrollable middle table to remain sticky at the top while scrolling vertically. The headers for the left and right tables stick just fine, but I'm having trouble with the middle table's header (probably due to its horizontal scroll). https://codepen.io/Reynaldo-Rodriguez-the-sasster/pen/XWLqRxo .container { position: relative; display: flex; } table th { position: sticky; top: 0; background: white; } .table-center { overflow-x: scroll; } table, th, td { border: 1px solid black; } th, td { padding: .5em 1em; white-space: nowrap; } ::-webkit-scrollbar { -webkit-appearance: none; background-color: transparent; height: 7px; } ::-webkit-scrollbar-thumb { border-radius: 4px; background-color: rgb(121 121 121); box-shadow: none; } ::-webkit-scrollbar-track { background-color: white; border: none; } RIDER # RIDER NAME #322 Chase Lanes #87 Marshall Holbrook #567 Marshall Holbrook #143 Marshall Holbrook #322 Chase Lanes #87 Marshall Holbrook #567 Marshall Holbrook #143 Marshall Holbrook #322 Chase Lanes #87 Marshall Holbrook #567 Marshall Holbrook #143 Marshall Holbrook Lap 1 Lap 2 Lap 3 Lap 4 Lap 5 Lap 6 Lap 7 Lap 8 Lap 9 Lap 10 Lap 11 Lap 12 Lap 13 Lap 14 Lap 15 Lap 16 Lap 17 Lap 18 Lap 19 Lap 20 Lap 21 Lap 22 Lap 23 Lap 24 Lap 25 Lap 26 Lap 27 Lap 28 Lap 29 Lap 30 00:02.826 --:---:-- --:---:-- --:---:-- --:---:-- --:---:-- --:---:-- --:---:-- --:---:-- --:---:-- 00:02.826 --:---:-- --:---:-- --:---:-- --:---:-- --:---:-- --:---:-- --:---:-- --:---:-- --:---:-- 00:02.826 --:---:-- --:---:-- --:---:-- --:---:-- --:---:-- --:---:-- --:---:-- --:---:-- --:---:-- 00:02.826 --:---:-- --:---:-- --:---:-- --:---:-- --:---:-- --:---:-- --:---:-- --:---:-- --:---:-- 00:02.826 --:---:-- --:---:-- --:---:-- --:---:-- --:---:-- --:---:-- --:---:-- --:---:-- --:---:-- 00:02.826 --:---:-- --:---:-- --:---:-- --:---:-- --:---:-- --:---:-- --:---:-- --:---:-- --:---:-- 00:02.826 --:---:-- --:---:-- --:---:-- --:---:-- --:---…
tagged with: http://stackoverflow.com/tag/html
type: Question
has answer: http://stackoverflow.com/a/78933330
downvote count: 0
type: AnsweredQuestion
tagged with: javascript
upvote count: 1
accepted answer: http://stackoverflow.com/a/78949894
answer count: 2
possible better answer: http://stackoverflow.com/a/78933330
has title: How to Make Table Headers Sticky on Horizontal Scrolling?
tagged with: css

http://stackoverflow.com/comment/139285174
has text: You maybe could learn a bit about aspect ratios because it sounds as though your image isn't filling the circle because it's not as tall as it's wide, though without more information we can't be certain.
type: QuestionComment
score: 1
comment on: http://stackoverflow.com/q/78995721
type: Comment

http://stackoverflow.com/comment/139341349
type: QuestionComment
has text: A container can look empty for several different reasons. Take a look at the Network tab of Dev Tools to see what is really loaded, and check also the console for errors.
comment on: http://stackoverflow.com/q/79025588
type: Comment
score: 0

http://stackoverflow.com/a/79012238
has body: Don't add borders to the columns themselves. Create an element within the column and style this one instead. This way, everything will look just right, at any breakpoint. You can easily change the width of the gutter with gx-* helper classes on the row element. See https://getbootstrap.com/docs/5.3/layout/gutters/#horizontal-gutters Note that if you are using larger gutters (.gx-5), the docs states that The .container or .container-fluid parent may need to be adjusted if larger gutters are used too to avoid unwanted overflow, using a matching padding utility. and An alternative solution is to add a wrapper around the .row with the .overflow-hidden class. What that means is that horizontal scrollbars may appear at certain window sizes if you don't apply one of these solutions. I would choose the overflow-hidden solution as it doesn't change the main container padding. Smaller gutter Column 1 Column 2 Column 3 Default gutter Column 1 Column 2 Column 3 Larger gutter Column 1 Column 2 Column 3
answers question: http://stackoverflow.com/q/79004360
downvote count: 0
accepted answer of: http://stackoverflow.com/q/79004360
type: AcceptedAnswer
score: 2
upvote count: 2
type: Answer

http://stackoverflow.com/comment/139197479
type: Comment
score: 0
type: QuestionComment
has text: Can you provide a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) so contributors can help you with your problem? Also please read [how do I ask a good question](https://stackoverflow.com/help/how-to-ask). You'll get better answers if you follow this guidance.
comment on: http://stackoverflow.com/q/78948289

scale
tags question: http://stackoverflow.com/q/78929926
tag name: scale
type: Tag
tags question: http://stackoverflow.com/q/78986317
tags question: http://stackoverflow.com/q/79091458
tags question: http://stackoverflow.com/q/79468523
tags question: http://stackoverflow.com/q/79460303

http://stackoverflow.com/comment/139276827
type: QuestionComment
type: Comment
has text: I can't see any reason this should be happening, it feels like it could be a quirk in webkit's anti-aliasing when layering certain colours... but there's not much you can do if that's the case.
score: 0
comment on: http://stackoverflow.com/q/78991256

http://stackoverflow.com/q/78997269
tagged with: http://stackoverflow.com/tag/html
type: Question
tagged with: prismjs
tagged with: javascript
has title: Prism js AutoLoader does not work when i'm getting text to be rendered in realtime via a websocket
tagged with: css
answer count: 0
tagged with: vscode-extensions
has body: So i'm trying to implement my own ai code assistant chat in vscode,so i used marked js for parsing the text output i get from the backend via openAI api and stream those values to the frontend which works well and good,but i'm having issues with prism js for syntax highlighting because it's not working at all and i can't debug why,it actually worked when i added a code block statically to my html page but hasn't since i have been getting values to be parsed from the server. because the entire html script is long i will divide the snippets into smaller reader chunks that's most important. so here's where i'm adding prism js cdns needed : Chat UI This is my script section where i basically do all the parsing : so this part of the code : // Handle messages from the extension window.addEventListener('message', event => { const message = event.data; // The message sent from the extension switch (message.command) { case 'receiveMessage': const questionId=message.data.question_id; if(localStorage.getItem(questionId)==null){ const aiMessageDiv = document.createElement('div'); aiMessageDiv.classList.add('message-div'); aiMessageDiv.innerHTML = \` \${ParseMessage(message.data.message.value)} \`; document.querySelector('.chatbox').appendChild(aiMessageDiv); localStorage.setItem(questionId, questionId); }else{ current_message=document.getElementById(\`ai-reply-\${questionId}\`); current_message.innerHTML=''; typeText(current_message,ParseMessage(message.data.message.value)) } break; } }); is basically the entry point where i get the values from my websocket server. my current css styles for the code blocks are below(the ones to change the token styles do not work at all) : .code-block { position: relative; background: black; border-radius: 8px; /* Rounded corners */ margin-top:0.6rem; margin-bottom:0.6rem; margin-right:1rem; overflow: hidden; padding-top:2rem!important; box-sizing: border-box; } .code-toolbar { position: absolute; top: 0; left: 0; right: 0; background: #333; co…
score: 0
type: UnansweredQuestion

http://stackoverflow.com/comment/139128798
type: Comment
has text: It would be helpful to provide the html code. and the actual image path
type: QuestionComment
score: 1
comment on: http://stackoverflow.com/q/78909194

http://stackoverflow.com/comment/139377971
type: Comment
score: 0
type: QuestionComment
has text: Thank you for your reply. I found the problem and the problem was I did not add the viewport meta in the header which cause this issue.
comment on: http://stackoverflow.com/q/79028399

http://stackoverflow.com/a/78910813
score: 1
upvote count: 1
has body: You have to make it inline-flex and then center it using any appropriate method on it's parent. body { text-align: center; } .cta-primary { display: inline-flex; justify-content: center; align-items: center; outline: 1px solid red; } .cta-primary .button-group { display: flex; gap: 10px; /* Optional spacing between buttons */ } One Two
type: AcceptedAnswer
answers question: http://stackoverflow.com/q/78910644
type: Answer
accepted answer of: http://stackoverflow.com/q/78910644
downvote count: 0

http://stackoverflow.com/a/78968651
has body: I hope I understood your problem correctly If you add this to your code, a space will be added at the end of the scroll. .flex-container:last-child { margin-right: 8px; }‍‍‍
answers question: http://stackoverflow.com/q/78967859
type: Answer
score: 0

http://stackoverflow.com/comment/139160071
type: Comment
comment on: http://stackoverflow.com/q/78927456
score: 0
has text: Did you checkout the following post: https://stackoverflow.com/questions/71050102/how-can-i-hide-or-change-the-drag-not-allowed-cursor-during-a-dragging
type: QuestionComment

http://stackoverflow.com/q/79032409
type: UnansweredQuestion
score: 1
favorite count: 0
type: Question
has body: I've spent a while building a custom block to give me a wrapper that I can theme for inner blocks. All good. I am able to add the required support in the block config (block.json): "supports": { "html": false, "spacing": { "padding": ["top", "bottom"], "margin": ["top", "bottom"] } }, ... and the required settings in theme.json: "spacing": { "spacingScale": { "steps": 0 }, "spacingSizes": [ { "name": "xSmall", "size": "2rem", "slug": "x-small" }, { "name": "Small", "size": "3rem", "slug": "small" }, { "name": "Medium", "size": "4rem", "slug": "medium" }, { "name": "Large", "size": "5rem", "slug": "large" }, ] } However the whole thing breaks down when I start thinking about responsive styles. I would like to have padding and margin values that change at different breakpoints. I would normally add tailwind classes to give me responsive spacing. Anyone come across a way to deal with this. I did think about adding attributes to the block to select spacing values (xs, s, md, l, xl) and then assign class(s) based on value selected. This just feels like a lot of work and there should be a way to get something responsive working. I thought the clamp(x, y, z) css feature might work but the min and max values don't respond to breakpoints. Appreciate any thoughts.
answer count: 1
has answer: http://stackoverflow.com/a/79093050
downvote count: 0
upvote count: 1
has title: Wordpress Custom Block Spacing (Padding and Margin) Responsive
tagged with: css
tagged with: wordpress-gutenberg

http://stackoverflow.com/q/79018488
score: 0
tagged with: gatsby
has title: CSS Animations not working after a a Gatsby Built
has body: My CSS animations are not working after a build. Gatsby is building the wrong CSS bundle The original CSS is: @supports (animation-timeline: view()) { #hero-slide-scroll { min-height: 90dvh; height: 90dvh; } .scroll-slide { animation: scroll-slide linear forwards; animation-timeline: view(); animation-range-start: 100dvh; } } The complied CSS becomes: @supports (animation-timeline: view()) { #hero-slide-scroll { min-height: 90dvh; height: 90dvh; } .scroll-slide { animation-timeline: view(); animation-range-start: 100dvh; animation: scroll-slide linear forwards; } } Do you know how to fix this issue?
answer count: 0
tagged with: css
type: UnansweredQuestion
tagged with: http://stackoverflow.com/tag/html
type: Question

http://stackoverflow.com/comment/139409119
comment on: http://stackoverflow.com/a/79061289
type: Comment
score: 0
type: AnswerComment
has text: This is a good answer because it shows how to solve this kind of problem with minimal code, and it can also be changed so that the button is the last element in the HTML document flow for better accessibility. The one problem I had is it did not work as expected at viewport width ~650-699. The button doesn't change position exactly when the fieldset collapses.

http://stackoverflow.com/a/79007197
type: Answer
downvote count: 0
upvote count: 1
has body: a way to do this... -> doc on .toISOString() method const dateRef = new Date().toISOString().substring(5,10); // -> `MM-DD` document.querySelectorAll('.grid-item').forEach( elm => { elm.classList.toggle('today', elm.dataset.date === dateRef); }); .grid-item { width : 4em; height : 2em; float : left; background : #eba4c2; margin : .3em; text-align : center; line-height : 2em; box-sizing : border-box; } .today { background : yellow; border : red 1px solid; } .grid-item::before { content : attr(data-date); }
answers question: http://stackoverflow.com/q/79006902
has comment: http://stackoverflow.com/comment/139305974
score: 1

http://stackoverflow.com/a/79041698
answers question: http://stackoverflow.com/q/79041692
has body: Similar to how you placed the popup name and description into a containing div element, you can place the next/prev buttons and image into another div container and absolutely position the buttons relative to it instead of the overall content container. Example: &lt;div id=&quot;popup&quot; class=&quot;popup hidden&quot;&gt; &lt;div class=&quot;popup-content&quot;&gt; &lt;span id=&quot;closePopup&quot; class=&quot;close&quot;&gt;&amp;times;&lt;/span&gt; &lt;div id=&quot;image-container&quot;&gt; &lt;button id=&quot;prevImage&quot; class=&quot;nav-button&quot;&gt;&amp;lt;&lt;/button&gt; &lt;img id=&quot;popupImage&quot; src=&quot;....&quot; alt=&quot;Project Image&quot; /&gt; &lt;button id=&quot;nextImage&quot; class=&quot;nav-button&quot;&gt;&amp;gt;&lt;/button&gt; &lt;/div&gt; &lt;div class=&quot;popup-text&quot;&gt; &lt;p id=&quot;popupName&quot;&gt;....&lt;/p&gt; &lt;p id=&quot;popupDescription&quot;&gt;....&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; ... .popup-content { color: #dddddd; background-color: #494949; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 20px; padding-top: 30px; padding-bottom: 30px; padding-left: 30px; border-radius: 20px; width: 70vw; max-width: 1600px; height: auto; max-height: 1000px; text-align: left; display: flex; flex-direction: row; justify-content: center; align-items: center; position: relative; gap: 8%; /* &lt;-- add &quot;padding&quot; here */ } ... #popupImage { border-radius: 20px; /* margin-right: 8%; remove */ position: relative; } ... #image-container { height: auto; position: relative; } ... Note that because I don't have your complete HTML and CSS I had to omit, or change, some of image CSS to get it to render nicely in isolation. You may need to tweak your CSS styling a bit more as well.
accepted answer of: http://stackoverflow.com/q/79041692
upvote count: 2
score: 2
type: AcceptedAnswer
type: Answer
downvote count: 0

http://stackoverflow.com/comment/139194458
has text: Thanks @ZachJensz, but `mix-blend-mode: difference` makes it worse in some circumstances (see above). It seems that the other `mix-blend-mode` options aren't of much use for this instance either.
type: QuestionComment
comment on: http://stackoverflow.com/q/78946419
type: Comment
score: 0

http://stackoverflow.com/q/78925434
has answer: http://stackoverflow.com/a/78925479
type: Question
duplicate of: http://stackoverflow.com/q/22092724
tagged with: http://stackoverflow.com/tag/html
type: AnsweredQuestion
tagged with: vertical-alignment
score: 0
accepted answer: http://stackoverflow.com/a/78925479
tagged with: reactjs
has answer: http://stackoverflow.com/a/78925469
answer count: 2
has body: I have three elements, two buttons and one bolded text element that I want to display at the same height. I also have text in a tag that I want centered. Here is what I see right now: How can I center this tag and center the text inside of it? Here is my HTML/React code: 100 and my css: .PlusButton { background-color: blue; width: 100px; height: 100px; display: inline-block; } .Counter { display: inline-block; background-color: white; width: 200px; height: 100px; text-align: center; color: #282c34; display: inline-block; } .MinusButton { background-color: blue; width: 100px; height: 100px; display: inline-block; } .ContainerDiv { display: inline-block; vertical-align: center; text-align: center; }
tagged with: css
duplicate of: http://stackoverflow.com/q/5703552
has title: I have three elements of the same height but they are not appearing at the same level AND the text inside is not centered vertically
linked to: http://stackoverflow.com/q/22092724
possible better answer: http://stackoverflow.com/a/78925469

http://stackoverflow.com/comment/139158782
comment on: http://stackoverflow.com/q/78927044
type: Comment
score: 2
type: QuestionComment
has text: I don't think that's possible in just CSS, it might be worth mentioning if you are open to answers using JavaScript.

http://stackoverflow.com/a/78996913
accepted answer of: http://stackoverflow.com/q/78996044
has body: Remove background-color: inherit !important;, that doesn't achieve what you want. The unwanted color you are dealing with is not actually a background-color - it's a box-shadow, coming from .table&gt;:not(caption)&gt;*&gt;* { padding: .5rem .5rem; background-color: var(--bs-table-bg); border-bottom-width: 1px; box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg); } So overwrite that with box-shadow: none in your :hover rules, where you are currently trying to inherit the background-color.
has comment: http://stackoverflow.com/comment/139289042
type: AcceptedAnswer
type: Answer
score: 0
answers question: http://stackoverflow.com/q/78996044

http://stackoverflow.com/a/78993283
answers question: http://stackoverflow.com/q/78993240
accepted answer of: http://stackoverflow.com/q/78993240
has body: Close the form. Move the checkbox outside the form Make a function and use addEventListener on the checkbox window.addEventListener('load', () => { // when the elements are available document.getElementById('df1').addEventListener('click', (e) => { const show = e.target.checked; document.getElementById("co").style.visibility = show ? 'visible' : 'hidden'; }); }); Name Roll No. Using hidden (so the form does not take up space): window.addEventListener('load', () => { // when the elements are available document.getElementById('df1').addEventListener('click', (e) => { document.getElementById("co").hidden = !e.target.checked; }); }); Name Roll No.
score: 0
type: AcceptedAnswer
type: Answer

http://stackoverflow.com/a/78906483
has body: Always remember one rule. Max-width and max-height will never work on pseudo-classes like hover active, so just use height and width for the :hover part. #btn1 { height: 150px; width: 220px; position: absolute; left: 550px; top: 400px; background-image: url(Images/portugal-flag.jpg); background-size: cover; cursor: pointer; } #btn1:hover { height: 200px; // not max-height width: 250px; // not max-width } Lisbon
type: Answer
score: -1
downvote count: 1
answers question: http://stackoverflow.com/q/78906308
upvote count: 0

http://stackoverflow.com/comment/139166176
type: Comment
has text: @CallumLuxford Please see the updated snippet
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78931052

http://stackoverflow.com/comment/139146600
score: 0
comment on: http://stackoverflow.com/q/78919901
has text: So do you want 50% of the height of the image and 75% of the width of the image to always be visible for example? And then, how much maximum and minimum of the width and the height of the container do you want it to take up?
type: QuestionComment
type: Comment

http://stackoverflow.com/comment/139177056
type: QuestionComment
has text: Please add code here , so we can able to help you
comment on: http://stackoverflow.com/q/78937046
type: Comment
score: 0

http://stackoverflow.com/comment/139233674
has text: Korean vertical writing does not rotate the characters. If you want to rotate all characters, use a rotation transform or [sideways writing mode](https://www.w3.org/International/articles/vertical-text/index).
comment on: http://stackoverflow.com/q/78967831
type: Comment
score: 5
type: QuestionComment

menu
tag name: menu
tags question: http://stackoverflow.com/q/79012295
tags question: http://stackoverflow.com/q/78936069
tags question: http://stackoverflow.com/q/79048712
type: Tag
tags question: http://stackoverflow.com/q/79059194
tags question: http://stackoverflow.com/q/78986891
tags question: http://stackoverflow.com/q/78954787
tags question: http://stackoverflow.com/q/79191367
tags question: http://stackoverflow.com/q/79147467
tags question: http://stackoverflow.com/q/79132239
tags question: http://stackoverflow.com/q/79168496
tags question: http://stackoverflow.com/q/79355637
tags question: http://stackoverflow.com/q/79273415
tags question: http://stackoverflow.com/q/79394825
tags question: http://stackoverflow.com/q/79470658
tags question: http://stackoverflow.com/q/79422446
tags question: http://stackoverflow.com/q/79438518
tags question: http://stackoverflow.com/q/79474320

http://stackoverflow.com/q/79011275
upvote count: 1
has answer: http://stackoverflow.com/a/79020360
accepted answer: http://stackoverflow.com/a/79020360
favorite count: 0
type: Question
answer count: 1
tagged with: http://stackoverflow.com/tag/html
tagged with: font-awesome
downvote count: 1
has comment: http://stackoverflow.com/comment/139330102
type: AnsweredQuestion
score: 0
has comment: http://stackoverflow.com/comment/139313471
has comment: http://stackoverflow.com/comment/139313588
has body: I am trying to host font awesome locally, though it doesn't show its icons and I have no idea why. Here is what I did: Title ... And here are the files I added to my project: Font awesome files I added to my project I tried looking on https://docs.fontawesome.com/web/setup/host-yourself/webfonts but it doesn't say to do anything different. I expected the fontawesome icon would be shown
has title: Fontawesome 6 hosted locally not showing icons
tagged with: css
has comment: http://stackoverflow.com/comment/139313448

http://stackoverflow.com/comment/139362440
type: QuestionComment
type: Comment
comment on: http://stackoverflow.com/q/79036823
score: 0
has text: @Yogi thanks but I don’t see how to get those rather specific color changes, or rather, I can’t see how it’s much simpler to use progress bar.

http://stackoverflow.com/q/79052612
type: UnansweredQuestion
tagged with: http://stackoverflow.com/tag/html
type: Question
has title: Marquee stutters only in iOS Chrome - but fine on Desktop and Android
has comment: http://stackoverflow.com/comment/139396970
score: 0
tagged with: javascript
has body: Fairly new to CSS, I spent a long time trying to figure out how to do a nice smooth text ticker, and one that resizes neatly from desktop to mobile? The scroller is pulled in where "textticker" / "textticker" appears, and the JS is at the bottom. It seems to generally work fine on desktop. But when I try it on iPhone, the text scrolls, jitters, or suddenly starts over breaking the smooth scroll effect. Any ideas how to fix? body { background-color:; padding: 0px; margin:0px; font-family: 'Times New Roman', Times, serif font-size: 1.1rem; color: #333333; /* Set default text color to #333333 */ line-height: 1; overflow-x: hidden; } .container { margin: 0px; width: 100%; background-color: #e5e5e5; padding: 0px; display: flex; justify-content: center; align-items: center; flex-direction: column; /* Change flex direction to column */ box-sizing: border-box; } /* product starts <<<<<<<<<<<<<<<<<<< */ /* Product container */ /* Product container */ .product-container { margin: auto; width: 100vw; height: 80svh; display: flex; justify-content: center; align-items: center; background-color: #e5e5e5; padding: 0px; border-bottom: 1px solid black; position: relative; /* Allows positioning of product-info */ } /* Product inner */ .product-inner { margin: auto; width: 100%; height: 100%; display: flex; justify-content: flex-start; /* Align the product-image to the left */ align-items: center; /* Vertically center the content */ padding: 0px; } /* Flex container for product-stats and product-ticker */ .product-info { position: absolute; /* Keeps the container in the top right */ top: 40px; right: 40px; display: flex; flex-direction: column; /* Stacks child elements vertically */ width: 400px; /* Fixed width for both elements */ gap: 10px; /* Adds space between the product-stats and product-ticker */ } /* Product ticker */ .product-ticker { width: 100%; /* Takes full width of the flex container */ border: 1px solid #333333; padding: 8px; margin: 0px; box-sizing: border-box; overflo…
tagged with: css
answer count: 0
has comment: http://stackoverflow.com/comment/139390539
has comment: http://stackoverflow.com/comment/139397416

http://stackoverflow.com/comment/139175268
type: Comment
comment on: http://stackoverflow.com/q/78936068
type: QuestionComment
has text: Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a **Stack Snippet** using the `<>` icon.. Although you have provided a link, if it was to become invalid, your question would be of no value to other future SO users with the same problem. See [**Something in my website/example doesn't work can I just paste a link**](http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to-it).
score: 1

http://stackoverflow.com/comment/139322799
comment on: http://stackoverflow.com/a/79015259
type: Comment
has text: Can you elaborate what `{["search-input", searchActive && "active"].filter(Boolean).join(" ")}` does?
score: 0
type: AnswerComment

http://stackoverflow.com/comment/139348756
type: QuestionComment
comment on: http://stackoverflow.com/q/79030490
type: Comment
has text: can you explain, and give an example, of why you need inline styles sometimes?
score: 0

http://stackoverflow.com/comment/139175356
type: QuestionComment
comment on: http://stackoverflow.com/q/78936069
type: Comment
has text: Too many words. Can you post an image of the result you want?
score: 0

http://stackoverflow.com/a/78990966
score: 0
has body: The 'ball' element was allowed to move beyond the boundaries of its parent container because there was no restriction on its movement so it could follow the mouse beyond the boundary of 'bar_2'. I changed the ball's position to absolute, and then changed some of the JS so that the mouse movement is tracked and only moves within the 'bar_2' container. #ball { position: absolute; /* Changed this to absolute */ width: 50px; height: 50px; border-style: solid; border-radius: 50%; } main.addEventListener("pointermove", (event) => { const rect = main.getBoundingClientRect(); // This calculates the mouse's position relative to bar_2. let x = event.clientX - rect.left; let y = event.clientY - rect.top; // I have implemented this logic to make sure the ball's x and y positions stay within the boundaries of bar_2. x = Math.max(0, Math.min(x, rect.width - ball.offsetWidth)); y = Math.max(0, Math.min(y, rect.height - ball.offsetHeight)); // Sets the ball's position inside the bar_2 container based on the coordinates of x and y, centering the ball on the mouse. ball.style.left = `${x}px`; ball.style.top = `${y}px`; ball.style.transform = "translate(-50%, -50%)"; });
type: Answer
answers question: http://stackoverflow.com/q/78990537
has comment: http://stackoverflow.com/comment/139290877
has comment: http://stackoverflow.com/comment/139300662

cors
type: Tag
tags question: http://stackoverflow.com/q/78948123
tag name: cors
tags question: http://stackoverflow.com/q/79418882

http://stackoverflow.com/a/78957822
upvote count: 1
has body: If you mean the white space above the banner. Decrease the margin-bottom of this classes .home.blog .site-header, .home.page:not(.page-template-template-homepage) .site-header, .home.post-type-archive-product .site-header { margin-bottom: 4.235801032em; } This is how it looks after that.
score: 1
answers question: http://stackoverflow.com/q/78957784
accepted answer of: http://stackoverflow.com/q/78957784
type: AcceptedAnswer
downvote count: 0
type: Answer

http://stackoverflow.com/comment/139182415
score: 1
has text: Can you show that this works? Perhaps add one that DOES have content
type: Comment
type: AnswerComment
comment on: http://stackoverflow.com/a/78939863

http://stackoverflow.com/comment/139360907
comment on: http://stackoverflow.com/q/79035255
type: QuestionComment
has text: @Paulie_D updated my question. thanks
type: Comment
score: 0

http://stackoverflow.com/a/78930658
has comment: http://stackoverflow.com/comment/139165714
score: 2
downvote count: 0
type: Answer
has comment: http://stackoverflow.com/comment/139165694
has body: Try changing the fill of rect. You may think about using CSS filter, but there are many difficulties because the elements that can be controlled are red. I hope it helps :) Method1 A new svg image I worked with illustration and photoshop and saved it as an svg file. So, you can get white elemnt, transparent background * { padding: 0; margin: 0; } body { background: orange; } <i:aipgfRef xlink:href="#adobe_illustrator_pgf"> </i:aipgfRef> <g i:extraneous="self"> </g> Method2 Red path to orange The svg currently has the part represented in red as an object. It's hard to change it to transparent. You can match it with the background color. * { padding: 0; margin: 0; } body { background: orange; } <rect fill="#fff" width="100%" height="100%"/> Remove white background Method1 * { padding: 0; margin: 0; } body { background: orange; } <rect fill="transparent" width="100%" height="100%"/> Method2 There is also a way to set transparency. For example, I adjusted it moderately. * { padding: 0; margin: 0; } body { background: orange; } <rect fill="#fff" fill-opacity="0.2" width="100%" height="100%"/>
upvote count: 2
answers question: http://stackoverflow.com/q/78930649

http://stackoverflow.com/comment/139175051
comment on: http://stackoverflow.com/a/78935743
type: Comment
type: AnswerComment
has text: @j3py yes, it's pretty much the same idea, but it's still a hack. And I don't claim to be perfect here ;)
score: 1

http://stackoverflow.com/a/79007002
has body: I would define the SVG inside the mask variable instead of creating an SVG element then reference it. document.addEventListener('DOMContentLoaded', function() { let funnels = document.getElementsByClassName('funnel'); for (let i = 0; i < funnels.length; i++) { let segments = funnels[i].children[1].children; for (let j = 0; j < segments.length; j++) { const from = parseFloat(segments[j].getAttribute('data-from')); const to = parseFloat(segments[j].getAttribute('data-to')); const difference = (from - to) / 2; const d = `M 0 ${50 - from * 50} Q 25 ${50 - from * 50} 50 ${50 - ( ( to + difference ) * 50 )} T 100 ${50 - to * 50} V 100 ${50 + to * 50} Q 75 ${50 + to * 50} 50 ${50 + ( ( to + difference ) * 50 )} T 0 ${50 + from * 50} V ${50 - from * 50} Z`; segments[j].style.setProperty('--mask', 'url(\'data:image/svg+xml;utf8, \')'); } } }); .funnel>div:last-child { display: flex; height: 300px; } .funnel>div:last-child div { background: green; flex: 1; } .funnel:not( .no-mask)>div:last-child div { mask-image: var( --mask); } Funnel (Mask)
type: Answer
answers question: http://stackoverflow.com/q/79006570
downvote count: 0
score: 1
upvote count: 1

http://stackoverflow.com/comment/139119700
has text: A long time has passed since I last used Webpack, so check how to create a folder in the destination directory (build) and configure Webpack to move .css files into it. I guess this will fix your problem. If you can’t figure it out, I’ll take a look.
type: Comment
comment on: http://stackoverflow.com/q/78905678
score: 0
type: QuestionComment

http://stackoverflow.com/comment/139248859
type: QuestionComment
has text: By runnable snippet you just mean throw everything into a single html file or something?
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78975591

http://stackoverflow.com/comment/139342847
type: QuestionComment
type: Comment
comment on: http://stackoverflow.com/q/79027496
score: 3
has text: Please [edit] your question to include a [mre] so that readers can run your code to answer your question.

clearfix
type: Tag
tag name: clearfix
tags question: http://stackoverflow.com/q/78967851

http://stackoverflow.com/comment/139400631
type: Comment
has text: @AHaworth oh yes you’re right, I stand corrected, thanks for pointing that out
comment on: http://stackoverflow.com/q/79058968
score: 0
type: QuestionComment

http://stackoverflow.com/comment/139198967
comment on: http://stackoverflow.com/q/78948750
has text: @NINE if I add max-height: 100vh; or max-height: 100%; to the body, the child (cards) still continue to grow.
type: Comment
score: 0
type: QuestionComment

http://stackoverflow.com/comment/139286858
has text: @VolodymyrTabashnyuk In your above link effect is working properly. I think changing the editor view middle one to show output below the code and scroll down to the bottom imageContainer is sticky till the parent div.
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78994088

http://stackoverflow.com/comment/139369582
has text: I initially used some `w-1/4` and even by setting some `max-w-[1920px]` on parent it still got overrided
type: Comment
score: 0
comment on: http://stackoverflow.com/a/79039692
type: AnswerComment

http://stackoverflow.com/q/78936071
type: UnansweredQuestion
has title: Size and border are not suitable in SVG screenshots when screenshoting a div element
type: Question
has answer: http://stackoverflow.com/a/78936086
tagged with: http://stackoverflow.com/tag/html
has body: I want to make the custom element doesn't require a div element inside, make the image's size like the div's size, and make the div's bottom border appear. Also, the style element should be in the div to work, and it's better to solve. This code works perfectly except those stuff. Simply, html2canvas is missing some elements so I remade it but with SVG. Custom element Download Digital certification This certification is made for developers, from developers. This one is specially made for: Username From: HTML, CSS, JavaScript 0%
answer count: 1
score: 0
tagged with: javascript
tagged with: css

http://stackoverflow.com/comment/139396346
type: QuestionComment
comment on: http://stackoverflow.com/q/79055607
type: Comment
score: 0
has text: You can set the `fixed height` of the `table container` with `overflow-y` property.

http://stackoverflow.com/q/78918363
has body: I have an html file which kinda looks like this , it is a long one I'm just showing you a little piece of it: İstifadə şərtləri razılıq anlaşması (Xidmət şərtləri və Məxfilik siyasəti) And I have a modal in one of my components , I need to show this html content which is basically some styled text , nothing functional in this modal. I have tried saving this html file in my public folder or src folder. But even when i try to import the document it doesn't see it or import it. I need an easy approach to this problem
type: UnansweredQuestion
score: 1
upvote count: 1
favorite count: 0
has title: Show HTML file in a modal Nextjs
tagged with: modal-dialog
type: Question
has answer: http://stackoverflow.com/a/78918444
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139142137
downvote count: 0
answer count: 1
has comment: http://stackoverflow.com/comment/139142825
tagged with: javascript
has comment: http://stackoverflow.com/comment/139142197
has comment: http://stackoverflow.com/comment/139142123
tagged with: next.js
tagged with: css

liquid
tags question: http://stackoverflow.com/q/78941051
type: Tag
tag name: liquid
tags question: http://stackoverflow.com/q/79278409
tags question: http://stackoverflow.com/q/79507509
tags question: http://stackoverflow.com/q/79546458

http://stackoverflow.com/a/78959690
answers question: http://stackoverflow.com/q/78959643
type: Answer
has body: This is how you can show a hidden label when the user is hovering around the button. There are 2 sumbit buttons because there is one for the image alt (you can't display the image here, and one for label after you hover on the button. function ShowSubmitButton() { document.getElementById("submit").style.display = "block" } #submit { display: none; } &lt;button&gt; &lt;img src="./images/iconok.png" alt="Submit" onmouseover="ShowSubmitButton()"&gt; &lt;!--There are two submits because the top one is from the alt of the img--&gt; &lt;label id="submit"&gt;&amp;nbsp;Submit&lt;/label&gt; &lt;/button&gt; But I wouldn't suggest you to use that. Instead, I would like to give you a better code here: function ShowSubmitButton() { document.getElementById("submit").style.display = "block" } #submit { display: none; } &lt;img src="./images/iconok.png" alt="Submit" onmouseover="ShowSubmitButton()"&gt;&lt;!--This "submit" is from alt--&gt; &lt;button id="submit"&gt; &lt;label&gt;&amp;nbsp;Submit&lt;/label&gt; &lt;/button&gt; Explaination I am using JavaScript to modify the button's style&gt; property through an addEventListener method. However, in this instance, I didn't use addEventListener because you can also set it directly within the HTML element's attributes. As an alternative approach, you could reverse the logic by applying display: none when the button is not being hovered over. This will hide the submit button when it’s not active. If you choose to implement this, you'll need to add a container around the button because when you are hovering on that image, you will not be able to click the submit button at the same time. Just please let me know if you need help with this setup.
score: 0
upvote count: 1
downvote count: 1

http://stackoverflow.com/q/78941056
score: 0
has body: I have a product card that when you click on it a modal should appear that is position: fixed; and it has a z-index: 1000;. But only on 1 specific page of Safari it doesn't work properly. If you have a iPhone you can see it on the live website here (unless it has been fixed already): Page that doesn't work --- Page that does work You can test it by clicking on a product card On that page I did a test I have this code containing the product with the modal .productCardsContainerWrapper { overflow-x: auto; -webkit-overflow-scrolling: auto !important; .productCardsContainer { display: flex; gap: 15px; width: fit-content; margin-left: auto; margin-right: auto; padding: 5px 8px; } } I did one test where I removed this and it somewhat fixed the issue. overflow-x: auto; -webkit-overflow-scrolling: auto !important; The problem is I actually need to have that that code because it needs to scroll horizontally If you have a iPhone you can see it on the live website here (unless it has been fixed already): Page that doesn't work --- Page that does work You can test it by clicking on a product card Here is more code. products.scss .productModalContainer { position: relative; z-index: 1000; opacity: 0.99; .background { position: fixed; top: 0; left: 0; z-index: 1000 !important; height: 100vh; width: 100vw; background-color: rgba(0, 0, 0, 0.4); } .productModal { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 1001 !important; display: flex; flex-direction: column; height: 70vh; width: 85%; max-width: 420px; padding: 16px; border-top-left-radius: 24px; border-top-right-radius: 24px; background-color: #f0f0f0; box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.25); overflow-y: auto; &amp;::-webkit-scrollbar { width: 0px; } .closeText { position: absolute; top: -25px; right: 5px; z-index: 1001; color: rgba(255, 255, 255, 0.9); text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2); } .productImgContainer { width: 100%; aspect-ratio: 1; .productImg { width: 100%; height: 100%; …
tagged with: css-position
tagged with: sass
answer count: 0
tagged with: css
tagged with: z-index
type: UnansweredQuestion
has title: why doesnt z-index doesnt work properly in Safari on iPhone?
type: Question
tagged with: http://stackoverflow.com/tag/html

http://stackoverflow.com/comment/139227795
type: Comment
comment on: http://stackoverflow.com/q/78964335
score: 0
type: QuestionComment
has text: This isn’t a grid. You may find column-count useful.

http://stackoverflow.com/a/78991778
answers question: http://stackoverflow.com/q/78991638
has body: I was not able to completely test this answer but you might be able to modify Firefox generated pages using userContent.css. Placing some CSS such as the following inside of it. @-moz-document regexp(&quot;^(file|chrome|resource).*/$&quot;){ body{ background: #323427 !important } } Link to modifying userContent below https://support.mozilla.org/en-US/kb/contributors-guide-firefox-advanced-customization
type: Answer
score: 0

http://stackoverflow.com/comment/139271299
type: AnswerComment
score: 1
comment on: http://stackoverflow.com/a/78988300
type: Comment
has text: It’s not always necessary to use media queries in order to have a responsive website. For example, relative units can be used.

http://stackoverflow.com/comment/139362531
type: QuestionComment
has text: To get the correct color on stopping the animation partway I think the simplest method is a couple of lines of Javascript. Is this acceptable (I imagine you'll be using JS to communicate the % anyway).
comment on: http://stackoverflow.com/q/79036823
score: 1
type: Comment

http://stackoverflow.com/comment/139346462
has text: thank you very much @DiegoD ++ I will move to select2 for this particular use-case.
type: Comment
score: 0
comment on: http://stackoverflow.com/q/79023183
type: QuestionComment

http://stackoverflow.com/a/78940390
score: 1
has comment: http://stackoverflow.com/comment/139183502
answers question: http://stackoverflow.com/q/78940243
type: Answer
has comment: http://stackoverflow.com/comment/139184049
downvote count: 0
has body: You can use a combination of overriding the default CSS variables and custom classes to achieve the desired effect. We use .custom-chip-color * selector to configure the new CSS variables you want to use for the chip colors. We will configure this color for manager section, using CSS class .custom-chip-color .mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled):hover .manager-tab. .custom-chip-color * { --mdc-chip-elevated-container-color: lightgreen; --mdc-chip-hover-state-layer-color: green; } .custom-chip-color .mat-mdc-chip:hover .mat-mdc-chip-focus-overlay { background-color: var(--mdc-chip-hover-state-layer-color) !important; } .custom-chip-color .mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled):hover { background-color: var(--mdc-chip-hover-state-layer-color) !important; } .custom-chip-color .mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled):hover .manager-tab { background-color: var(--mdc-chip-hover-state-layer-color) !important; } Stackblitz Demo
upvote count: 1
has comment: http://stackoverflow.com/comment/139183576

http://stackoverflow.com/a/79033309
accepted answer of: http://stackoverflow.com/q/79033289
has body: Try inlining your SVG: function getRandomColor() { const letters = '0123456789ABCDEF'; let color = '#'; for (let i = 0; i < 6; i++) { color += letters[Math.floor(Math.random() * 16)]; } return color; } document.addEventListener('keydown', (event) => { if (event.key === 's' || event.key === 'S') { const circle = document.getElementById('colorCircle'); circle.setAttribute('fill', getRandomColor()); } }); body, html { height: 100%; margin: 0; display: flex; justify-content: center; align-items: center; background-color: #f0f0f0; } svg { width: 100px; height: 100px; } SVG Circle Color Changer
type: AcceptedAnswer
type: Answer
score: 0
answers question: http://stackoverflow.com/q/79033289

http://stackoverflow.com/comment/139264009
type: QuestionComment
comment on: http://stackoverflow.com/q/78979287
type: Comment
score: 0
has text: I have tried by myself why do you think I’m asking here @1stthomas

http://stackoverflow.com/comment/139219821
has text: ADyson OK, centering is completed. All that remains is to thank you very much for your assistance - and perseverance!
comment on: http://stackoverflow.com/a/78956442
type: Comment
score: 0
type: AnswerComment

http://stackoverflow.com/a/79010807
has body: Set flex-shrink: 0 (default is 1) on .top-menu to prevent it from decreasing in height.
downvote count: 0
type: AcceptedAnswer
type: Answer
score: 2
upvote count: 2
answers question: http://stackoverflow.com/q/79010725
accepted answer of: http://stackoverflow.com/q/79010725

http://stackoverflow.com/a/79051631
answers question: http://stackoverflow.com/q/79050854
type: Answer
downvote count: 0
upvote count: 1
has body: .banner &gt; a { color: red; }
score: 1

http://stackoverflow.com/comment/139207746
type: QuestionComment
has text: This seems like an issue with your overall layout and not just the carousel. Plase show that. You can present a working demo using the editor. Also, it's bad practice to apply styles to core Bootstrap classes like `carousel`. That shouldn't be necessary, but if it is it should be done with either existing Bootstrap classes or custom classes.
comment on: http://stackoverflow.com/q/78951420
type: Comment
score: 0

http://stackoverflow.com/q/79007150
type: UnansweredQuestion
type: Question
tagged with: http://stackoverflow.com/tag/html
has answer: http://stackoverflow.com/a/79102578
answer count: 1
has body: Instead of saving views position its just delete them, or i dont know what it is doing to views and other elements, i will show pictures it is easier to explain. [![What i want 1][https://i.sstatic.net/gYoblXvI.png] But instead i am fighting with this problems: This is part of first jsx file return value that is allowing me to make flatlist <FlatList data={uprosceno} renderItem={({ item }) => { return ( ); }} This is second jsx file that uses functional component and also part of return value const [pritisnutKlip, pritisniKlip] = useState(false); {pustiKlip ? ( Клип се пушта ... ) : ( { kreirajPKlipa(true); pritisnutKlip ? pritisniKlip(false) : pritisniKlip(true); }} className={`w-full border-2 ${ pritisnutKlip ? "border-gray-500" : "border-cyan-300" } rounded-xl`} activeOpacity={0.7} > )} ```` Also i noticed that if i set background color of this view it recognizes that view has some space between image loaded and view [![Image](https://i.sstatic.net/wBQrlXY8.png)](https://i.sstatic.net/wBQrlXY8.png) `` { kreirajPKlipa(true); ...`` [1]:
tagged with: reactjs
score: 0
tagged with: javascript
has title: How does FlatList rendering items with same names work?
tagged with: react-native
tagged with: css

http://stackoverflow.com/a/79025541
has body: Provided, you're using a variable font including a slant design axis you can interpolate between different slanting angles: body{ font-size:6vw; font-family: "Cairo"; } /** latin **/ @font-face { font-family: "Cairo"; src: url("https://fonts.gstatic.com/s/cairo/v28/SLXGc1nY6HkvalIhTpumw9t1QX8.woff2") format("woff2"); font-style: oblique -11deg 11deg; font-weight: 200 1000; } .aniStyle { animation: aniStyle 3s infinite; } .aniSlant { animation: aniSlant 3s infinite; } @keyframes aniStyle { 0% { font-style: oblique -11deg; } 50% { font-style: oblique 11deg; } 100% { font-style: oblique -11deg; } } @keyframes aniSlant { 0% { font-variation-settings: "slnt" 11; } 50% { font-variation-settings: "slnt" -11; } 100% { font-variation-settings: "slnt" 11; } } Hamburgefonsle Hamburgefonsle Some browsers may not support transitions/animations for the font-style property. Apparently, animating the font-variation-settings property currently supports the best cross browser compatibility (Firefox, Chromium, Webkit/safari. Keep in mind font animations are not well optimized compared to CSS transformations – so the transform/skew approach may be a more performant alternative.
accepted answer of: http://stackoverflow.com/q/79023867
upvote count: 3
type: AcceptedAnswer
type: Answer
answers question: http://stackoverflow.com/q/79023867
downvote count: 0
score: 3

http://stackoverflow.com/comment/139188151
score: 1
type: Comment
has text: @AHaworth yes, depending on the flag that's entered.
comment on: http://stackoverflow.com/q/78942849
type: QuestionComment

http://stackoverflow.com/a/78970225
type: Answer
score: 0
has comment: http://stackoverflow.com/comment/139238482
answers question: http://stackoverflow.com/q/78970096
has body: Remove or increase the max width value .fb-container { max-width: 1170px; } This is how it looks after the modification. this is how it was before If you want to be specific to the page, point to the class

http://stackoverflow.com/a/79007375
has body: This code allows you to dynamically input any text, then specify the highlighted parts, and afterwards you can copy it or choose to hide or display it as you wish. I tried to write comments for the codes. function updateWordList() { let text = document.getElementById('inputText').value; let words = text.split(/\s+/); let wordListDiv = document.getElementById('wordList'); wordListDiv.innerHTML = ''; // Create a checkbox for each word words.forEach((word, index) => { if (word) { let checkbox = document.createElement('input'); checkbox.type = 'checkbox'; checkbox.id = `word-${index}`; checkbox.value = word; checkbox.onchange = updateHighlight; let label = document.createElement('label'); label.htmlFor = `word-${index}`; label.innerText = word; wordListDiv.appendChild(checkbox); wordListDiv.appendChild(label); wordListDiv.appendChild(document.createElement('br')); } }); document.getElementById('resultText').innerText = text; } /** * Updates the highlighted text based on the selected words from the word list. * This function checks each word's checkbox, and if checked, highlights that word in the output. * * @function updateHighlight */ function updateHighlight() { let text = document.getElementById('inputText').value; let words = text.split(/\s+/); let highlightedText = words.map((word, index) => { let checkbox = document.getElementById(`word-${index}`); if (checkbox && checkbox.checked) { return `${word}`; } else { return word; } }).join(' '); document.getElementById('resultText').innerHTML = highlightedText; } /** * Copies the currently displayed text (with or without highlights) to the clipboard. * It extracts the plain text from the result, creates a temporary textarea, * copies the content, and then removes the temporary element. * * @function copyHighlightedText */ function copyHighlightedText() { let resultDiv = document.getElementById('resultText'); let tempTextarea = document.createElement('textarea'); tempTextarea.value = resultDiv.innerText; document.body.app…
answers question: http://stackoverflow.com/q/79006880
downvote count: 0
type: Answer
upvote count: 1
score: 1

http://stackoverflow.com/comment/139162120
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78928743
has text: Had to add `display: grid` and remove the repetitive part, but your idea seems to work!

http://stackoverflow.com/comment/139183576
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78940390
has text: @Fred2020 How about this? [stackblitz](https://stackblitz.com/edit/stackblitz-starters-6qazbj)

http://stackoverflow.com/q/79057460
has comment: http://stackoverflow.com/comment/139398220
type: UnansweredQuestion
favorite count: 0
has comment: http://stackoverflow.com/comment/139398054
has comment: http://stackoverflow.com/comment/139456016
has comment: http://stackoverflow.com/comment/139398832
has title: Image on HTML not loads properly. And it should
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139398225
type: Question
downvote count: 0
upvote count: 1
score: 1
tagged with: forms
has body: I'm doing an html that my teacher tell me to do (She just told me to put random tags with no sense and that's what i do). But i don't know why my image on the bottom of the code is not loading, its on the same folder with the exact same name. This is the code. &lt;!DOCTYPE html&gt; &lt;html lang=&quot;es&quot; xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot; /&gt; &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /&gt; &lt;meta name=&quot;author&quot; content=&quot;Tu Nombre&quot; /&gt; &lt;meta name=&quot;description&quot; content=&quot;Página de ejemplo con todas las etiquetas HTML y formulario de matrícula.&quot; /&gt; &lt;meta name=&quot;keywords&quot; content=&quot;HTML, etiquetas, ejemplo&quot; /&gt; &lt;meta http-equiv=&quot;refresh&quot; content=&quot;30&quot; /&gt; &lt;meta http-equiv=&quot;default-style&quot; content=&quot;main&quot; /&gt; &lt;meta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=UTF-8&quot; /&gt; &lt;title&gt;Ejemplo de Todas las Etiquetas HTML y Matrícula&lt;/title&gt; &lt;base href=&quot;https://www.ejemplo.com/&quot; target=&quot;_blank&quot; /&gt; &lt;link rel=&quot;stylesheet&quot; href=&quot;styles.css&quot; media=&quot;screen&quot; /&gt; &lt;link rel=&quot;alternate&quot; href=&quot;alternate.html&quot; hreflang=&quot;es&quot; /&gt; &lt;link rel=&quot;author&quot; href=&quot;author.html&quot; /&gt; &lt;script src=&quot;script.js&quot; defer&gt;&lt;/script&gt; &lt;script src=&quot;anotherScript.js&quot; charset=&quot;UTF-8&quot;&gt;&lt;/script&gt; &lt;style&gt; /* Estilo simple para mejorar la visualización */ body { font-family: Arial, sans-serif; } label { display: block; margin: 5px 0; } input[type=&quot;text&quot;], input[type=&quot;date&quot;], input[type=&quot;file&quot;] { width: 100%; padding: 8px; margin-bottom: 10px; } input[type=&quot;submit&quot;] { background-color: #4caf50; color: white; padding: 10px 15px; …
tagged with: css
answer count: 0
tagged with: image

http://stackoverflow.com/comment/139239020
type: QuestionComment
score: 0
has text: Please [edit] your question to create a [mre], ideally convert it into the hydrated html in a runnable snippet.
type: Comment
comment on: http://stackoverflow.com/q/78970641

http://stackoverflow.com/comment/139333499
has text: The question does not explicitly state it, but I suppose the current month could have more weeks after the one that contains `today`, so to cover that as well, you might want to also add `.month .week:has(.today) ~ .week .disabled`
score: 1
comment on: http://stackoverflow.com/a/79022246
type: Comment
type: AnswerComment

http://stackoverflow.com/comment/139405394
has text: [Something in my web site or project doesn't work. Can I just paste a link to it?](https://meta.stackoverflow.com/q/254428/1427878)
type: QuestionComment
comment on: http://stackoverflow.com/q/79048712
type: Comment
score: 0

http://stackoverflow.com/comment/139364234
type: QuestionComment
comment on: http://stackoverflow.com/q/79038954
has text: I made you the snippet. Now please edit it and add relevant HTML and JS (if needed) plus frameworks from CDN
score: 1
type: Comment

http://stackoverflow.com/comment/139365871
type: Comment
comment on: http://stackoverflow.com/q/79039863
type: QuestionComment
score: 0
has text: This question is similar to: [Use CSS variables with rgba for gradient transparency](https://stackoverflow.com/questions/29591465/use-css-variables-with-rgba-for-gradient-transparency). If you believe it’s different, please [edit] the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem.

http://stackoverflow.com/comment/139168146
score: 1
has text: _"without narrowing the main body section"_ - you'll want your side menu to be absolute or fixed positioned to begin with, so that when it extends in width, it will extend _over_ the content next to it, instead of moving it.
comment on: http://stackoverflow.com/q/78932108
type: Comment
type: QuestionComment

http://stackoverflow.com/comment/139294707
score: 1
comment on: http://stackoverflow.com/q/79000908
type: Comment
has text: Please create a runnable snippet that you’ve tested does indeed show the problem. Use <> in the editor.
type: QuestionComment

http://stackoverflow.com/comment/139354682
type: Comment
score: 0
has text: this is happened becuse of **CSP** https://content-security-policy.com/ and its disallow elements that are not used at all on the site. as you says `iframe { display: none; }`
type: QuestionComment
comment on: http://stackoverflow.com/q/79021330

http://stackoverflow.com/a/78941648
has body: words here
type: Answer
score: 0
answers question: http://stackoverflow.com/q/78941593

http://stackoverflow.com/comment/139312984
comment on: http://stackoverflow.com/q/79010977
type: Comment
score: 0
has text: This isn't a typical Bootstrap problem, but more a general HTML/CSS problem, so I added Bootstrap 5.3 to your code, instead of the old Bootstrap 4, when turning your code into a snippet. The outcome is the same.
type: QuestionComment

http://stackoverflow.com/a/78935771
upvote count: 1
accepted answer of: http://stackoverflow.com/q/78935770
score: 1
type: AcceptedAnswer
has body: You can apply the following CSS to fix the problem: /** Set Mermaid Diagrams to 100% width of screen by default */ .mermaid svg { display: block; width: 100%; margin: 0; padding: 0; } /** On hover, make the diagram full width and enable horizontal scrolling */ div:has(&gt; .mermaid):hover { width: auto !important; } .mermaid:hover { overflow: scroll; padding: 0; margin: 0; text-align: left; } .mermaid:hover svg { display: block; width: auto; margin: 0; padding: 0; } This will do the following changes to your theme: By default, Mermaid diagrams will now be sized to 100% of the screen width. When you hover on a diagram, it will resize to it's actual computed width and enable horizontal scrolling.
downvote count: 0
answers question: http://stackoverflow.com/q/78935770
type: Answer

fixed
type: Tag
tag name: fixed
tags question: http://stackoverflow.com/q/78939256
tags question: http://stackoverflow.com/q/79191367

http://stackoverflow.com/comment/139394820
type: Comment
score: 0
type: AnswerComment
has text: And then what do you want to happen?
comment on: http://stackoverflow.com/a/79051207

http://stackoverflow.com/a/79061537
upvote count: 3
downvote count: 0
type: Answer
score: 3
has body: Couple of things: You need -webkit-box-orient for some browsers. The browser needs some indication of the actual height, not just the max height, so this snippet includes height: fit-content. let ele = document.getElementById('header-inner'); ele.innerHTML = 'There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which '; #header-inner { height: 80px; display: -webkit-box; font-size: 15px; font-weight: normal; font-style: normal; text-decoration: none; border-width: 1px; max-height: 62px; text-overflow: ellipsis; overflow: hidden; -moz-box-orient: vertical; -webkit-box-orient: vertical; white-space: unset; -webkit-line-clamp: 3; padding-top: 0px; height: fit-content; } &lt;div id='header-inner'&gt;&lt;/div&gt;
answers question: http://stackoverflow.com/q/79061496

http://stackoverflow.com/comment/139369101
type: QuestionComment
has text: Can you write the plain text inside the `:math:`? That could avoid the line breaks. ReST itself wouldn't line break until you reach the maximum line length, but it's likely to add a line break after each `:math:` role... Do the roles get converted to images?
comment on: http://stackoverflow.com/q/79041478
type: Comment
score: 0

html5-audio
tag name: html5-audio
type: Tag
tags question: http://stackoverflow.com/q/79023871
tags question: http://stackoverflow.com/q/78964809
tags question: http://stackoverflow.com/q/79327385
tags question: http://stackoverflow.com/q/79467882

http://stackoverflow.com/a/79016899
type: Answer
has comment: http://stackoverflow.com/comment/139324355
answers question: http://stackoverflow.com/q/79016707
has body: You can use this solution only with CSS. .shrink-box { max-width: 470px; width: fit-content; padding: 10px; border: 1px solid #000; word-wrap: break-word; } Footer at Bottom Vessel / tank destruction facility
score: -2
upvote count: 0
downvote count: 2

tailwind-3
tag name: tailwind-3
tags question: http://stackoverflow.com/q/78935921
tags question: http://stackoverflow.com/q/79064518
type: Tag
tags question: http://stackoverflow.com/q/79211743
tags question: http://stackoverflow.com/q/79292336

http://stackoverflow.com/comment/139297172
score: 0
has text: Hi C3roe, I tried display property previously with JS code, setting it to block on hover, but it didnt work either. Submenu transition works fine when you hover over a menu item, and transition that I want works fine as well. The only thing is I want submenu to disappear with same transition but somehow I can not apply that. I am guessing Elementor Menu widget blocking part of my code.
type: Comment
comment on: http://stackoverflow.com/q/79002045
type: QuestionComment

http://stackoverflow.com/comment/139376840
comment on: http://stackoverflow.com/q/79045395
type: Comment
score: 0
type: QuestionComment
has text: There is no [<marquee>](https://html.spec.whatwg.org/dev/obsolete.html#non-conforming-features) element and there never has been--sort of. No HTML specification has ever had one since the beginning of time. The only reason the current spec contains a reference to it is to mark it as obsolete (not just deprecated as MDN wrongly marks it).

http://stackoverflow.com/comment/139300227
type: AnswerComment
comment on: http://stackoverflow.com/a/79004004
score: 0
has text: Anyway this is the answer. I was very frustrated when I asked this question and I am sorry for the poor question lol.
type: Comment

http://stackoverflow.com/q/79001776
tagged with: css
answer count: 0
tagged with: wrapper
tagged with: deployment
type: UnansweredQuestion
has body: Created a login and sign up form with design of container wrapper. First face is the login form which deployed fine but when I'm switching to signup form thru link located in the first face. the signup form doesn't show. Css design is working fine, the html also looks good to me. Might be the js code is the problem or the link thru signin form (take note that its not an actual link , what i mean is linked). Form for Login and Signup, styled with wrapper. My problem is the first wrapper execute but my wrapper signup do not load. Once the code is fixed I will add a validation function for user management. This form will serves as the User Portal of EDMS. Code.gs function doGet() { return HtmlService .createTemplateFromFile('index') .evaluate(); } index.html <?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?> Signin & Sign up Sign Up Welcome to Bounty's EDMS! Name Email Employee ID Password Sign Up You already have an account? Sign In Login Great to see you again! Employee ID Password Forgot password? Login Don't have an account? Sign Up You've successfully signed up for an Electronic Document Management System account! Please wait for an email confirmation to complete your account setup. Once you receive the verification email, you may log in. <?!= HtmlService.createHtmlOutputFromFile('js').getContent(); ?> css.html (removed some parts of css) js.html
type: Question
tagged with: http://stackoverflow.com/tag/html
score: 0
tagged with: javascript
has title: How to import html, css and js to Apps Script

http://stackoverflow.com/q/79040449
tagged with: reactjs
score: 0
upvote count: 1
has title: Question about overriding cascade layers from a package
answer count: 0
tagged with: css
downvote count: 1
has comment: http://stackoverflow.com/comment/139391485
type: UnansweredQuestion
has body: I have an input box which i had previously styled, I decided that I wanted an autocomplete feature and chose to use the autocomplete component provided in this package. the documentation for this package states that it uses @layer to provide over-writable CSS. I thought that i would be able to add "className" followed by the name of the class i made to style my original text box but this seems to only be styling a wrapper that the component has. what is the best way for me to apply these styles to the autocomplete component itself and not the wrapper surrounding it? CSS for original button .answer-input { width: 95%; height: 5vh; border-radius: 1vh; background-color: #242424; border: none; margin: 2.5%; text-align: center; font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; line-height: 1.5; font-weight: 400; font-size: 200%; outline: none; }
favorite count: 0
type: Question

css-position
tags question: http://stackoverflow.com/q/79037039
tags question: http://stackoverflow.com/q/78941056
tags question: http://stackoverflow.com/q/78967040
tags question: http://stackoverflow.com/q/79050234
tags question: http://stackoverflow.com/q/79052599
tags question: http://stackoverflow.com/q/79036975
tag name: css-position
tags question: http://stackoverflow.com/q/79019885
tags question: http://stackoverflow.com/q/78934104
tags question: http://stackoverflow.com/q/79051162
type: Tag
tags question: http://stackoverflow.com/q/78977141
tags question: http://stackoverflow.com/q/78973058
tags question: http://stackoverflow.com/q/78989612
tags question: http://stackoverflow.com/q/79194162
tags question: http://stackoverflow.com/q/79087222
tags question: http://stackoverflow.com/q/79132930
tags question: http://stackoverflow.com/q/79235609
tags question: http://stackoverflow.com/q/79361513
tags question: http://stackoverflow.com/q/79389694
tags question: http://stackoverflow.com/q/79355637
tags question: http://stackoverflow.com/q/79348081
tags question: http://stackoverflow.com/q/79332525
tags question: http://stackoverflow.com/q/79390795
tags question: http://stackoverflow.com/q/79517440
tags question: http://stackoverflow.com/q/79478492
tags question: http://stackoverflow.com/q/79422699
tags question: http://stackoverflow.com/q/79533884
tags question: http://stackoverflow.com/q/79452703
tags question: http://stackoverflow.com/q/79485045
tags question: http://stackoverflow.com/q/79423584
tags question: http://stackoverflow.com/q/79495713
tags question: http://stackoverflow.com/q/79467825
tags question: http://stackoverflow.com/q/79471395

http://stackoverflow.com/q/79035373
answer count: 0
downvote count: 0
tagged with: css
has body: I'm customizing the OpenWebUI project, which uses Svelte for the frontend, and I want to display mathematical expressions (numbers, variables, and operators) in Times New Roman font. However, despite making changes to the CSS and Svelte components, the font is not applying correctly to the mathematical content. What I've Tried: CSS: I’ve added a .math-content CSS class with font-family: 'Times New Roman', Times, serif; to ensure the font applies to all mathematical expressions. The class is intended to be used for numbers, variables, and operators in the LLM's responses. Svelte Modifications: In the relevant Svelte components (like MessageInput.svelte and Messages.svelte), I used JavaScript to wrap mathematical expressions in tags with the .math-content class using a regular expression. The formattedMessage logic is applied using innerHTML, but the .math-content class is not being consistently applied to the expressions. Font Installation: I’ve ensured that Times New Roman is installed on my system and also added a Google Fonts fallback link, but the math expressions still don’t display in the correct font. Goal: My goal is for all mathematical expressions (numbers, variables like x, and operators such as +, -, *, /, ^) in the LLM's responses to be displayed in Times New Roman font. Currently, the font is not rendering properly for the math expressions, and I’m unsure why the .math-content class isn’t being applied as expected.
tagged with: fonts
has title: Svelte: Times New Roman Font Not Applying to Mathematical Expressions in OpenWebUI
type: UnansweredQuestion
score: 1
favorite count: 0
upvote count: 1
duplicate of: http://stackoverflow.com/q/59669571
tagged with: svelte
type: Question
linked to: http://stackoverflow.com/q/59669571
tagged with: javascript

http://stackoverflow.com/comment/139282221
comment on: http://stackoverflow.com/a/78992641
has text: Thanks for your response. I added some more information to the question. The top line * { margin: 0; padding: 0; outline: 0; } is causing the issue. When I remove margin: 0; the logo goes to the left. @Prashant
type: Comment
score: 0
type: AnswerComment

http://stackoverflow.com/comment/139299351
comment on: http://stackoverflow.com/q/78996966
type: Comment
score: 0
has text: there's actually a good explanation here how it works and how you may need to set the rounded part. https://css-tricks.com/gooey-effect/
type: QuestionComment

http://stackoverflow.com/comment/139646757
score: 1
type: Comment
has text: As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer).
type: AnswerComment
comment on: http://stackoverflow.com/a/79192806

http://stackoverflow.com/comment/139365112
type: QuestionComment
comment on: http://stackoverflow.com/q/79038767
type: Comment
has text: I get it now. Thank you all!
score: 0

http://stackoverflow.com/comment/139146673
score: 1
has text: You seem to have tried to set the left margin and the position property, but you didn't give it position coordinates. `position: center` isn't valid CSS. Have you checked the [documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/position)?
type: Comment
comment on: http://stackoverflow.com/q/78920605
type: QuestionComment

http://stackoverflow.com/a/79039504
score: 0
accepted answer of: http://stackoverflow.com/q/79039436
answers question: http://stackoverflow.com/q/79039436
type: AcceptedAnswer
has body: You can cut the curve with clip-path: ellipse() and then add the rounded corners at the right side by applying the border-radius only to those corners: img { display: block; border-top-right-radius: 1em; border-bottom-right-radius: 1em; clip-path: ellipse(100% 120% at 100% 0%); } &lt;img src="https://placehold.co/578x559"&gt;
type: Answer

http://stackoverflow.com/comment/139174487
score: 1
comment on: http://stackoverflow.com/q/78935678
type: QuestionComment
has text: You have TWO "f" cells in your image
type: Comment

http://stackoverflow.com/comment/139285130
type: AnswerComment
has text: I have removed that height property at the .thumb, but it still doesn't take effect Here https://codepen.io/vtabashnyuk/pen/ExBBLYx I just copy/paste my code and styles, and sticky effect work properly, but in my project it doesn't.
type: Comment
score: 0
comment on: http://stackoverflow.com/a/78994088

http://stackoverflow.com/comment/139296831
comment on: http://stackoverflow.com/q/79002065
type: Comment
score: 0
type: QuestionComment
has text: I think this is a Chrome feature. The website doesn't do this in Firefox, and I tested one of my own websites, in which I definitely didn't include this feature, and it does it too, but only in Chrome.

http://stackoverflow.com/comment/139335879
type: Comment
has text: @DiegoD Thank you so much for this. I simply just copied the syntax there and relaced the values with mine and it worked. I still don't know what the difference between that and mine was. Note: I changed the url to the previous and it worked fine.
score: 0
comment on: http://stackoverflow.com/q/79023236
type: QuestionComment

swiper.js
type: Tag
tags question: http://stackoverflow.com/q/79023917
tag name: swiper.js
tags question: http://stackoverflow.com/q/79096310
tags question: http://stackoverflow.com/q/79186314
tags question: http://stackoverflow.com/q/79336783
tags question: http://stackoverflow.com/q/79250803
tags question: http://stackoverflow.com/q/79307974
tags question: http://stackoverflow.com/q/79403107
tags question: http://stackoverflow.com/q/79365252
tags question: http://stackoverflow.com/q/79338752
tags question: http://stackoverflow.com/q/79430617
tags question: http://stackoverflow.com/q/79491823
tags question: http://stackoverflow.com/q/79434792
tags question: http://stackoverflow.com/q/79540420

http://stackoverflow.com/q/78920515
score: 0
answer count: 0
tagged with: css
linked to: http://stackoverflow.com/q/448981
type: UnansweredQuestion
has body: My table's background color styles in my head aren't styling the table cells in the body. Here is my code: &lt;html&gt; &lt;head&gt; &lt;style&gt; #11 { background-color: hsv(0,0,100); } #12 { background-color: hsv(0,25,100); } #13 { background-color: hsv(0,50,100); } #14 { background-color: hsv(0,75,100); } #15 { background-color: hsv(0,100,100); } #21 { background-color: hsv(0,0,75); } #22 { background-color: hsv(0,25,75); } #23 { background-color: hsv(0,50,75); } #24 { background-color: hsv(0,75,75); } #25 { background-color: hsv(0,100,75); } #31 { background-color: hsv(0,0,50); } #32 { background-color: hsv(0,25,50); } #33 { background-color: hsv(0,50,50); } #34 { background-color: hsv(0,75,50); } #35 { background-color: hsv(0,100,50); } #41 { background-color: hsv(0,0,25); } #42 { background-color: hsv(0,25,25); } #43 { background-color: hsv(0,50,25); } #44 { background-color: hsv(0,75,25); } #45 { background-color: hsv(0,100,25); } #51 { background-color: hsv(0,0,0); } #52 { background-color: hsv(0,25,0); } #53 { background-color: hsv(0,50,0); } #54 { background-color: hsv(0,75,0); } #55 { background-color: hsv(0,100,0); } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;table&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td id=&quot;11&quot;&gt;&amp;nbsp;&lt;/td&gt; &lt;td id=&quot;12&quot;&gt;&amp;nbsp;&lt;/td&gt; &lt;td id=&quot;13&quot;&gt;&amp;nbsp;&lt;/td&gt; &lt;td id=&quot;14&quot;&gt;&amp;nbsp;&lt;/td&gt; &lt;td id=&quot;15&quot;&gt;&amp;nbsp;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td id=&quot;21&quot;&gt;&amp;nbsp;&lt;/td&gt; &lt;td id=&quot;22&quot;&gt;&amp;nbsp;&lt;/td&gt; &lt;td id=&quot;23&quot;&gt;&amp;nbsp;&lt;/td&gt; &lt;td id=&quot;24&quot;&gt;&amp;nbsp;&lt;/td&gt; &lt;td id=&quot;25&quot;&gt;&amp;nbsp;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td id=&quot;31&quot;&gt;&amp;nbsp;&lt;/td&gt; &lt;td id=&quot;32&quot;&gt;&amp;nbsp;&lt;/td&gt; &lt;td id=&quot;33&quot;&gt;&amp;nbsp;&lt;/td&gt; &lt;td id=&quot;34&quot;&gt;&amp;nbsp;&lt;/td&gt; &lt;td id=&quot;35&quot;&g…
has title: Why aren't the background-color styles for my table working and what can I do to fix it?
duplicate of: http://stackoverflow.com/q/448981
tagged with: http://stackoverflow.com/tag/html
type: Question
tagged with: html-table

http://stackoverflow.com/comment/139224505
type: QuestionComment
comment on: http://stackoverflow.com/q/78962819
type: Comment
has text: Does your requirement boil down to: select all lis in a list when any single one of them (or more) has a label as a direct descendant? In your example that will be all the lis in that ul because the ul has a child with a direct descendant that is a label.
score: 0

http://stackoverflow.com/q/78991638
score: 0
has comment: http://stackoverflow.com/comment/139290452
answer count: 2
tagged with: css
has title: Using custom CSS for Firefox file: directory listing
has answer: http://stackoverflow.com/a/79256993
type: UnansweredQuestion
has body: Firefox uses built-in CSS from a stylesheet named dirListing.css when it generates a directory listing. I want to customize the view of the page that FF generates. I made changes, but I can't save anything back to dirListing.css. How do I save changes permanently? I tried changing the file in different places, through "inspector" and "style editor." I expected the changes to be saved automatically.
type: Question
tagged with: firefox
has answer: http://stackoverflow.com/a/78991778

http://stackoverflow.com/comment/139166918
has text: Why would you want to use flexbox here? The obvious choice for replacing an actual table would be grid.
type: Comment
score: 3
comment on: http://stackoverflow.com/q/78931488
type: QuestionComment

http://stackoverflow.com/comment/139229871
type: QuestionComment
has text: Background images are loaded with `Sec-Fetch-Mode: no-cors`, therefore the CORS settings have no effect. Does the server of the image set a [`Cross-Origin-Resource-Policy`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cross-Origin_Resource_Policy) header?
score: 0
type: Comment
comment on: http://stackoverflow.com/q/78948123

http://stackoverflow.com/a/78933256
answers question: http://stackoverflow.com/q/78933097
has body: In the horizontal direction, the white space is related to the scrollbar. The seemingly white space is actually due to some elements being too wide, larger than the screen, resulting in scrollbars. You can use F12 or other methods to open devtools for debugging and observation. Changing the px of the width attribute, and perhaps other attributes, will solve the problem.
type: Answer
score: 0

http://stackoverflow.com/comment/139400338
type: QuestionComment
has text: Is the `items` class on the `img` itself or is `img` nested? Check your browser dev-tools to see what CSS styles are being applied as well to your img tags to see if you can see things overwriting your styles.
comment on: http://stackoverflow.com/q/79058968
type: Comment
score: 0

http://stackoverflow.com/comment/139365063
has text: Welcome to Stack Overflow! Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/) using the `<>` icon. See [**How to create a Minimal, Reproducible Example**](http://stackoverflow.com/help/reprex)
comment on: http://stackoverflow.com/q/79039436
type: Comment
score: 0
type: QuestionComment

http://stackoverflow.com/comment/139153938
type: Comment
type: AnswerComment
has text: What's the meaning of "Shobana: Programming makes sence"? and why have you included a code placeholder?
score: 1
comment on: http://stackoverflow.com/a/78913126

http://stackoverflow.com/comment/139227771
has text: The snippet editor lets you include libraries.
type: QuestionComment
score: 0
type: Comment
comment on: http://stackoverflow.com/q/78963829

http://stackoverflow.com/comment/139270362
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78986368
has text: Thanks for the picture - that makes it much clearer. I have a posted an answer based on the content of that picture to give an idea of what can be achieved with a simple grid.
type: QuestionComment

streamlit
tags question: http://stackoverflow.com/q/79016625
tags question: http://stackoverflow.com/q/78929068
type: Tag
tags question: http://stackoverflow.com/q/78953680
tags question: http://stackoverflow.com/q/78966048
tag name: streamlit
tags question: http://stackoverflow.com/q/79414846
tags question: http://stackoverflow.com/q/79303847
tags question: http://stackoverflow.com/q/79422955
tags question: http://stackoverflow.com/q/79441279

http://stackoverflow.com/comment/139176751
comment on: http://stackoverflow.com/q/78936697
has text: @A Haworth. Yes, correct.
type: Comment
score: 0
type: QuestionComment

http://stackoverflow.com/a/78993492
upvote count: 1
score: 1
has body: Solution (with your code) // set true, set false, set true... loop const shouldStick = entry.intersectionRatio < 0.95; In your code, you depend on the value of entry.intersectionRatio to determine whether the sticky state should be true or false. This condition should not be less than 0.95 but should be exactly equal to 1. const observer = new IntersectionObserver( ([entry]) => { if (entry.intersectionRatio < 0.95) { console.log('Element is less than 95% visible'); } else { console.log('Element is at least 95% visible'); } }, ); // entry.intersectionRatio maybe will 0.5 --> set sticky state to true // now by sticky style, entry.intersectionRatio will be 1.0 --> 1.0 < 0.95 === false --> set sticky state to false // ... loop When you set the sticky state, the value of entry.intersectionRatio will be 1, which is greater than 0.95, and that's why you get an infinite loop. // set true (end) const shouldStick = entry.intersectionRatio === 1; // or: Although I don't see much point in this const shouldStick = entry.intersectionRatio > 0.95; Alternative solution (just use CSS position: sticky;) Although you are currently using it, the sticky position works as you expect even without your JS code. When the element reaches the specified distance from the top in pixels, it becomes fixed there as you continue scrolling. Since you set top: 0, the element will stay fixed when it reaches the 0 pixel position of its parent element. const stickyResultsHeader = { // design padding: "1.5rem 0", backgroundColor: "gray", display: "flex", borderBottom: "1px solid #e1e1e1e1", // for sticky state position: shouldSticky ? "sticky" : "block", // only drawback in the function is that the switch does not toggle back automatically to sticky top: "0", zIndex: 10, }; Tests Reset
answers question: http://stackoverflow.com/q/78992932
type: Answer
downvote count: 0

http://stackoverflow.com/comment/139375170
has text: I opened this thread a few years ago and have been following it diligently since. The only "real solution" to this issue is to make the users' visit the labs section in settings and enable "Use websites dark theme".
type: QuestionComment
comment on: http://stackoverflow.com/q/78989459
type: Comment
score: 0

http://stackoverflow.com/comment/139321288
has text: "*The custom hook is still being called for both of the HeaderSearch components*" - well **your code** is calling it twice. Why not just use one ref only, and attach it to the currently rendered div?
type: QuestionComment
comment on: http://stackoverflow.com/q/79014407
type: Comment
score: 0

http://stackoverflow.com/a/79010780
answers question: http://stackoverflow.com/q/79010665
downvote count: 0
type: Answer
score: 2
has body: You could remove the space and use padding instead. For example: p.Body-Text { -epub-text-align-last: left; font-size: 1em; font-style: normal; font-variant: normal; font-weight: normal; margin-bottom: 0.5em; margin-top: 0.5em; orphans: 1; text-align: justify; text-indent: 1.5em; line-height: 1.2; } span.Numeral { color: #7f7f7f; font-size: 0.75em; vertical-align: text-top; padding-inline: 5px; } 1Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 2Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 3Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 4Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
upvote count: 2

http://stackoverflow.com/a/78992532
score: 1
type: Answer
downvote count: 0
upvote count: 1
has body: Use a responsive grid, adjusting the 10em value lower for smaller tiles and higher for larger tiles. .d1 { display: grid; grid-template-columns: repeat(auto-fit, minmax(10em, 1fr)); } body { margin: 1em; } .d1 { display: grid; grid-template-columns: repeat(auto-fit, minmax(10em, 1fr)); gap: 1em; } .d1 > div { background-color: rgb(249, 215, 142); } .d1 img { width: 100%; aspect-ratio: 3/4; object-fit: cover; } Oshi No Ko Season 2 Episode 1 Sub Failure Frame Season 1 Episode 1 Sub Vanguard Divinez Season 2 Episode 1 Sub Alya Sometimes Hides Her Feelings in Russian Season 1 Episode 1 Dub|Sub 7th Time Loop The Villainess Enjoys a Carefree Life Married to Her Worst Enemy Season 1 Episode 1 Sub As A Reincarnated Aristocrat I'll Use My Appraisal Skill to Rise in The World Season 1 Episode 1 Dub|Sub Chillin' in Another World with Level 2 Cheats Season 1 Episode 1 Dub|Sub Fairy Tail 100 Years Quest Season 1 Episode 1 Dub|Sub I Parry Everything Season 1 Episode 1 Dub|Sub
answers question: http://stackoverflow.com/q/78988683

http://stackoverflow.com/a/78945844
has comment: http://stackoverflow.com/comment/139201183
type: Answer
answers question: http://stackoverflow.com/q/78927597
downvote count: 0
has comment: http://stackoverflow.com/comment/139225069
has comment: http://stackoverflow.com/comment/139195702
has body: Try set overflow-wrap: anywhere;: Project Description Redevelopment will include updating mechanical, electrical, and plumbing systems throughout the ground-floor commercial space and office space. Updates include, but are not limited to new cooling towers, water boilers, hydronic system pumps, and piping. asdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa Or wrap "long" words in : Project Description Redevelopment will include updating mechanical, electrical, and plumbing systems throughout the ground-floor commercial space and office space. Updates include, but are not limited to new cooling towers, water boilers, hydronic system pumps, and piping. asdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
upvote count: 1
score: 1

http://stackoverflow.com/a/78986561
downvote count: 0
answers question: http://stackoverflow.com/q/78985675
accepted answer of: http://stackoverflow.com/q/78985675
score: 1
upvote count: 1
has body: This may help .react-multi-carousel-track { gap: 0.5rem; } .card img { width: 100%; height: 30vh; object-fit: cover; } .react-multiple-carousel__arrow { transform: translateY(-20px); }
type: AcceptedAnswer
type: Answer
has comment: http://stackoverflow.com/comment/139272044

http://stackoverflow.com/comment/139126916
type: QuestionComment
has text: [resolution definition](https://www.w3.org/TR/css-values-4/#resolution-value)
comment on: http://stackoverflow.com/q/78909799
type: Comment
score: 0

http://stackoverflow.com/comment/139153009
type: QuestionComment
comment on: http://stackoverflow.com/q/78923418
has text: You used invert for dark colors. and then rotated the white div `transform: rotateZ(45deg);`, However, `overflow: hidden` works fine.
type: Comment
score: 0

http://stackoverflow.com/comment/139158226
comment on: http://stackoverflow.com/a/78925060
type: Comment
score: 0
type: AnswerComment
has text: You may need JS for this, I’ll ponder!

http://stackoverflow.com/comment/139476626
type: QuestionComment
comment on: http://stackoverflow.com/q/79025318
type: Comment
has text: I tried the code separately in online vue editor too. It works fine there,but same code doesnt work in the project. This is very weird
score: 0

http://stackoverflow.com/comment/139230623
comment on: http://stackoverflow.com/q/78948123
type: Comment
has text: What browser are you using? Mine (Chrome 128) does not implement ORB++.
score: 0
type: QuestionComment

http://stackoverflow.com/comment/139253376
comment on: http://stackoverflow.com/q/78976538
type: Comment
score: 0
has text: note that Firefox is giving a different output
type: QuestionComment

http://stackoverflow.com/q/79019885
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139332476
type: Question
tagged with: css
linked to: http://stackoverflow.com/q/6421966
has title: Css while using position absolute, relative to a item makes both of the items disappear
score: 0
tagged with: http://stackoverflow.com/tag/html
tagged with: position
answer count: 0
has body: I was trying to make a search input below the navbar but when I use position absolute, relative to my icon both icon and search input disapear. But if I dont put it to relative it appears. I want my search input to appear outside that green area. I even tried to make some upper div relative, but then search input scrolls into the green area. I thought position absolute makes element to go out of the flow. So why in inspector it exists but I cant see it. I need the search input outside the green area. (Sorry for not being able to give icons. You can put any image in the img tag to see the problem) * { margin: 0; padding: 0; font-family: "Montserrat", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; color: #ffffff; overflow-x: hidden; } body { min-height: 100vh; display: grid; grid-template-columns: auto; grid-template-rows: auto 1fr auto; } /* Google-fonts icon style (can be changed) */ .material-symbols-rounded { font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 20; } .material-symbols-outlined { font-variation-settings: "FILL" 0, "wght" 350, "GRAD" 0, "opsz" 20; } /* Actual styling starts here */ /* Navbar styling starts */ .header { background-color: #128d50; height: 3.0625rem; } .nav-container { padding: 0 11.71875%; height: 3.0625rem; display: flex; flex-wrap: nowrap; flex-direction: row; font-size: 1rem; flex-grow: 1; justify-content: space-between; gap: 2rem; } .nav-container a { color: #ffffff; text-decoration: none; } .nav-container a:hover { text-decoration: underline; } .nav-div { display: flex; gap: 1.875rem; align-items: center; } .nav-div img { width: 1.5625rem; } .nav-div .search-toggle { display: flex; align-items: center; justify-content: center; } /* search animation */ .nav-div .search, .nav-div .close { position: absolute; cursor: pointer; transition: all 0.3s ease; } .search-toggle .close { opacity: 0; pointer-events: none; } .search-toggle.active-search .close { opacity: 1; pointer-events: auto; } .searc…
tagged with: css-position

http://stackoverflow.com/a/79040717
score: 0
answers question: http://stackoverflow.com/q/79040516
accepted answer of: http://stackoverflow.com/q/79040516
has body: Make sure that your animation finishes and that .gen-card reset after they're done. Use this Javascript: document.addEventListener("scroll", () => { const scrollPosition = window.scrollY; if (scrollPosition / 200 + 0.5 < 5.8) { gsap.set(".hero", { display: "block" }); gsap.set(".content", { display: "none" }); tl.pause(scrollPosition / 200 + 0.5); } else { gsap.set(".hero", { display: "none" }); gsap.set(".content", { display: "block", top: 1060 + window.innerHeight }); } const twHeadingTop = document.querySelector(".tw-heading").getBoundingClientRect().top; // Trigger the second animation if (twHeadingTop < 200 && scrollPosition > 1800) { gsap.set(".tw-heading", { position: "fixed", top: 200 - 32, left: "50%", xPercent: -50, }); const gc = document.querySelectorAll(".gen-card"); const gcw = gc[0].getBoundingClientRect().width; gsap.set(gc, { position: "fixed", opacity: 1, top: 264, right: -gcw, }); gentl = gsap.timeline({}) .to(gc, { position: "fixed", top: 264, left: -gcw, stagger: 0.2, duration: 1, ease: "power1.inOut", }) .to(gc[gc.length - 1], { left: 32, duration: 1, ease: "power1.inOut", }, "-=1") .to(gc[3], { width: "50%", left: "50%", x: "-50%", duration: 1, ease: "power1.inOut", }) .addLabel("fgenfocus") .to(gc[3].querySelector("h2"), { opacity: 0, }, "fgenfocus") .to(gc[3].querySelector("h2"), { opacity: 0, height: "0px", margin: 0, }, "fgenfocus") .add(() => { gc[3].querySelector("h4").innerHTML = "Now the scrolling should continue as normal"; }, "fgenfocus") .to(gc[3].querySelector("h4"), { fontSize: "32px", margin: 0, }, "fgenfocus"); gentl.pause(); gentlmarker = scrollPosition; } if (scrollPosition > gentlmarker) { const gc = document.querySelectorAll(".gen-card"); gcw = gc[0].getBoundingClientRect().width; gentl.pause((scrollPosition - gentlmarker) / 300); } if ((scrollPosition - gentlmarker) / 300 < 0) { gsap.set(".tw-heading", { position: "static", xPercent: 0 }); gsap.set(".gen-card", { position: "static", opacity: 1 }); } if (scrollPosition > gen…
type: AcceptedAnswer
type: Answer

c#
tags question: http://stackoverflow.com/q/79026380
tag name: c#
tags question: http://stackoverflow.com/q/79052687
type: Tag
tags question: http://stackoverflow.com/q/79063761
tags question: http://stackoverflow.com/q/79241411
tags question: http://stackoverflow.com/q/79173982
tags question: http://stackoverflow.com/q/79101910
tags question: http://stackoverflow.com/q/79116921
tags question: http://stackoverflow.com/q/79395143
tags question: http://stackoverflow.com/q/79312743
tags question: http://stackoverflow.com/q/79321500
tags question: http://stackoverflow.com/q/79357257
tags question: http://stackoverflow.com/q/79500322
tags question: http://stackoverflow.com/q/79501873
tags question: http://stackoverflow.com/q/79473128
tags question: http://stackoverflow.com/q/79481393

http://stackoverflow.com/comment/139210212
type: Comment
type: AnswerComment
comment on: http://stackoverflow.com/a/78948809
has text: This is actually a super interesting problem. I'm not even sure that the `p` tag colour in your jsbin is correct either --- with `light-dark(#222, #ccc)` in a `color-scheme: light` `div`, I would expect its colour to be `#222`, but it's rendered as `#ccc` for me (Chrome 128 on Mac). For instance, check out this example: https://jsbin.com/sifuzubali/1/edit?html,output
score: 1

http://stackoverflow.com/q/78985318
type: UnansweredQuestion
has body: Electron.js doesn't allow me to update 2nd time after the first update but it allows multiple update after switching to other tab and then get back to Electron.js app. How can I solve this issue? index.js Temple Town Admin Welcome, Admin Admin Panel Location Code: Property Code: Room Type: Start Date: End Date: Search Refresh Update Date Property Code Property Name Location Room Type Rooms Available Booked Price Max Count renderer.js const API_BASE_URL = 'http://localhost:5000/api'; async function fetchDistinctValues() { try { const response = await fetch(`${API_BASE_URL}/availabilities/distinct`); const data = await response.json(); const locationCodeSelect = document.getElementById('locationCode'); locationCodeSelect.innerHTML = ` Select Location `; data.locationCodes.forEach(code => { locationCodeSelect.innerHTML += ` ${code} `; }); const roomTypeSelect = document.getElementById('roomType'); roomTypeSelect.innerHTML = ` Select Room Type `; data.roomTypes.forEach(type => { roomTypeSelect.innerHTML += ` ${type} `; }); const propertyCodeSelect = document.getElementById('propertyCode'); propertyCodeSelect.innerHTML = ` Select Property `; } catch (error) { console.error('Error fetching distinct values:', error); } } async function fetchPropertyCodesByLocation(locationCode) { try { const response = await fetch(`${API_BASE_URL}/availabilities/property_codes?location_code=${locationCode}`); const data = await response.json(); // Populate property codes for the selected location const propertyCodeSelect = document.getElementById('propertyCode'); propertyCodeSelect.innerHTML = ` Select Property `; data.propertyCodes.forEach(code => { propertyCodeSelect.innerHTML += ` ${code} `; }); } catch (error) { console.error('Error fetching property codes for location:', error); } } async function fetchAvailabilities(filters = {}) { try { const params = new URLSearchParams(); if (filters.location_code && filters.location_code !== 'Any') { params.append('location_code', filters.locatio…
has title: Electron.js doesn't allow a second update until you switch different activity in laptop and return, which resets the update limit
type: Question
tagged with: http://stackoverflow.com/tag/html
tagged with: electron
score: 0
tagged with: javascript
answer count: 0
tagged with: css

http://stackoverflow.com/q/78966191
score: 1
favorite count: 0
has comment: http://stackoverflow.com/comment/139230722
type: Question
accepted answer: http://stackoverflow.com/a/78967078
downvote count: 0
answer count: 1
type: AnsweredQuestion
tagged with: javascript
upvote count: 1
has answer: http://stackoverflow.com/a/78967078
tagged with: css
has body: I have a slider with five breakpoints, as shown in the example code below. I want to attach a tooltip to the slider thumb and dynamically update the tooltip values based on a 4.25% interest for each breakpoint. How can I achieve this? I tried with basic HTML, but seems like it may need Javascript? Or is it possible with pure CSS? Any guidance or examples would be greatly appreciated! .input-range { -webkit-appearance: none; width: 100%; height: 24px; border-radius: 10px; background-color: #ecedee; outline: none; padding: 0; margin: 0 0 10px 0 } .input-range::-ms-track { width: 100%; cursor: pointer; background: rgba(0, 0, 0, 0); border-color: rgba(0, 0, 0, 0); color: rgba(0, 0, 0, 0); border: 3px 0 } .input-range::-ms-fill-lower { background-color: rgba(0, 0, 0, 0) } .input-range::-ms-fill-upper { background-color: rgba(0, 0, 0, 0) } .input-range::-ms-tooltip { display: none } .input-range::-webkit-slider-thumb { appearance: none; width: 30px; height: 30px; border-radius: 50%; background-color: #006fcf; cursor: pointer; border: none } .input-range::-moz-range-thumb { width: 30px; height: 30px; border-radius: 50%; background-color: #006fcf; cursor: pointer; border: none } .input-range::-ms-thumb { width: 30px; height: 30px; border-radius: 50%; background-color: #006fcf; cursor: pointer; border: none } .input-range:focus { outline: #97999b dashed 1px !important; outline-offset: 3px } .values { display: flex; justify-content: space-between; margin-bottom: 10px } .tooltip { position: absolute; top: 20px; left: 0; background-color: #008085; color: white; padding: 8px 16px; border-radius: 100px; } .wrapper { position: relative; padding-top: 68px; } 10,625 $250,000 (10,625) $500,000 (21,250) $1,000,000 (42,500) $3,000,000 (1,27,500) $5,000,000 (2,12,500)
has title: How do I attach the tooltip to the Input type range slider and update the values

http://stackoverflow.com/comment/139316178
comment on: http://stackoverflow.com/q/79010977
type: Comment
score: 0
has text: We are glad that we could help you. You may consider marking one of the answers as the chosen one. It would really help one of us out.
type: QuestionComment

http://stackoverflow.com/a/78940036
has body: Custom Style the Label: Add custom CSS to adjust the position of the label so that it sits just above the border, and adjust other properties like font size, padding, or margin as needed. import { styled } from '@mui/system'; const StyledTextField = styled(TextField)({ '& .MuiInputLabel-root': { transform: 'translate(0, -1.5rem) scale(1)', // Moves label above border fontSize: '1rem', // Adjust the font size as needed paddingLeft: '0.5rem', // Optional: Adjust padding for better alignment paddingRight: '0.5rem', // Optional: Adjust padding for better alignment }, '& .MuiInputLabel-shrink': { transform: 'translate(0, -1.5rem) scale(1)', // Ensures consistent positioning when focused }, }); const MyComponent = () => ( <StyledTextField label="First Name" variant="outlined" InputLabelProps={{ shrink: true, }} /> ); export default MyComponent;
type: Answer
score: 0
answers question: http://stackoverflow.com/q/78938339

http://stackoverflow.com/q/79010665
type: UnansweredQuestion
has body: I'm working on formatting the CSS of an ebook in Calibre for export to PDF for publishing. I've formatted everything perfectly, but run into an issue. The body of the text is a paragraph style definition where I've applied full text justification using text-align: justify; to make it easier on the eyes when being printed. The software then adjusts spacing between each word to justify it properly. The problem I've run into is that I have reference markers scattered throughout the text which are represented by a number. I've created a span style for those to display them in a different color. When justifying, in certain places, the text is rendered with massive space between the previous/next word and the reference marker number. For example, it may look like this: word anotherword shortword 2 longerword word Here are the relevant CSS stylesheet definitions: p.Body-Text { -epub-text-align-last: left; font-size: 1em; font-style: normal; font-variant: normal; font-weight: normal; margin-bottom: 0.5em; margin-top: 0.5em; orphans: 1; text-align: justify; text-indent: 1.5em; line-height: 1.2; } span.Numeral { color: #7f7f7f; font-size: 0.75em; vertical-align: text-top; } And here is a sample HTML segment using the above definitions: 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 2 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 3 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 4 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. I've attempted adding display: inline-block to the "Numeral" span definition and that has not addressed the issue, so it is not included in the above snippets. By way of a clarification, the issue here is the additional spaces that are added between the span tag's contents and the remaining paragrap…
has title: Is it possible to exclude spacing around tags from increasing due to parent paragraph text justification in CSS?
score: 1
has answer: http://stackoverflow.com/a/79010780
tagged with: css
type: Question
upvote count: 2
tagged with: calibre
downvote count: 1
favorite count: 0
answer count: 2
tagged with: http://stackoverflow.com/tag/html
has answer: http://stackoverflow.com/a/79010927

http://stackoverflow.com/a/79046565
score: 0
answers question: http://stackoverflow.com/q/79046527
accepted answer of: http://stackoverflow.com/q/79046527
type: AcceptedAnswer
has body: You need to apply in Media Queries. Also you missed took wrong class wp-block-navigation_responsive-container Please try this @media (max-width: 768px) { .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .has-medium-font-size { font-size: 50px !important; } }
type: Answer

http://stackoverflow.com/a/79011453
upvote count: 2
answers question: http://stackoverflow.com/q/79010977
has body: Use Flex. No custom CSS. If you use Bootstrap, use the helper classes provided by the framework. You only need 2 here : d-flex and align-items-center and some padding / margins if needed. See https://getbootstrap.com/docs/5.3/utilities/flex/ Here are 2 snippets with the icon font and with the SVGs. Note that the HTML used around the elements is exactly the same and the display is exactly the same too. First version with icon font : Jul 10, 2019 Second version with SVG : <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" /> <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" /> <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" /> <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" /> <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" /> Jul 10, 2019
score: 2
downvote count: 0
type: Answer

http://stackoverflow.com/comment/139317308
type: QuestionComment
type: Comment
has text: You right, I tried to add this attribute on the setting but it's not works, that's why I posted the question :) Do you know how to setup it?
comment on: http://stackoverflow.com/q/79013255
score: 0

http://stackoverflow.com/comment/139390414
comment on: http://stackoverflow.com/a/79051207
type: AnswerComment
has text: Thanks for the answer. Yes, I want to align them centrally but also I want to distribute the gap space evenly. I've added a diagram that shows the desired result.
score: 0
type: Comment

http://stackoverflow.com/a/78904813
has comment: http://stackoverflow.com/comment/139124470
answers question: http://stackoverflow.com/q/78904335
downvote count: 0
accepted answer of: http://stackoverflow.com/q/78904335
has body: This turned out to be more difficult than I anticipated. I found only one relatively responsive approach. There are two challenges: overflow: hidden cannot be applied exclusively to the x-axis or y-axis. If overflow: hidden is applied in one direction, it hides overflow in both directions. After rotating at a fixed angle, there will be different amounts of empty space depending on the viewport width. This space needs to be filled. Solutions: For the first issue, use overflow: clip to hide overflow in only the x direction. For the second issue, define another element to fill the empty space. However, the height of this element needs to be estimated in advance based on the rotation angle, as being too long or too short could cause a visual overflow effect. Welcome to our website Your content here Demo on Tailwind Play. In the example, I used red and blue to differentiate between the filling elements and the main content. In actual use, they should be set to the same color.
score: 1
upvote count: 1
has comment: http://stackoverflow.com/comment/139117773
has comment: http://stackoverflow.com/comment/139117860
type: AcceptedAnswer
type: Answer

http://stackoverflow.com/a/78911574
type: AcceptedAnswer
has body: Type1 JavaScript to Trigger the Checkbox Click: You can use a JavaScript function that will be triggered when the is clicked. This function will find the checkbox within the clicked and manually trigger its click event. function triggerCheckbox(event) { // Prevent the default label click behavior to avoid double triggering event.preventDefault(); // Find the checkbox inside the clicked const checkbox = event.currentTarget.querySelector('input[type="checkbox"]'); // Trigger the checkbox click event if (checkbox) { checkbox.click(); } }
type: Answer
answers question: http://stackoverflow.com/q/78911557
score: -1
accepted answer of: http://stackoverflow.com/q/78911557
downvote count: 1
upvote count: 0

http://stackoverflow.com/comment/139252732
has text: @tacoshy I've add a shared link to the SVG here on SO might it work for legally write an answer using it?
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78978054

http://stackoverflow.com/comment/139213328
type: QuestionComment
has text: the read credentials get from an sql server. when credentials read starts a session with vat as attribute each user see his folder from the server. In server i get fAttempting to access file at: D:\012345678\ΜΙΣΘΟΔΟΣΙΑ\Παραστατικά-5.jpg File successfully downloaded. From browser downloads as should. From the app start download and immediately stops and all files has extention .html and the file may be jpg and as source i see downloading file... i think can't handle the url but is my first attempt for android. what you suggest to log from the device. i don't use emulator i am testing on device
comment on: http://stackoverflow.com/q/78943928
type: Comment
score: 0

visibility
type: Tag
tag name: visibility
tags question: http://stackoverflow.com/q/79000282
tags question: http://stackoverflow.com/q/79541851

android
tags question: http://stackoverflow.com/q/78943928
tag name: android
tags question: http://stackoverflow.com/q/79048892
tags question: http://stackoverflow.com/q/78989459
tags question: http://stackoverflow.com/q/79062531
tags question: http://stackoverflow.com/q/79057124
tags question: http://stackoverflow.com/q/78993233
type: Tag
tags question: http://stackoverflow.com/q/79121220
tags question: http://stackoverflow.com/q/79184839
tags question: http://stackoverflow.com/q/79310182
tags question: http://stackoverflow.com/q/79367431
tags question: http://stackoverflow.com/q/79418659
tags question: http://stackoverflow.com/q/79354511
tags question: http://stackoverflow.com/q/79289665
tags question: http://stackoverflow.com/q/79372295
tags question: http://stackoverflow.com/q/79298889

http://stackoverflow.com/comment/139172388
type: QuestionComment
comment on: http://stackoverflow.com/q/78933187
type: Comment
score: 0
has text: [This](https://stackoverflow.com/questions/78906471/how-to-give-positionsticky-to-tables-header-and-the-first-column-when-table-al/78908116#78908116) response can resolve your issue.

http://stackoverflow.com/comment/139163355
has text: The problem with the solution of @Meet is, it isn't that flexible without auto-generating a big css file with hundreds of images. I don't see why nobody addressed the issue with the code above. Do you guys know why the animation is buggy?
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78927325
type: Comment

http://stackoverflow.com/comment/139299707
type: QuestionComment
type: Comment
comment on: http://stackoverflow.com/q/79003079
has text: https://www.w3.org/TR/SVG2/interact.html#Focus
score: 1

http://stackoverflow.com/q/79002715
type: Question
answer count: 1
has comment: http://stackoverflow.com/comment/139297990
tagged with: wordpress
has comment: http://stackoverflow.com/comment/139299439
has body: I created a wordpress plugin to display discographies. The plugin inserts a table under the heading that shows the artist picture, etc. Including an intro and a text field where the content goes. If I put the content into a regular paragraph block, an autolinking plugin works perfectly and creates internal links based on tags. But the content from plugin is not affected at all. I tried adding classes to my table and divs according to the wordpress structure for the block area but that didn't do anything. Now, the developer of the autolinking plugin states that, "TaxoPress will process content that is displayed using the_content(), which is the WordPress standard... Developers can use that, or they could run their output via: $content = apply_filters( ‘the_content’, $post->post_content );". Which leads to my question. How do I set the attributes of a plugin injected table to mirror those of the block area? This is the code adding content to the website through the plugin <?php if ($row->ctp_intro): ?> <?php echo wpautop($row->ctp_intro); ?> <?php endif; ?> <?php if ($row->ctp_texto): ?> Leer más <?php endif; ?> <?php if ($row->ctp_texto): ?> <?php echo wpautop($row->ctp_texto); ?> <?php endif; ?>` Among other things I tried using the classes and id's from the wordpress block area but I can't find a way to make this work. In a nutshell, there's some identification or tagging of the block area my plugin can't provide. Anyone seen something like this before?
score: 0
tagged with: plugins
has title: Plugin generated table unaffected by other plugins
tagged with: autolink
tagged with: php
tagged with: css
has answer: http://stackoverflow.com/a/79006371
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139299989

http://stackoverflow.com/q/79017200
favorite count: 0
type: Question
tagged with: tabs
tagged with: http://stackoverflow.com/tag/html
tagged with: tabindex
tagged with: http://stackoverflow.com/tag/xhtml
type: AnsweredQuestion
downvote count: 1
has answer: http://stackoverflow.com/a/79017642
accepted answer: http://stackoverflow.com/a/79017642
upvote count: 0
score: -1
answer count: 2
has body: My nav element is positioned at the end of the document for accessibility reasons, and positioned at the top of the screen using CSS. Because of the document order, I suspect that the nav links will be last in the tab order. Is this correct? If so, then that will probably be undesirable to users who wish to have a logical tab order meaning that top of screen elements, ie the nav, should be first in the order. Can I somehow fix this with tabindex? I do not have any existing tabindex attributes anywhere. I want the solution to play well with existing focusable elements eg links
has answer: http://stackoverflow.com/a/79017211
possible better answer: http://stackoverflow.com/a/79017211
tagged with: css
has title: How to get correct tab order with nav at end of document, using only xhtml and css

shopify-template
type: Tag
tag name: shopify-template
tags question: http://stackoverflow.com/q/79028399

http://stackoverflow.com/q/79022855
tagged with: css
downvote count: 1
has answer: http://stackoverflow.com/a/79023260
accepted answer: http://stackoverflow.com/a/79023260
favorite count: 0
type: Question
answer count: 1
type: AnsweredQuestion
tagged with: http://stackoverflow.com/tag/html
score: 2
has comment: http://stackoverflow.com/comment/139334806
upvote count: 3
has title: How to select table rows that are simultaneously even and displayed?
has body: I have an HTML table with odd rows colored gray. Some rows are hidden with and that creates the possibility for 2 consecutively displayed rows to be of the same color, as seen in the snipped below: .table thead th{ background: #f6f6f6; } .table>tbody>tr:nth-of-type(even)>td { background: #f6f6f6; } Firstname Lastname Email John Doe john@example.com Jane Doe jane@example.com Mary Moe mary@example.com July Dooley july@example.com That means that I need a way to select all rows that are odd and do not have style="display: none". How can I achieve this result?

http://stackoverflow.com/comment/139345934
type: Comment
score: 0
comment on: http://stackoverflow.com/q/79024254
type: QuestionComment
has text: Please see [ask], then revise your title to ask a clear, specific question.

http://stackoverflow.com/comment/139326044
type: Comment
score: 0
type: QuestionComment
has text: Clicking the button does not count up when the timer is done
comment on: http://stackoverflow.com/q/79018085

http://stackoverflow.com/comment/139383908
has text: how about using a CSS class?
type: Comment
score: 0
comment on: http://stackoverflow.com/q/79049598
type: QuestionComment

http://stackoverflow.com/a/78918301
type: Answer
score: 0
answers question: http://stackoverflow.com/q/78918024
has body: The issue occurs because the &lt;canvas&gt; element is blocking the click events on the spans underneath it. To fix this: Option 1: Add pointer-events: none; to the canvas's CSS to allow clicks to pass through to the spans. #gameFieldDraftPlayersPitch { pointer-events: none; } Option 2: Increase the z-index of the spans to position them above the canvas. .playerDraft_ListOfPlayers span { position: relative; z-index: 10; } Choose the option that best fits your use case.

http://stackoverflow.com/a/78940776
answers question: http://stackoverflow.com/q/78940746
type: Answer
score: 0
has body: CSS is among the core languages of the open web and is standardized across Web browsers according to W3C specifications. Previously, the development of various parts of CSS specification was done synchronously, which allowed the versioning of the latest recommendations. You might have heard about CSS1, CSS2.1, or even CSS3. There will never be a CSS3 or a CSS4; rather, everything is now just "CSS" with individual CSS modules having version numbers. After CSS 2.1, the scope of the specification increased significantly and the progress on different CSS modules started to differ so much, that it became more effective to develop and release recommendations separately per module. Instead of versioning the CSS specification, W3C now periodically takes a snapshot of the latest stable state of the CSS specification and individual modules progress. CSS modules now have version numbers, or levels, such as CSS Color Module Level 5. From MDN: https://developer.mozilla.org/en-US/docs/Web/CSS?ref=codersera-blogs (my highlighting) TLDR: Since CSS2.1 the numbering system for CSS is now superseded because of the breadth of CSS. Recommended you read up on MDN rather than Wikipedia. Edit: CSS3 is used as a broad term and pretty much means all modern CSS since 2.1
upvote count: 1
downvote count: 1

http://stackoverflow.com/comment/139146437
type: QuestionComment
comment on: http://stackoverflow.com/q/78920407
type: Comment
score: 0
has text: The problem with flex-grow: 1 is that it makes the height of the card super tall. I want to create a card that is a long rectangle, not a square.

http://stackoverflow.com/comment/139318242
has text: You need to create a snippet that shows the problem. I did look at your link (there's no point in having a link in a question for future readers as obviously you will mend the bug there!). Your problem is the z-idex: -1 on content. You need to rethink the way you lay the page out.
type: QuestionComment
comment on: http://stackoverflow.com/q/79000908
type: Comment
score: 0

http://stackoverflow.com/q/78932878
answer count: 0
tagged with: css
has body: I implement CKEditor5 in a React web application created by CRA. "@ckeditor/ckeditor5-react": "^9.0.0", "react": "^18.3.1", CKEditor works fine, and now I need to provide a preview of the content for users to double-check its appearance. For the preview, I'm using an iframe to dynamically create HTML that mirrors the current document. However, I'm struggling to correctly reference the ckeditor5.css file within the iframe, which leads to styling inconsistencies between the editor and the preview. Currently, my workaround is to manually copy the ckeditor5.css file to the public folder and reference it from there, but I'm not satisfied with this solution. Ideally, I want to reference the .css directly from node_modules. useEffect(() => { if (!isEditing) { const previewData = () => { const iframe = iframeRef.current; if (iframe) { const html = ` Preview ${contentToSave} `; iframe.contentWindow.document.open(); iframe.contentWindow.document.write(html); iframe.contentWindow.document.close(); } }; previewData(); } }, [contentToSave, isEditing]); Here’s a screenshot of the file structure from inspector sources showing the location of ckeditor5.css: How can I refer to the ckeditor5.css from the screenshot so that I do not need to copy manually the .css into my public folder?
has title: Include CKEditor5.css in iframe of React App
type: UnansweredQuestion
tagged with: ckeditor5
tagged with: wysiwyg
type: Question
tagged with: reactjs
score: 0

http://stackoverflow.com/comment/139195422
type: AnswerComment
comment on: http://stackoverflow.com/a/78946996
has text: Bugger... The button is already display inline-block as default -- does it help to set the margin to zero? @AHaworth
type: Comment
score: 0

http://stackoverflow.com/comment/139150642
type: Comment
type: QuestionComment
comment on: http://stackoverflow.com/q/78922736
has text: This link attempts to redirect. `Redirection blocked`, Remove the basic margin that body has. `html, body{ margin: 0; padding: 0; }`
score: 0

http://stackoverflow.com/a/78961455
downvote count: 0
type: Answer
has body: There has recently been updates to Chromium which are causing this problem. As of today (September 7th, 2024) the issue appears to affect both Chrome and Edge browser based on Chromium version 128.0.x.x and higher. There is no resolution at this point other than downgrading the browser version or embedding Chromium or a portable version of Chrome directly into your app. This GitHub issue has been created to track the problem. Update (September 9th 2024): Version 2.0.5 of html2image has been released and it addresses the problem identified by the OP. Update (January 26th, 2025): Recent updates to Chromium headless mode are causing the problem again. Version 132 has completely removed "old headless mode" (which was essentially a separate executable) in favor of "new headless mode" which uses the same executable for headless and non-headless modes. The current version of Html2Image (2.0.5) does not work with new headless mode, but you can use the browser_executable argument to point it to an executable that does support old headless mode. You have several options there: Google's solution is "chrome-headless-shell" which supports old headless mode. It can be downloaded via NXP with the command npx @puppeteer/browsers install chrome-headless-shell@stable. If you don't want to use NXP, but still want to use Google's "chrome-headless-shell", you can use the Python script found here to download the binaries. You can ditch Chrome and instead use Chromium. Google searches break it down like this: Version 112 is the last version that had old headless mode and did not have new headless mode. Version 131 is the last version to have old headless mode and new headless mode. Version 132 is the first version to have new headless mode without old headless mode. Here are links to the binaries that most people will be interested in. These are both version 131.0.6778.0; the last build of version 131. I've confirmed both of these builds work with Html2Image 2.0.5. Additionally, the permi…
upvote count: 3
answers question: http://stackoverflow.com/q/78918675
score: 3

http://stackoverflow.com/comment/139265329
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78984963
type: QuestionComment
has text: Can you provide a small example of your code so we would use it as our point of departure? Currently it's difficult to determine what you want exactly.

http://stackoverflow.com/a/79008951
answers question: http://stackoverflow.com/q/79008926
type: AcceptedAnswer
has comment: http://stackoverflow.com/comment/139309355
accepted answer of: http://stackoverflow.com/q/79008926
type: Answer
score: 0
has body: Using Flex in body and margin for myCssClass can solve this issue: &lt;head&gt; &lt;style&gt; body { display: flex; flex-direction: column; min-height: 100vh; margin: 0; } .content { flex: 1; } .myCssClass { margin-top: auto; } &lt;/style&gt; &lt;/head&gt;
has comment: http://stackoverflow.com/comment/139309292

http://stackoverflow.com/comment/139153262
score: 0
has text: I am still confused. Why does removing `z-index` make it go away? I don't think that's the reason.
type: QuestionComment
comment on: http://stackoverflow.com/q/78923418
type: Comment

http://stackoverflow.com/comment/139165439
type: QuestionComment
has text: Since percentage values are based on the size of the background positioning area in addition to the image itself, and the interaction of these values, you're probably going to need magic values especially if the size of each background image varies. Or a pseudo-element like Brett suggests.
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78919901

gradient
tag name: gradient
tags question: http://stackoverflow.com/q/79013129
tags question: http://stackoverflow.com/q/79050955
tags question: http://stackoverflow.com/q/79029341
tags question: http://stackoverflow.com/q/79028695
tags question: http://stackoverflow.com/q/78946005
type: Tag
tags question: http://stackoverflow.com/q/79039863
tags question: http://stackoverflow.com/q/79077959
tags question: http://stackoverflow.com/q/79125057
tags question: http://stackoverflow.com/q/79097672
tags question: http://stackoverflow.com/q/79347623
tags question: http://stackoverflow.com/q/79402687
tags question: http://stackoverflow.com/q/79313417
tags question: http://stackoverflow.com/q/79335506
tags question: http://stackoverflow.com/q/79300736
tags question: http://stackoverflow.com/q/79246383
tags question: http://stackoverflow.com/q/79352463
tags question: http://stackoverflow.com/q/79510927

http://stackoverflow.com/a/78915574
has comment: http://stackoverflow.com/comment/139137191
has comment: http://stackoverflow.com/comment/139137176
has body: You have an error here document.getElementById('themeButton').addEventListener('click'), function() { /* Theme button script */ document.body.classList.toggle('dark-theme'); } You must pass the function as the second argument to addEventListener, like this document.getElementById('themeButton').addEventListener('click', function() { /* Theme button script */ document.body.classList.toggle('dark-theme'); }); You also have to move your .dark-theme CSS rules outside of body, because if you use it like in your example, it can only affect body's children, not body itself. body { /* Main body styles */ } /* Dark theme styles */ .dark-theme { }
downvote count: 1
answers question: http://stackoverflow.com/q/78915487
upvote count: 0
score: -1
accepted answer of: http://stackoverflow.com/q/78915487
type: AcceptedAnswer
has comment: http://stackoverflow.com/comment/139137083
type: Answer

http://stackoverflow.com/comment/139393892
comment on: http://stackoverflow.com/a/79051990
score: 0
type: Comment
has text: BTW, I love the stroke-dasharray hack. I eliminates the need to mask the center at all. I'll be using this a lot going forward. Thank you for this tip alone!!
type: AnswerComment

http://stackoverflow.com/comment/139313267
has text: add ```display: flex; align-items: center;``` to .review-date block, and ```display: flex;``` to .stars
type: Comment
score: 0
comment on: http://stackoverflow.com/q/79010977
type: QuestionComment

http://stackoverflow.com/a/79023979
upvote count: 1
score: 1
type: Answer
has body: "I would like to add a layer with opacity 50% that will cover the audio element, in order to give a different view for it when it is disabled." You can do this by adding an 'opacity' declaration to your .disabled class. function toggleAudioDisable() { document.getElementById('myAudio').classList.toggle("disabled"); } .disabled { pointer-events: none; opacity: 50%; } Toggle Audio Disable
answers question: http://stackoverflow.com/q/79023871
downvote count: 0

background-attachment
tag name: background-attachment
type: Tag
tags question: http://stackoverflow.com/q/79062969

http://stackoverflow.com/comment/139268069
type: AnswerComment
comment on: http://stackoverflow.com/a/78986466
score: 1
type: Comment
has text: I found where is wrong, this iframe is displayed in lightbox mode and at the moment the image was loaded, the iframe container is set as display:none, that's why I got the size as 0. Thanks!

http://stackoverflow.com/comment/139299608
type: Comment
score: 0
type: AnswerComment
has text: Marking as correct answer. Unfortunately I can't use that NPM package in my project so I am still having the issue with the overlay-text, but the solution is 100% correct though. If you run into some other ideas how to make the overlay-text working, please let me know. Thanks!
comment on: http://stackoverflow.com/a/79001058

responsive
tags question: http://stackoverflow.com/q/78914356
tags question: http://stackoverflow.com/q/78941674
tags question: http://stackoverflow.com/q/78921098
tags question: http://stackoverflow.com/q/79012295
tags question: http://stackoverflow.com/q/78941336
tag name: responsive
tags question: http://stackoverflow.com/q/78971876
type: Tag
tags question: http://stackoverflow.com/q/79221439
tags question: http://stackoverflow.com/q/79081959
tags question: http://stackoverflow.com/q/79198956
tags question: http://stackoverflow.com/q/79128659
tags question: http://stackoverflow.com/q/79228738
tags question: http://stackoverflow.com/q/79108631
tags question: http://stackoverflow.com/q/79159987
tags question: http://stackoverflow.com/q/79182401
tags question: http://stackoverflow.com/q/79091458
tags question: http://stackoverflow.com/q/79309575
tags question: http://stackoverflow.com/q/79287638
tags question: http://stackoverflow.com/q/79338873
tags question: http://stackoverflow.com/q/79390885
tags question: http://stackoverflow.com/q/79377941
tags question: http://stackoverflow.com/q/79376758
tags question: http://stackoverflow.com/q/79249802
tags question: http://stackoverflow.com/q/79526952
tags question: http://stackoverflow.com/q/79521593
tags question: http://stackoverflow.com/q/79510723
tags question: http://stackoverflow.com/q/79500127

http://stackoverflow.com/a/78986440
has comment: http://stackoverflow.com/comment/139268081
has comment: http://stackoverflow.com/comment/139268008
has comment: http://stackoverflow.com/comment/139268073
answers question: http://stackoverflow.com/q/78986368
has comment: http://stackoverflow.com/comment/139268036
has comment: http://stackoverflow.com/comment/139268080
has comment: http://stackoverflow.com/comment/139268092
upvote count: 4
has body: You could use CSS grid and place all children after the first two in the third column. .item { background: #ffecb3; border: 3px solid #ffcc80; border-radius: 5px; padding: 8px; } .container { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; background-color: #bbdefb; padding: 15px; } .container > .item:nth-child(n + 3) { grid-column: 3; } Item 1 Item 2 Item 3 Item 4 Item 5
has comment: http://stackoverflow.com/comment/139268021
downvote count: 0
type: Answer
has comment: http://stackoverflow.com/comment/139268076
has comment: http://stackoverflow.com/comment/139268101
score: 4

http://stackoverflow.com/comment/139417169
type: QuestionComment
has text: I suspect it's the keyframes - https://codepen.io/Paulie-D/pen/ExqgGva
comment on: http://stackoverflow.com/q/79067744
type: Comment
score: 0

http://stackoverflow.com/a/78976492
answers question: http://stackoverflow.com/q/78976328
has comment: http://stackoverflow.com/comment/139252715
type: Answer
score: 0
has comment: http://stackoverflow.com/comment/139250630
has comment: http://stackoverflow.com/comment/139293715
has body: I would recommend you to change experience component to use fixed widths instead of percentages, something like this: return ( {period} {jobTitle} @ {company} {renderContent()} {skills?.map((skillKey) => ( <Skill key={skillKey} {...skillsDirectory[skillKey]} /> ))} ); Also update the layout like this : return ( <NavBar /> {children} );

http://stackoverflow.com/a/78994907
score: 5
has body: You won't be able to use the element with ID "A", but you can select the parent of this element and go for the sibling: div:has(> #A) + div > h3 { color: red; } Section 1 Section 2 Of course, it depends on your HTML structure, + is for the next sibling, or you can use ~ selector.
answers question: http://stackoverflow.com/q/78994871
upvote count: 5
type: AcceptedAnswer
type: Answer
downvote count: 0
accepted answer of: http://stackoverflow.com/q/78994871

http://stackoverflow.com/q/78915244
favorite count: 0
linked to: http://stackoverflow.com/q/42080123
has comment: http://stackoverflow.com/comment/139136568
has comment: http://stackoverflow.com/comment/139136926
has comment: http://stackoverflow.com/comment/139136452
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139136459
type: Question
downvote count: 1
has answer: http://stackoverflow.com/a/78915335
upvote count: 0
type: AnsweredQuestion
score: -1
possible better answer: http://stackoverflow.com/a/78915335
has title: How to right align a div element
has answer: http://stackoverflow.com/a/78915276
has answer: http://stackoverflow.com/a/78915797
has comment: http://stackoverflow.com/comment/139137845
accepted answer: http://stackoverflow.com/a/78915276
tagged with: css
answer count: 3
has body: I am trying to place a hamburger menu on the right of my page. I just managed to put it on the same line as the header but there is no desired gap between the elements. What I did: margin-left:auto; margin-right:0px; does not do anything. If I float the element right it jumps to the next line whereas I want the two elements on the same line #drop_menu{ display:inline-block; float: right; } Here is the full code: I also tried: #title_and_menu{ position:relative; } #drop_menu{ display:inline-block; right: 200px; /*float: right;*/ } #drop_menu { display: inline-block; /*float: right;*/ } #hamburger_menu { width: 35px; height: 1px; background-color: black; margin: 6px 0; } img { width: 100%; height: auto; max-width: 100%; display: inline-block; } #myHeader { display: inline-block; background-color: white; color: black; text-align: left; padding-top: 25px; padding-bottom: 25px; padding-left: 25px; padding-right: 25px; } #myHeader:hover { background-color: black; color: white; } body { padding-top: 25px; padding-botttom: 25px; padding-left: 25px; padding-right: 25px; } 9. Adding the following code: #title_and_menu { display: flex; justify-content: space-between; align-items: center; } Makes the top bar of the hamburger menu twice as thick as the two bottom ones: temporal solution

http://stackoverflow.com/comment/139164805
type: QuestionComment
has text: A CSS background with 3 radial gradients of semi transparent colors all overlaid with a semi transparent white linear gradient looks pretty close.
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78930122

http://stackoverflow.com/a/78925260
upvote count: 2
has body: Your innermost &lt;div&gt; is rotated and has mix-blend-mode: multiply applied. So the question is: what is it going to multiply with? And the answer is: anything below it in the same stacking context. As the spec says, This group must then be blended and composited with the stacking context that contains the element. So, let’s suppose you don’t set z-index on the outer element. That means it can composite with the root stacking context. Since the filter() is turning the fancy background of your inner element white, multiplying the dark page background by white (unity) results in the same color as the dark background. Since the output is the same color as the background, you can’t see it. But adding z-index on a parent element between your fancy element and the background creates a new stacking context. (You can demonstrate this because you get the same result by getting rid of z-index and setting isolation: isolate on that parent.) Now, the white of the rotated element has nothing to blend with outside of the stacking context created by the middle div. Since it has nothing to blend with, it just outputs the source color — white. As others have said, the way to prevent this is to stop the rotated element from poking out of its parent in the first place by setting overflow: hidden on one of the parents.
type: AcceptedAnswer
downvote count: 0
answers question: http://stackoverflow.com/q/78923418
type: Answer
score: 2
accepted answer of: http://stackoverflow.com/q/78923418

http://stackoverflow.com/q/79050055
tagged with: http://stackoverflow.com/tag/html
type: Question
score: 0
duplicate of: http://stackoverflow.com/q/37406353
has title: How to prevent additional whitespace when text is wrapped with grid or flexbox
linked to: http://stackoverflow.com/q/37406353
has body: I want to display a simple icon after some text. When the text is too long the text is wrapped but the icon is pushed to the right because the grid/flex item seems to want to use all available space. I have the following HTML: Some very very very very very very very very very long piece of text I The CSS using flexbox is defined as: .wrapper { width: 100px; } .container { display: inline-flex; gap: 0.5rem; } .container .icon { flex: 0 0 auto; } I also tried using grid: .container { display: grid; grid-template-columns: minmax(0, 1fr) 1rem; gap: 0.5rem; } In both situations I get the following result: | Some very very very very very very | I | | very very very long piece of text | | How can I get rid of the extra whitespace in the text column?
answer count: 0
tagged with: css
tagged with: flexbox
tagged with: css-grid
type: UnansweredQuestion

http://stackoverflow.com/a/78987389
type: Answer
downvote count: 0
has body: I fixed it myself: Put part of the script in the : &lt;script&gt; (function() { const mode = localStorage.getItem('mode'); if (mode === 'dark') { document.documentElement.style.setProperty('--textColor', '#eaeaea'); document.documentElement.style.setProperty('--backgroundColor', '#333333'); } else { document.documentElement.style.setProperty('--textColor', '#313131'); document.documentElement.style.setProperty('--backgroundColor', '#e0e0e0'); } })(); &lt;/script&gt; And put the rest of the code at the end of the body: &lt;script&gt; function loadMode() { const mode = localStorage.getItem('mode'); if (mode === 'dark') { setDarkMode(); } } function setDarkMode() { document.documentElement.style.setProperty('--textColor', '#eaeaea'); document.documentElement.style.setProperty('--backgroundColor', '#333333'); document.getElementById('toggleMode').textContent = 'Wechsel zu Lightmode'; localStorage.setItem('mode', 'dark'); } function setLightMode() { document.documentElement.style.setProperty('--textColor', '#313131'); document.documentElement.style.setProperty('--backgroundColor', '#e0e0e0'); document.getElementById('toggleMode').textContent = 'Wechsel zu Darkmode'; localStorage.setItem('mode', 'light'); } function toggleMode() { const isDarkMode = localStorage.getItem('mode') === 'dark'; if (isDarkMode) { setLightMode(); } else { setDarkMode(); } } document.getElementById('toggleMode').addEventListener('click', toggleMode); // Load mode on page load loadMode();
score: 1
upvote count: 1
answers question: http://stackoverflow.com/q/78987305

http://stackoverflow.com/comment/139270414
has text: Thank you, it did work, although I don't entirely understand why. I took out the align-items-center since that centers items vertically in the container, and I don't need that. Looks like the justify-content-center class only centers the items in their container when placed in the div with the col class when you include the d-flex class. I took it off of the div with the row class and it was still centered, which is not what you'll find on the bootstrap docs, so I'm not sure why that works. Will have to look into that more deeply or maybe someone else will chime in and clarify that.
type: Comment
score: 0
comment on: http://stackoverflow.com/a/78986883
type: AnswerComment

microsoft-edge-chromium
type: Tag
tags question: http://stackoverflow.com/q/79052392
tag name: microsoft-edge-chromium

http://stackoverflow.com/comment/139161042
has text: A much simpler, and more general solution, can be found with a couple of lines of JavaScript. Is JS acceptable?
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78926909

http://stackoverflow.com/q/79009802
tagged with: css
has title: To keep a button at the end of grid and text /png over image doesn't stay at original position when minimised
type: Question
tagged with: http://stackoverflow.com/tag/html
accepted answer: http://stackoverflow.com/a/79009902
answer count: 1
type: AnsweredQuestion
has answer: http://stackoverflow.com/a/79009902
has body: i am trying to create a website for personal use but facing some issue that button doesnot stick at bottom of the grid and top image which is a class under "card-" doesn't stay at its position fixed. i know i can use media query for that but seeking a better solution. I have read all the question related to my question but none fixes the issue. i tried the following code and expecting a better solution so that i can learn as well. Lorem ipsum dolor sit Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa iste omnis possimus unde nemo beatae quidem eum. Fugiat, beatae eius debitis sequi quos maxime inventore deserunt possimus delectus accusantium esse. See more Lorem ipsum dolor sit Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa iste omnis possimus unde nemo beatae quidem eum. Fugiat, beatae eius debitis sequi quos maxime inventore deserunt possimus delectus accusantium esse. Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa iste omnis possimus unde nemo beatae quidem eum. Fugiat, beatae eius debitis sequi quos maxime inventore deserunt possimus delectus accusantium esse. See more :root{ --primary-color: #00605f; --secondary-color: #017479; --text-dark:#0f172a; --text-light:#94a3b8; --white:#ffffff; --hover-color:#E5E4E2; --max-width: 1400px; } .content-b{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas:"card-a card-b card-c"; gap: 1rem; } .card-a{ grid-area: card-a; box-shadow: 2px 2px 20px rgba(0,0,0,.7); background:var(--white); display: flex; flex-direction: column; position: relative; } .card-b{ grid-area: card-b; box-shadow: 2px 2px 20px rgba(0,0,0,.7); background:var(--white); display: flex; flex-direction: column; position: relative; } .card-c{ grid-area: card-c; box-shadow: 2px 2px 20px rgba(0,0,0,.7); background:var(--white); display: flex; flex-direction: column; positi…
score: 0

http://stackoverflow.com/comment/139344169
has text: Does it work with such elements as , or others?
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/79024063

http://stackoverflow.com/comment/139301142
score: 3
has text: Have you looked into gutters? https://getbootstrap.com/docs/5.3/layout/gutters/
type: QuestionComment
comment on: http://stackoverflow.com/q/79004360
type: Comment

http://stackoverflow.com/comment/139417370
comment on: http://stackoverflow.com/q/79068036
has text: The codesandbox link you shared appears to be private, can you make it public?
type: QuestionComment
type: Comment
score: 0

sx
tag name: sx
type: Tag
tags question: http://stackoverflow.com/q/79054759

http://stackoverflow.com/a/79040269
answers question: http://stackoverflow.com/q/79040192
type: Answer
score: 0
has comment: http://stackoverflow.com/comment/139372362
has body: New css class to show a dot when it is active: .dot.active { background: #ef4a23; opacity: 1; } Rewritten changeImage function and added startSlider function: let intervalID; function changeImage(index = counter) { // First hide all images imageResponsive.forEach(img =&gt; img.style.display = 'none'); // Show the current image based on the counter value imageResponsive[index].style.display = 'block'; // Update dots dot.forEach((span) =&gt; span.classList.remove('active')); dot[index].classList.add('active'); // If no manual index, increment the counter if (index === counter) { counter = (counter + 1) % imageResponsive.length; } } // Start the image change every 5 seconds function startSlider() { intervalId = setInterval(() =&gt; changeImage(), 5000); } // Initially display the first image and the slider dot changeImage(0); // Start the automatic slider startSlider(); Implementing these changes will fix the errors you were having, you could also look into having the images change when the buttons/dots are clicked on for added functionality, through something such as this: // Event listener for dots dot.forEach((span, index) =&gt; { span.addEventListener('click', () =&gt; { // Clear the auto slider when a dot is clicked clearInterval(intervalId); counter = index; // Set the counter to the clicked dot index changeImage(index); // Change image to the one corresponding to the clicked dot startSlider(); // Restart auto slider after manual change }); });

http://stackoverflow.com/comment/139140167
type: Comment
comment on: http://stackoverflow.com/q/78917255
has text: It is also possible by adding different divs for left elements and right elements. It can also work with dynamic data but you have structure your html properly as per your need.
score: 0
type: QuestionComment

http://stackoverflow.com/q/79065468
type: Question
answer count: 1
tagged with: bootstrap-4
type: AnsweredQuestion
has answer: http://stackoverflow.com/a/79132202
score: 0
tagged with: sass
has body: When the number of rows or columns increases, the content is not fully visible. How to implement a scroll feature, ensuring that the first column and first row remain fixed (sticky) while scrolling? I tried SCSS properties like z-index and wrap.
tagged with: css
has title: Implementing Scroll with Sticky First Column and Row `ngx-datatable`
tagged with: angular
accepted answer: http://stackoverflow.com/a/79132202

http://stackoverflow.com/q/78921073
has comment: http://stackoverflow.com/comment/139147667
answer count: 0
has body: A few days ago, I asked a question here about how to make a div move as a scrollbar. I got a response giving me a script that works, but I just have a small problem with it: two of the buttons active classes don't work. It seems like a simple enough task, but I cannot for the life of me figure out how to fix it :( The code is below, and the ones I need help with are the .buttonscrollbarupdown and .buttonscrollbarsidetosdide. Do I simply need to specify an active class in one of the EventListener sections, or change the initial element selection? Any help would be incredible :D I know almost nothing about JavaScript, so I'm sorry if this is a very basic question! The script I'm using is below, and I've also added the CSS and HTML that shows the initial code. // Element selections const scrollArea = document.querySelector('.canvastext'); const scrollBarVertical = document.querySelector('.scrollbarvertical'); const scrollBarHorizontal = document.querySelector('.scrollbarhorizontal'); const scrollBarVerticalHandle = scrollBarVertical.querySelector('.buttonscrollbarupdown'); const scrollBarHorizontalHandle = scrollBarHorizontal.querySelector('.buttonscrollbarsidetoside'); const buttonScrollUp = document.querySelector('.buttonscrollbarup'); const buttonScrollDown = document.querySelector('.buttonscrollbardown'); const buttonScrollLeft = document.querySelector('.buttonscrollbarleft'); const buttonScrollRight = document.querySelector('.buttonscrollbarright'); const rightButtonWidth = 15; // Width of the right button on horizontal scrollbar const rightButtonMargin = 15; // Margin between the right button and scrollbar on horizontal scrollbar const bottomButtonHeight = 15; // Height of the bottom button on vertical scrollbar const bottomButtonMargin = 15; // Margin between the bottom button and scrollbar on vertical scrollbar // Scroll ratio settings const scrollRatio = 0.05; // Scroll amount as a percentage (5%) // Synchronize custom scrollbars with the scroll area function …
tagged with: css
type: UnansweredQuestion
score: 0
has comment: http://stackoverflow.com/comment/139148184
has comment: http://stackoverflow.com/comment/139148163
type: Question
has title: Issue with a buttons active class not working in a scrollbar script
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139147655
tagged with: javascript

http://stackoverflow.com/comment/139734815
type: QuestionComment
has text: The spec uses CSS Text Decoration Module Level 3, whereas thickness is defined in Level 4. Might need updates in the spec also.
score: 1
type: Comment
comment on: http://stackoverflow.com/q/79060854

http://stackoverflow.com/comment/139203609
has text: media queries have not been added because they are irrelevant to the question itself. The alignment has **nothing** to do with responsiveness. Good answers focus on the issue and cut the rest away to keep the code short.
comment on: http://stackoverflow.com/a/78951589
score: 2
type: Comment
type: AnswerComment

http://stackoverflow.com/comment/139269317
type: QuestionComment
score: 0
comment on: http://stackoverflow.com/q/78987305
type: Comment
has text: you can a delay before showing html, example : `html { opacity: 0; animation: show 2s forwards; } @keyframes show { from, 50% { opacity: 0; } to { opacity: 1; } }` **note** that if the visitor has lightmode configured on is navigator, you'll always have a light empty page showing first, or dark at the opposite set . Also your script doesn't take into account `window.matchMedia("(prefers-color-scheme: dark)")`& `window.matchMedia("(prefers-color-scheme: light)")` to set at least a default mode before the visitor clicks otherwise ;)

fullscreen
type: Tag
tags question: http://stackoverflow.com/q/79061205
tag name: fullscreen
tags question: http://stackoverflow.com/q/79250960

http://stackoverflow.com/comment/139344873
type: Comment
score: 0
type: AnswerComment
has text: It works on my template, thanks a lot. I'll keep all this online tools for another oportunities. Just for curiosity, you make some manually work on this polygons, is there any logical information on this polygon that i need to know to implement other features? I'm going to try the <clipPath clipPathUnits="objectBoundingBox"> strategy as well just for a challenge too, looks like that the "SVG to Clip path converter" do not works perfectly sometimes.
comment on: http://stackoverflow.com/a/79028000

http://stackoverflow.com/comment/139241066
has text: Regardless of whether or not you would use a grid to create this layout, this is a perfectly valid question; indeed it is a great question. Why does text wrapping behaviour change when an element is inside a grid? Upvoted.
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78971329
type: QuestionComment

http://stackoverflow.com/a/79057991
has comment: http://stackoverflow.com/comment/139459682
answers question: http://stackoverflow.com/q/79057952
has comment: http://stackoverflow.com/comment/139400215
score: 1
has comment: http://stackoverflow.com/comment/139400209
type: AcceptedAnswer
type: Answer
accepted answer of: http://stackoverflow.com/q/79057952
downvote count: 0
has comment: http://stackoverflow.com/comment/139446674
has comment: http://stackoverflow.com/comment/139406964
has comment: http://stackoverflow.com/comment/139416504
upvote count: 1
has body: If you're already using JavaScript, don't set the color with the style HTML attribute. Instead, set the color directly with JavaScript: document.getElementById('some-element').style.color = "#123456";

http://stackoverflow.com/a/78951712
answers question: http://stackoverflow.com/q/78951420
type: Answer
score: 0
has body: This is a short answer, but I hope it can be useful. Your question doesn't show this, but from my experience this can happen when you place your full-width carousel inside of a container. Carousels already have the proper container inside the item div, so they don't need to be nested in a container.

marginal-effects
tag name: marginal-effects
tags question: http://stackoverflow.com/q/78933545
type: Tag

http://stackoverflow.com/q/78991280
has comment: http://stackoverflow.com/comment/139292739
score: 0
linked to: http://stackoverflow.com/q/2213881
has comment: http://stackoverflow.com/comment/139279608
has body: I'm trying to get this: Issue is that I do not have a linear background. I have this Background: Is there a way to reach that result without having to set the background color to the label? I know this method: input { border: none; font-size: 16px; outline: 0; padding: 16px 0 10px; width: 100%; } label { font-size: 12px; position: absolute; top: -6px; left: 10px; background: white; } But like I said setting the background to a color is not the way since the background color is not linear. I cannot use . This is exactly what i have for the form: {{form_start(form)}} Dati Alloggio {{form_row(form.address.components.addressPrefix)}} {{form_row(form.address.components.addressName)}} {{form_row(form.address.components.number)}} The only solution i have found is to use position: absolute .edit_apt_form__right label { color: #fff; font-size: 1.1rem; font-weight: 700; margin-bottom: 0.4rem; margin-left: 1.4rem; display: block; position: absolute; top: -13px; left: 9px; } .edit_apt_form__right--field--row { display: flex; flex-direction: row; padding-right: 1rem; position: relative; }
answer count: 0
tagged with: css
has comment: http://stackoverflow.com/comment/139293354
has comment: http://stackoverflow.com/comment/139307074
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139278657
has title: CSS Label in border with coloured bg
tagged with: http://stackoverflow.com/tag/html
type: Question

http://stackoverflow.com/q/79034459
has title: Why the text goes under the bottom border when the font increases?
type: Question
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139355801
score: 0
has body: I have been working on some markers overlay on codepen as a concept and now that I have included it on my website I am having issues with some text positioning, basically depending of the text size the text itself goes down in position under its own border (that shouldn't be possible right?). Here the codepen: https://codepen.io/nebue/pen/LYwVeMo @import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"); body { background-color: black; width: 100%; height: 100%; color: white; box-sizing: border-box; } .container { font-family: Montserrat, sans-serif; font-weight: 400; font-size: 16px; display: grid; grid-template-columns: 1fr 1fr; justify-content: center; justify-items: center; align-items: center; gap: 200px; width: 100%; height: 100vh; } .marker { --marker-size: 18px; --marker-dot-size: 5px; position: relative; width: var(--marker-size); height: var(--marker-size); border: 1px solid white; display: flex; justify-content: center; align-items: center; } .marker .markerdot { width: var(--marker-dot-size); height: var(--marker-dot-size); background-color: white; box-shadow: 0 0 1px 1px white; transition: all 0.2s ease-in-out; } .marker input[name="markers"] { appearance: none; visibility: hidden; } .marker .markerlabel { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } .marker .title { --padding-bottom: 4px; --border-bottom-size: 1px; --abs-x: max(var(--marker-title-x), -1 * var(--marker-title-x)); --abs-y: max(var(--marker-title-y), -1 * var(--marker-title-y)); --abs-angle: max( var(--marker-title-line-angle), -1 * var(--marker-title-line-angle) ); --text-height: calc(1rem + var(--padding-bottom) - var(--border-bottom-size)); position: absolute; padding-bottom: var(--padding-bottom); border-bottom: var(--border-bottom-size) solid white; width: fit-content; text-wrap: nowrap; opacity: 0.75; transition: opacity 0.2s ease-in-out; &.title-top-right { transform: translate(var(--…
answer count: 0
tagged with: css
has comment: http://stackoverflow.com/comment/139792402
type: UnansweredQuestion

web-component
tags question: http://stackoverflow.com/q/79029035
type: Tag
tag name: web-component
tags question: http://stackoverflow.com/q/78944551
tags question: http://stackoverflow.com/q/79062652
tags question: http://stackoverflow.com/q/79133517
tags question: http://stackoverflow.com/q/79332721
tags question: http://stackoverflow.com/q/79420641

http://stackoverflow.com/comment/139205368
type: Comment
has text: the issue there is `display: -webkit-box;` which is not a valid value. Despite that, it would make no sense to try to only address webkit browsers. If you remove the line, it will work perfectly
type: AnswerComment
comment on: http://stackoverflow.com/a/78952600
score: 1

http://stackoverflow.com/a/79057513
score: 1
has body: Probably typo: there should be no space between input and [type...] part: input[type=&quot;checkbox&quot;] then all the paddings and margins inside that block apply correctly :) the space which still is there it's margin from #task1 &gt; label {}. Attached working snippet below const tasks = []; function saveTask(){ const newTask = document.getElementById('task'); if(newTask.value != ''){ const task = document.createElement('div'); task.className = 'task'; task.id = 'task1' const checkbox = document.createElement('input'); checkbox.type = 'checkbox'; const label = document.createElement('label'); label.textContent = newTask.value; //task.classList.add('to-do'); checkbox.addEventListener('change', function() { if (this.checked) { label.style.textDecoration = 'line-through'; task.classList.remove('to-do'); task.classList.add('done'); } else { label.style.textDecoration = 'none'; task.classList.remove('done'); task.classList.add('to-do'); } }); task.appendChild(checkbox); task.appendChild(label); document.getElementById('taskview').appendChild(task); tasks.push(task); newTask.value = ''; } } .taskgallery { box-sizing: border-box; border-radius: 8px; border: 0.1em solid #49311d; width: 90%; height: 80%; display: flex; flex-direction: column; justify-content: center; align-items: center; margin-left: 3em; padding: 20px; } .taskview { display: flex; justify-content: flex-start; align-items: center; align-content: flex-start; flex-wrap: wrap; width: 98%; height: 98%; gap: 1.5vw 3vw; } #task1 { display: flex; flex-direction: row; width: 30%; height: 5%; align-content: center; } #task1 &gt; label { margin: 0px 10px; border-radius: 20px; width: 95%; align-content: center; padding-left: 10px; font-size: 1.8vh; color: #0a0903; background-color: #feaf55; } input[type='checkbox'] { padding: 0 !important; margin: 0 !important; } &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;link rel="stylesheet" href="styles.css" /&gt; &lt;title&gt;task-ify - by livia&lt;/title&gt; &lt;/head…
type: AcceptedAnswer
answers question: http://stackoverflow.com/q/79057467
downvote count: 0
has comment: http://stackoverflow.com/comment/139397742
type: Answer
accepted answer of: http://stackoverflow.com/q/79057467
upvote count: 1

path
tags question: http://stackoverflow.com/q/79039436
tags question: http://stackoverflow.com/q/78970518
type: Tag
tag name: path
tags question: http://stackoverflow.com/q/79478419

http://stackoverflow.com/comment/139404020
type: QuestionComment
comment on: http://stackoverflow.com/q/79060854
has text: @mplungjan, nice tip – thank you! Done.
score: 1
type: Comment

http://stackoverflow.com/comment/139331557
has text: @lncvrt Please add the `layout` file & `tailwind` css code in the above question.
comment on: http://stackoverflow.com/q/79021002
score: 2
type: Comment
type: QuestionComment

http://stackoverflow.com/a/79068056
score: 0
has comment: http://stackoverflow.com/comment/139419353
answers question: http://stackoverflow.com/q/79066138
accepted answer of: http://stackoverflow.com/q/79066138
type: AcceptedAnswer
has body: You can, but you need to ensure you get/create a SVG <mask> element. In short you can reference a mask via: element ID: element must be <mask> dataURL: you can add a complete SVG and choose whether luminance or opacity is defining transparency In this case you can move the dynamically created animated SVG to a new <mask> element. // add event listeners to image masked.addEventListener("mouseover", function() { playLottie("f"); }); masked.addEventListener("mouseout", function() { playLottie("b"); }); // get SVG let lottieSvg = lottie.querySelector('svg') //hide lottie svg lottieSvg.setAttribute('style', `width:0; height:0; position:absolute;`) let ns = 'http://www.w3.org/2000/svg'; // create SVG mask let maskEl = document.createElementNS(ns, 'mask') lottieSvg.append(maskEl) // add mask bg let rect = document.createElementNS(ns, 'rect') rect.setAttribute('fill', '#000') rect.setAttribute('width', '100%') rect.setAttribute('height', '100%') maskEl.append(rect) maskEl.id = 'mask'; // move outermost group to mask let gMain = lottie.querySelector('g') maskEl.append(gMain) gMain.removeAttribute('clip-path') let path = lottie.querySelector('path') path.setAttribute('fill', '#fff') body { background: #ccc } #masked { mask-repeat: no-repeat; mask-image: url(#mask); mask-size: 100% 100%; mask-position: center; mask-mode: luminance; } You also need to bind the animation event with the masked element as the mask itself isn't rendered and therefore not introduce a hit-area. masked.addEventListener("mouseover", function() { playLottie("f"); }); I highly recommend to first test masks (or clip-paths) with simplified HTML output before combining it with complex framework/library created elements.
type: Answer

http://stackoverflow.com/comment/139293746
comment on: http://stackoverflow.com/q/79000303
type: QuestionComment
score: 1
has text: why are you using border-image? define a height and use background instead. It's better
type: Comment

http://stackoverflow.com/comment/139145218
comment on: http://stackoverflow.com/q/78919901
type: Comment
type: QuestionComment
score: 1
has text: What position is that background image supposed to be in - and what do you want to happen on very narrow or very wide viewports?

http://stackoverflow.com/comment/139287629
type: AnswerComment
comment on: http://stackoverflow.com/a/78991981
score: 1
has text: Because % is based on the immediate parent element. And because you're using a third party component there are a bunch of hidden elements that are there. You can use browser tools to see what elements you need to pass the height down from, however the main parent still needs a non % height.
type: Comment

http://stackoverflow.com/comment/139206521
type: AnswerComment
score: 1
comment on: http://stackoverflow.com/a/78953349
has text: It's working now, I change .nice-select .list:hover .option:not(:hover) { background-color: none !important; }. Thank you for your help.
type: Comment

http://stackoverflow.com/comment/139403128
type: Comment
has text: if `Pass` is part of the source code, than it is not a secret. Everyone can read the source code and use it. Password verification should always be performed on the server side.
score: 0
comment on: http://stackoverflow.com/q/79060016
type: QuestionComment

http://stackoverflow.com/a/78916035
type: Answer
score: 0
has body: You can try using this code: .hero { background: url('../images/header-background.jpg') center center / cover no-repeat; margin-top: 8rem; padding: 11.5rem 2rem 8rem; position: relative; overflow-x: hidden; } I hope this helps you.
answers question: http://stackoverflow.com/q/78915933

http://stackoverflow.com/comment/139141284
type: QuestionComment
comment on: http://stackoverflow.com/q/78917857
has text: Is it impossible to delete this element? ` `
type: Comment
score: 0

http://stackoverflow.com/comment/139337653
has text: I believe fullscreen mode has no scrollbars as it shouldn't be needed.
type: Comment
comment on: http://stackoverflow.com/q/79024470
score: 0
type: QuestionComment

http://stackoverflow.com/a/78915797
type: Answer
score: 0
has body: You appear to what what is commonly called a "pancake stack" with header/body/footer - or maybe no footer but I included one to illustrate. Lots of ugly excess CSS to make the visual more apparent here. Fixed the duplicate ID issue by making them all classes and used those in the CSS. padding-botttom: 25px; was mis-spelled but used a more modern em approach where I make the font size 16px which is the default for most browsers anyway. body, * { font-size: 16px; box-sizing: border-box; margin: 0; padding: 0; } body { display: grid; place-items: center; padding: 1.5m; } .page-container { height: 100vh; display: grid; grid-template-rows: auto 1fr auto; border: 1px #00ff0044 solid; } .header-container { display: grid; grid-template-columns: auto 2em; background-color: #00bedf44; margin: 0.5em; border: solid 1px #0000ff; align-items: center; padding-right: 1em; } .content-container { display: grid; place-items: center; border: solid 1px #ffdd00; background-color: #ffdd0011; } .footer-container { display: grid; place-items: center; margin-top: 0.5em; border: solid 1px #ffdd00; background-color: #ff000033; width: 100vw; } .my-header>* { font-size: 2em; } .my-header { display: grid; align-items: center; margin-left: 1em; height: 2.5em; background-color: white; color: black; } .my-header:hover { background-color: black; color: white; } .drop-menu { display: grid; grid-template-rows: repeat(3, 1fr); grid-template-columns: 3em; align-items: center; background-color: #ff00df44; border: dashed 1px #ff0000; text-align: center; height: 2em; } .hamburger-menu { width: 1em; background-color: black; height: 0.15em; margin-top: 0.25em; margin-bottom: 0.25em; } .home-logo { width: 100%; max-width: 100%; border: solid red 1px; } 9. Introduction to introductions I have some cool content we all agreee! footer I am
has comment: http://stackoverflow.com/comment/139137865
answers question: http://stackoverflow.com/q/78915244

http://stackoverflow.com/comment/139165885
type: QuestionComment
has text: As you can now get the grid lines to show could you edit your question to remove that problem and show updated code (if relevant) and images, otherwise people may try to solve a problem for which you already have a solution.
comment on: http://stackoverflow.com/q/78928948
type: Comment
score: 0

http://stackoverflow.com/a/78919490
answers question: http://stackoverflow.com/q/78918675
downvote count: 0
has body: The Chrome Driver may need to be properly configured. Based on this document, install the Chrome Driver that matches your environment. Mac users with Homebrew installed: brew install --cask chromedriver Debian based Linux distros: sudo apt-get install chromium-driver Windows users with Chocolatey installed: choco install chromedriver Also based on the document, get the Chrome Driver executable_path according to your operating system. Linux: /usr/bin/google-chrome Mac: /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome Windows: Vista and newer: C:\Users\%USERNAME%\AppData\Local\Google\Chrome\Application\chrome.exe However, it's might be a little different in practical situation. Dig into the similar folder and find the actual chromedriver. In my case, it's named as /usr/bin/chromedriver. Enter the executable_path path found above or specify the browser type. from html2image import Html2Image hti = Html2Image( browser_executable=<executable-path-found-above>, custom_flags=[ '--no-sandbox', '--headless', '--disable-gpu', '--disable-software-rasterizer', '--disable-dev-shm-usage' ]) # OR hti = Html2Image( browser="chrome", custom_flags=[ '--no-sandbox', '--headless', '--disable-gpu', '--disable-software-rasterizer', '--disable-dev-shm-usage' ]) html = " An interesting title This page will be red" css = """body {background: red;}""" hti.screenshot(html_str=html, css_str=css, save_as='red_page.png')
upvote count: 1
score: 1
type: Answer

http://stackoverflow.com/q/79017763
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139325831
type: Question
has answer: http://stackoverflow.com/a/79167717
has comment: http://stackoverflow.com/comment/139326118
tagged with: http://stackoverflow.com/tag/html
answer count: 1
has body: I am new to programming.I'm starting with html and continuing with css right now. My first codes were working but now it gives this error.My default browser was Opera. I changed it to Chrome but it didn't work.I don't know what to do
has comment: http://stackoverflow.com/comment/139325615
score: 0
tagged with: visual-studio-code
has title: I'm getting "could not read source map for chrome-error://chromewebdata/:" When attempting to run my Vscode app on Chrome
tagged with: css
linked to: http://stackoverflow.com/q/61339968

http://stackoverflow.com/comment/139391921
type: Comment
score: 0
has text: "style only ONE of them" is it always a consistent one? And are those styles always the same, or variable depending on the data in the JSON?
comment on: http://stackoverflow.com/q/79054258
type: QuestionComment

liquid-template
tag name: liquid-template
tags question: http://stackoverflow.com/q/79028399
type: Tag

http://stackoverflow.com/q/79026323
type: Question
has comment: http://stackoverflow.com/comment/139341021
tagged with: http://stackoverflow.com/tag/html
score: 0
has body: I have a long content html, when printing, the height of the element will exceed the A4 paper size, and will print 2 pages. If I add transform: scale to the element to force the content to shrink to fit the A4 paper size it works on Chrome 100 but on Chrome 120+ and new Edge, the new page still appears event when the HTML element is scaled. Content is still split into 2 pages on Chrome 120+ or Edge: How to deal with it? How can I properly scale the page to fit the A4 paper. Document Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in nunc purus. Cras sit amet dapibus dolor. Praesent commodo tristique est. Phasellus vehicula ac nisl rutrum feugiat. Quisque volutpat sollicitudin neque, a sodales nisl porttitor eget. Sed aliquet purus cursus magna volutpat auctor. Maecenas vitae porttitor nisl, ut posuere turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consectetur lectus ac ligula mollis vehicula. Donec ac ex in felis mattis egestas non sit amet mauris. Fusce rhoncus euismod est, nec pulvinar nibh mattis vel. Etiam tempor, tellus non efficitur porttitor, leo leo molestie tortor, ac malesuada est arcu at turpis. Curabitur a augue sed diam iaculis pretium. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse orci nunc, lobortis sed scelerisque nec, rutrum sit amet leo. Donec ut neque non eros lacinia convallis. Proin vitae mauris ac mi vestibulum tincidunt. Duis consectetur auctor felis, non congue erat ultricies quis. In ipsum neque, ornare at pulvinar et, luctus id lectus. Nunc dignissim lectus in dui sagittis maximus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras posuere libero vitae odio bibendum consectetur. Integer sit amet convallis turpis. Nullam consequat nisl nibh, nec varius felis hendrerit id. Morbi ullamcorper dolor sit amet hendrerit tincidunt. Phasellus viverra erat tellus, a lobortis justo vulputate sit amet. Suspendisse hen…
answer count: 0
tagged with: css
tagged with: google-chrome
linked to: http://stackoverflow.com/q/50549663
type: UnansweredQuestion
has title: Tall HTML element still drop to a new page when scaled to fit the A4 page size when printing

http://stackoverflow.com/a/79013302
type: Answer
has body: Replace .player-selection to #player-selection. . is for classes, # is for IDs.
score: 0
upvote count: 1
downvote count: 1
answers question: http://stackoverflow.com/q/79013220

http://stackoverflow.com/comment/139311930
comment on: http://stackoverflow.com/q/79010172
type: QuestionComment
has text: cant find `base.html` in structure
type: Comment
score: 0

http://stackoverflow.com/comment/139133905
type: Comment
comment on: http://stackoverflow.com/q/78913676
score: 0
type: QuestionComment
has text: Thanks, I have actually tried that but for some reason the 'First' column still shows last

http://stackoverflow.com/a/79034931
upvote count: 2
answers question: http://stackoverflow.com/q/79032875
type: Answer
score: 2
has body: Since you stated that you don't always know the width of the content area, you can use this technique (assuming the content area is centered on the viewport). Set the position of the content area and breakout elements to relative Set the left property of the breakout element to 50%, which will ensure the left edge is in the center of the content area and screen (for now) Set the margin-left property of the breakout element to -50vw, which will pull that left edge from the middle of the viewport to the left edge of the viewport Set the width of the breakout element to 100vw to make sure it stretches across the full screen This should work regardless of the width of the content area, provided the content area is centered on the viewport, and doesn't rely on calc(). .content-area { position: relative; } .breakout-element { position: relative; left: 50%; margin-left: -50vw; width: 100vw; } /* extra demo styles to make it easier to see */ .content-area { width: 60%; /* an arbitrary number */ margin: 0 auto; padding: 5rem 0; min-height: 100vh; background: blue; } .breakout-element { background: red; min-height: 20vh; } breakout area If you want it to be nearly the full width of the screen, you can use a variable and calc() to subtract a specific width from the margin and width dimensions. Here's an example with 30px of space at the edges, and a different content area width from the original example: .content-area { position: relative; } .breakout-element { --edge-space: 30px; position: relative; left: 50%; margin-left: calc(-50vw + var(--edge-space)); /* reduce the distance the left edge is pulled to the left by the distance of the --edge-space variable */ width: calc(100vw - (2 * var(--edge-space))); /* reduce the width of the breakout element by double the --edge-space variable */ } /* extra demo styles to make it easier to see */ .content-area { width: 35%; /* an arbitrary number */ margin: 0 auto; padding: 5rem 0; min-height: 100vh; background: blue; } .breakout-eleme…
downvote count: 0

http://stackoverflow.com/comment/139365009
type: QuestionComment
score: 3
type: Comment
comment on: http://stackoverflow.com/q/79039436
has text: clip-path, SVG, mask... please show the code of clip-path that have not worked for you.

http://stackoverflow.com/comment/139280571
comment on: http://stackoverflow.com/q/78992567
type: Comment
type: QuestionComment
score: 0
has text: @DBS Thanks! I was copy pasting the code somewhere the "@" char was replaced automatically. My fault.

alignment
tags question: http://stackoverflow.com/q/79056227
tags question: http://stackoverflow.com/q/79055607
tags question: http://stackoverflow.com/q/79066820
type: Tag
tags question: http://stackoverflow.com/q/78951532
tags question: http://stackoverflow.com/q/78998686
tag name: alignment
tags question: http://stackoverflow.com/q/78941096
tags question: http://stackoverflow.com/q/78938572
tags question: http://stackoverflow.com/q/79105355
tags question: http://stackoverflow.com/q/79196455
tags question: http://stackoverflow.com/q/79087222
tags question: http://stackoverflow.com/q/79081875
tags question: http://stackoverflow.com/q/79092108
tags question: http://stackoverflow.com/q/79085620
tags question: http://stackoverflow.com/q/79364522
tags question: http://stackoverflow.com/q/79388955
tags question: http://stackoverflow.com/q/79364716
tags question: http://stackoverflow.com/q/79496615

http://stackoverflow.com/comment/139320264
type: AnswerComment
score: 0
type: Comment
has text: I do apologize but I don't have any experience with Wordpress. However, you can post another question so that other people from the community with an expertise with this can answer. Just don't forget to add the `Wordpress` tag.
comment on: http://stackoverflow.com/a/79007689

http://stackoverflow.com/comment/139341021
type: Comment
score: 0
comment on: http://stackoverflow.com/q/79026323
type: QuestionComment
has text: This question is similar to: [Scale HTML to fit one page when printing](https://stackoverflow.com/questions/50549663/scale-html-to-fit-one-page-when-printing). If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem.

http://stackoverflow.com/comment/139140140
type: Comment
has text: P.S. It doesn't appeared any change than before when added the property object-position and then object-fit. I want to sift the img with using overflow: clip;. Any other good way or I should use backgroundimage? Hmm, is this much to describe?
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78916876

http://stackoverflow.com/a/78979115
has body: A non-VueJS answer You can restrict the scope of stylesheet rules by enclosing them in a @scope at-rule. (There seems to be no equivalent attribute if they are loaded via a element.) var style = mydiv.computedStyleMap() console.log( "border-color", style.get("border-color").toString(), "background-color", style.get("background-color").toString(), "font-weight", style.get("font-weight").toString()); @scope (:root) to (#mydiv) { body { background-color: yellow; font-weight: 700; } div { background-color: rgb(0, 255, 0); border: solid 1px red; } } Subject to CSS Exempt from CSS is out of scope for the CSS rules, therefore it has no red border. Likewise, the background-color in is transparent (rgba(0,0,0,0), not green as for the other ), but this means that the yellow body background shines through. By contrast, the font-weight in both s is bold (700) because it is inherited from the body. "Shining through" and "inheritance" are two ways in which CSS rules affect elements beyond their scope. In other words: Restricting the scope of CSS rules is different from restricting their effect. The answer to your question therefore depends on what you mean by "isolate". If you compare the solution to iframes, the message is mixed: "Shining through" (of the background) affects as well as iframes. "Inheritance" (of font weight) affects but not iframes.
upvote count: 1
score: 1
downvote count: 0
type: Answer
answers question: http://stackoverflow.com/q/78978700

http://stackoverflow.com/a/79044800
type: Answer
score: 0
has body: Can you check your config? Something tells me that it gets overwritten at some point. The following code should solve the issue as it forces you to use "modern" instead of "legacy." Legacy sends the warnings but not the modern/modern-compiler options. Docs: https://vitejs.dev/config/shared-options.html#css-preprocessoroptions css: { preprocessorOptions: { scss: { api: 'modern-compiler', } } }
answers question: http://stackoverflow.com/q/79003218

http://stackoverflow.com/q/78979648
has title: React !important Styling
score: 0
tagged with: reactjs
has answer: http://stackoverflow.com/a/78979825
tagged with: css
has body: Whats the proper way to declare a style as important in react? I've seen a few examples, but none that include a variable value. { backgroundColor: field?.secondary_color + " !important", }
type: UnansweredQuestion
type: Question
answer count: 1

http://stackoverflow.com/comment/139262377
comment on: http://stackoverflow.com/q/78979287
type: Comment
has text: Please provide enough code so others can better understand or reproduce the problem.
score: 0
type: QuestionComment

http://stackoverflow.com/comment/139308167
type: QuestionComment
has text: These type of layout can easy be implemented from Grid / Flex System and in future it will be helpful for you make it responsive too.
type: Comment
comment on: http://stackoverflow.com/q/79008324
score: 3

http://stackoverflow.com/comment/139675792
comment on: http://stackoverflow.com/a/79029558
type: Comment
score: 0
type: AnswerComment
has text: As far as I know, not with this current setup, since sticky elements still need space in the flow, unlike absolute/fixed. You can try switching the `.content` to `display:grid`, then use `grid-row` and `grid-column` to force `.child` to stick to `.content`'s edges, but this would also hide the vertical scrollbar of `.data`. Another way I can think of is putting all the `.content` into an ` ` and use `position:fixed` on the `.child`.

http://stackoverflow.com/a/79055447
has body: 2 ERRORS IN YOU CODE I noticed that in this piece of code: I know that autoplay doesn't work. But for newbies or beginners, this is quite confusing: because you are disallowing autoplay and then re-allowing it. So, you have to remove allow="autoplay". I saw this error when I tested the speedControl button: Uncaught TypeError: player.setPlaybackRate is not a function at https://cdpn.io/cpe/boomboom/pen.js?key=pen.js-1bff938b-eb47-861c-0d95- a4f5ea83bed6:77 According to this MDN article, this error appears because the playerjs library may not support the setPlaybackRate function or it may not exist. Try to check the library documentation or try to use the below alternative method: speedControl.addEventListener('click', () => { const speedOptions = [1, 1.25, 1.5, 2]; let currentSpeed = parseFloat(speedControl.innerText.replace('x', '')); const newSpeed = speedOptions[(speedOptions.indexOf(currentSpeed) + 1) % speedOptions.length]; speedControl.innerText = `${newSpeed}x`; // Alternative method to set playback rate player.setPlaybackRate(newSpeed); // Ensure this method is supported }); SOLUTION Your issue is that Chrome requires user interaction to play media. You can add a user interaction event before hiding the video player: playBtn.addEventListener('click', () => { player.getPaused(paused => { if (paused) { player.play(); document.getElementById('bunny-stream-embed').style.display = 'none'; } else { player.pause(); } }); }); For more help, you can consult the following sources: Google Chrome Autoplay Policy MDN Web Docs on Autoplay MDN Web Docs on HTMLMediaElement.play() Stack Overflow Discussion on User Interaction for Media Playback Player.js GitHub Repository Player.js API Documentation
score: 1
answers question: http://stackoverflow.com/q/79021330
type: Answer
downvote count: 0
upvote count: 1

http://stackoverflow.com/q/78979166
type: UnansweredQuestion
tagged with: http://stackoverflow.com/tag/html
type: Question
duplicate of: http://stackoverflow.com/q/5533636
tagged with: html-table
has title: How can I make a table in HTML larger than the max-width of the page, and then have it be scrollable on the x-axis
linked to: http://stackoverflow.com/q/5533636
has answer: http://stackoverflow.com/a/78982748
has answer: http://stackoverflow.com/a/78979928
has body: I have been making a simple website for a video game that I play that details the characters and attacks that are in the game. This requires large tables to display the data that I want to show. For the table that houses all the attacks the last (rightmost) column has a sentence or two explaining what the attack does. On PC this looks fine but when the page is viewed on mobile this column is squished, which both makes it less aesthetically pleasing and also makes it harder to read. I currently have the CSS file for the table set to the following, which allows the table to scroll without going over the edge of the page: table{ table-layout: fixed; max-width: 100%; overflow-x: scroll; display: block; } I was wondering if it would be possible to increase the width of the table (or just the last column, whichever is easiest to implement) while still having it display as a scrollable table which doesn't go over the edge of the page. The table is also using DataTables to allow for the columns to be sorted, if that changes anything. I have tried increasing the min-width of the column, but the change isn't implemented. I also tried increasing the width of the table to 1250px with !important, which did show (if !important wasn't added then the change didn't show), but I was unable to then have the table overflow the same way it currently does.
score: 0
answer count: 2
tagged with: css

http://stackoverflow.com/comment/139270930
type: Comment
has text: Thank you so much, I don't know how I missed that! >.>
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78987905

http://stackoverflow.com/comment/139305675
comment on: http://stackoverflow.com/a/79004507
has text: Very beautiful! works as expected. Is there a way to add a margin around the whole thing like 20px or so and still maintain the height without having to overflow the page?
type: Comment
score: 0
type: AnswerComment

http://stackoverflow.com/comment/139416627
score: 1
comment on: http://stackoverflow.com/q/79067521
type: Comment
has text: I have run your snippet and the ::after pseudo element is below the icons in the navbar. I removed the z-index: -1 and set its opacity to 1 and saw only the 'glow' - i.e. your code seems to work fine. Can you say what browser you are using?
type: QuestionComment

http://stackoverflow.com/comment/139382016
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/79047929
has text: Since I am just getting started in html and css I haven't touched grids. I will keep this in mind so when I do I have something to refer back to.

http://stackoverflow.com/comment/139185730
comment on: http://stackoverflow.com/a/78941783
has text: Yes, that shows the hamburger icon, but the menu list should be below the icon.
type: Comment
score: 0
type: AnswerComment

http://stackoverflow.com/comment/139400838
type: Comment
score: 0
comment on: http://stackoverflow.com/q/79059286
has text: Would it be possible to add a [Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example) of this phenomenon to your question? Which OS are you using?
type: QuestionComment

http://stackoverflow.com/comment/139325529
type: Comment
comment on: http://stackoverflow.com/q/79017553
type: QuestionComment
has text: @Neil on mobile we have a slider to view the cards horizontally. I dont want to use a table tough. you cant use a flexbox for this?
score: 0

http://stackoverflow.com/comment/139410801
has text: I appended the constraint to the end of the question per your request.
type: Comment
comment on: http://stackoverflow.com/a/79051207
type: AnswerComment
score: 0

http://stackoverflow.com/q/78984919
tagged with: javascript
tagged with: reactjs
tagged with: next.js
tagged with: css
has body: I created a bar that looks like macOS bar, but when I'm using my phone, I clicked and the animation look like this, like it hasn't done its hover animation: It should look like this when I click (this is on the computer screen with mouse) I tried to figure out how, and I looked at the onTouch event, but it didn't fix me; it also affects my tooltip, which can't be closed when I'm using a mobile device. This is my snip code BarIcon.js: const BarIcon = ({ icon, name, url, clickHandler, changeColor, theme }) => { const [bounce, setBounce] = useState(false); const [hover, setHover] = useState(false); const changeHandler = () => { setBounce(true); setTimeout(() => { setBounce(false); }, 500); }; const location = useRouter(); const path = location.pathname; const displayNav = path === url; const handleClick = () => { setHover(false); setTimeout(() => { changeHandler(); if (clickHandler) { clickHandler(); } }, 50); }; return ( {name} setHover(true)} onMouseLeave={() => setHover(false)} > <Icon name={bounce ? "Loading" : icon} color={changeColor ? "#858585" : "#7e7e7e"} size="22px" /> <Icon d={displayNav ? null : "none"} name="Dot" m="auto" color={changeColor ? "#dbdbdb" : "#3e3e3e"} size="10px" /> ); }; And this is my CSS for handling the hover event of the button: .Icon:hover{ transform: scale(1.4) translateY(-15px) ; margin: 20px 15px 0px 15px; } .Icon:not(:hover){ transform: scale(1) ; }
answer count: 0
tagged with: mobile
type: UnansweredQuestion
score: 0
has title: Bar Icon onTouchEnd problem with animation on mobile device
type: Question

http://stackoverflow.com/comment/139189544
has text: There will be around 15-20 flags atmost.
comment on: http://stackoverflow.com/q/78942849
type: Comment
score: 0
type: QuestionComment

http://stackoverflow.com/comment/139422429
score: 0
type: Comment
comment on: http://stackoverflow.com/a/79063036
type: AnswerComment
has text: @Kaki In I have edited the post try run snippet. I just first transform to 0 and set origin to center then I scale it up to 1. Hope this helps

http://stackoverflow.com/a/79068753
type: Answer
score: 0
upvote count: 1
answers question: http://stackoverflow.com/q/79068427
has body: This is a feature of an inline formatting context. When an inline box is split, margins, borders, and padding have no visual effect where the split occurs. This is a long text to test what happens to a paragraph shown in an inline div. It is expected the 2nd line onward does not respect the padding. Are you sure you don’t want inline-block instead? This is a long text to test what happens to a paragraph shown in an inline div. It is expected the 2nd line onward does not respect the padding.
has comment: http://stackoverflow.com/comment/139420329
downvote count: 1

canvas
tag name: canvas
type: Tag
tags question: http://stackoverflow.com/q/78972128
tags question: http://stackoverflow.com/q/79057124
tags question: http://stackoverflow.com/q/78926760
tags question: http://stackoverflow.com/q/79216464
tags question: http://stackoverflow.com/q/79083304
tags question: http://stackoverflow.com/q/79129815
tags question: http://stackoverflow.com/q/79280928
tags question: http://stackoverflow.com/q/79278930

http://stackoverflow.com/comment/139150558
comment on: http://stackoverflow.com/q/78920988
type: QuestionComment
score: 0
has text: Here's a link about how to make a duotone filter with SVG filters: https://tympanus.net/codrops/2019/02/05/svg-filter-effects-duotone-images-with-fecomponenttransfer/
type: Comment

http://stackoverflow.com/a/79057808
upvote count: 2
type: Answer
score: 2
downvote count: 0
has body: grid-auto-flow: dense will achieve what you have described: document.querySelectorAll('#gridALBUM > div').forEach((D, _, A) => { D.addEventListener('click', e => { if (D.classList.toggle('span')) A.forEach(d => { if (d != D) d.classList.remove('span') }); }) }) #gridALBUM { background: lightblue; margin: 50px auto; max-width: 908px; display: grid; grid-gap: 0 4px; grid-template-columns: repeat(3, 300px); grid-auto-flow: dense; } #gridALBUM>div { border: 1px solid black; display: flex; } #gridALBUM>div:not(.span)>div { display: none; } #gridALBUM>div.span { grid-column: 1 / 4; background-color: #47479c; } 1 one 2 two 3 three 4 four 5 five 6 six 7 seven 8 eight 9 nine 10 ten
answers question: http://stackoverflow.com/q/79057724

http://stackoverflow.com/comment/139158221
type: QuestionComment
has text: It's an animation that occurs only when scrolling, but the current code doesn't seem to have space for scrolling. Should I arbitrarily increase the height and reproduce it?
type: Comment
comment on: http://stackoverflow.com/q/78926774
score: 0

http://stackoverflow.com/comment/139281534
type: Comment
score: 0
has text: Otherwise the real solution would be to just throw anything and start again making things consistent from the ground up. Your media queries have different breakpoints that may overlap in some conditions while acting on different selectors with different font size. You should have a set of non overlapping breakpoints and put the rules in blocks so they are consistent. Plus you should take a more solid choice on how you compute font size instead of each one having a different strategy
comment on: http://stackoverflow.com/q/78992567
type: QuestionComment

http://stackoverflow.com/comment/139181421
has text: @DiegoD It is fixed but the hamburger menu is not displaying. I want it to show up as in the What I want to achieve image
comment on: http://stackoverflow.com/q/78939256
type: Comment
score: 0
type: QuestionComment

http://stackoverflow.com/q/78977012
answer count: 0
tagged with: css
tagged with: flexbox
has title: Vuetify flex wrap order
type: UnansweredQuestion
tagged with: vuetify.js
has body: I'm working with a flex container that has four items. The third item has a variable width based on dynamic content. When the container runs out of space, I want the third item to wrap to a new line, rather than the last item. I've tried different flexbox configurations, but the last item always wraps first, which isn't the behavior I'm looking for. How can I force the third item to wrap when there's no more room? Here's an example image of the desired behavior. Thanks in advance for your help!
type: Question
has comment: http://stackoverflow.com/comment/139251937
score: 0

http://stackoverflow.com/comment/139133995
score: 0
type: Comment
type: QuestionComment
has text: You just want `li ul`…? If not, what exactly _are_ you trying to match or not match?
comment on: http://stackoverflow.com/q/78913738

http://stackoverflow.com/comment/139233783
type: QuestionComment
has text: Yes..I tried on mobile resolution... it is working as expected... can you generate the above issue using codesandbox ??
type: Comment
comment on: http://stackoverflow.com/q/78963317
score: 0

http://stackoverflow.com/a/79068924
has comment: http://stackoverflow.com/comment/139419123
answers question: http://stackoverflow.com/q/79066620
has body: Blazor uses Bootstrap by default. form-control is the default Bootstrap css style, so that the element applies the build-in style which caused the difference. A quick way is avoid using Bootstrap default css style name, change like below: .form-label { color: aqua } .form-label-another-label { color: aqua } .form-control-custom { color: #077df2; background: #f2f0f0; } .form-control-another-control { color: #077df2; background: #f2f0f0; } Then use it in the view: SomeLabel SomeLabel
type: Answer
score: 0
has comment: http://stackoverflow.com/comment/139419150

http://stackoverflow.com/comment/139194904
has text: Works fine for me in Firefox. Maybe it’s a Chrome bug. You don’t really need the complicated example, just putting any whitespace directly after `linear(` will do.
type: Comment
score: 3
comment on: http://stackoverflow.com/q/78946626
type: QuestionComment

http://stackoverflow.com/comment/139183899
type: Comment
has text: @mplungjan It's not mine, did you mean to comment to the original OP?.
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78940190

http://stackoverflow.com/comment/139160466
type: QuestionComment
has text: you listen for the click event on the whole `.cake` element.. did you consider instead of listening to the click event on the `.icing` element only?
comment on: http://stackoverflow.com/q/78927953
score: 2
type: Comment

http://stackoverflow.com/comment/139335500
type: QuestionComment
score: 1
type: Comment
has text: there are several problems in your approach but an answer would go too far.. so to begin with: you are using 2 distinct strategies for the same task... you should use OR ` ` OR `@font-face`; your `@font-face` definition is wrong.. look [here](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face) for the correct syntax; the relative urls should be relative to the resource so I think that in the `#font-face` should be `../assets/[...]` and in the ` ` should be `./assets/[...]` (or just use urls starting with `/`)
comment on: http://stackoverflow.com/q/79023236

legend
tags question: http://stackoverflow.com/q/79013011
type: Tag
tag name: legend
tags question: http://stackoverflow.com/q/79507818

http://stackoverflow.com/comment/139240416
type: QuestionComment
comment on: http://stackoverflow.com/q/78970641
has text: You have to provide minimal reproducible example as stated above.
type: Comment
score: 0

http://stackoverflow.com/comment/139222244
type: QuestionComment
type: Comment
comment on: http://stackoverflow.com/q/78957679
score: 0
has text: I don’t know exactly what effect you want, but to get a basic animation going you need to set animation-duration.

http://stackoverflow.com/comment/139134687
type: Comment
has text: I've edited a codesandbox link. Please check if you can.
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78912357

http://stackoverflow.com/comment/139418862
type: Comment
has text: Hi @user0, I think you are still not understand Gabriel Weidmann's answer. You can check my answer below.
comment on: http://stackoverflow.com/a/79066675
score: 0
type: AnswerComment

webpack-html-loader
tags question: http://stackoverflow.com/q/78905228
type: Tag
tag name: webpack-html-loader

http://stackoverflow.com/comment/139126968
score: 2
type: Comment
comment on: http://stackoverflow.com/q/78909592
type: QuestionComment
has text: What element are the before and after being used on (it cannot be input so there is quite a bit of missing code that might be relevant)

http://stackoverflow.com/comment/139394660
comment on: http://stackoverflow.com/a/79055818
type: Comment
score: 0
type: AnswerComment
has text: Yes, of course, I tested my code on all screen resolution and it works very well.

http://stackoverflow.com/comment/139347177
type: QuestionComment
comment on: http://stackoverflow.com/q/79029522
has text: Thanks for the tip, I have no idea what I'm really doing here~
type: Comment
score: 0

http://stackoverflow.com/a/78953766
downvote count: 0
type: Answer
upvote count: 1
answers question: http://stackoverflow.com/q/78953739
has comment: http://stackoverflow.com/comment/139207392
has body: :last-child > .custom-class should do what you are asking for: This selects custom-class if it is a direct child of an element that is a last-child. :last-child > .custom-class { color: green; } whatever whatever thing i want to select
has comment: http://stackoverflow.com/comment/139207445
has comment: http://stackoverflow.com/comment/139207431
score: 1

http://stackoverflow.com/comment/139422826
comment on: http://stackoverflow.com/a/79062162
type: Comment
score: 0
has text: you put those classes on any html elements, the link provides examples.
type: AnswerComment

http://stackoverflow.com/comment/139348704
has text: to card**s** not card (and it does work)
type: QuestionComment
comment on: http://stackoverflow.com/q/79030661
type: Comment
score: 0

http://stackoverflow.com/comment/139247468
type: Comment
has text: @AHaworth good question, I gave it a try with a shorter amount of content (and got rid of the content's containing div) and it still stops short at the same location: https://jsfiddle.net/gonctb83/1/
score: 0
comment on: http://stackoverflow.com/q/78974610
type: QuestionComment

http://stackoverflow.com/comment/139412599
type: QuestionComment
score: 0
has text: Update the angular cli and create the new project. I have checked on my local, and everything is working fine
comment on: http://stackoverflow.com/q/79065331
type: Comment

http://stackoverflow.com/a/78940830
type: Answer
score: 0
has body: Here is a more modern method to generate the table document.addEventListener('DOMContentLoaded', () => { // Generate headers document.querySelector('.header').innerHTML = Array.from({ length: 50 }, (_, j) => ` Header ${j + 1} `).join(''); document.querySelector('.rows').innerHTML = Array.from({ length: 2000 }, (_, i) => ` ${Array.from({ length: 60 }, (_, j) => ` Row ${i + 1} Col ${j + 1} `).join('')} `).join(''); }); body, html { height: 100vh; padding: 0; margin: 0; } .container { display: flex; flex-direction: column; overflow: auto; height: 100%; } .header { display: flex; position: sticky; top: 0; background-color: #f1f1f1; z-index: 1; } .header div { flex: 1; padding: 10px; border: 1px solid #ccc; text-align: center; } .grid { display: flex; flex-direction: column; } .row { display: flex; } .row div { flex: 1; padding: 10px; border: 1px solid #ccc; text-align: center; } .header div:first-child, .cell:first-child { color: white; }
answers question: http://stackoverflow.com/q/78940065

http://stackoverflow.com/a/79001321
answers question: http://stackoverflow.com/q/79000802
upvote count: 1
score: 1
has body: For such things, you should simply use an SVG <path d="M 0 0 C 0 0, 0 50, 50 50 L 50 50, 950 50 C 950 50, 1000 50, 1000 100" stroke="gray" stroke-width="3" stroke-dasharray="10,10" fill="transparent"/>
downvote count: 0
type: Answer

http://stackoverflow.com/a/79066480
has body: Your Project Cherie Deville
downvote count: 1
upvote count: 0
has comment: http://stackoverflow.com/comment/139418800
type: Answer
has comment: http://stackoverflow.com/comment/139415452
answers question: http://stackoverflow.com/q/79066173
score: -1

http://stackoverflow.com/q/78964813
tagged with: sass
has title: Remove the space between 2 elements under each other using flex
tagged with: reactjs
score: -1
has comment: http://stackoverflow.com/comment/139228213
has comment: http://stackoverflow.com/comment/139228335
has answer: http://stackoverflow.com/a/78964887
has body: I have a side-bar with 2 links. The active route gets a mirrored element in the side-bar like this (see the about link): What I want is to remove the gap between the 2 Abouts. Here is the html for the links: About {location.pathname === '/about' ? About : null } Home {location.pathname === '/' ? Home : null } <HeaderSearch /> And here is my css for the links: #sideBarLinks { display: none; flex-direction: column; gap: 2rem; padding-left: 10px; .sidebar-link-singlewrap { display: flex; flex-direction: column; a { text-decoration: none; color: black; } p { margin: 0; transform: rotateX(180); } } } EDIT: Here is the snippit: div { display: flex; flex-direction: column; } a { margin: 0; } p { margin: 0; transform: rotateX(180deg); } Test Test
has comment: http://stackoverflow.com/comment/139228220
tagged with: css
downvote count: 1
has comment: http://stackoverflow.com/comment/139228310
upvote count: 0
favorite count: 0
type: Question
accepted answer: http://stackoverflow.com/a/78964887
has comment: http://stackoverflow.com/comment/139228189
answer count: 1
type: AnsweredQuestion
tagged with: http://stackoverflow.com/tag/html

http://stackoverflow.com/comment/139368343
type: QuestionComment
has text: You need to be specific about the transition required, and you have to ensure that the element to be transitioned has a start point and an end point, with the end point set on the relevant input/label being clicked. You also need to be specific about how the element transitions out when another list is selected.
type: Comment
score: 0
comment on: http://stackoverflow.com/q/79039982

http://stackoverflow.com/comment/139205452
type: QuestionComment
comment on: http://stackoverflow.com/q/78952466
type: Comment
has text: @tacoshy I think the "component" part is the important bit here. The way I understand it, the user can use multiple components on a page, but they might want to overwrite the styling for one of those only, and leave the rest in the "default" style the page provides.
score: 0

http://stackoverflow.com/comment/139201267
comment on: http://stackoverflow.com/q/78949483
has text: Also, the two image you posted doesn't seem to have the same viewport width and height. This will definetly affect how text wraps.
type: Comment
score: 0
type: QuestionComment

http://stackoverflow.com/comment/139308737
type: QuestionComment
has text: @Lee if you are on Windows, you can show your directory/file structure using the `tree /f` command. [Ref](https://stackoverflow.com/questions/9518646/tree-view-of-a-directory-folder-in-windows)
type: Comment
score: 0
comment on: http://stackoverflow.com/q/79008485

http://stackoverflow.com/comment/139357314
type: QuestionComment
comment on: http://stackoverflow.com/q/79035218
has text: You should try `window.addEventListener('pageshow', fn)`, where `fn` is your function to hide (I recommend deleting it instead of hiding) your elements with the `loadingDiv` class. It should work just fine. If it is not working, then your `fn` is not reaching (or finding) the desired element in the window to hide it.
type: Comment
score: 0

http://stackoverflow.com/q/79000228
score: 0
answer count: 2
has answer: http://stackoverflow.com/a/79000258
tagged with: css
has answer: http://stackoverflow.com/a/79000250
tagged with: flexbox
tagged with: image
has body: Given a flexible box column, how can I resize image as text length increases to fit. .container { width: 400px; height: 300px; border: 3px solid green; padding: 4px; display: flex; flex-direction: column; } .img-wrapper { /* display: flex; */ } .img-wrapper img { max-width: 100%; /* min-height: 0px; */ object-fit: cover; } &lt;div class="container"&gt; &lt;div class="img-wrapper"&gt; &lt;img src="https://static.billboard.com/files/media/talib-kweli-2018-cr-Dorothy-Hong-billboard-1548-compressed.jpg" /&gt; &lt;/div&gt; &lt;div class='text'&gt; this is a cool paragraph about the angry theicn shfieh that eats and is not pfeifol about the nutehc chartogret including but not adfentily of the crooked and devque thandilbot. Piej kargrid angy that iejf othersome to the compact shiferboth &lt;/div&gt; &lt;/div&gt; If the image is top-level, this simple CSS solves: img { min-height: 0px; object-fit: cover; }
accepted answer: http://stackoverflow.com/a/79000258
type: Question
possible better answer: http://stackoverflow.com/a/79000250
has title: flexbox column Resize image according to text length
type: AnsweredQuestion

http://stackoverflow.com/comment/139277258
type: AnswerComment
score: 1
comment on: http://stackoverflow.com/a/78991158
has text: Can you update the code in the original posting to match this. It will be easier to read and new people coming to this question will have the full context.
type: Comment

hyperlink
tags question: http://stackoverflow.com/q/79059761
tag name: hyperlink
type: Tag
tags question: http://stackoverflow.com/q/79000908
tags question: http://stackoverflow.com/q/79304002
tags question: http://stackoverflow.com/q/79478419

formatting
tag name: formatting
tags question: http://stackoverflow.com/q/78936068
tags question: http://stackoverflow.com/q/78938680
type: Tag
tags question: http://stackoverflow.com/q/79304777
tags question: http://stackoverflow.com/q/79542456

http://stackoverflow.com/q/78935678
has comment: http://stackoverflow.com/comment/139174487
score: 1
has answer: http://stackoverflow.com/a/78935743
duplicate of: http://stackoverflow.com/q/42440313
upvote count: 1
tagged with: css-tables
favorite count: 0
has title: How to generate a table with cells merged in a column
accepted answer: http://stackoverflow.com/a/78935743
tagged with: http://stackoverflow.com/tag/html
type: Question
has comment: http://stackoverflow.com/comment/139174512
has comment: http://stackoverflow.com/comment/139174578
has comment: http://stackoverflow.com/comment/139174619
linked to: http://stackoverflow.com/q/42440313
answer count: 1
has comment: http://stackoverflow.com/comment/139174637
type: AnsweredQuestion
tagged with: html-table
tagged with: row
has comment: http://stackoverflow.com/comment/139174782
has comment: http://stackoverflow.com/comment/139176699
has body: This is the table I expect: And I used this code, but did not get the expected result a b c d e f g h i j k
downvote count: 0
tagged with: css

http://stackoverflow.com/a/79022317
has comment: http://stackoverflow.com/comment/139382826
type: AcceptedAnswer
type: Answer
score: 0
has comment: http://stackoverflow.com/comment/139390142
answers question: http://stackoverflow.com/q/79021080
upvote count: 1
has body: Loading CSS has not always been render blocking A term existed back then called "Flash of Unstyled Content" (or FOUC / FUC). Wikipedia: Flash of Unstyled Content lists sources going back to the mid 2000s. Render blocking was introduced to combat this effect. Browsers would load the HTML and request the linked files after, while displaying the page without stylings for a split second. The styles would finish loading shortly after and the page would render itself again. The behavior likely came from having slow dialup connections where not seeing anything on the website for several seconds was worse than seeing unstyled content, which would correct itself after a second or ten. Reloading the page would then not show the flash of unstyled content again, since the stylesheets were in the browser cache. Even though this looked horrible for newcomers to the internet, connections with 56k modems or slower would have not shown anything for a while, so seeing at least something on the screen was seen as the internet doing its loading thing and after a couple seconds you were allowed to use the website. With a DSL connection or even a fast mobile connection, those small text files could now be loaded in the blink of an eye and the flashing of unstyled content for like a second turned into an eyesore. FOUC can still happen when loading assets asynchronously. But specifically the idea of blocking the rendering until the styles have loaded were a huge help in eliminating that early internet problem once connections were at convenient enough speeds. So all that history lesson to say, searching about Flash of Unstyled Content will get you deeper into the rabbit hole if you want.
downvote count: 1
accepted answer of: http://stackoverflow.com/q/79021080

http://stackoverflow.com/comment/139230475
type: QuestionComment
has text: `st.markdown(" ", unsafe_allow_html=True)` ?
score: 1
type: Comment
comment on: http://stackoverflow.com/q/78966048

http://stackoverflow.com/comment/139176414
score: 0
type: AnswerComment
has text: I am aware of the print modifier. But I didn't want to resort to that solution as I have classes with the screen size modifier all over the place
comment on: http://stackoverflow.com/a/78935948
type: Comment

http://stackoverflow.com/comment/139224909
type: QuestionComment
comment on: http://stackoverflow.com/q/78962936
type: Comment
score: 0
has text: Yes it Does! (Teeeeeechnically I was looking for vertical but I can tweek this im sure!- REGARDLESS:) THANK YOU THANK YOU!!! if you post this as an 'answer' i can 'approve it/choose it!" THANK YOU THANK YOU!

http://stackoverflow.com/comment/139358968
score: 0
has text: Could you create a runnable snippet which shows the problem as at the moment I can't reproduce it - when I add scrollable elements the sub menus are still below their buttons so I've misunderstood something.
type: QuestionComment
comment on: http://stackoverflow.com/q/79035574
type: Comment

http://stackoverflow.com/comment/139178259
has text: I have updated the code again... Check now.
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78937609

http://stackoverflow.com/a/78916942
answers question: http://stackoverflow.com/q/78916931
downvote count: 0
accepted answer of: http://stackoverflow.com/q/78916931
upvote count: 1
has comment: http://stackoverflow.com/comment/139139888
score: 1
has comment: http://stackoverflow.com/comment/139139782
has body: My assumption is that only small elements which are not descendants of a parent with the class theme get affected. If that’s what you want, do small:not(.theme *) { /* … */ } i.e. &lt;small&gt; elements that are not descendants of a .theme. :not(.theme *) small matches all small elements that are descendants of any element that matches :not(.theme *), which is all of them, since the root &lt;html&gt; element is necessarily :not(.theme *).
type: AcceptedAnswer
type: Answer

http://stackoverflow.com/comment/139219052
has text: One question. Is there any way I can just do the `button:hover` on only the labels with `btn-label` class? Some of my buttons have other labels which I want unaffected.
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78959685

http://stackoverflow.com/comment/139363320
type: Comment
score: 0
type: AnswerComment
has text: Thank you for the fast answer, this certainly helps! Now I figured out what was wrong in my actual case, non-simplified. I didn't assign that value to the actual `color` property, but kept it in a CSS variable. Then tried to read that variable directly, like this: `document.body.style.setProperty('--test-color', 'rgb(from #aaaaaa calc(r + 30) g calc(b - 30) / 80%)'); getComputedStyle(document.body).getPropertyValue('--test-color')`. This returns the raw value, the final color is not computed. Apparently, `getComputedStyle` doesn't work for CSS variables. Any suggestions for that?
comment on: http://stackoverflow.com/a/79034068

http://stackoverflow.com/comment/139128931
type: QuestionComment
has text: How do I check, you posted a link that requires access... @murattaşçı
comment on: http://stackoverflow.com/q/78909194
type: Comment
score: 0

onclick
tags question: http://stackoverflow.com/q/78998768
type: Tag
tag name: onclick
tags question: http://stackoverflow.com/q/79128563
tags question: http://stackoverflow.com/q/79326009
tags question: http://stackoverflow.com/q/79324634

http://stackoverflow.com/a/78970370
score: 1
downvote count: 0
type: Answer
has comment: http://stackoverflow.com/comment/139238810
upvote count: 1
has comment: http://stackoverflow.com/comment/139238920
has comment: http://stackoverflow.com/comment/139238908
has comment: http://stackoverflow.com/comment/139238489
answers question: http://stackoverflow.com/q/78970096
has body: This can be done using CSS. You have to inspect the elements within the page in order to target the right class/id. You do so by: Right click anywhere on a page -&gt; Select inspect/inspect element -&gt; Elements panel will open, showing the HTML and CSS of the page. Checking you specific portfolio page, you can see that the element with class body.no-sidebar .alignfull containing your portfolio items has a width set to 90vw. Portofolio page In your shop page check class .fb-container. This has a max-width set to max-width: 1170px;. This limits your shop page to being maximum 1170px in width. So in order to have full width, you would have to set the max-width to e.g. 100% for class .fb-container. Shop page In order to only target the shop page, you can target the specific &lt;body&gt; class woocommerce-shop. So your CSS code could look like this: .woocommerce-shop .fb-container { max-width: 100% !important; }

http://stackoverflow.com/comment/139322867
type: QuestionComment
has text: @NickParsons `{isMobile ? <HeaderSearch screenWidth="mobile" /> : null}` fixed the issue
score: 0
type: Comment
comment on: http://stackoverflow.com/q/79014407

http://stackoverflow.com/a/78984479
upvote count: 2
has comment: http://stackoverflow.com/comment/139265059
has comment: http://stackoverflow.com/comment/139265218
has body: To dynamically change the row color in a table based on the value of a particular column, you can follow the approach below. I have used the JSONPlaceholder REST API for testing purposes, but the idea remains the same for any API. fetch("https://jsonplaceholder.typicode.com/todos") .then((response) => { if (response.ok) { return response.json(); } else { throw new Error("API request failed"); } }) .then((data) => { if (data.length > 0) { let temp = ""; data.forEach((itemData) => { const rowClass = itemData.completed ? "completed-row" : "not-completed-row"; temp += ` `; temp += ` ${itemData.id} `; temp += ` ${itemData.title} `; temp += ` ${itemData.completed} `; }); document.getElementById("data").innerHTML = temp; } }) .catch((error) => console.log("Error fetching data:", error)); .completed-row { background-color: green; color: white; } .not-completed-row { background-color: red; color: white; } Id Title Completed
answers question: http://stackoverflow.com/q/78984431
type: AcceptedAnswer
score: 2
downvote count: 0
type: Answer
accepted answer of: http://stackoverflow.com/q/78984431

http://stackoverflow.com/comment/139203579
type: Comment
score: 0
type: AnswerComment
has text: I was referring to other hard coded values like `left: -3px`. 94% is percentage, I agree, it is not fixed.
comment on: http://stackoverflow.com/a/78951599

http://stackoverflow.com/comment/139359803
has text: Wow, I will need some time to understand this. But I think it is brilliant. I will now experiment with it. I'm not very deep in CSS but it seems in the last 20 years a lot of magic where added :-). Thank you so much for your time and effort.
type: Comment
comment on: http://stackoverflow.com/a/79035942
score: 0
type: AnswerComment

http://stackoverflow.com/comment/139399090
has text: wait would it still work if h1 was an image instead of, well, h1
type: Comment
score: 0
comment on: http://stackoverflow.com/a/79058076
type: AnswerComment

http://stackoverflow.com/comment/139135083
type: Comment
has text: @codeandcloud Unsure what you mean with dynamic width here? See the comment made by OP above as well - Mahesh just states it's not possible without giving an explanation why it wouldn't be possible.
type: AnswerComment
comment on: http://stackoverflow.com/a/78914370
score: 1

http://stackoverflow.com/a/79064078
upvote count: 2
score: 2
downvote count: 0
has body: There is no way that I know of to achieve your stated goal. Column widths in a CSS grid are totally controlled by grid-template-columns. Certain values for grid-template-columns will consider the content width of your grid items, such as auto, min-content and max-content, but none of these are suitable for your scenario. My recommendation is to get rid of your max-height and instead increase the minimum column width (the value 130px in your grid-template-columns declaration) in order to reduce your button heights. grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); If your buttons contain widely varying amounts of text, perhaps a different layout would be better. You could consider a masonry layout. Browser support for doing this in CSS is still a while away, but you can do it if you are prepared to fix your button heights, otherwise you can use a Javascript library. body { font-family: Arial, sans-serif; background-color: #f0f0f0; padding: 20px; margin: 0; } .masonry { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-auto-rows: 10px; gap: 20px; } .item { background-color: #ffffff; padding: 20px; box-sizing: border-box; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); border: 0; border-radius: 8px; transition: transform 0.3s; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 1.2em; color: #fff; } .item1 { grid-row: span 7; background-color: #ff6f61; } .item2 { grid-row: span 8; background-color: #6b5b95; } .item3 { grid-row: span 15; background-color: #88b04b; } .item4 { grid-row: span 8; background-color: #d65076; } .item5 { grid-row: span 7; background-color: #ffb347; } .item6 { grid-row: span 7; background-color: #45b8ac; } .item7 { grid-row: span 8; background-color: #e94b3c; } .item8 { grid-row: span 8; background-color: #6c5b7b; } .item9 { grid-row: span 7; background-color: #00a86b; } .item10 { grid-row: span 7; background-color: #b565a7; } Button 1 Lorem ipsum dolor sit amet. Bu…
type: Answer
answers question: http://stackoverflow.com/q/79061543

http://stackoverflow.com/a/78943363
has body: Move to circle to top and add border with same color and it will look how you aspect. Below is working example of same. body { margin: 0; padding: 0; } .mainDiv { color: white; width: 100%; height: 100vh; background-color: #1e1e1e; display: flex; align-items: center; justify-content: center; } .node { position: relative; display: flex; align-items: center; background-color: #4CAF50; /* Green background color */ color: white; font-weight: bold; border-radius: 15px; width: 200px; /* Adjust as needed */ height: 80px; /* Adjust as needed */ padding-left: 50px; /* Space for the image */ } .node-image { position: absolute; left: -25px; /* Half of the circle's diameter */ width: 50px; height: 50px; background-color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden; top: -14px; left: -10px; border: 5px solid #54b059; } .node-image i { width: 40px; height: 40px; } .node-text { margin-left: 10px; } Name
answers question: http://stackoverflow.com/q/78943230
score: 1
downvote count: 0
type: Answer
upvote count: 1

http://stackoverflow.com/comment/139166147
comment on: http://stackoverflow.com/q/78926909
has text: OK, I see you want an explanation of the timing/disappearing element problem rather than alternative methods. It's an interesting problem. For a start, try changing the animation-duration times - they do not have the effect I suspect you were expecting. In fact, the animation keyframes are probably not having the expected effect - how long would you expect an element to be at the final z-index: 1 value?
type: QuestionComment
score: 0
type: Comment

http://stackoverflow.com/comment/139394095
comment on: http://stackoverflow.com/q/79055459
type: Comment
score: 0
has text: Try making `padding-right` a negative value
type: QuestionComment

http://stackoverflow.com/comment/139410246
comment on: http://stackoverflow.com/q/79064146
type: Comment
has text: you "just" have to change some characters : `<` -> `%3C`, [space character] -> `%20` etc...
type: QuestionComment
score: 0

http://stackoverflow.com/q/79060298
tagged with: css
has answer: http://stackoverflow.com/a/79060360
has answer: http://stackoverflow.com/a/79060366
has body: I have a simple react app (Vite project) app.tsx import "./common-styles.css"; export default function App() { return ( content content ) } with only 1 css file common-styles.css @property --interactive-color { syntax: "<color>"; inherits: true; initial-value: green; } @property --interactive-text-color { syntax: "<color>"; inherits: true; initial-value: white; } @property --interactive-border-top-style { syntax: "<string>"; inherits: true; initial-value: dotted; } @property --interactive-border-top-width { syntax: "<length>"; inherits: true; initial-value: 5px; } @property --interactive-border-top-color { syntax: "<color>"; inherits: true; initial-value: red; } .interactive { background-color: var(--interactive-color); color: var(--interactive-text-color); border-top-style: var(--interactive-border-top-style); border-top-width: var(--interactive-border-top-width); border-top-color: var(--interactive-border-top-color); padding-top: var(--interactive-padding-top, 1vw); padding-bottom: var(--interactive-padding-bottom, 1vw); padding-right: var(--interactive-padding-right, 3vw); padding-left: var(--interactive-padding-left, 3vw); border-top-right-radius: var(--interactive-border-top-right-radius, 5px); border-top-left-radius: var(--interactive-border-top-left-radius, 5px); border-bottom-right-radius: var(--interactive-border-bottom-right-radius, 5px); border-bottom-left-radius: var(--interactive-border-bottom-left-radius, 5px); } (bottom, right and left props where removed to shorted the question, but they behave the same) As i didn't override any of the properties, i would expect that the component has the specified initial-value value for all of the properties. It does, except for the border style, which behaves as it has a not specified value. I know that border width and color are being set correctly by specifying the style manually border-top-style: solid; Color props are also being set correctly. It's just the style that doesn't work from the custom prop. I've tr…
has comment: http://stackoverflow.com/comment/139403114
type: Question
has title: Can't set border style from custom css property
type: AnsweredQuestion
possible better answer: http://stackoverflow.com/a/79060360
tagged with: vite
tagged with: css-variables
accepted answer: http://stackoverflow.com/a/79060366
tagged with: reactjs
tagged with: border
score: 0
answer count: 2

http://stackoverflow.com/comment/139166280
has text: Thank you I have checked this, all works great now I have to find a solution for scrolling over the cards on mobile XD But thanks for this
score: 1
comment on: http://stackoverflow.com/a/78931052
type: Comment
type: AnswerComment

http://stackoverflow.com/comment/139154067
type: Comment
has text: Still doesn't explain why adding `z-index` makes the white background appear whereas it does not appear without it, i.e. I want to get rid of the white background when using `z-index`.
comment on: http://stackoverflow.com/a/78924436
type: AnswerComment
score: 0

http://stackoverflow.com/comment/139394687
score: 1
comment on: http://stackoverflow.com/q/79055349
type: Comment
has text: Why not `slidesPerRow` per the [docs](https://kenwheeler.github.io/slick/)?
type: QuestionComment

http://stackoverflow.com/comment/139181492
comment on: http://stackoverflow.com/q/78939256
type: Comment
score: 0
has text: @DiegoD the second image 'What I am Getting' is all I see on the screen. No hamburger menu
type: QuestionComment

http://stackoverflow.com/comment/139189393
comment on: http://stackoverflow.com/q/78942849
type: QuestionComment
has text: How many flags are you thinking of (I'm thinking of the overhead if there are many and we don't leverage eg a gpu).
type: Comment
score: 0

http://stackoverflow.com/comment/139298677
type: QuestionComment
comment on: http://stackoverflow.com/q/79003079
has text: Hello @Noleli, thank you! It already has `tabIndex="-1"` as far as I see in the *Properties* tab.
type: Comment
score: 0

http://stackoverflow.com/comment/139336553
has text: Why don't you simply apply the style `opacity: 0.5` to the disabled audio element? In Chrome this works like a charm.
type: Comment
score: 1
comment on: http://stackoverflow.com/q/79023871
type: QuestionComment

http://stackoverflow.com/comment/139215926
type: QuestionComment
has text: "but nothing happends." The volume weight is calculated when I run the current code. Are there any errors in your dev console? What steps have you taken to debug it?
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78957954

http://stackoverflow.com/comment/139137884
type: QuestionComment
has text: Can you also please post html and css code?
comment on: http://stackoverflow.com/q/78915823
score: 2
type: Comment

http://stackoverflow.com/comment/139288112
type: QuestionComment
has text: I don't seem to understand what is the wanted design
type: Comment
comment on: http://stackoverflow.com/q/78997151
score: 0

macos
tag name: macos
tags question: http://stackoverflow.com/q/78993739
type: Tag
tags question: http://stackoverflow.com/q/79192695
tags question: http://stackoverflow.com/q/79140892
tags question: http://stackoverflow.com/q/79369590

http://stackoverflow.com/comment/139383956
comment on: http://stackoverflow.com/q/79049716
type: Comment
has text: The problem is that you are not defining a height for p1 (max-height does not count) therefore 100% height for the video will not mean anything. There are a couple of ways around this, e.g. setting p1 to `display:flex` but I think it would be easier just to set your max-height and max-width on the video element instead - does this do what you want?
score: 0
type: QuestionComment

http://stackoverflow.com/comment/139393206
type: Comment
score: 0
comment on: http://stackoverflow.com/q/79054875
type: QuestionComment
has text: https://jsfiddle.net/2po68tzv/1/

http://stackoverflow.com/comment/139281581
type: QuestionComment
has text: @HadoMonkey Will you be able to configure all of these computers accessing your page to allow local files, and will all of them have the font in the exact same directory? If so, this might work with the correct URL (see my comment above) – otherwise, I'd like to understand why the font can't be hosted where the page is.
type: Comment
comment on: http://stackoverflow.com/q/78993739
score: 0

http://stackoverflow.com/comment/139167393
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78931835
has text: If you are not familiar with promises please read this https://javascript.info/promise-basics

http://stackoverflow.com/q/79066460
tagged with: material-ui
has comment: http://stackoverflow.com/comment/139423100
tagged with: css
has comment: http://stackoverflow.com/comment/139416168
has body: I am trying to style material tabs and I am able to do it by creating a theme and overriding the defaults like this MuiTab: { styleOverrides: { root: { textTransform: 'capitalize', // Set textTransform to capitalize, fontWeight: 600, '&amp; .MuiAvatar-root': { width: 72, height: 'auto', marginBottom: 6, }, '&amp;.Mui-selected': { borderTop: `2px solid ${COLORS.PrimaryMedDark}`, borderLeft: `1px solid ${COLORS.BorderGray}`, borderRight: `1px solid ${COLORS.BorderGray}`, borderBottom: 'none', color: COLORS.PrimaryMedDark, '.MuiAvatar-img': { //border: ' 2px solid #FFC44D !important', }, }, '&amp; .MuiIconButton-root': { padding: 0, backgroundColor: COLORS.White, }, }, }, }, You can see I am able to add the left, right and top borders to the selected tab. Everything is working except for the bottom border, I am not able to remove it by any way. I found this solution to give tabs your custom design https://mui.com/base-ui/react-tabs/ But this is too much to do, because for my case I am able to achieve everything I want in the styles except for the bottom border. So is creating custom style component as mentioned in the link above the only way to achieve it or is there any way to make it work with the existing tabs? Update Tried to set the border bottom on '&amp;.Mui-selected' to this borderBottom: '5px solid red',, and see the result So basically this blue line is not the border on selected Tab element because the red border that I set on selected tab appears even above that default blue line. So this default blue border is somewhere else, may be at the parent and that is why it is not going away by the change in the style of the selected tab. Actually it appears with an animation when the tab is selected.
type: UnansweredQuestion
type: Question
answer count: 1
has answer: http://stackoverflow.com/a/79068819
tagged with: reactjs
score: 0
has comment: http://stackoverflow.com/comment/139418338
has title: Style material react tab to remove the bottom border

http://stackoverflow.com/comment/139353265
type: Comment
score: 0
comment on: http://stackoverflow.com/q/79030490
type: QuestionComment
has text: There is a rather hacky way of doing this, involving perspective and needing to add some styling to the p element not just the td element. Is that acceptable?

http://stackoverflow.com/a/79067305
has comment: http://stackoverflow.com/comment/139419370
has body: You have a zero size element &lt;div class=wpc-instead-of-posts-found&gt;&lt;/div&gt; which, even though it has zero size is still affecting the layout. I'd suggest hiding it, initially, with display:none until a more robust solution can be found. This also means you can remove the right 2% margin and additionally .wpc-filters-section:nth-child(3n) { margin-right: 0 !important; } /* Background color for the entire widget */ .wpc-filters-widget-wrapper { background-color: #6C7159; /* Light background color for the widget */ padding: 20px; /* Padding to make the widget more spacious */ border-radius: 8px; /* Slightly rounded corners */ margin-bottom: 20px; /* Space below the widget */ display: flex; /* Flex container for filters */ flex-wrap: wrap; /* Distribute elements across multiple rows */ justify-content: space-between; align-items: start; /* Align elements at the top */ } /* fix */ .wpc-instead-of-posts-found { display: none; } /* Styling for individual filter sections */ .wpc-filters-section { width: 30%; margin-bottom: 20px !important; /* Space below each filter section */ /* margin-right: 2%; */ /* Space between columns */ padding: 15px; /* Padding within each filter section */ border: 1px solid #ccc; /* Thin border around each filter */ border-radius: 5px; /* Slightly rounded corners */ box-sizing: border-box; /* Include padding and border in width calculation */ background-color: #ECEBE3; position: relative; /* To position the dropdown arrow absolutely */ } /* Last filter in the row has no right margin */ .wpc-filters-section:nth-child(3n) { /* margin-right: 0 !important; */ } /* Styling for the title in the filter */ .wpc-filters-section .widget-title-wrapper { display: flex; align-items: center; /* Vertically center the text */ width: 100%; /* Ensure the entire space is used */ padding-right: 25px; /* Reserve space for the arrow */ } /* Correct positioning of the dropdown arrow on the right */ .wpc-filters-section select { appearance: none; /* Remove pla…
type: Answer
has comment: http://stackoverflow.com/comment/139438883
score: 0
answers question: http://stackoverflow.com/q/79066820

http://stackoverflow.com/comment/139153556
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78923491
has text: Thanks for replying. The problem when I tried to do this, it didn't work. It lost all its layout. You know my goal is to convert every PDF To Html with pdftohtml then translate that HTML then convert it back to PDF. So, even if that worked... I don't think it would work on other pdf to html because each pdf is different. Can you check the link on my GitHub where you'll see the original HTML and the translated version? You'll get a more complete view so you can help me more easily please.

http://stackoverflow.com/a/78962156
has body: animate-timeline: view() This is an experimental feature. References > CSS > animation-timeline > view() Experimental: This is an experimental technology Check the Browser compatibility table carefully before using this in production. As the effect is applied according to the view area, enough scroll space is required to ensure that the animation works well. body { height: 200vh; } .container { margin-top: 100vh; } div.wrapper { width: 50%; height: 100%; background-color: red; animation: fadeIn linear; animation-timeline: view(); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } Scroll this page Sans prise de tête... Plus d'infos
answers question: http://stackoverflow.com/q/78957679
type: Answer
score: 0

http://stackoverflow.com/comment/139358612
has text: That is, to make the blocks on the left and right behave as if they were divided into 2 columns. Each block can take its own height...
type: Comment
comment on: http://stackoverflow.com/a/79035266
score: 0
type: AnswerComment

http://stackoverflow.com/a/79039970
score: 0
type: Answer
answers question: http://stackoverflow.com/q/78995721
has body: Something like this (but you either need a higher-resolution image, or use SVG so the quality does not drop when zoomed) .img-wrapper { width: 400px; height: 400px; border-radius: 50%; overflow: hidden; object-position: 0px 0px; } .Nova { position: relative; zoom: 2; right: 100%; } &lt;div class="img-wrapper"&gt; &lt;img src="https://i.sstatic.net/xFBKyZNi.png" class="Nova" /&gt; &lt;/div&gt;

http://stackoverflow.com/comment/139315898
comment on: http://stackoverflow.com/q/79012618
type: Comment
score: 0
has text: @mrconcerned updated it
type: QuestionComment

http://stackoverflow.com/comment/139395987
type: Comment
score: 0
has text: I would like to add a class to a specific image but i can't figure out how? Please tell me i you know.
comment on: http://stackoverflow.com/q/79054258
type: QuestionComment

http://stackoverflow.com/comment/139297282
type: QuestionComment
comment on: http://stackoverflow.com/q/79002045
type: Comment
score: 0
has text: Thats true. That's why I removed all my JS code since Elementor Menu widget handles all the functionality. I just wanted to manipulate the syling with CSS only. I am going through Elementor megamenu css file to see if I can override any of its transition settings.

http://stackoverflow.com/comment/139404730
comment on: http://stackoverflow.com/q/79060035
type: Comment
score: 0
has text: @FedericodiGeronimo yes, you'll have to do the calculation yourself and draw the relevant part of the image.
type: QuestionComment

http://stackoverflow.com/comment/139374492
type: Comment
has text: Perhaps you could also add a visual layout that shows what you are after.
type: QuestionComment
score: 2
comment on: http://stackoverflow.com/q/79044394

ag-grid
tags question: http://stackoverflow.com/q/78980116
tag name: ag-grid
tags question: http://stackoverflow.com/q/79016625
type: Tag
tags question: http://stackoverflow.com/q/79145579
tags question: http://stackoverflow.com/q/79201204
tags question: http://stackoverflow.com/q/79095726
tags question: http://stackoverflow.com/q/79341627
tags question: http://stackoverflow.com/q/79321070
tags question: http://stackoverflow.com/q/79270679
tags question: http://stackoverflow.com/q/79448378
tags question: http://stackoverflow.com/q/79526417
tags question: http://stackoverflow.com/q/79470556
tags question: http://stackoverflow.com/q/79504394
tags question: http://stackoverflow.com/q/79539671

http://stackoverflow.com/comment/139217147
type: QuestionComment
score: 1
type: Comment
comment on: http://stackoverflow.com/q/78958406
has text: Welcome to Stack Overflow! Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/) using the `<>` icon. See [**How to create a Minimal, Reproducible Example**](http://stackoverflow.com/help/reprex)

http://stackoverflow.com/comment/139366907
comment on: http://stackoverflow.com/q/79039982
has text: Please describe what transition effect you want and what you have tried to achieve it. For example, does the sublist gradually expand/shrink in height as it's selected/deselected or does the deselected list fade out as the selected one fades in?
type: Comment
score: 1
type: QuestionComment

http://stackoverflow.com/comment/139336208
score: 1
has text: @oyerohabib: different sources need to be seperated by commas. You missed these so the font urls can't be retrieved. BTW better remove the local() value and start with the woff2 `src: url("./assets/fonts/RecoletaAlt.woff2") format("woff2"), url("./assets/fonts/RecoletaAlt.woff") format("woff");`
type: Comment
comment on: http://stackoverflow.com/q/79023236
type: QuestionComment

http://stackoverflow.com/comment/139485060
has text: In your solution, the text is shifting upon hover, which is what I am trying to avoid.
comment on: http://stackoverflow.com/a/79036586
type: Comment
score: 0
type: AnswerComment

http://stackoverflow.com/comment/139201319
score: 1
comment on: http://stackoverflow.com/q/78950411
has text: This thread should answer your question https://stackoverflow.com/questions/53751393/scroll-element-into-view-within-container-but-not-in-browser-window
type: Comment
type: QuestionComment

http://stackoverflow.com/comment/139555837
has text: Your solution is ok, but is more simple and direct the solution in my answer where it's enough to use em in the breackpoint without container queries.
score: 0
comment on: http://stackoverflow.com/a/79129230
type: Comment
type: AnswerComment

http://stackoverflow.com/comment/139229488
comment on: http://stackoverflow.com/q/78965523
type: QuestionComment
score: 1
has text: can you create a small `index.html` that does the same behavior and that you can include in your posted question? As a first start, remove most of the body of the page while keeping all of the header. Also is there any javascript that is running at the time the page is loaded? Also do you have a copy of the old index.html file located somewhere on your server?
type: Comment

image-slider
tag name: image-slider
type: Tag
tags question: http://stackoverflow.com/q/78952690

http://stackoverflow.com/comment/139339883
type: QuestionComment
has text: I tried but it does not work at all. It seems that this auto Google ads are forcing themselves even on my code.
comment on: http://stackoverflow.com/q/79023748
type: Comment
score: 0

http://stackoverflow.com/comment/139158407
type: QuestionComment
has text: I changed your CSS (`<div style="height:1000px;`) slightly to show the effect and limited the height of the snippet console
comment on: http://stackoverflow.com/q/78926774
type: Comment
score: 0

http://stackoverflow.com/comment/139247676
comment on: http://stackoverflow.com/a/78967078
type: Comment
type: AnswerComment
has text: See my updated snippet.
score: 1

http://stackoverflow.com/comment/139195609
has text: Then it is the wrong behaviour. Thanks, I reported this bug.
comment on: http://stackoverflow.com/a/78945424
type: Comment
score: 0
type: AnswerComment

http://stackoverflow.com/comment/139373764
type: Comment
score: 0
type: QuestionComment
has text: i dont know much about stackover flow I am sorry brother
comment on: http://stackoverflow.com/q/79033378

http://stackoverflow.com/comment/139250551
comment on: http://stackoverflow.com/q/78974610
type: Comment
score: 0
type: QuestionComment
has text: Not sure what exactly you need to achieve, but maybe https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outside would be worth looking into.

http://stackoverflow.com/comment/139177245
score: 2
type: Comment
comment on: http://stackoverflow.com/q/78937046
type: QuestionComment
has text: If you show your HTML, perhaps it would be immediately clear that you're using an `img` tag perhaps (image loaded dynamically)? Anyways, create a [mcve].

http://stackoverflow.com/comment/139243545
has text: _"However whenever the screen change it size, the overlaying image doesn't move with it. It keeps its position on the screen no matter what I try or changes. I would like for it to have the same position on the background image._ Please can you explain this a bit more clearly? Thanks.
type: Comment
comment on: http://stackoverflow.com/q/78973058
score: 0
type: QuestionComment

http://stackoverflow.com/comment/139239458
comment on: http://stackoverflow.com/q/78970924
type: Comment
score: 0
has text: Bootstrap 4 or 5?
type: QuestionComment

http://stackoverflow.com/q/78937836
has body: TL;DR text-primary-500/50 not working as expected. Declare Dynamic Color I have a color named primary. This color doesn't have any specific settings; instead, I assign existing colors based on a template. If the parent element has the class theme-red, the primary color should essentially match the red color. If the parent element has the class theme-blue, the primary color should match the blue color. By default, the primary color is red. I have implemented this in the following example. Example tailwind.config = { theme: { extend: { colors: { primary: { 500: 'var(--color-primary-500)', }, }, }, }, } Default Green Color Default Green Color With Opacity Example Red Theme Example Red Theme With Opacity Example Blue Theme Example Blue Theme With Opacity Result Opacity Dynamic Colors Not Working The issue arises with transparent colors, such as text-primary-500/50. That is, it should be text-primary-500 with 0.5 opacity. It doesn't work because text-primary-500 is essentially a hex color, but in CSS, we expected an RGB color code, which we could then blend with opacity on a 0-1 scale. How can I make it work so that text-primary-500/50 functions similarly to my written logic? Expected Behavior I expected primary color to work the same way as the base colors, as shown with the green color in the previous result. Here’s an example of what I would like.
has title: Opacity Issues with Dynamic Colors in TailwindCSS
type: Question
answer count: 1
tagged with: tailwind-css
type: AnsweredQuestion
score: 0
has answer: http://stackoverflow.com/a/78938004
accepted answer: http://stackoverflow.com/a/78938004
tagged with: css

http://stackoverflow.com/a/78918444
answers question: http://stackoverflow.com/q/78918363
type: Answer
has body: One of the easiest way (as you prefer) might be React's dangerouslySetInnerHTML. You can import your external html content as plain text, then set it into the div. Here's the sample. function createMarkup() { // Read your html content here. return {__html: 'First &amp;middot; Second'}; } function MyComponent() { return &lt;div dangerouslySetInnerHTML={createMarkup()} /&gt;; } https://react.dev/reference/react-dom/components/common#dangerously-setting-the-inner-html As the name suggested, it is dangerous to do. So use it with precaution. This should be used with extreme caution! If the HTML inside isn’t trusted (for example, if it’s based on user data), you risk introducing an XSS vulnerability.
score: 0

http://stackoverflow.com/comment/139148979
comment on: http://stackoverflow.com/q/78921015
has text: How is the button generated? It would be simpler if you could use whatever tool you also use to generate the output, and implement some logic that adds a class to the ` ` or button, and use that class for your desired styling.
type: Comment
score: 0
type: QuestionComment

http://stackoverflow.com/q/79032861
tagged with: reactjs
score: 0
tagged with: javascript
has body: I am trying to have custom labels for my x axis ticks. It seems to work fine on web browsers, but I can't get it to position correctly on mobile when I rotate the icon. This is my label code: const CustomXAxisTick = ({ x, y, payload, data }: any) => { const degrees = 90 // this is dynamic later return ( <g transform={`translate(${x},${y})`}> <FaArrowUp className="w-3 h-3" style={{ transform: `rotate(${degrees}deg)` }} /> </g> ) } On web: However on mobile (see that the icon moved to the top left) Any suggestions on how to fix that or why this is happening?
tagged with: css
has answer: http://stackoverflow.com/a/79041269
type: UnansweredQuestion
tagged with: recharts
type: Question
has title: Recharts - Custom X axis tick - wrong transform on mobile screen
tagged with: ios
answer count: 1

qtstylesheets
tags question: http://stackoverflow.com/q/78957189
type: Tag
tag name: qtstylesheets

http://stackoverflow.com/comment/139353041
comment on: http://stackoverflow.com/q/79032804
type: Comment
score: 0
type: QuestionComment
has text: there is no string interpolation in css. I believe you should use base href to prepend something to all of your assets/source code, not a library

http://stackoverflow.com/comment/139131425
type: Comment
score: 0
type: AnswerComment
has text: this is what i am getting when i visit http://127.0.0.1:8000/scripts/scripts.js:- [image of js page](https://pasteboard.co/wGhhqwKHMh1H.png) let me revise things up again... this is what i have added in my [html](https://pasteboard.co/GgU1oIMqmAAH.png) this is [site.css structure](https://pasteboard.co/vckbeb2Gk3PN.png) i have added mime types [screenshot](https://pasteboard.co/ABjcQmHTJrsr.png) in the [settings.py](https://pastebin.com/nhVkiZqi) you can also check the static_url in it! @akbar-khan
comment on: http://stackoverflow.com/a/78911196

http://stackoverflow.com/comment/139310420
type: Comment
score: 0
has text: I’ve tried opening the jpg file with other tools on the ipad and I’ve converted it to a .png file, no joy, it displays fine elsewhere. I haven’t yet tried gimp. I can download it on my wife’s M2 Mac perhaps?
type: QuestionComment
comment on: http://stackoverflow.com/q/79009569

http://stackoverflow.com/comment/139334076
type: AnswerComment
has text: Ah so basically making the grid template yourself, which works very well. Seems like expanding to say 4 columns just means changing the 8n to 16n and incrementing all the way to 15, adding more columns by specifying them. Thanks!
type: Comment
score: 0
comment on: http://stackoverflow.com/a/79020616

http://stackoverflow.com/a/78962840
type: Answer
answers question: http://stackoverflow.com/q/78962822
score: 0
has body: Make sure to adjust the CSS to make sure the dropdown starts below the anchor tag just like it does for the button. .dropdown-toggle { display: inline-block; /* Ensure it's block-level for consistent positioning */ position: relative; /* Enable positioning relative to the element */ } .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; } .dropdown-toggle:hover .dropdown-menu { display: block; } Dropdown Option 1 Option 2 Option 3

scheduler
type: Tag
tag name: scheduler
tags question: http://stackoverflow.com/q/79007505

http://stackoverflow.com/comment/139305958
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78990560
has text: No, that's not better. That is an improper use of HTML elements that doesn't align with their semantic meaning. It will create a poorer experience for all users.

http://stackoverflow.com/a/79006618
has comment: http://stackoverflow.com/comment/139322659
type: AcceptedAnswer
type: Answer
upvote count: 1
score: 0
answers question: http://stackoverflow.com/q/79004964
accepted answer of: http://stackoverflow.com/q/79004964
has body: This should work. .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 16.66667%; overflow-y: auto; padding-top: 1rem; } /* Make sure the main content starts after the sidebar */ main { margin-left: 16.66667%; /* Same width as the sidebar */ }
downvote count: 1

http://stackoverflow.com/comment/139221473
comment on: http://stackoverflow.com/q/78961311
type: Comment
score: 0
has text: What's in your `.row` styles? Try and make a runnable snippet with the issue you're having
type: QuestionComment

http://stackoverflow.com/a/79256993
answers question: http://stackoverflow.com/q/78991638
has body: You need to verify that the contents of the main frame are a directory listing, then inject the style. Two frameworks that allow you to do that are user scripts (using a script manager) or web extensions. ( function () { 'use strict'; var style = document.createElement( 'style' ), text = 'body { border: 1px solid black; }'; // change to whatever you really want // if the main frame has a file: URI and loads dirListing.css // it's pretty safe to assume it's a directory listing if ( location.protocol === 'file:' && document.querySelector( 'link[ href = "chrome://global/skin/dirListing/dirListing.css" ]' ) ) { style.textContent = text; document.head.appendChild( style ); } } () ); You can test the code by running it in the devtools console. If you use a script manager (which is itself a web extension), you can maintain the CSS text in the script manager itself. If you make a web extension, you would make this script the content script and (ideally) maintain the CSS in an options page (on about:addons) that keeps the CSS in extension storage. The most popular script managers are Tampermonkey and Greasemonkey. There are probably others. (Disclaimer: I don't use any of them. This answer is not an endorsement.) For a web extension, the manifest would look something like: { "manifest_version": 2, "name": "Answer", "description": "Answer a Stack Overflow question", "version": "0.1", "content_security_policy": "default-src 'none'; object-src 'none'", "browser_specific_settings": { "gecko": { "id": "answer@nanigashi.stackoverflow" } }, "content_scripts": [ { "js": [ "content.js" ], "matches": [ "file:///*" ] } ], "options_ui": { "browser_style": true, "page": "options.htm" }, "permissions": [ "storage" ] } where content.js is the script. options.htm is the panel for about:addons (outside the scope of this question) to maintain the CSS. The storage permission gives access to the browser.storage API to store and retrieve the CSS.
type: Answer
score: 0

http://stackoverflow.com/comment/139242830
type: QuestionComment
has text: `"The code runs perfectly fine"` - So does the rendered markup show a value for `background-color`?
comment on: http://stackoverflow.com/q/78972066
type: Comment
score: 0

http://stackoverflow.com/comment/139372374
has text: Thank you for pointing out the actual problem. And the solution you suggested works correctly, but there is just one issue with it. The counter variable should be set to 1 instead of 0. Since if the counter is set to 0, by default the 1st image + 1st dot loads up. And after 5 seconds, again the 1st image + 1st dot loads up. So it takes 10 seconds instead of 5 seconds to move to the second image.
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/79040390

http://stackoverflow.com/comment/139278694
comment on: http://stackoverflow.com/a/78974091
type: Comment
score: 0
type: AnswerComment
has text: Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer).

http://stackoverflow.com/comment/139216011
type: QuestionComment
has text: @mykaf when you go to my form and go the question "top 3 packaging in use" the table is there. I can fill everything in but there are no results at the final column volume weight. Here is the link of my form: https://strategic-selling.logistieke-baan.nl/?fluent-form=3. When I look in the dev console I only get an error regarding the image attached in the question.
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78957954

html-lists
tags question: http://stackoverflow.com/q/78983946
tag name: html-lists
type: Tag
tags question: http://stackoverflow.com/q/79421812
tags question: http://stackoverflow.com/q/79483353

progressive-web-apps
tags question: http://stackoverflow.com/q/79062531
type: Tag
tag name: progressive-web-apps
tags question: http://stackoverflow.com/q/79241636
tags question: http://stackoverflow.com/q/79126199
tags question: http://stackoverflow.com/q/79528980

forms
tags question: http://stackoverflow.com/q/78973195
tag name: forms
tags question: http://stackoverflow.com/q/79057460
tags question: http://stackoverflow.com/q/78936282
tags question: http://stackoverflow.com/q/79066201
tags question: http://stackoverflow.com/q/79027496
tags question: http://stackoverflow.com/q/78918565
type: Tag
tags question: http://stackoverflow.com/q/79082519
tags question: http://stackoverflow.com/q/79115830
tags question: http://stackoverflow.com/q/79247632
tags question: http://stackoverflow.com/q/79313983
tags question: http://stackoverflow.com/q/79323441
tags question: http://stackoverflow.com/q/79506964
tags question: http://stackoverflow.com/q/79527052

http://stackoverflow.com/comment/139166143
type: AnswerComment
score: 1
comment on: http://stackoverflow.com/a/78931052
type: Comment
has text: I thought this was the behavior you were after. I will edit it right now.

http://stackoverflow.com/comment/139246044
comment on: http://stackoverflow.com/q/78974455
type: QuestionComment
has text: I'm not sure if I understand the question, are you trying to use this code in your README.md file? In that case, it won't work, as README.md is a [markdown](https://en.wikipedia.org/wiki/Markdown) file, which works differently than HTML.
type: Comment
score: 3

http://stackoverflow.com/comment/139400385
type: Comment
has text: Oops, I guess it didn't work after all - if I use the last snippet of code it works correctly, except it doesn't restrict itself to the .items class. If I use the code as you posted, it doesn't work at all. :/
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/79058981

http://stackoverflow.com/comment/139274873
has text: @MatanSanbira I think that would be getting the logic backwards? I want the tables (with their scrolling bodies) to automatically completely fill their containers and have no explicit knowledge of their geometries. Nor do I want the containers to have to deep dive into the components' DOM trees (to e.g. explicitly set the height of the tbody elements) because that would be poor component isolation. I _think_ this should be possible using relative `vb` units but I can't make it work.
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78989661
type: QuestionComment

http://stackoverflow.com/comment/139142197
has text: like this : ``` import doc from '../../../../../public/Agreement.html'; ```
type: Comment
comment on: http://stackoverflow.com/q/78918363
score: 0
type: QuestionComment

http://stackoverflow.com/comment/139316186
has text: https://forum.squarespace.com/topic/151960-how-to-apply-custom-css-classes/ "Add your own custom class with styles in Design -> Custom CSS and then add a Code Block containing the HTML with your custom class assigned." If that aint work i can try tommorow make js to handle those styles (but this aint gona be very effective cause we gona have to find elements by text they have)
type: AnswerComment
comment on: http://stackoverflow.com/a/79012651
type: Comment
score: 0

http://stackoverflow.com/comment/139358610
comment on: http://stackoverflow.com/a/79035337
has text: That is, to make the blocks on the left and right behave as if they were divided into 2 columns. Each block can take its own height...
type: Comment
score: 0
type: AnswerComment

http://stackoverflow.com/comment/139245880
score: 0
has text: Thanks for the code. Unfortunately it still leaves some space to the right side when a line-break happens (shrinking the browser windows)
comment on: http://stackoverflow.com/a/78972198
type: Comment
type: AnswerComment

http://stackoverflow.com/comment/139229571
comment on: http://stackoverflow.com/a/78941800
score: 2
type: Comment
type: AnswerComment
has text: @ZoltanKing Please avoid changing questions in a way that invalidates answers

http://stackoverflow.com/comment/139364453
score: 0
type: AnswerComment
has text: @zer00ne for your second statement *Also, you need to declare `timerInterval` outside the functions (globally) so that `clearInterval(timerInterval)` can access `timerInterval`* - you're incorrect here. You don't need a global variable as it works here without. We're are block scoped (or function scoped) so `clearInterval` actually knows the constant because of this scope. The error was caused by a typo `Intervall` instead of `Interval`.
type: Comment
comment on: http://stackoverflow.com/a/79038098

media-queries
tags question: http://stackoverflow.com/q/79039846
tags question: http://stackoverflow.com/q/78933097
tags question: http://stackoverflow.com/q/78909507
tags question: http://stackoverflow.com/q/78956764
tags question: http://stackoverflow.com/q/79056960
type: Tag
tags question: http://stackoverflow.com/q/78912066
tags question: http://stackoverflow.com/q/78941616
tag name: media-queries
tags question: http://stackoverflow.com/q/79080987
tags question: http://stackoverflow.com/q/79241885
tags question: http://stackoverflow.com/q/79097441
tags question: http://stackoverflow.com/q/79160588
tags question: http://stackoverflow.com/q/79100095
tags question: http://stackoverflow.com/q/79074626
tags question: http://stackoverflow.com/q/79091841
tags question: http://stackoverflow.com/q/79251030
tags question: http://stackoverflow.com/q/79292682
tags question: http://stackoverflow.com/q/79367372
tags question: http://stackoverflow.com/q/79316261
tags question: http://stackoverflow.com/q/79402337
tags question: http://stackoverflow.com/q/79350255
tags question: http://stackoverflow.com/q/79279759
tags question: http://stackoverflow.com/q/79304002
tags question: http://stackoverflow.com/q/79486931
tags question: http://stackoverflow.com/q/79436935
tags question: http://stackoverflow.com/q/79502109
tags question: http://stackoverflow.com/q/79493761
tags question: http://stackoverflow.com/q/79443749
tags question: http://stackoverflow.com/q/79537183
tags question: http://stackoverflow.com/q/79421579

http://stackoverflow.com/q/78930649
tagged with: http://stackoverflow.com/tag/svg
has body: How can I remove the red part of the svg kinda like how when you remove the background of an image for example the file turns into a png and the part you removed shows the checkered pattern. After removing the red part, the orange color from the section should be showing. * { padding: 0; margin: 0; } body { background: orange; } <rect fill="#FFF" width="100%" height="100%"/>
answer count: 3
has comment: http://stackoverflow.com/comment/139172179
has answer: http://stackoverflow.com/a/78933450
tagged with: css
has comment: http://stackoverflow.com/comment/139165765
has answer: http://stackoverflow.com/a/78930658
upvote count: 2
downvote count: 1
type: UnansweredQuestion
score: 1
linked to: http://stackoverflow.com/q/48055893
has answer: http://stackoverflow.com/a/78930911
favorite count: 0
has title: How can I remove the red part of the svg so that whatever behind it is showing?
tagged with: http://stackoverflow.com/tag/html
type: Question

http://stackoverflow.com/a/79041269
answers question: http://stackoverflow.com/q/79032861
type: Answer
score: 0
has body: It looks like x and y are not coming through and your label is being rendered in the top left because of your x={-6} y={14} on the foreignObject. Guard against not having x or y values sent and that should get rid of having phantom labels. On to why your labels aren't rendering in the right place. Recharts tries to only show the labels that fit in the space provided. When there is less left in the SVG it will hide them. If they are rendering outside of the SVG you won't be able to see them anyways, so that is pre-calculated and hidden. There is also a chance that your set width is too large/static and that is causing the overlap to happen. You'll have to scale down your custom label until it fits. First things I would do would be trying to set interval={0} on your XAxis and increasing margin on the bottom.

http://stackoverflow.com/comment/139268076
score: 1
comment on: http://stackoverflow.com/a/78986440
type: Comment
has text: @FayeD. That sounds like it should be a different question. It is related to this one, but it looks like some other code is the issue. It would be good to keep the problems separated so they are easier to identify.
type: AnswerComment

http://stackoverflow.com/comment/139351148
score: 1
comment on: http://stackoverflow.com/q/79031961
type: Comment
has text: What have you done to try and add this functionality?
type: QuestionComment

http://stackoverflow.com/comment/139131957
type: Comment
score: 0
type: QuestionComment
has text: you declare css `p.transform`. where is p tag which has class `transform`?
comment on: http://stackoverflow.com/q/78912512

http://stackoverflow.com/q/78992530
tagged with: next.js
tagged with: css
answer count: 0
downvote count: 0
has title: iFrame only showing half of the content
has body: Attempting to plug a bandcamp iframe into a nextjs boilerplate. Base.tsx import { Meta } from '../layout/Meta'; import { AppConfig } from '../utils/AppConfig'; import { Banner } from './Banner'; import { Footer } from './Footer'; import { Hero } from './Hero'; import { Sponsors } from './Sponsors'; import { VerticalFeatures } from './VerticalFeatures'; const Base = () => ( <Hero /> <Sponsors /> <VerticalFeatures /> <Banner /> ); export { Base }; Hero.tsx Hero.tsx import Link from 'next/link'; import { Background } from '../background/Background'; import { Button } from '../button/Button'; import { HeroOneButton } from '../hero/HeroOneButton'; import { Section } from '../layout/Section'; import { NavbarTwoColumns } from '../navigation/NavbarTwoColumns'; import { Logo } from './Logo'; import InstagramLogo from '../components/InstagramLogo.tsx'; import Player from '../components/Player.tsx' import Iframe from 'react-iframe' const Hero = () => ( <NavbarTwoColumns logo={<Logo xl />}> Listen Join Bandcamp <InstagramLogo /> </NavbarTwoColumns> <HeroOneButton title={ <> {/*enter leading text{''}*/} Welcome to where the eye meets the heart </> } /> Smoke by Olhar <Section > ); export { Hero }; I tried to embed an Iframe into a Hero.tsx file within a . The Media showed and the audio played, but only half of it was visible. This is on Next.JS with Typescript. I'm using the boilerplate https://github.com/ixartz/Next-js-Boilerplate enter image description here
type: UnansweredQuestion
upvote count: 1
score: 1
favorite count: 0
tagged with: iframe
type: Question
tagged with: http://stackoverflow.com/tag/html

http://stackoverflow.com/comment/139327708
type: QuestionComment
comment on: http://stackoverflow.com/q/79012374
type: Comment
score: 0
has text: @RokoC.Buljan Here, I created the reproducible example, also the article you linked does somewhat match my issue, tho I couldn't find a fix or really what to do there, Any insights?

css-variables
tag name: css-variables
type: Tag
tags question: http://stackoverflow.com/q/79028325
tags question: http://stackoverflow.com/q/79060298
tags question: http://stackoverflow.com/q/78952466
tags question: http://stackoverflow.com/q/79046636
tags question: http://stackoverflow.com/q/79213073
tags question: http://stackoverflow.com/q/79168968
tags question: http://stackoverflow.com/q/79411331
tags question: http://stackoverflow.com/q/79397296
tags question: http://stackoverflow.com/q/79343634
tags question: http://stackoverflow.com/q/79466431
tags question: http://stackoverflow.com/q/79458448
tags question: http://stackoverflow.com/q/79523158

http://stackoverflow.com/comment/139315076
type: Comment
comment on: http://stackoverflow.com/a/79008359
has text: this is clever. I hadn't thought of testing position according to the mark and then using the letter-by-letter technique. The effect is great - will test tomorrow to see if I can get this working for me.
type: AnswerComment
score: 1

viewport
tags question: http://stackoverflow.com/q/78999725
tags question: http://stackoverflow.com/q/79002065
type: Tag
tag name: viewport
tags question: http://stackoverflow.com/q/79165947
tags question: http://stackoverflow.com/q/79297347
tags question: http://stackoverflow.com/q/79384037
tags question: http://stackoverflow.com/q/79456302
tags question: http://stackoverflow.com/q/79476247

http://stackoverflow.com/comment/139195748
type: AnswerComment
comment on: http://stackoverflow.com/a/78946752
has text: @Meet You have continued with the same HTML errors the OP has.
type: Comment
score: 0

http://stackoverflow.com/comment/139163657
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78929318
has text: This isn’t an issue with `aspect-ratio`, but with the first grid column not having any intrinsic width thanks to the absolutely positioned image being pulled out of regular flow. How do you want the image to be sized?
type: QuestionComment

http://stackoverflow.com/a/79009889
has body: I found it. The file does not exist on the server, hence the 403. This is because it never got uploaded! Unbelievably stupid. Thanks to Akshay Kumar.
answers question: http://stackoverflow.com/q/79009569
type: Answer
score: 0
has comment: http://stackoverflow.com/comment/139310887

http://stackoverflow.com/q/78934113
type: Question
has body: I'm working on a React component that displays a split-screen modal. The modal has two sections: one that slides down from the top and another that slides up from the bottom. I'm encountering an issue where using vh units results in inconsistent heights on mobile browsers, particularly when there are dynamic UI elements like the browser's address bar. Problem: I initially used calc() with vh units to set the height of the bottom modal content and background. This worked fine on desktop, but on mobile devices, it causes the modal to cover elements that should remain visible. When I switched to using h-screen and mt-[295px], it seemed to resolve the issue, but it also covered the buttons in the space between the top and bottom sections. Current Code: This is the code I'm currently using for the bottom section: import React, {ReactNode} from 'react'; import SplitScreenModal from '../../ui/splitScreenModal'; interface PortalModalProps { isOpen: boolean; onClose: () => void; mainContent: ReactNode; // Main content as a prop footerContent: ReactNode; // Footer content as a prop } const PortalModal: React.FC<PortalModalProps> = ({ isOpen, onClose, mainContent, footerContent, }) => { return ( <SplitScreenModal isOpen={isOpen} onClose={onClose} topChildren={ <> Close <path fillRule="evenodd" d="M10 8.586l-4.95-4.95a1 1 0 00-1.414 1.414L8.586 10l-4.95 4.95a1 1 0 001.414 1.414L10 11.414l4.95 4.95a1 1 0 001.414-1.414L11.414 10l4.95-4.95a1 1 0 00-1.414-1.414L10 8.586z" clipRule="evenodd" /> </> } bottomChildren={ <> {/* this is the background with blur */} {/* this is where the content of the bottom modal is stored */} {/* Main Content */} {mainContent} {/* Dynamic Main Content */} {/* Footer */} {footerContent} {/* Dynamic Footer Content */} </> } /> ); }; export default PortalModal; looks as expected on desktop: but not on mobile: Safari Chrome Steps I Tried: Changed h-[calc(100vh-395px)] to h-screen and used mt-[295px]: This worked to some extent, but it covered buttons that …
tagged with: tailwind-css
score: 0
tagged with: next.js
answer count: 0
tagged with: css
has title: Nextjs-issues with inconsistent view height in mobile?
tagged with: height
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139173235

http://stackoverflow.com/comment/139222151
has text: Hi, thanks for your code. I have tried it, but on the share icon I have to double click to share to social media.
comment on: http://stackoverflow.com/a/78960963
type: Comment
score: 0
type: AnswerComment

http://stackoverflow.com/comment/139226723
type: Comment
has text: Hello. Please read the information on [how to ask a good question](https://stackoverflow.com/help/How-to-ask). Then please edit your post to make your question clearer. For example, add a screenshot of how it looks now, and a diagram of how you want it to look.
type: QuestionComment
comment on: http://stackoverflow.com/q/78961046
score: 0

http://stackoverflow.com/comment/139296206
type: Comment
score: 0
type: QuestionComment
has text: Change these two lines inside the `.tick:before` to rotate the box the other way around and adjust which borders are being displayed to simulate the tick mark: `border-width: 0 0 5px 5px; transform: rotate(-45deg);`
comment on: http://stackoverflow.com/q/79001772

http://stackoverflow.com/a/78977794
downvote count: 1
type: Answer
has body: is this what are you trying to achieve ? i changed the positioning: .spinner is now correctly positioned relative to the .container. and added container Flexibility: The .container can have dynamic height, and the spinner will stay centered. .container { border: 1px solid green; position: relative; min-height: 100px; } .spinner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 1px solid red; } .spinner::before { content: "Why this text is not inside green"; font-size: 24px; color: black; } &lt;div class="container"&gt; &lt;div class="spinner"&gt;&lt;/div&gt; &lt;/div&gt; &lt;div&gt; Why this text is not below another text? &lt;/div&gt;
upvote count: 0
score: -1
answers question: http://stackoverflow.com/q/78977782

http://stackoverflow.com/comment/139139494
type: QuestionComment
comment on: http://stackoverflow.com/q/78915094
score: 1
has text: Your `<span class="ellipsis ellipsis-left"` has `style=" display: none;` set on it, this will override any CSS rule because it's an inline style. If you're using a stylesheet then try to minimize the use of `style=""` attributes (and `!important` rules) to prevent being unable to override style properties.
type: Comment

http://stackoverflow.com/comment/139403126
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/79049727
has text: Reader mode in Chrome supports external CSS. Have you checked?

http://stackoverflow.com/a/78973472
answers question: http://stackoverflow.com/q/78973373
score: 1
has body: Add the mousemove and mouseup listeners add a handleMouseUp function too. Better to remove the draggable={true} from the div element. Because we are resizing via the mousemove event. import React, { memo } from 'react'; const ResizeableHeaderComponent = (props: any) =&gt; { const onResize = (event: MouseEvent) =&gt; { if (event.movementX !== 0) { event.preventDefault(); props.onResize(event, props.index); } }; const handleMouseUp = () =&gt; { window.removeEventListener('mousemove', onResize); window.removeEventListener('mouseup', handleMouseUp); }; const handleMouseDown = () =&gt; { window.addEventListener('mousemove', onResize); window.addEventListener('mouseup', handleMouseUp); }; return ( &lt;&gt; {props.title} &lt;div style={{ position: 'absolute', bottom: 0, right: '-5px', width: '10px', height: '100%', zIndex: 5, cursor: 'col-resize' }} onMouseDown={handleMouseDown} /&gt; &lt;/&gt; ); }; export default memo(ResizeableHeaderComponent);
type: AcceptedAnswer
downvote count: 0
has comment: http://stackoverflow.com/comment/139257291
type: Answer
accepted answer of: http://stackoverflow.com/q/78973373
upvote count: 1

http://stackoverflow.com/comment/139288413
type: QuestionComment
comment on: http://stackoverflow.com/q/78997521
type: Comment
has text: This question is similar to: [How to make 3-corner-rounded triangle in CSS](https://stackoverflow.com/questions/14446677/how-to-make-3-corner-rounded-triangle-in-css). If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem.
score: 0

http://stackoverflow.com/a/79152309
answers question: http://stackoverflow.com/q/78979629
has body: I experience the same, even the first example on the official Angular Material side does not work since months. And I am wondering, why so few people complain. This post is the only I found.
type: Answer
score: 0

http://stackoverflow.com/comment/139238789
type: QuestionComment
has text: You're right. When I reduce my window height, I see the problem.
comment on: http://stackoverflow.com/q/78970518
type: Comment
score: 0

semantic-ui-react
tags question: http://stackoverflow.com/q/78905493
tag name: semantic-ui-react
type: Tag

http://stackoverflow.com/comment/139149569
comment on: http://stackoverflow.com/q/78922065
has text: Could you describe in more detail exactly what you want because at the moment my question is: if you want it to look like object-fit: cover, why not use object-fit: cover? Also please make a working snippet (it needs an image we can see).
type: Comment
score: 0
type: QuestionComment

http://stackoverflow.com/a/78984273
has body: You are just missing one css property. Add justify-content: center to buttonHolder and you are done. Below is working example of same. .buttonHolder { text-align: center; display: flex; align-items: center; justify-content: center; }
type: Answer
score: 0
answers question: http://stackoverflow.com/q/78984268

hover
tags question: http://stackoverflow.com/q/78948897
tag name: hover
tags question: http://stackoverflow.com/q/78930892
tags question: http://stackoverflow.com/q/79002283
tags question: http://stackoverflow.com/q/78906308
tags question: http://stackoverflow.com/q/79016921
tags question: http://stackoverflow.com/q/78914275
tags question: http://stackoverflow.com/q/78959643
type: Tag
tags question: http://stackoverflow.com/q/79130607
tags question: http://stackoverflow.com/q/79201399
tags question: http://stackoverflow.com/q/79160105
tags question: http://stackoverflow.com/q/79184374
tags question: http://stackoverflow.com/q/79164898
tags question: http://stackoverflow.com/q/79165670
tags question: http://stackoverflow.com/q/79087721
tags question: http://stackoverflow.com/q/79234408
tags question: http://stackoverflow.com/q/79093360
tags question: http://stackoverflow.com/q/79320545
tags question: http://stackoverflow.com/q/79323441
tags question: http://stackoverflow.com/q/79357680
tags question: http://stackoverflow.com/q/79383863
tags question: http://stackoverflow.com/q/79349652
tags question: http://stackoverflow.com/q/79276341
tags question: http://stackoverflow.com/q/79397473
tags question: http://stackoverflow.com/q/79281862
tags question: http://stackoverflow.com/q/79375678
tags question: http://stackoverflow.com/q/79445870
tags question: http://stackoverflow.com/q/79474800
tags question: http://stackoverflow.com/q/79475547
tags question: http://stackoverflow.com/q/79519419
tags question: http://stackoverflow.com/q/79538849
tags question: http://stackoverflow.com/q/79430202

http://stackoverflow.com/comment/139417449
score: 0
has text: How are you testing this? Using local files directly, or via a web server? `localStorage` will not work with local files, you need to be using a web server. If you are using a web server, and it is publicly accessible, please edit your post to include a link to your site ... that will help us to help you.
type: Comment
comment on: http://stackoverflow.com/q/79068052
type: QuestionComment

http://stackoverflow.com/comment/139198192
score: 0
comment on: http://stackoverflow.com/q/78948544
type: Comment
type: QuestionComment
has text: @André Yes, that fixed it, thx you so much

http://stackoverflow.com/comment/139351648
type: Comment
score: 0
has text: [Flag 'Try This: {code}' Answers as "Very Low Quality"](https://meta.stackoverflow.com/q/256359/215552)
comment on: http://stackoverflow.com/a/79031070
type: AnswerComment

http://stackoverflow.com/a/79051720
has comment: http://stackoverflow.com/comment/139387714
type: Answer
score: 0
has comment: http://stackoverflow.com/comment/139391420
answers question: http://stackoverflow.com/q/79043896
has body: Leslie Alexander leslie.alexander@example.com Co-Founder / CEO Last seen 3h ago

http://stackoverflow.com/comment/139141141
type: QuestionComment
has text: Yes. But...well... I inspired and remembered suddenly. If I used position relative and absolute, can we solve it? Maybe not?
comment on: http://stackoverflow.com/q/78916876
type: Comment
score: 0

http://stackoverflow.com/comment/139418639
type: QuestionComment
score: 1
has text: When I put a long text into the jsfiddle example from that other answer you are referring to, it doesn't even break, but causes a scroll bar. Please do not make us discuss such an issue based on ever-so-vague "I tried something" statements, but put a proper [mre] into _your_ question.
comment on: http://stackoverflow.com/q/79068427
type: Comment

http://stackoverflow.com/comment/139393110
type: Comment
comment on: http://stackoverflow.com/q/79054875
has text: Do you mean that the buttons you want sticking at the bottom of the 30% wide section are the Cancel and Create buttons which are currently in the full width footer section?
score: 0
type: QuestionComment

http://stackoverflow.com/a/79017534
type: AcceptedAnswer
has body: Good morning, My office colleagues have helped me find the solution, the error was the value data-kt-menu-trigger="hover" in the Div of the which launched the hover function again. I have removed it and it now works like the other menu Thank you very much to all of you who have read my question and tried to help me, have a good day!
type: Answer
score: 0
answers question: http://stackoverflow.com/q/79014379
accepted answer of: http://stackoverflow.com/q/79014379

http://stackoverflow.com/comment/139225093
comment on: http://stackoverflow.com/q/78960221
type: Comment
score: 0
has text: Yes I have tried for both android (Redmi 13C)and IOS (Iphone 11)
type: QuestionComment

http://stackoverflow.com/q/78963317
score: 0
tagged with: next.js
answer count: 0
tagged with: css
has comment: http://stackoverflow.com/comment/139225577
has comment: http://stackoverflow.com/comment/139226971
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139233783
has comment: http://stackoverflow.com/comment/139232589
type: Question
has title: Simple Nextjs page with background image creates y-scroll
has body: index.js import styles from "../styles/Home.module.css"; export default function Home() { return ( ); } Home.module.css .container { height: 100dvh; background-image: url('/home.webp'); background-size: contain; background-repeat: no-repeat; background-position: center; } I tried adding 0 margin and padding for HTML and body in global.css, playing around with height of 100vh instead, etc. I still see a y-scroll. Why is that appearing? How can I remove it? Thanks!
tagged with: http://stackoverflow.com/tag/html

drop-down-menu
tags question: http://stackoverflow.com/q/79014379
tag name: drop-down-menu
tags question: http://stackoverflow.com/q/78946868
type: Tag
tags question: http://stackoverflow.com/q/79025318
tags question: http://stackoverflow.com/q/78986891
tags question: http://stackoverflow.com/q/79221635
tags question: http://stackoverflow.com/q/79082926
tags question: http://stackoverflow.com/q/79079752
tags question: http://stackoverflow.com/q/79371775
tags question: http://stackoverflow.com/q/79526420

http://stackoverflow.com/comment/139188434
has text: this still keeps it all in one large border - are you able to split it into seperate?
type: Comment
comment on: http://stackoverflow.com/a/78943162
score: 0
type: AnswerComment

http://stackoverflow.com/comment/139384192
has text: I think you should load the CSS of Mantine, looking at the doc, you should use the provider as this: `<MantineProvider withGlobalStyles withNormalizeCSS>`
type: Comment
score: 0
comment on: http://stackoverflow.com/q/79049832
type: QuestionComment

framer-motion
type: Tag
tag name: framer-motion
tags question: http://stackoverflow.com/q/78964387
tags question: http://stackoverflow.com/q/79084821
tags question: http://stackoverflow.com/q/79115814
tags question: http://stackoverflow.com/q/79242855
tags question: http://stackoverflow.com/q/79074491
tags question: http://stackoverflow.com/q/79171311
tags question: http://stackoverflow.com/q/79158313
tags question: http://stackoverflow.com/q/79231273
tags question: http://stackoverflow.com/q/79292268
tags question: http://stackoverflow.com/q/79324844
tags question: http://stackoverflow.com/q/79339409
tags question: http://stackoverflow.com/q/79493077
tags question: http://stackoverflow.com/q/79499961

http://stackoverflow.com/comment/139219376
type: QuestionComment
comment on: http://stackoverflow.com/q/78959474
type: Comment
has text: @Meet I have updated the question with images of the two cases
score: 0

http://stackoverflow.com/comment/139522738
type: Comment
comment on: http://stackoverflow.com/a/79121645
score: 0
has text: You could center the text inside the element and use `transform-origin: center`, That might lead to the desired result. Otherwise you probably need extra nested elements. (I am really not sure what exactly you want, so I didn't add that to my snippet, since it might not be what you are looking for anyway...)
type: AnswerComment

http://stackoverflow.com/q/78939802
answer count: 1
type: Question
type: AnsweredQuestion
has answer: http://stackoverflow.com/a/78939881
score: 0
has title: Multiline link hover animation and underline offset
has body: I have this link animation. I want the link to be underlined by default, and then add an animated underline on hover (underline sliding in from left). This example is doing exactly what I'm looking for, but on hover the underlining is too close to the anchor text - probably because I'm switching from text-decoration to a background. So, how can I move the hover background down to match the text-underline-offset? Adding background-position: left bottom -5px; to the hover won't work. a { -webkit-box-decoration-break: clone; box-decoration-break: clone; text-decoration: underline; text-underline-offset: 5px; position: relative; background: linear-gradient(#000, #000) left bottom no-repeat; background-size: 0% 1px; } a:hover { text-decoration: none; background-size: 100% 1px; transition: all 0.8s; /* background-position: left bottom -5px; */ } body { line-height: 1.5; } Bacon ipsum dolor amet picanha pork leberkas tail pig capicola. Fatback bacon rump biltong pastrami meatball cow. Meatloaf venison doner, flank swine pig beef bresaola corned beef capicola tri-tip bacon. Tri-tip rump ham short loin. Prosciutto porchetta corned beef rump. Pork chislic tri-tip short loin landjaeger andouille alcatra jerky sausage turkey. Chuck pastrami t-bone boudin doner pancetta pork chop flank pork shank spare ribs drumstick. Hover this link Andouille pork t-bone beef pig burgdoggen jowl. Shank short loin landjaeger rump alcatra pork belly jerky hamburger. Pig cupim tongue meatball hamburger fatback flank prosciutto pork belly shank.Chuck bresaola buffalo, short loin cow tongue tenderloin landjaeger beef cupim boudin shankle chislic t-bone. Sausage tenderloin hamburger leberkas kielbasa doner corned beef frankfurter tri-tip venison pastrami burgdoggen shankle. Kielbasa pancetta chicken strip steak. Cow bresaola biltong, boudin frankfurter filet mignon chislic andouille ham pork belly pastrami kevin. Biltong alcatra venison burgdoggen landjaeger, ball tip kielbasa prosciutto boudin tri-t…
tagged with: css
accepted answer: http://stackoverflow.com/a/78939881

http://stackoverflow.com/comment/139310779
type: Comment
comment on: http://stackoverflow.com/q/79009672
type: QuestionComment
has text: Then you need to **demonstrate** it not working in a Snippet as requested. Note that for you image to work you need an *equilateral triangle*.
score: 1

http://stackoverflow.com/q/78930142
score: 0
tagged with: css
answer count: 0
duplicate of: http://stackoverflow.com/q/48849210
type: UnansweredQuestion
duplicate of: http://stackoverflow.com/q/52694564
linked to: http://stackoverflow.com/q/48849210
has title: Why does a relatively positioned element share stacking context with sticky (or fixed) preceding element?
has comment: http://stackoverflow.com/comment/139164564
type: Question
has body: codepen There's a pretty length MDN page describing stacking context, which contains rules for creating a new stacking context. Of note is: Element with a position value absolute or relative and z-index value other than auto. Element with a position value fixed or sticky (sticky for all mobile browsers, but not older desktop browsers). So in the attached codepen, you can see the 'footer' overlap the sticky green box as you scroll down. This only happens when the footer has position: relative; removing that style results in the footer rendering behind the sticky green box. But why? Nothing in the MDN page about stacking context or z-index seems to suggest this element should be creating a new stacking context, much less share a context with its preceding sticky neighbor. Note the question is the same if the green box is 'fixed' as well, so it's not sticky specific.

http://stackoverflow.com/comment/139419490
comment on: http://stackoverflow.com/a/79067779
type: Comment
score: 0
has text: If the `nav` is `height: 2vh` then maybe setting the carousel to `height: 98vh` would do the trick
type: AnswerComment

http://stackoverflow.com/a/79063970
score: 2
upvote count: 2
answers question: http://stackoverflow.com/q/79063526
has body: There are two scenarios we need to include in the calculation. Wide screens, when the content width is constrained to 1080px Narrow screens, when the content width is 80% The screenshot below illustrates the setup: yellow represents the viewport width (100vw) pink represents the left column (75vw) red represents the right column (25vw) lime represents the content (the minimum of 1080px and 80vw) the white striped area is the width you are wanting to calculate, which is the portion of the content which would overlap the right column So for scenario 1, the width of the striped area is the width of the red area minus the width of the white area underneath the red area. To get the width of the white area we subtract the width of the lime area from the viewport width, then divide by two (because there are white areas on both sides). The equation for this scenario is therefore: stripeWidth = redWidth - ((yellowWidth - limeWidth) / 2) For scenario 2 it’s simpler, because we know that the white area is simply 10vw, so the equation for this scenario is: stripeWidth = redWidth - 10vw = 25vw - 10vw = 15vw For the overall equation we just need to take whichever of these two results has the smaller value. The CSS representation of the equation uses both min() and calc(): .striped { width: min(15vw, calc(25vw - ((100vw - var(--content-width)) / 2))); } Here is a working snippet to demonstrate: const f = document.querySelector('.full') const l = document.querySelector('.left') const r = document.querySelector('.right') const c1 = document.querySelector('.c1') const s = document.querySelector('.striped') const displayWidths = () => { f.innerHTML = f.offsetWidth l.innerHTML = l.offsetWidth r.innerHTML = r.offsetWidth c1.innerHTML = c1.offsetWidth s.innerHTML = s.offsetWidth } addEventListener('resize', displayWidths) displayWidths() body { margin: 0; display: grid; grid-template-columns: 3fr 1fr; --content-width: 1080px; } .full, .left, .right, .c1, .c2, .striped { display: flex; ju…
downvote count: 0
type: Answer

http://stackoverflow.com/comment/139291119
type: Comment
type: QuestionComment
has text: @AHaworth Sure, done.
comment on: http://stackoverflow.com/q/78998686
score: 0

http://stackoverflow.com/comment/139203466
comment on: http://stackoverflow.com/a/78951599
type: Comment
score: 0
has text: The given snippet does not give the required layout. For example, on full page on my laptop the date is incorrectly positioned.
type: AnswerComment

http://stackoverflow.com/a/78948166
type: Answer
score: 0
answers question: http://stackoverflow.com/q/78946426
has body: Instead of the animation fill mode [MDN] forwards, use both: animation: appear linear both; PS: avoid setting sizes (specially in this responsive era) in px units. There's % vh dvh cqi etc etc

http://stackoverflow.com/comment/139381052
has text: @Beast80K No it is not changing for anything and i also uploaded a screenshot of my localhost page you can see the icon is not changing the size even when i change the styling.
comment on: http://stackoverflow.com/q/79044837
type: QuestionComment
type: Comment
score: 0

http://stackoverflow.com/comment/139219239
type: Comment
score: 0
has text: can you please add so that we can address your problem.
type: QuestionComment
comment on: http://stackoverflow.com/q/78958406

http://stackoverflow.com/a/79014493
type: Answer
downvote count: 0
answers question: http://stackoverflow.com/q/79014373
score: 1
upvote count: 1
has body: In main.html, you explicitly create the image, right after the header. You then call your main.js script directly after, where you call the .appendChild() function on the body to create a second image. I don't understand what you mean by "display once on top of blinking text", however you can get rid of the second image by removing the first 5 (6 including the blank) lines of code in your main.js file

http://stackoverflow.com/comment/139141464
type: AnswerComment
has text: Thank you, great answer and very educational. Thanks for the articles and explanation, I will be able to do similar tricks in the future.
comment on: http://stackoverflow.com/a/78917155
score: 0
type: Comment

http://stackoverflow.com/comment/139317745
has text: that's the point! the range can be selected only in a single calendar (as far as I could see watching all the available examples).. when using such arrangement, the first date clicked selects the beginDate and the second click selects the endDate... thus creating a range that will be used to fill the correspondent ` ` with `dd.mm.yyyy - dd.mm.yyyy`. While if you use the double picker arrangement, you are selecting two individual dates that will be used to fill two distinct `input` with two distinct dates that in your logic you will use to make a range.
comment on: http://stackoverflow.com/q/79013255
type: Comment
score: 0
type: QuestionComment

http://stackoverflow.com/comment/139158229
comment on: http://stackoverflow.com/q/78926741
score: 0
type: QuestionComment
has text: @OMiShah `element.style.border` will give empty string value if not present. and this is enough to check whether element present or not.
type: Comment

http://stackoverflow.com/comment/139287114
score: 0
type: Comment
comment on: http://stackoverflow.com/q/78993853
type: QuestionComment
has text: Well, that’s what I´ve done and it is working perfectly fine while I run it in development mod. It is when I try to build it that it breaks

http://stackoverflow.com/q/79023206
tagged with: css
has title: How to add different scroll speed when using ScrollTrigger
answer count: 0
tagged with: gsap
type: UnansweredQuestion
tagged with: scrolltrigger
score: 0
type: Question
has body: I have three background-images where each one of them should have a different scrollspeed. I tried to use scrollTrigger from gsap but for some reason the scrolling speed is the same on each Image. I have made an JSFIDDLE where you can check it out and maybe suggest how to achieve that. Here is the code: gsap.registerPlugin(ScrollTrigger); let tl = gsap.timeline({ scrollTrigger: { trigger: "section", start: "top top", end: "bottom top", scrub: true, } }); tl.to("#layer1", { backgroundPositionY: "5%", ease: "none" }, 0) .to("#layer2", { backgroundPositionY: "90%", ease: "none" }, 0) .to("#layer3", { backgroundPositionY: "40%", ease: "none" }, 0); html { scroll-behavior: smooth; } .parallax-item { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 150vh; } #layer1 { background: url('https://images.unsplash.com/photo-1663305411753-4c305e177ff3?crop=entropy&amp;cs=tinysrgb&amp;fm=jpg&amp;ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjM5NDA4ODE&amp;ixlib=rb-1.2.1&amp;q=80') no-repeat center center fixed; background-size: cover; } #layer2 { background: url('https://images.unsplash.com/photo-1663183539627-adbe2c8ef43d?crop=entropy&amp;cs=tinysrgb&amp;fm=jpg&amp;ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjM5Mzk5ODc&amp;ixlib=rb-1.2.1&amp;q=80') no-repeat center center fixed; background-size: cover; } #layer3 { background: url('https://images.unsplash.com/photo-1506748686214-e9df14d4d9d0?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1350&amp;q=80') no-repeat center center fixed; background-size: cover; } &lt;section&gt; &lt;div id="layer1" class="parallax-item"&gt;&lt;/div&gt; &lt;div id="layer2" class="parallax-item"&gt;&lt;/div&gt; &lt;div id="layer3" class="parallax-item"&gt;&lt;/div&gt; &lt;/section&gt;
tagged with: javascript

http://stackoverflow.com/a/78983496
downvote count: 0
type: Answer
score: 2
upvote count: 2
has body: If you want to achieve this with just css, you'll need some "hacking". For example, adding a element that will store the required aspect-ratio: toggle.onclick = function() { const aspectRatio = this.classList.contains('active') ? '1/3' : '3/1'; container.style.setProperty('--aspect-ratio', aspectRatio) this.classList.toggle('active') } .container { display: flex; background: yellow; width: 320px; height: 190px; justify-content: center; align-items: center; padding: 16px; --aspect-ratio: 1 / 3; } .wrapper { position: relative; max-height: 100%; max-width: 100%; aspect-ratio: var(--aspect-ratio); canvas { aspect-ratio: var(--aspect-ratio); max-width: 100%; max-height: 100%; } } .element { background: red; position: absolute; inset: 0; } Toggle aspect-ratio
answers question: http://stackoverflow.com/q/78982161
has comment: http://stackoverflow.com/comment/139273199
has comment: http://stackoverflow.com/comment/139274781

http://stackoverflow.com/comment/139149757
score: 0
has text: Can you describe what the difference in the content is between the two pictures you have shown? That is, why the gap in the second picture, what determines that?
comment on: http://stackoverflow.com/q/78922197
type: QuestionComment
type: Comment

http://stackoverflow.com/comment/139192683
comment on: http://stackoverflow.com/q/78945584
has text: I advise you to find examples on *CodePen.com* and learn from those. Good examples can teach you a lot.
type: Comment
score: 0
type: QuestionComment

http://stackoverflow.com/comment/139282496
type: Comment
score: 0
has text: This fixed it. Thanks! @Prashant
type: AnswerComment
comment on: http://stackoverflow.com/a/78992641

http://stackoverflow.com/comment/139140758
type: QuestionComment
comment on: http://stackoverflow.com/q/78916876
type: Comment
score: 0
has text: Sorry, but I still can not tell what you actually want.

http://stackoverflow.com/a/79006481
accepted answer of: http://stackoverflow.com/q/78966984
upvote count: 2
has body: You can always customize your tailwindcss theme and extend the default theme to your liking. module.exports = { theme: { extend: { spacing: { 'ch-25': '25ch', 'ch-50': '50ch', 'ch-75': '75ch', } } } } Foobar Additionally, you can also use arbitrary values. Foobar Playground
answers question: http://stackoverflow.com/q/78966984
type: AcceptedAnswer
score: 2
downvote count: 0
type: Answer

http://stackoverflow.com/comment/139148216
comment on: http://stackoverflow.com/q/78920429
score: 0
type: Comment
has text: I updated the sandbox code to make the Status looks like a button, still not sure how to shrink/cut off the rest of the row.
type: QuestionComment

http://stackoverflow.com/comment/139275970
type: Comment
score: 0
has text: Do not add `href` to the button. It doesn't support that and that's not what buttons are for. Use a `` with a class and use CSS to change its styling.
type: QuestionComment
comment on: http://stackoverflow.com/q/78990560

http://stackoverflow.com/comment/139251319
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78977147
has text: Thanks but how may I convert my html template into MJML ?

http://stackoverflow.com/q/78985828
has body: I have two Monaco Editors in a React project. The first one has a custom theme and accepts text, and the second one accepts the vs-light theme as I understand from my library and prints html in it. Separately, they work correctly, but when the user clicks a button on the page and the second Monaco Editor appears, it breaks the first one and one loses syntax highlighting. But the worst thing is that it stops making text in different tags and makes all the text in one tag, as if it lost their definition. My React components with Monaco Editor are written in classes I'm talking about this: Monarch Tokenizer: Основной механизм, который разбивает текст на токены и определяет, какие части текста должны быть выделены, и как они будут отрисованы. Эти токены отображаются с помощью классов , где каждая часть текста, соответствующая определенному типу токена (ключевое слово, строка, комментарий и т.д.), оборачивается в с нужными стилями. span: Для каждого токена Monaco генерирует элементы span, которым присваиваются определённые классы, связанные с типом токена. Эти классы могут включать mtk1, mtk2, и т.д., для различных типов синтаксиса. I read a couple of threads on forums that many people have encountered this, but I didn't find a solution, the problem is old, maybe there is a solution now? monaco.editor.setTheme(theme); which changes the theme of the second Editor when it appears, they write that it is global. Most likely, that is why it breaks the first Editor. On stackoverflow and git I saw branches where they write that two Editor(s) on one page should have the same style. I tried to put a condition before it, for example, by setting an id or pseudo-class to the element and applying the method only to it through this, it did not help I also tried to wrap the library theme in a custom wrapper that inherits it, because I thought that it would not interrupt, but since setTheme(theme) is most likely global within one page, this did not help If you comment out the theme of t…
has title: How to make different themes and two Monaco editors on one page
tagged with: reactjs
upvote count: 1
answer count: 0
tagged with: css
downvote count: 1
score: 0
type: UnansweredQuestion
favorite count: 0
type: Question

http://stackoverflow.com/comment/139348181
type: Comment
score: 0
has text: Like any URI in the browser; when its the same URI and you have not disabled caching, then the CSS files are cached. Easily tested by making your add another ``<using-global-styles>`` Element to the DOM and see what happens in de Dev Console Network tab. Note: years ago some of Bootstrap stuff didn't support shadowDOM; don't know what the current status is, I don't use it... 35 KB is a bit bloated
type: QuestionComment
comment on: http://stackoverflow.com/q/79029035

http://stackoverflow.com/comment/139259364
comment on: http://stackoverflow.com/q/78981553
type: Comment
score: 0
type: QuestionComment
has text: I have noticed after inspecting the page that when `Angel Wish` font is applied then there is a `height: 2384.67px` and `width: 990.667px` set to that container. But when I tried to fix the `height` then it didn't change anything. You can also notice in `Computed` section of developer tools.

azure-active-directory
tag name: azure-active-directory
tags question: http://stackoverflow.com/q/78919730
type: Tag

http://stackoverflow.com/a/78940190
has body: Your 100% is not doing what you think. The 100% just ends up been the full document, you can see this if you scroll down to the bottom of your second snippet, look at the scroll bars, do you see something odd?. You can make the 100% work as expected by giving the body element a fixed height. If you make the body a fixed height, you will then see the 100% does what you expect. In fact change it to 50%, and it will do what you expect, change your second snippet to 50% and it will seem like nothing changed. eg. body, html { height: 100vh; padding: 0; margin: 0; } <meta charset="UTF-8" Flex Grid with Floating Header
has comment: http://stackoverflow.com/comment/139183919
downvote count: 0
answers question: http://stackoverflow.com/q/78940065
upvote count: 1
score: 1
has comment: http://stackoverflow.com/comment/139183899
has comment: http://stackoverflow.com/comment/139183877
has comment: http://stackoverflow.com/comment/139184079
has comment: http://stackoverflow.com/comment/139184038
type: Answer

http://stackoverflow.com/a/79007859
has body: You can remove the bottom border from the last label element by: .radio-tabs .tabs .tab:last-child { border-bottom: 0; } body { font-family: Helvetica, Arial, sans-serif; font-size: 10pt; } .radio-tabs { display: flex; flex-flow: row; } #radio1:focus~.tabs #first-tab, #radio2:focus~.tabs #second-tab, #radio3:focus~.tabs #third-tab, #radio4:focus~.tabs #fourth-tab {} .tabs { display: flex; flex-flow: column; flex: 10%; } /* Tab button */ .radio-tabs .tab { display: flex; flex-flow: column; align-items: center; text-align: center; padding: 1em; color: #000; background-color: #EEEEEE; height: 60px; border-bottom: 1px solid #CCCCCC; } .radio-tabs .tabs .tab:last-child { border-bottom: 0; } .radio-tabs .tab:hover { background-color: #; } #radio1:checked~.tabs #first-tab, #radio2:checked~.tabs #second-tab, #radio3:checked~.tabs #third-tab, #radio4:checked~.tabs #fourth-tab { background-color: #FFF; color: #1e262d; border-right: 0; font-weight: bold; } .tab-label { padding: 5px; } .radio-tabs .panels { flex: 70%; background-color: #FFF; color: #000; } .radio-tabs .panel { display: none; margin-left: 50px; } #radio1:checked~.panels #first-panel, #radio2:checked~.panels #second-panel, #radio3:checked~.panels #third-panel, #radio4:checked~.panels #fourth-panel { display: block; } .radio-tabs .state { display: none; } .panels {} .container { border: 1px solid #CCCCCC; } About Who Benefits How About the 360 Dealer Groups Education comparator Rating Financial Advisory Dealer Groups willingness & effectiveness for improving staff professionalism via education and training Who Financial Planning and Advisory Dealer Groups with advisers and support staff Benefits Organisation Rated and compared to peers for providing adequate education and traning to advisory staff Identifying skills gap in workforce for assistance and finding relevant subject matter specialists Benchmark of best practice systems, processes and capability Feedback of employees and external participants comments/vie…
type: AcceptedAnswer
answers question: http://stackoverflow.com/q/79007606
type: Answer
accepted answer of: http://stackoverflow.com/q/79007606
score: 0

http://stackoverflow.com/comment/139133972
comment on: http://stackoverflow.com/q/78913738
type: QuestionComment
has text: @DavidThomas What for? This is a purposefully generic question. I'm not interested in a workaround/hack for a specific problem (in a specific problem I'd know the number of descendats) but for a generic problem.
type: Comment
score: 0

http://stackoverflow.com/comment/139149627
has text: Looking at the linked site you provided, they are using canvas and I don't see anything in the code you have given that would create the effects they have there. What are you actually asking? Simply how to keep an img within a container which is less than the viewport or how to create those hover effects (which are a lot more complex in terms of required code!)
type: QuestionComment
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78922065

http://stackoverflow.com/comment/139299702
type: QuestionComment
has text: My issue is that i don't want to do that for earch item with is-primary at hand, i want edit root variables to don't care about adding new components colors.
type: Comment
comment on: http://stackoverflow.com/q/79000934
score: 0

http://stackoverflow.com/a/79063106
answers question: http://stackoverflow.com/q/79059408
upvote count: 5
type: AcceptedAnswer
type: Answer
downvote count: 0
accepted answer of: http://stackoverflow.com/q/79059408
has body: It seems that it is not currently possible, but it is planned (see "Future work" > "Nested transition groups" section of https://github.com/WICG/view-transitions/blob/main/explainer.md#future-work). Why is that? Currently, when you transition items, a ::view-transition element is added to the root of your document. To 'debug' it, slow down the transition by adding this to your example: html::view-transition-group(*) { position: fixed; inset: 0; animation-duration: 60s; animation-fill-mode: both; } so you can easily inspect it in the dev tools as it animates. Anyways, all your transitioned element snapshots (image-like of the previous state and 'real' one of the new state) are 'moved' to this root ::view-transition pseudo-element at the root of your page. As a result, they 'escape' your containers with overflow: hidden, and as a result, they can be fully visible during the transition. According to https://github.com/WICG/view-transitions/blob/main/explainer.md#nested-transition-groups, in the future, you'll be able to opt in to create nested animation groups, and in this case, I can imagine you could create 'containers' that match your element with overflow hidden to nicely hide transitioned elements that are out of bounds. Also, more context is described here: https://github.com/WICG/view-transitions/blob/main/nested-explainer.md. P.S. It's sad.
has comment: http://stackoverflow.com/comment/140064414
has comment: http://stackoverflow.com/comment/140064972
has comment: http://stackoverflow.com/comment/139418857
score: 5

http://stackoverflow.com/comment/139322157
has text: I had a similar question asked [here](https://stackoverflow.com/q/74517249/10489887), maybe it can give you a hint.
comment on: http://stackoverflow.com/q/79015795
type: Comment
score: 0
type: QuestionComment

http://stackoverflow.com/comment/139386172
score: 1
comment on: http://stackoverflow.com/q/79050826
has text: What spacing in particular, a text-indent, a line-break between the ` ` and a previous element, something else? When you say you "*tried using the paragraph-spacing that [you saw elsewhere]*" what does that mean, what CSS, HTML, JavaScript, or other code did you try to use? In what way did it fail, you say it "*[didn't] recognise the property*" but how do you know, what did you see instead?
type: Comment
type: QuestionComment

http://stackoverflow.com/comment/139137782
type: AnswerComment
has text: Not necessarily. The simplest would be to use `background:` (instead of *`background-image:`*) as shorthand for all the available values (which seem in the right order BTW) - but well spotted!
score: 4
comment on: http://stackoverflow.com/a/78915974
type: Comment

http://stackoverflow.com/comment/139308136
type: QuestionComment
comment on: http://stackoverflow.com/q/79008222
type: Comment
score: 0
has text: something like `a:hover .btn` or `a:active .btn`

http://stackoverflow.com/comment/139369540
type: QuestionComment
has text: Your reStructuredText source line is the correct syntax for a paragraph with mixed text and inline math content. A conforming rendering would not introduce hard line breaks (but break the lines to fit into the given text width at the respective point in your document. There may be an error in the Sphinx math rendering extension or just not enough space (text width, e.g. if you view the content on a mobile in portrait mode).
comment on: http://stackoverflow.com/q/79041478
type: Comment
score: 0

http://stackoverflow.com/a/79049111
type: Answer
downvote count: 0
answers question: http://stackoverflow.com/q/79048994
has comment: http://stackoverflow.com/comment/140045282
upvote count: 1
has body: The import order is very important. // -------------------------------------------------- @import "functions"; // -------------------------------------------------- $primary: #2B4261 !default; $secondary: #9FA6B2 !default; $success: #14A44D !default; $info: #54B4D3 !default; $warning: #E4A11B !default; $danger: #DC4C64 !default; $light: #FBFBFB !default; $dark: #332D2D !default; $gold: #AC863C !default; $gold-text-emphasis: shade-color($gold, 60%) !default; $gold-text-emphasis-dark: tint-color($gold, 40%) !default; $gold-bg-subtle: tint-color($gold, 80%) !default; $gold-bg-subtle-dark: shade-color($gold, 80%) !default; $gold-border-subtle: tint-color($gold, 60%) !default; $gold-border-subtle-dark: shade-color($gold, 40%) !default; // -------------------------------------------------- @import "variables"; @import "variables-dark"; // -------------------------------------------------- $custom-colors: ( "primary": $primary, "secondary": $secondary, "success": $success, "info": $info, "warning": $warning, "danger": $danger, "light": $light, "dark": $dark, "gold": $gold ); $theme-colors: map-merge($theme-colors, $custom-colors); // -------------------------------------------------- @import "maps"; @import "mixins"; // -------------------------------------------------- $custom-colors-text: ("gold": $gold); $custom-colors-bg-subtle: ("gold": $gold-bg-subtle); $custom-colors-border-subtle: ("gold": $gold-border-subtle); $theme-colors-text: map-merge($theme-colors-text, $custom-colors-text); $theme-colors-bg-subtle: map-merge($theme-colors-bg-subtle, $custom-colors-bg-subtle); $theme-colors-border-subtle: map-merge($theme-colors-border-subtle, $custom-colors-border-subtle); $custom-colors-text-dark: ("gold": $gold); $custom-colors-bg-subtle-dark: ("gold": $gold-bg-subtle-dark); $custom-colors-border-subtle-dark: ("gold": $gold-border-subtle-dark); $theme-colors-text-dark: map-merge($theme-colors-text-dark, $custom-colors-text-dark); $theme-colors-bg-subtle-dark: map-merge($t…
score: 1

http://stackoverflow.com/comment/139404031
score: 0
has text: @C3roe, `background-color` is a supported property on `::highlight()` pseud-elements, but unfortunately `background` is not.
type: QuestionComment
comment on: http://stackoverflow.com/q/79060854
type: Comment

mat-sidenav
tag name: mat-sidenav
tags question: http://stackoverflow.com/q/78979629
type: Tag

pseudo-class
tags question: http://stackoverflow.com/q/78983131
tags question: http://stackoverflow.com/q/78944847
tags question: http://stackoverflow.com/q/79012374
type: Tag
tag name: pseudo-class
tags question: http://stackoverflow.com/q/79123663
tags question: http://stackoverflow.com/q/79148383
tags question: http://stackoverflow.com/q/79236459
tags question: http://stackoverflow.com/q/79312709
tags question: http://stackoverflow.com/q/79277215
tags question: http://stackoverflow.com/q/79530974
tags question: http://stackoverflow.com/q/79486581

telegram
tag name: telegram
tags question: http://stackoverflow.com/q/79009524
type: Tag
tags question: http://stackoverflow.com/q/79395140

http://stackoverflow.com/a/79044255
score: 1
answers question: http://stackoverflow.com/q/79043889
accepted answer of: http://stackoverflow.com/q/79043889
type: AcceptedAnswer
has body: There isn't any extra width in the splitted text. The lack of the gap between the Y and the o in the non-splitted text is a result of kerning pairs in the font you are using. If you set a different font (through font-mono or similar), the rendering will become consistent between both versions. The horizontal spacing is disrupted in the splitted version because you set [&amp;&gt;*]:inline-flex on the individual letter spans, which forces each to be an individual container and prevents the kerning pairing from taking place. You can see this by either removing [&amp;&gt;*]:inline-flex, or by splitting on every second letter (which causes the first span to contain Yo together), either of which allow the kerning to happen properly (removing the extra space). Possible fixes - which is correct will depend on the context you are using this in: remove [&amp;&gt;*]:inline-flex - not sure why it's necessary here use a different font without kerning pairs
type: Answer
downvote count: 0
upvote count: 1

http://stackoverflow.com/comment/139417364
type: QuestionComment
has text: Well, even though it's purely CSS, I included the snippet. My question is: is it possible to use the linear() function to replace complex structures in keyframes? and i don't know why my `linear(0, 0.5 35%, 1 70%)` is not work as my expectation...
type: Comment
score: 0
comment on: http://stackoverflow.com/q/79067744

http://stackoverflow.com/comment/139539697
has text: I doubt the upgrade itself resolved this (as the generated HTML should be the same). Maybe the default theme alabaster was patched. Anyway people might not care much about the details.
type: Comment
comment on: http://stackoverflow.com/a/79076430
score: 0
type: AnswerComment

http://stackoverflow.com/comment/139215788
type: Comment
type: AnswerComment
comment on: http://stackoverflow.com/a/78958022
has text: Small change, but OP doesn't seem to be looking for a running total. `Volume weight = L X W X H * 200`
score: 0

http://stackoverflow.com/comment/139406915
type: Comment
has text: OP's question is about the behavior of `absolute` positioned elements, so simply removing `position: absolute;` does not answer the question. If you think a different approch to OP's problem is better suited, please explain your reasoning and ideally also share why the snippet in question does not behave as expected.
score: 0
comment on: http://stackoverflow.com/a/79061900
type: AnswerComment

http://stackoverflow.com/comment/139141346
type: Comment
comment on: http://stackoverflow.com/q/78917857
score: 0
type: QuestionComment
has text: I am afraid not: I have a Nextjs app where my TopBar and SideBar are combined into a single ParentNav component. The TopBar has a button to show or hide the SideBar component. They are combined into ParentNav to isolate Client Components to Server Components. Perhaps there is another solution, but I would rather resolve this issue with css.

containers
tags question: http://stackoverflow.com/q/78994392
type: Tag
tag name: containers
tags question: http://stackoverflow.com/q/78967340
tags question: http://stackoverflow.com/q/79153246
tags question: http://stackoverflow.com/q/79076805
tags question: http://stackoverflow.com/q/79213157
tags question: http://stackoverflow.com/q/79389181
tags question: http://stackoverflow.com/q/79507808
tags question: http://stackoverflow.com/q/79460303

http://stackoverflow.com/q/79017087
accepted answer: http://stackoverflow.com/a/79017132
tagged with: css
has comment: http://stackoverflow.com/comment/139325880
upvote count: 2
score: 2
has title: A validation error occurs when using CSS nesting
tagged with: validation
favorite count: 0
has comment: http://stackoverflow.com/comment/139330690
type: Question
has answer: http://stackoverflow.com/a/79017132
has body: When written as described in the CSS Nesting Module, The W3C CSS Validation Service displays an Parse Error. What is the reason? .foo { color: red; .bar { color: blue; } } Is there any way to eliminate the error?
downvote count: 0
answer count: 1
tagged with: nested
type: AnsweredQuestion

http://stackoverflow.com/a/78930396
downvote count: 2
has body: .hexagon { width: 200px; display: inline-block; margin: 0 5px; color: orange; filter: url("#goo"); } .mask { display: block; background: currentColor; padding-top: 115%; /* 100%/cos(30) */ clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%); } img { position: absolute; top:0; bottom: 0; left: 0; right:0; width: 100%; height: 100%; } .border-mask{ width: 70%; height: 73%; position: absolute; left: 14px; top: 15px; clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%); background: linear-gradient(-150deg, white 35px, transparent 0) bottom right, linear-gradient(30deg, white 35px, transparent 0) bottom left, linear-gradient(150deg, white 35px, transparent 0) top left, linear-gradient(-30deg, white 35px, transparent 0) top right; border: white solid 7px; margin: 10px; } <feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" /> <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo" /> <feComposite in="SourceGraphic" in2="goo" operator="atop" />
type: Answer
answers question: http://stackoverflow.com/q/78930262
score: -1
upvote count: 1
has comment: http://stackoverflow.com/comment/139165699

http://stackoverflow.com/comment/139207855
comment on: http://stackoverflow.com/a/78953900
type: Comment
has text: Seems to make the text slightly blurry for me
score: 2
type: AnswerComment

http://stackoverflow.com/comment/139271266
type: Comment
score: 0
comment on: http://stackoverflow.com/a/78986353
type: AnswerComment
has text: @Chap I think I got the solution through `object-fit` applied to the `img` tag plus the `overflow: hidden` in the image `div` container. I just edited my answer.

http://stackoverflow.com/q/78920568
score: 0
answer count: 0
tagged with: css
has title: How do I create this kind of delayed scroll when there are two columns with different heights?
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139147005
type: Question
has comment: http://stackoverflow.com/comment/139147001
has body: Here's the reference: https://www.sennheiser.com/en-us/catalog/products/microphones/mk-4/mk-4-504298 I'm sure it can be done with pure CSS, but I don't know how to approach it. It's a very effective way to represent a product or to manage empty space next to a photo. I could see it more often.

http://stackoverflow.com/comment/139126427
type: Comment
has text: Please edit your post to show your current HTML+CSS.
comment on: http://stackoverflow.com/q/78909592
score: 0
type: QuestionComment

http://stackoverflow.com/comment/139170972
type: Comment
comment on: http://stackoverflow.com/q/78933676
score: 1
type: QuestionComment
has text: You need to add the event listener to the elements being clicked on. One way to accomplish this is to have an element that covers the screen and contains your modal as its parentNode -and put the event listener on that.

http://stackoverflow.com/comment/139203804
type: Comment
comment on: http://stackoverflow.com/a/78951317
type: AnswerComment
score: 0
has text: If you wanna use only single `div` and change text inside it then I think `JS` is preferred. And when you are adding this `code` in your website there might be other `CSS` overlapping it.

http://stackoverflow.com/comment/139127306
type: Comment
type: QuestionComment
comment on: http://stackoverflow.com/q/78909799
has text: AFAIK, you don't need to, as the browser does it for you, you just provide options. From MDN:`image-set() allows the author to provide options rather than determining what each individual user needs.`
score: 0

http://stackoverflow.com/comment/139398193
type: QuestionComment
comment on: http://stackoverflow.com/q/79057755
score: 1
type: Comment
has text: To the middle of what? I think you've forgottent hat some characters have desenders (g for example) - it just so happens that your text doesn't have any such characters, but what if it did?

http://stackoverflow.com/a/79010446
score: 1
answers question: http://stackoverflow.com/q/79009672
type: AcceptedAnswer
downvote count: 0
accepted answer of: http://stackoverflow.com/q/79009672
type: Answer
upvote count: 1
has body: Let's make an example with a simple square. Idea is to rotate along the main axis (say Y?), then in order to make it angled like a triangle edge would be, I will rotate the entire thing on another axis (Z). .square { background: red; width: 80px; height: 80px; transition: 1s; border-right: 2px solid yellow; transform-origin: right; } .square-container { display: inline-block; } .square-container:hover .square { transform: rotateY(180deg); } .square-container { transform: rotateZ(-45deg); } Hover to trigger rotation:

http://stackoverflow.com/comment/139331716
has text: Why use if else on a boolean?
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78994206

http://stackoverflow.com/q/78941616
type: Question
has answer: http://stackoverflow.com/a/78941701
answer count: 1
has body: using a media query I set a min-width of 680px. I have set it to where my navbar stays on the left portion on the screen. The problem is that is all you see. The main content that should be on the right side is being pushed down the screen. I don't think it's a width issue, but please correct me if I'm wrong. P.S. I have many main-section elements for the main content. Repository: https://github.com/GojuNoah/Reponsive-Web-Design-Tech-Doc-Practice/tree/main *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { background-color: #FAF0E6; margin: 0; padding: 0; } #navbar { background-color: #B9B4C7; } #navbar li a:hover { background-color: #5C5470; color: #FAF0E6; } .main-section { margin: 0 auto; padding: 10px; letter-spacing: .2; } .main-section header { font-size: 1.5em; font-weight: 600; } pre, code { white-space: pre-wrap; font-family: monospace; } #conclusion li a:hover { color: #B9B4C7; } #conclusion, ul { list-style: none; } #conclusion li a { text-decoration: none; color: #352F44; display: block; padding: 2px; } @media (min-width: 680px) { body { width: 100vw; } .main-section { margin-left: 30vw; } #navbar { position: sticky; top: 0; width: 30vw; height: 100vh; border-right: 2px solid #5C5470; } #navbar ul { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; } #navbar li { text-align: center; width: 100%; } #navbar a { color: #352F44; text-decoration: none; display: block; border: 1px solid black; text-align: left; padding: 10px; font-size: 1.5em; margin: 2px; } #navbar header { font-size: 2.5em; text-align: left; padding: 10px; font-weight: 600; margin-bottom: 10px; } } Responsive Design Introduction Flexible Images Media Queries Viewport Meta Tag Mobile First Design Flexbox Conclusion Introduction Responsive Web Design is a combination of code to make websites look the way it should, no matter the size of the screen. It also includes accessibility. Design the website so that even those who us…
tagged with: http://stackoverflow.com/tag/html
type: AnsweredQuestion
score: 0
tagged with: media-queries
has title: main content not starting at the top, being pushed off the page in desktop view
tagged with: css
accepted answer: http://stackoverflow.com/a/78941701
tagged with: spacing
tagged with: navbar

http://stackoverflow.com/comment/139235387
score: 2
type: Comment
comment on: http://stackoverflow.com/q/78968754
type: QuestionComment
has text: each element has its own box model and they don't overlap. That's not how `overflow` is intended. If you wish to overlap elements you need to use something like `position: absolute` or use a negative `margin-top`. By the way I see you have part of the info box impressed in the image itself.. they will never match! so just don't use that strategy

http://stackoverflow.com/comment/139281198
score: 2
type: Comment
comment on: http://stackoverflow.com/q/78993739
has text: `local` only takes a font name, not a file system path. And `src: src` isn't a thing; it's either `src: local()` or `src: url()`.
type: QuestionComment

http://stackoverflow.com/comment/139246909
has text: It may be an extension that does that, which you could find using the `Bisect` command from the Command Palette
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78972900

http://stackoverflow.com/comment/139334734
type: QuestionComment
has text: Sure. But `flex:1` is not a max-height setting... An image will grow to it's natural height unless constrained somehow.
type: Comment
comment on: http://stackoverflow.com/q/79022878
score: 0

http://stackoverflow.com/comment/139384674
type: Comment
has text: This is not a problem, you are seeking for someone to do your code. Try something, and if you face any problem, we will help.
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/79050057

http://stackoverflow.com/comment/139298374
has text: since you said you are "re-running all your js on every page transition" I suppose you are dealing with some event... can you try adding the code to play the video when such event occurs? something like `document.querySelector('video').play()`. It should work since it's muted but I'm not sure
comment on: http://stackoverflow.com/q/79002604
type: Comment
score: 0
type: QuestionComment

plasmo
type: Tag
tag name: plasmo
tags question: http://stackoverflow.com/q/79033583

http://stackoverflow.com/comment/139131674
has text: I added the JS file into the wrong folder, therefore I couldn't unwrap this menu. So the problem is just solved
comment on: http://stackoverflow.com/q/78912066
type: Comment
score: 0
type: QuestionComment

http://stackoverflow.com/comment/139153333
type: Comment
score: 0
has text: That's why I asked you first. If you separate the status button, you won't get that problem. I'm glad you're close to what you want.
type: QuestionComment
comment on: http://stackoverflow.com/q/78920429

http://stackoverflow.com/comment/139206155
has text: Apologies for my first sentence. Did not see the bar because of the low contrast. But the rest still applies.
type: QuestionComment
score: 1
comment on: http://stackoverflow.com/q/78953076
type: Comment

http://stackoverflow.com/comment/139166087
has text: I'm unsure why.. I just copy pasted your example
type: Comment
comment on: http://stackoverflow.com/a/78930971
score: 0
type: AnswerComment

http://stackoverflow.com/a/78916029
type: AcceptedAnswer
has comment: http://stackoverflow.com/comment/139137919
type: Answer
score: 0
has comment: http://stackoverflow.com/comment/139137891
has body: Quoting from CSS background docs The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method. Component properties not set in the background shorthand property value declaration are set to their default values. Simply use the background property instead of background-image like this: .hero { background: url('https://m-sarabi.ir/assets/personal-header.jpg') center center/cover no-repeat; margin-top: 8rem; padding: 11.5rem 2rem 8rem; position: relative; overflow-x: hidden; } Create your own video courses dive deep into the world of creativity and learn to craft stunning videos that captivate your audience 29$ Get Course
has comment: http://stackoverflow.com/comment/139137931
has comment: http://stackoverflow.com/comment/139137894
answers question: http://stackoverflow.com/q/78915933
accepted answer of: http://stackoverflow.com/q/78915933

http://stackoverflow.com/comment/139346818
score: 1
comment on: http://stackoverflow.com/a/79028154
has text: I think adsy's answer explained this method way better than mine, all I did was adjusting the path. The `clipPathUnits="objectBoundingBox"` was to make the path stretch itself to elements it's applied to instead of using its own size. I have some experience with vector graphics, so I can type some simple path directly. With more complex paths, I usually use [vectorpea.com](https://www.vectorpea.com/) to draw and export to SVG file, then notepad (or any text editor) to open the file and copy the paths data.
type: Comment
type: AnswerComment

http://stackoverflow.com/comment/139391080
comment on: http://stackoverflow.com/a/79047525
score: 0
type: Comment
has text: I've looked into this a bit more, and specifying a white background image somewhere in the stack isn't even needed, as long as the `mask-image` is set up correctly. In context of my div set-up ` ` I omit all background colors, specify a regular `object-position` for img 'type' (img sprite coords), and put the `mix-blend-mode`, `mask-image` and `mask-position` on img 'glint'.
type: AnswerComment

http://stackoverflow.com/a/78950336
answers question: http://stackoverflow.com/q/78950245
has body: You can achieve this effect using the rotateX property to rotate the text along the X-axis. But it is in an isometric view. To add depth, you should apply the perspective property to the parent element of the text elements. This is how you can do it: .container { display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 3rem; perspective: 200px; /* Adds a 3D perspective effect on the parent*/ } .rotate-up { transform: rotateX(30deg); /* Rotates the element 30 degrees along the X-axis */ } .rotate-down { transform: rotateX(-30deg); /* Rotate in the opposite direction */ } Tomorrow Now Yesterday
upvote count: 1
accepted answer of: http://stackoverflow.com/q/78950245
type: AcceptedAnswer
type: Answer
downvote count: 1
score: 0

http://stackoverflow.com/comment/139184885
score: 5
type: QuestionComment
type: Comment
has text: How about a ` ` tag at the start of your HTML code? It works like a stylesheet (i.e. listing the css rules, media queries etc.), but right there in the file.
comment on: http://stackoverflow.com/q/78941370

http://stackoverflow.com/a/78922158
downvote count: 0
upvote count: 1
score: 1
has body: Why not use an SVG containing a filled circle? That should mask the line underneath.
answers question: http://stackoverflow.com/q/78921797
type: Answer

http://stackoverflow.com/comment/139226123
comment on: http://stackoverflow.com/q/78960221
type: QuestionComment
has text: Does your event handler for `touchstart` run at all? Do an `alert('touched')` inside the callback to check. Maybe `window.addEventListener('touchstart')` is more effective? Or using the `click` event? Does it work if your input is not visually hidden?
type: Comment
score: 0

http://stackoverflow.com/comment/139140905
comment on: http://stackoverflow.com/q/78916876
has text: It looks as though you need some sort of object- (or background-) position and size. Do you want to have the same percentage of the image shown on any size device/container?
type: QuestionComment
type: Comment
score: 0

border-radius
tags question: http://stackoverflow.com/q/79015795
tags question: http://stackoverflow.com/q/78953804
tags question: http://stackoverflow.com/q/78973631
type: Tag
tags question: http://stackoverflow.com/q/79002494
tag name: border-radius
tags question: http://stackoverflow.com/q/79084085

http://stackoverflow.com/comment/139228306
score: 0
comment on: http://stackoverflow.com/q/78964809
has text: Have you used you devtools inspect facility to pin down exactly what CSS is being applied and from where?
type: Comment
type: QuestionComment

http://stackoverflow.com/q/78979860
has title: Can i use mixins defined in a partial that is imported in the main scss file in another partial?
score: 0
tagged with: mixins
answer count: 0
type: UnansweredQuestion
tagged with: scss-mixins
tagged with: sass
has body: I have three files: style.scss _mixins.scss _navigation.scss obviously, in _mixins.scss i have my mixins defined. In style.scss i then import these mixins with @use 'mixins';. I now also have another partial called _navigation.scss that i also imported into the main scss file using @use 'navigation';. I now want to use a mixin defined in the mixins partial, in the navigation partial. But when i try to do this i get an Error: Undefined mixin. Is what i am trying to do not possible? If so, how would i use a mixin defined in _mixins.scss in another partial?
tagged with: partials
type: Question
tagged with: css

http://stackoverflow.com/comment/139203967
type: AnswerComment
comment on: http://stackoverflow.com/a/78934162
score: 0
has text: thanks for suggesting to remove that colgroup garbage. :)
type: Comment

paragraph
type: Tag
tag name: paragraph
tags question: http://stackoverflow.com/q/79016813
tags question: http://stackoverflow.com/q/79304169

http://stackoverflow.com/comment/139401817
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/79059761
has text: you can try To style active link like this ```f12-floating-menu-6860 a:active```. You can also use eventlistener for click to toggle classes on these links

http://stackoverflow.com/q/79007505
tagged with: kendo-scheduler
accepted answer: http://stackoverflow.com/a/79007805
favorite count: 0
type: Question
tagged with: kendo-ui
answer count: 1
type: AnsweredQuestion
downvote count: 0
tagged with: scheduler
score: 1
has answer: http://stackoverflow.com/a/79007805
upvote count: 1
has title: Adjust Header Attendee name in horizontal resources grouping Kendo UI Scheduler
has body: i am using the horizontal resources grouping in Kendo UI Scheduler and I want to adjust the header attendee name same like word wrap css property so that last name will come in second line. please help me to achieve this. related dojo link Kendo UI Snippet
tagged with: css

http://stackoverflow.com/a/79034068
downvote count: 0
has comment: http://stackoverflow.com/comment/139371610
has comment: http://stackoverflow.com/comment/139370639
has comment: http://stackoverflow.com/comment/139366802
has comment: http://stackoverflow.com/comment/139363320
type: AcceptedAnswer
score: 2
upvote count: 2
has body: As mentioned by @temani-afif, the correct syntax is: .my-element { color: rgb(from #aaaaaa calc(r + 30) g calc(b - 30) / 80%); } Then, to get the computed color, you can use getComputedStyle (I changed #aabbcc to #aaaaaa for better representation): const element = document.querySelector('.my-element'); const computedStyle = getComputedStyle(element); const color = computedStyle.color; console.log(color); .my-element { color: rgb(from #aaaaaa calc(r + 30) g calc(b - 30) / 80%); } Some Text Additionally, if you want to convert that to rgba: function srgbToRgb(srgb) { const match = srgb.match(/^color\(srgb\s+(.+?)\s+(.+?)\s+(.+?)\s+\/\s+(.+?)\)$/); if (!match) { throw new Error('Invalid srgb color'); } const r = Math.round(parseFloat(match[1]) * 255); const g = Math.round(parseFloat(match[2]) * 255); const b = Math.round(parseFloat(match[3]) * 255); const a = parseFloat(match[4]); return `rgba(${r}, ${g}, ${b}, ${a})`; } const element = document.querySelector('.my-element'); const computedStyle = getComputedStyle(element); const color = computedStyle.color; console.log(srgbToRgb(color)); .my-element { color: rgb(from #aaaaaa calc(r + 30) g calc(b - 30) / 80%); } Some Text
type: Answer
answers question: http://stackoverflow.com/q/79034015
accepted answer of: http://stackoverflow.com/q/79034015

http://stackoverflow.com/comment/139380477
type: Comment
comment on: http://stackoverflow.com/a/79047401
score: 0
type: AnswerComment
has text: Thank you very much @Temani, this is a great solution!

http://stackoverflow.com/comment/139366184
type: Comment
score: 0
comment on: http://stackoverflow.com/a/79039619
type: AnswerComment
has text: This works, but if you reduce the size of `.chart__datasets` now, you will see that `.chart__datasets` and `.chart__canvas` are not centered on `.chart`, because `.chart__header` shifts them. Therefore, I absolutely positioned `.chart__header`

http://stackoverflow.com/comment/139195886
comment on: http://stackoverflow.com/a/78946752
type: Comment
has text: @Rob it might be mine fault because more I read OP question I am getting more confused about what he wants.
score: 0
type: AnswerComment

http://stackoverflow.com/comment/139398293
type: Comment
has text: Use hash (ID) `#` when using `document.querySelector("#sidebar")`, not when using `document.getElementById("sidebar")` << no `#`
comment on: http://stackoverflow.com/q/79057850
type: QuestionComment
score: 1

css-in-js
tags question: http://stackoverflow.com/q/78946626
type: Tag
tag name: css-in-js
tags question: http://stackoverflow.com/q/79476675

http://stackoverflow.com/a/78953732
has comment: http://stackoverflow.com/comment/139207766
score: -3
has comment: http://stackoverflow.com/comment/139207464
type: Answer
upvote count: 0
has body: I found a fix. But, As I have found from the comments this does not correctly fix the error properly. As it is adding to html this will force the page image not to go 100% width of screen but i will simply hide the overflowing part so it is not a good solution. html { overflow-x: hidden; /* Prevents horizontal scrolling */ }
answers question: http://stackoverflow.com/q/78951420
downvote count: 3
has comment: http://stackoverflow.com/comment/139207782

http://stackoverflow.com/comment/139345261
type: QuestionComment
comment on: http://stackoverflow.com/q/79028399
score: 1
type: Comment
has text: Please provide enough code so others can better understand or reproduce the problem.

http://stackoverflow.com/comment/139177243
type: QuestionComment
has text: @RokoC.Buljan I added information: An example of the category would be 'Literature' --> lowercased 'literature'. Should I pass color on hover in html then?
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78937138

http://stackoverflow.com/comment/139281351
type: QuestionComment
comment on: http://stackoverflow.com/q/78993739
has text: @AKX it seems you can by disabling some security on the settings, I read it here https://stackoverflow.com/a/47458780
type: Comment
score: 0

http://stackoverflow.com/a/78966573
answers question: http://stackoverflow.com/q/78966516
score: 1
accepted answer of: http://stackoverflow.com/q/78966516
type: AcceptedAnswer
type: Answer
downvote count: 0
upvote count: 1
has body: You could make the webpage, that is contained in the iframe, invisible. For instance with: And then add to the stylesheet: body { display: initial !important; } to make the content visible when the stylesheet has loaded. I haven't tested this in practice, but I think it should work.
has comment: http://stackoverflow.com/comment/139231701

http://stackoverflow.com/q/78966188
type: Question
tagged with: megamenu
tagged with: jsx
tagged with: reactjs
score: 0
tagged with: css
has title: How do I duplicate my react megamenu? Every attempt leads to a frozen or poorly formatted megamenus
has body: I attempted to create a megamenu for the first time. I created it for one option in my navigation bar and now I want to duplicate it for the other options I have. Here is the code I have for my current working megamenu, which file am I supposed to work on to create separate megamenus from the first one I created? App.js: import './App.css'; import {Navbar} from "./components/Navbar"; import { NavItem } from './components/NavItem'; import { DropdownMenu } from './components/DropdownMenu'; function App() { return ( <DropdownMenu /> ); } export default App; NavItem.js: import React, {useState} from 'react' import { CSSTransition } from 'react-transition-group'; export const NavItem = (props) => { const[open, setOpen]=useState(false); return ( setOpen(!open)}> {props.link} {props.children} ) } DropdownMenu.js: import React from 'react' import DropDownItem from "./DropdownItem" import img from "../components/img/support.jpg" export const DropdownMenu = () => { return ( Products and Services Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Cloud Solutions Managed Services IT Security Desktop Support Network Solutions Consulting Support ) } DropdownItem.js: import React from 'react' export default function DropdownItem(props) { return ( {props.children} ) } Index.css: body { margin: 0; font-family: Helvetica; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } :root{ --bg:white; --bg-secondary:#474747; --text-color: black; --border: 1px solid #9c9a9a; } ul{ list-style: none; margin: 0; } a{ color: var(--text-color); /*text-align: center;*/ text-decoration: none…
answer count: 0
type: UnansweredQuestion

http://stackoverflow.com/comment/139315871
type: QuestionComment
has text: I get `Please try again.` error with that password.
comment on: http://stackoverflow.com/q/79012618
type: Comment
score: 0

http://stackoverflow.com/a/79065494
has comment: http://stackoverflow.com/comment/139421385
answers question: http://stackoverflow.com/q/79059761
accepted answer of: http://stackoverflow.com/q/79059761
type: AcceptedAnswer
type: Answer
has body: You can add an event listener to each link in your floating menu that toggles a class on click. This will allow you to persist the active state across clicks. document.addEventListener('DOMContentLoaded', function () { const menuItems = document.querySelectorAll('.element-to-highlight a'); menuItems.forEach(item =&gt; { item.addEventListener('click', function () { // Remove the 'active' class from all items menuItems.forEach(link =&gt; link.classList.remove('active')); // Add the 'active' class to the clicked item this.classList.add('active'); }); }); }); Then write the CSS to highlight the link when it's active, for example: .element-to-highlight a.active { color: red; background-color: yellow; }
score: 0

http://stackoverflow.com/comment/139344917
type: AnswerComment
score: 1
comment on: http://stackoverflow.com/a/79028000
has text: The generator I used basically doesnt seem to be intelligent enough to detect corners and know it needs to put a point in the output polygon there. It probably could be fixed, but there's probably also other tools that do this (figma maybe? something like that). The other problem is that it generates many points for flat lines that really only need 2. I used https://unused-css.com/tools/clip-path-generator to clean up the points on the output polygon.
type: Comment

http://stackoverflow.com/comment/139155773
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78925311
type: QuestionComment
has text: I don't see anything weird, but I believe `colspan="100%"` isn't valid. It might be read as `colspan="100"`? See: [MDM](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td#colspan) or https://stackoverflow.com/questions/398734/colspan-all-columns

http://stackoverflow.com/comment/139310629
comment on: http://stackoverflow.com/q/79009672
has text: it depends on how you create the triangles so share your code
type: QuestionComment
score: 1
type: Comment

http://stackoverflow.com/comment/139389385
comment on: http://stackoverflow.com/a/79051465
type: Comment
score: 0
has text: Ahhh thank you so much! This did exactly what I wanted. <3
type: AnswerComment

http://stackoverflow.com/comment/139360454
comment on: http://stackoverflow.com/q/79037039
type: Comment
score: 0
has text: Consider using SVG for this stuff. It would be much easier.
type: QuestionComment

http://stackoverflow.com/comment/139319340
type: Comment
has text: Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/) using the `<>` icon. See [**How to create a Minimal, Reproducible Example**](http://stackoverflow.com/help/reprex)
score: 0
comment on: http://stackoverflow.com/q/79013734
type: QuestionComment

http://stackoverflow.com/comment/139203548
comment on: http://stackoverflow.com/a/78951599
has text: read again. I agree that it is not clean. It however is incorrect to state that percentages are fixed values. They are not, they are responsive.
type: Comment
score: 0
type: AnswerComment

http://stackoverflow.com/q/79029152
score: 1
favorite count: 0
has title: Styling Static and dynamic textareas in phoenix liveview
possible better answer: http://stackoverflow.com/a/79051626
tagged with: phoenix-live-view
type: Question
tagged with: textarea
tagged with: elixir
has body: I have an html.heex file that has both a static textarea tag and a dynamic textarea denoted like so <.input type='textarea' />. I encounter problems when I try to style both of them independently. I have a feeling the problem has to do with the way I'm accessing the dynamic textarea in my css with form textarea - the current problem is that the styling with form textarea overrides what's in .line-numbers and I cannot for the life of me adjust the width of the dynamic textarea. I'll post pictures below for a clearer understanding of the layout. But here's the code I have now: html.heex: <%= "1\n" %> <.input field={@form[:markup_text]} type="textarea" class="markup-input" placeholder="Insert code..." spellcheck="false" autocomplete="off" phx-debounce="blur" /> css file: form textarea { @apply bg-emDark-dark font-brand font-regular text-xs border border-white h-[300px] resize-none; border-top-left-radius: 0 !important; /*!important seems to be a cheat code when css is misbehaving. doesn't work otherwise*/ border-top-right-radius: 0 !important; color: white !important; margin-top: 0 !important; width: 300px !important; /*This affects both textareas but I want it to only affect the dynamic textarea*/ } form textarea { @apply focus:outline-none focus:border-white } .line-numbers { @apply border border-white font-brand font-regular text-xs text-emDark-light bg-emDark-dark h-[300px] w-[54px] text-right overflow-hidden resize-none; border-right: none; border-top: none; } .line-numbers:focus { @apply focus:outline-none focus:border-white focus:ring-0; } As you can see I have a bunch of !important thrown everywhere in the code which is not ideal, but for some reason nothing works otherwise. I just need to know the right way to work with dynamic textareas and how to style them to prevent this hacky way of doing things. The first image is what I currently have and the second image is what I'm working towards. I think a summary of the problem is this: The only way a style actuall…
has comment: http://stackoverflow.com/comment/139377923
downvote count: 0
accepted answer: http://stackoverflow.com/a/79057154
type: AnsweredQuestion
has comment: http://stackoverflow.com/comment/139377786
has answer: http://stackoverflow.com/a/79051626
answer count: 2
upvote count: 1
tagged with: css
has answer: http://stackoverflow.com/a/79057154

http://stackoverflow.com/comment/139387114
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/79044811
has text: May be you can add the hover effect on the svg element itself, instead of the svg-container. That would mean that it will made dull only when we go over the svg.
type: Comment

http://stackoverflow.com/comment/139268128
score: 0
type: AnswerComment
has text: THIS WAS IT! I probably have to take out some of the other measures it took to try to get here, but yeah - this was it! Thanks so much.
comment on: http://stackoverflow.com/a/78986573
type: Comment

http://stackoverflow.com/a/78934714
has comment: http://stackoverflow.com/comment/139175112
answers question: http://stackoverflow.com/q/78934678
downvote count: 0
has body: The code block you pointed out actually works, and the issue isn’t with justify-between. The reason it didn't expand in width is that it's indirectly within a flex container. When inside a flex container, if you don't add flex-grow to the child elements, they will shrink to the content size. So the solution is quite simple: in Tailwind, you just need to add grow to the child element. &lt;script src="https://cdn.tailwindcss.com"&gt;&lt;/script&gt; &lt;div class="calendar-container mx-10 my-5 rounded-md border border-black bg-green-400 py-10"&gt; &lt;div class="appointment-counselor-container mx-5 flex justify-between"&gt; &lt;div class="text-2xl font-semibold text-green-700"&gt; &lt;h1&gt;Appointments&lt;/h1&gt; &lt;/div&gt; &lt;!-- Counselor toggle --&gt; &lt;div class="relative select-none grow"&gt; &lt;!-- This section now works because the parent container adds `grow` --&gt; &lt;div id="counselor-lists" class="bg-berde flex w-full cursor-pointer items-center justify-between rounded px-10 py-1 text-white"&gt; &lt;div class="my-auto"&gt; &lt;h1 id="selected-counselor"&gt;Counselor 1&lt;/h1&gt; &lt;/div&gt; &lt;div class="text-lg"&gt; &lt;p&gt;&amp;#8744;&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- Counselor toggle end --&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; Here's an example that better fits your design: &lt;script src="https://cdn.tailwindcss.com"&gt;&lt;/script&gt; &lt;div class="calendar-container mx-10 my-5 rounded-md border border-black bg-green-400 py-10"&gt; &lt;div class="appointment-counselor-container mx-5 flex gap-4"&gt; &lt;div class="text-2xl font-semibold text-green-700"&gt; &lt;h1&gt;Appointments&lt;/h1&gt; &lt;/div&gt; &lt;!-- Counselor toggle --&gt; &lt;div class="relative grow select-none"&gt; &lt;!-- This section now works because the parent container adds `grow` --&gt; &lt;div id="counselor-lists" class="bg-berde ml-auto flex max-w-64 cursor-pointer items-center justify-between rounded bg-green-700 px-4 py-1 text-white"&gt; &lt;div class="…
upvote count: 1
score: 1
type: Answer

http://stackoverflow.com/comment/139152887
type: QuestionComment
has text: The `div` does not have white background.
comment on: http://stackoverflow.com/q/78923418
type: Comment
score: 0

http://stackoverflow.com/comment/139152766
type: QuestionComment
has text: Is it this? 1. The animation should only work if the characters are longer than the box, 2. When it reaches the front and end of the characters, it should move in reverse.
score: 1
type: Comment
comment on: http://stackoverflow.com/q/78923868

http://stackoverflow.com/comment/139143771
has text: As soon the client receives your html it will try to load the css from your server. You could analyse the inputstream and send either the html or the css depending on the request path.
comment on: http://stackoverflow.com/q/78918262
type: Comment
score: 0
type: QuestionComment

http://stackoverflow.com/comment/139137519
has text: I already have the tab functing as you suggest i.e clicking a heading shows the corresponding content. what`s lacking is dispyaing a separate div just beneath the tab section based on which tab is active.
comment on: http://stackoverflow.com/a/78915863
type: Comment
score: 0
type: AnswerComment

http://stackoverflow.com/comment/139168185
comment on: http://stackoverflow.com/q/78932133
type: Comment
has text: You need to add `flex-wrap: wrap` as well, to allow the items to break into multiple rows; and then specify a proper width. Since `gap: 20px` is also applied to this list, you'll need to reduce the width of the items accordingly, so `width: calc(50% - 10px)`
type: QuestionComment
score: 1

asp.net-mvc
tag name: asp.net-mvc
tags question: http://stackoverflow.com/q/78989748
type: Tag
tags question: http://stackoverflow.com/q/79167618
tags question: http://stackoverflow.com/q/79196050
tags question: http://stackoverflow.com/q/79357257
tags question: http://stackoverflow.com/q/79320512
tags question: http://stackoverflow.com/q/79430358

http://stackoverflow.com/comment/139136521
has text: I tried your solution but the hamburger menu is messed up when I do that. As in the top bar is thicker than the bottom 2 bars. I will post a picture in the question.
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78915276

http://stackoverflow.com/a/79056626
answers question: http://stackoverflow.com/q/79029787
has body: The contents of src/styles/* can be included in the plugin by adding the file field to your block-name/package.json with the folder to include: package.json { "name": "block-name", // your block ... "files": [ "src/styles/*" ] } As you created the block with @wordpress/create-block, you can use npm run plugin-zip to build your block plugin to include all files under src/styles into the final plugin.zip file. Note: the file path in the zip will be src/styles/ not build/styles so remember to update wp_enqueue_style path to match. The Enqueuing assets in the Editor documentation may also be helpful if your admin.css is block specific.
score: 0
type: Answer

http://stackoverflow.com/comment/139165554
type: Comment
comment on: http://stackoverflow.com/q/78928449
score: 0
type: QuestionComment
has text: Sure, you just have to do more work in React to wrap Custom Elements/Web Components: https://react.dev/reference/react-dom/components#custom-html-elements

http://stackoverflow.com/comment/139176793
type: Comment
has text: Added alternative solution
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78935948

http://stackoverflow.com/a/79053907
downvote count: 0
type: Answer
has body: Your major problem is not creating those SVGs, but handling duplicate IDs in multiple SVGs You did not have to face those ID issues yet because your are still working with ONE SVG Creating NameSpaced SVG nodes is a PITA! The Browser will do all the Namespaces for you when you provide a SVG as HTML String You are also going to run into ID troubles, because those are global Thus your following SVGs (with that same ID) will use the already existing SVG elements in the page. I have fixed it for the <path>; otherwise <use> would use the first matching ID (set by the first SVG) and (second word) "TTE" would be displayed as "TEX" (first word letters) But blur-letter-path is still the same global but duplicate ID. So all words use the def from the first SVG. (see TTE in SO snippet still has TEXT as blurred background) For you to fix. Note: I would say "shadowDOM" is an option here, as it can scope styles to one word. Wrapping your code in a native Web Component will simplify your code AND usage in HTML (do read this weeks X comments, some "gurus" still claim Web Components suck) No more need for querySelectorAll("LI") or DOMContentLoaded as Web Components automagically upgrade. Yes! also when you do document.body.append(document.createElement("svg-word") anytime later. When you define the Web Component at start or end of page-load, doesn't matter when or how (script or import) All HTML required is: TEXT TTe EXET Full working code: disclaimer: I probably missed something; refactoring this type of code is not something done in 5 minutes. (My GPT Bot can create NEW (but half baked) Web Components in 20 seconds) Code below also available as JSFiddle: https://jsfiddle.net/WebComponents/5g0xvne6/ customElements.define( "svg-word", class extends HTMLElement { connectedCallback() { // default method when is created in the DOM setTimeout(() => { // wait till innerHTML (word) is parsed by the browser const letterPaths = { E: "54.099;M56.6 74.805c0 3.127-1.564 4.69-4.692 4.69H7.191c-3…
has comment: http://stackoverflow.com/comment/139391755
upvote count: 1
answers question: http://stackoverflow.com/q/79053510
has comment: http://stackoverflow.com/comment/139391925
score: 1

http://stackoverflow.com/a/79016335
has body: You can use PHP explode() function to convert the comma separated string of Size attributes term names to an array of term names… Then you can easily embed each size (term) individually in a tag, via a foreach loop. To finish, implode() PHP function will allow converting back the array of formatted HTML terms back into a string. Try to replace your last function with the following: function show_attribute( $product, $attr_title, $attr_name ) { if ( 'sku' === $attr_name ) { $attr = (string) esc_html( $product->get_sku() ); } else { $attr = $product->get_attribute( $attr_name ); if ( ! $attr ) { return; } $attr = explode( ', ', $attr ); // convert the coma separated string to an array $attr_arr = []; // Initialize // Loop through the term names foreach ( $attr as $term_name ) { // Embed each term in a span tag $attr_arr[] = sprintf('%s', $term_name); } // Convert back the array of formatted html term names to a string $attr = implode(' ', $attr_arr); } if ( '' === $attr ) { return; } printf( ' %s: %s ', $attr_title, $attr); } Then for CSS styling you can add the following rules (adapting them to your needs): .custom-attributes-text {margin-bottom:12px; color:black;} .custom-attributes-text > span.attr-term {display:inline-block; border:solid 1px #cccccc; padding:0 5px; margin:0 2px;} You will get something like:
accepted answer of: http://stackoverflow.com/q/79014805
score: 1
type: AcceptedAnswer
type: Answer
downvote count: 0
answers question: http://stackoverflow.com/q/79014805
upvote count: 1

http://stackoverflow.com/comment/139254983
has text: From what I've seen looking it up today, `:is` may actually have a barely any performance hit when used that way, I guess I just assumed it would be slower
type: Comment
score: 0
comment on: http://stackoverflow.com/a/78975278
type: AnswerComment

http://stackoverflow.com/comment/139360335
has text: that didnt worked.
type: Comment
score: 0
comment on: http://stackoverflow.com/q/79033378
type: QuestionComment

http://stackoverflow.com/a/78912920
downvote count: 0
type: Answer
answers question: http://stackoverflow.com/q/78912664
has comment: http://stackoverflow.com/comment/139132835
upvote count: 1
has comment: http://stackoverflow.com/comment/139132677
score: 1
has body: Your code is not working because you have oninput=" amount.value=rangeInput1.value" on the form which initially is undefined, hence first-time slider drag gives you an error, and then it starts working. In my opinion, it's not required at all, so remove it. Also, use the || operator to combine multiple conditions into one to cut down multiple if-else statement Now to achieve what you want create another common function where you check check-box is checked or not, and based on that do the functionality. Now call this function on range slider change as well as check-box change too A pointer: Always use meaningful names for functions and classes. Working snippet: const music = new Audio('https://tim-school.com/codepen/bells2/miss.mp3'); const seeker = document.querySelector('#rangeInput1'); music.addEventListener('timeupdate', () => { const percent = music.currentTime / music.duration * 100; seeker.value = percent; updateRangeSlider(); }); seeker.addEventListener('input', (e) => { music.currentTime = e.target.value / 100 * music.duration; }); document.querySelector('#play-button').addEventListener('click', () => { music.play(); }); updateRangeSlider(); function updateRangeSlider() { var rangeInput1 = document.getElementById("rangeInput1").value if (rangeInput1 == 0 || rangeInput1 == 40 || rangeInput1 == 80) { $("#myform2 :checkbox").prop("checked", true); updateAudioCss(); } if (rangeInput1 == 20 || rangeInput1 == 60 || rangeInput1 == 100) { $("#myform2 :checkbox").prop("checked", false); updateAudioCss(); } } // This is what i want when rangeInput1 changes the PROP $('#myform2 :checkbox').change(function() { updateAudioCss(); }); function updateAudioCss() { if ($('#myform2 :checkbox').is(':checked')) { $(".hotelsign").css({ 'display': 'none' }); } else { $(".hotelsign").css({ 'display': 'block' }); } } .hotelsign { position: absolute; top: 10px; left: 200px; width: 50px; height: 50px; background-color: black; } Play

http://stackoverflow.com/comment/139332966
type: Comment
score: 1
has text: In 2012, render blocking was already a thing, and the first comment in the question you link to asks "Is your CSS/Javascript in your head tag?" and the question notes that the behaviour seems worse in Firefox. Firefox's behaviour was definitely different when the stylesheet links were in the body element - see https://jakearchibald.com/2016/link-in-body/#changes-to-chrome for details.
type: QuestionComment
comment on: http://stackoverflow.com/q/79021080

http://stackoverflow.com/comment/139391466
comment on: http://stackoverflow.com/a/79053860
type: Comment
has text: I need only page scroll, i dont need internal vertical scroll in table, i cant use height for table, it can be 100% of height
score: 0
type: AnswerComment

http://stackoverflow.com/a/78986746
has body: this is because nth:child selector is not ment to be used for IDs. The point is, you can have multiple elements with same class but element IDs need to be unique and specific to one and only one element. (Multiple elements with same ID is not valid html)
answers question: http://stackoverflow.com/q/78962162
score: 0
type: Answer

http://stackoverflow.com/comment/139392157
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/79047525
has text: @CarlColijn Yes, the background is just for demonstration purpose. For this to work you only need 1) the main image, 2) the effect image (glint), 3) the mask image (in this case is the main image itself), and 4) matching the coordinates of the image(s) and the mask correctly when using sprites instead of individual images.

http://stackoverflow.com/a/78925479
score: 1
type: AcceptedAnswer
type: Answer
answers question: http://stackoverflow.com/q/78925434
downvote count: 0
accepted answer of: http://stackoverflow.com/q/78925434
upvote count: 1
has body: Add vertical-align: top; to all inline-blocks to align them equally. Otherwise the default vertical alignment of baseline (for inline-blocks) is applied, which can lead to confusion when there is text versus no text inside the different elements (i.e. in your instance the first line of text inside the middle block is aligned to the bottom of the empty inline-blocks at the right and left). body { background: black; } .PlusButton { background-color: blue; width: 100px; height: 100px; display: inline-block; vertical-align: top; } .Counter { display: inline-block; background-color: #fff; width: 200px; height: 100px; text-align: center; color: #282c34; display: inline-block; vertical-align: top; } .MinusButton { background-color: blue; width: 100px; height: 100px; display: inline-block; vertical-align: top; } .ContainerDiv { display: inline-block; vertical-align: center; text-align: center; } 100
has comment: http://stackoverflow.com/comment/139158176
has comment: http://stackoverflow.com/comment/139156019

http://stackoverflow.com/comment/139173356
has text: This worked, thanks a lot. I just started to learn a few weeks ago, so I'm still wrapping my head around how everything works. If you have any comments that might help me polish out those minor UI issues you mention I would appreciate it. In any case I'm sure I will work them out over time as I continue to learn. Once again, thanks!
type: AnswerComment
comment on: http://stackoverflow.com/a/78930741
score: 1
type: Comment

http://stackoverflow.com/comment/139425115
type: Comment
comment on: http://stackoverflow.com/a/79062162
score: 0
type: AnswerComment
has text: How can it work on any elements?

http://stackoverflow.com/comment/139281388
comment on: http://stackoverflow.com/a/78993718
type: Comment
score: 0
type: AnswerComment
has text: it's 1000% the same. from the duplicate: *In summary, don't use justify-content: flex-end but rather put a margin-top: auto on the first child.*. That's what you are doing.

http://stackoverflow.com/comment/139228256
comment on: http://stackoverflow.com/q/78964809
type: Comment
score: 0
has text: I've made a codepen for it, however the issue isnt replicatable in that environment - so i probably need to take this up in the laytheme forum... https://codepen.io/usefulpattern/pen/yLdZXmV
type: QuestionComment

http://stackoverflow.com/comment/139393427
type: QuestionComment
comment on: http://stackoverflow.com/q/79054912
type: Comment
has text: @FabrizioCalderan I have had numerous questions closed recently for having too broad a question (in the Blazor topics). So I am now writing very very focused questions to not get hit for that. Personally I agree with you - but I'm following the rules as they're being enforced.
score: 0

salesforce-lightning
tags question: http://stackoverflow.com/q/79012154
tags question: http://stackoverflow.com/q/79003152
tags question: http://stackoverflow.com/q/78960605
type: Tag
tag name: salesforce-lightning
tags question: http://stackoverflow.com/q/79506571

http://stackoverflow.com/comment/139281835
has text: Right. Since, as said, you can't refer to local files from remote origins due to security reasons, you'll just need to use a [`local(...)`](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/src#local()) source for the font and have it installed on the machine(s).
type: QuestionComment
comment on: http://stackoverflow.com/q/78993739
type: Comment
score: 0

http://stackoverflow.com/comment/139352995
comment on: http://stackoverflow.com/q/79032875
score: 2
type: Comment
type: QuestionComment
has text: Don't forget `calc` is CSS... (and that is CSS, not CCS ;))

http://stackoverflow.com/comment/139232862
type: Comment
has text: Do you want them to all always be 200px wide? Or do you want them always to be the width of the smallest image, regardless of how wide the smallest image is? The first can be done with just CSS. The second needs JavaScript.
comment on: http://stackoverflow.com/q/78967340
score: 5
type: QuestionComment

http://stackoverflow.com/comment/139283251
type: QuestionComment
has text: Try to remove `<!DOCTYPE` declaration.
comment on: http://stackoverflow.com/q/78994346
type: Comment
score: 0

http://stackoverflow.com/q/78947941
has body: scss modules (file.module.scss) does supposrt webpack if yes then how because I am getting undefined styles and file not loading in prod I tried webpack latest and style loader (for prod minicssexractplugin) , css loader , sass loader in webpack config but after build deploy to prod unable to load content error getting for file.module.scss file and in console undfined styles object in react project expecting to work scss module file.module.scss with webpack
has title: scss modules (file.module.scss) does supposrt webpack if yes then how because I am getting undefined styles and file not loading in prod
type: UnansweredQuestion
tagged with: webpack-5
type: Question
tagged with: build
tagged with: sass
tagged with: reactjs
score: 0
answer count: 0
tagged with: css

http://stackoverflow.com/q/78929068
type: Question
tagged with: streamlit
has comment: http://stackoverflow.com/comment/139172698
has body: st.file_uploader() ` Tried the custom css, but class name got changed Had also tried the bidirectional way using custom component but it didn’t worked had used JavaScript to handle the file and rendered it in streamlit app but was receiving deltagenerator error.
score: 0
tagged with: python
tagged with: reactjs
tagged with: javascript
answer count: 0
tagged with: css
has title: In Streamlit framework how to customize the st.file_uploader i need only browse file button. Tried all the custom css method but didn’t worked
has comment: http://stackoverflow.com/comment/139168438
type: UnansweredQuestion

http://stackoverflow.com/comment/139232679
type: AnswerComment
comment on: http://stackoverflow.com/a/78963199
score: 0
has text: in example you apply `-webkit-line-clamp`
type: Comment

http://stackoverflow.com/comment/139304789
comment on: http://stackoverflow.com/q/79005516
type: Comment
score: 0
has text: Having the same issue in our app using NextJS and styled-components
type: QuestionComment

http://stackoverflow.com/q/79042490
type: UnansweredQuestion
score: 0
type: Question
answer count: 1
has title: Trying to create auto-resizing horizontally-scrollable background image
has body: I'm trying to recreate this webpage, and I'm looking for advice on my approach. What I'm trying to achieve: A background image with a height that always matches the screen height while preserving its aspect ratio. Additionally, I want the image to be horizontally scrollable when it's wider than the device screen. Clickable hotspots that remain fixed on particular positions on the background image, regardless of screen size. Here's my current setup: CodeSandBox export const Bedroom = ({ blurDataURL, hotspots }: BedroomProps) => { return ( {/* I aim to resize this image so that its height matches the screen height while preserving its aspect ratio. Additionally, I want the image to be horizontally scrollable when it's wider than the device screen. Ideally, I would also remove the object-cover property as it woulld affect the hotspots' positioning. My tech stack includes Next.js, Tailwind CSS, and Typescript. */} <Image src={src} alt={title} placeholder="blur" blurDataURL={blurDataURL} width={4000} height={2500} className={cn("h-full w-full object-cover")} /> {hotspots.map((hotspot, index) => ( {hotspot?.name} ))} ); };
has answer: http://stackoverflow.com/a/79048192
tagged with: tailwind-css
tagged with: reactjs
tagged with: javascript
tagged with: responsive-design
tagged with: css

http://stackoverflow.com/comment/139297258
type: QuestionComment
has text: The HTML is invalid. Valid content of `p` is [phrasing content](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#phrasing_content)
comment on: http://stackoverflow.com/q/79002259
type: Comment
score: 0

http://stackoverflow.com/comment/139542829
score: 0
type: QuestionComment
has text: I find the class names in the component's api page (scroll down to the api section, click on the DataGrid link and scroll to the section called [CSS classes](https://mui.com/x/api/data-grid/data-grid/#classes)) and sorry for the late reply :)
type: Comment
comment on: http://stackoverflow.com/q/79054759

http://stackoverflow.com/comment/139417725
type: Comment
comment on: http://stackoverflow.com/q/79068052
score: 0
has text: Im kinda new with js but I think I use local storage I can give you the website its https://betl.gr when you are in the home page by clicking the logo on the nav bar it will change the website to dark mode and if you go to another page it will not work if you have something in mind on how to fix it I would be grateful
type: QuestionComment

http://stackoverflow.com/a/78982748
has comment: http://stackoverflow.com/comment/139261313
type: Answer
has body: I managed to get it working the way I wanted it to by adding a min-width to the table header, while using the same CSS file: Type MP Name Element Range Potency (Physical) Base Potency (Martial/Breath) Filter Rank Filter Colour Filter Type Filter Element Description
answers question: http://stackoverflow.com/q/78979166
score: 0

http://stackoverflow.com/comment/139411185
score: 1
type: Comment
has text: Your HTML is invalid. A ` ` cannot be a child of ` `
type: QuestionComment
comment on: http://stackoverflow.com/q/79064004

http://stackoverflow.com/comment/139404805
type: Comment
score: 0
has text: your attempts should not get posted as an answer, and the information provided should be included in the main question.
type: AnswerComment
comment on: http://stackoverflow.com/a/79058399

http://stackoverflow.com/q/79027042
answer count: 0
tagged with: css
has title: Sticky Table Cell Offset Calculation Not Working in Custom Component
tagged with: angular
type: UnansweredQuestion
has body: I am working on a custom Angular component for a table that utilizes sticky positioning for certain cells. My goal is to have the first column stick to the left of the table, and the subsequent sticky columns to adjust their position based on the widths of previous sibling cells. Here is my ApUiTdComponent implementation: import { CommonModule } from '@angular/common'; import { AfterViewInit, Component, ElementRef, HostBinding, Input, Renderer2 } from '@angular/core'; @Component({ selector: 'ui-td', standalone: true, templateUrl: './td.component.html', styleUrls: ['./td.component.css'], imports: [CommonModule], }) export class ApUiTdComponent implements AfterViewInit { @Input() public fixed: 'LEFT' | 'RIGHT' | null = null; private _offsetLeft = 0; constructor( private el: ElementRef, private renderer: Renderer2, ) {} @HostBinding('style') public get styleBindings(): { [key: string]: string | null } { const baseStyles = { position: this.fixed ? 'sticky' : null, backgroundColor: 'white', }; if (this.fixed === 'LEFT') { return { ...baseStyles, left: `${this._offsetLeft}px`, boxShadow: '3px 0px 5px rgba(0, 0, 0, 0.1)', }; } else if (this.fixed === 'RIGHT') { return { ...baseStyles, right: '0px', boxShadow: '-3px 0px 5px rgba(0, 0, 0, 0.1)', }; } else { return {}; } } public ngAfterViewInit(): void { this.calculateOffset(); } private calculateOffset(): void { if (this.fixed === 'LEFT') { let offset = 0; let sibling = this.el.nativeElement.previousElementSibling; // Loop through all previous siblings while (sibling) { const siblingTag = sibling.tagName; const siblingWidth = sibling.offsetWidth; const siblingFixedAttr = sibling.getAttribute('fixed'); console.log({ siblingTag, siblingWidth, siblingFixedAttr, }); if (siblingTag === 'UI-TD' && siblingFixedAttr === 'LEFT') { offset += siblingWidth; } sibling = sibling.previousElementSibling; } this._offsetLeft = offset; } } } In my template, I am using the component like this: @for (todo of (data$ | async)?.data; track $index)…
type: Question
tagged with: http://stackoverflow.com/tag/html
score: 0
tagged with: javascript

http://stackoverflow.com/a/78915519
answers question: http://stackoverflow.com/q/78914275
accepted answer of: http://stackoverflow.com/q/78914275
type: AcceptedAnswer
downvote count: 0
type: Answer
has body: Make .overlap child of .blue and .blue child of .red, then change the condition of .red a bit. :root { --line: 1px; --side: 1vmin; --size: max(min(100vh, 50vw), min(50vh, 100vw)); --font: calc(var(--size) / 20); --rect: calc(var(--size) * 0.666 - var(--line)); --drop: calc(var(--rect) * 0.5); --edge: calc(var(--drop) - var(--side)); --red: #9009; --blue: #0099; --bg: #040; } body { margin: 0; height: 100vh; color: #ddd; background-color: #222; font-size: 0; display: flex; justify-content: center; align-items: center; } @media (aspect-ratio < 1/1) { main { width: var(--size); } } div { position: relative; box-sizing: border-box; } div[id] { font-size: var(--font); display: inline-block; width: var(--size); height: var(--size); border: var(--line) solid #ddd; p { position: absolute; pointer-events: none; z-index: 1; span { display: block; width: var(--rect); margin-top: 0.5em; font-size: 0.7em; } } div.red, div.blue, div.overlap { width: var(--rect); height: var(--rect); border: var(--side) solid red; } div.red:hover:not(:has(.blue:hover)), div.red:has(.overlap:hover) { background-color: var(--red); } div.blue { border-color: blue; &:hover { background-color: var(--blue); } } &#three { .blue { position: absolute; top: var(--drop); left: var(--drop); } .overlap { position: absolute; width: var(--drop); height: var(--drop); border-color: transparent; } } } Three overlapping divsRoll over either square to highlight itRoll over the intersection to highlight both squares
upvote count: 6
score: 6

http://stackoverflow.com/comment/139434900
has text: @Samuel Welcome
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/79056370

http://stackoverflow.com/comment/139374984
has text: You got me thinking that javascript is going to be much easier... So i have used jquery, and got a very nice simple solution that works well.
comment on: http://stackoverflow.com/a/79044672
type: Comment
score: 0
type: AnswerComment

http://stackoverflow.com/comment/139149510
type: AnswerComment
score: 1
has text: + means 'immediately following sibling' while ~ means 'any following sibling'
type: Comment
comment on: http://stackoverflow.com/a/78921933

http://stackoverflow.com/comment/139332799
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/79018578
has text: yes its fixed now, thank you for pointing me in the right direction

web-development-server
type: Tag
tag name: web-development-server
tags question: http://stackoverflow.com/q/78974973

http://stackoverflow.com/a/78928149
upvote count: 2
has comment: http://stackoverflow.com/comment/139161138
type: AcceptedAnswer
type: Answer
score: 2
downvote count: 0
answers question: http://stackoverflow.com/q/78926774
accepted answer of: http://stackoverflow.com/q/78926774
has body: Would you like to try this? I used CSS animation-range-start, It was in the code you provided.. but it seems difficult to support it on Firefox and Safari because it's an experimental function. I've worked on the movements you want, so use the parts you can refer to! I hope it helps :) document.addEventListener('DOMContentLoaded', function() { const elementsContent = document.querySelector('.animation-content'); const elements = document.querySelectorAll('.animation'); const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { elements.forEach((element) => { element.style.animationName = 'mymove'; // add animation to div element.style.animationPlayState = 'running'; // Start animation }); observer.unobserve(entry.target); // Stop observing } }); }, { threshold: 0.8 }); // Trigger when 80% of the element is in view observer.observe(elementsContent); }); html, body { margin: 0; padding: 2vw; background: #222; } .animation-wrap { height: 300vh; background: #fff; } .animation-content { display: flex; justify-content: space-around; align-items: center; height: 100vh; position: sticky; top: 0; } .animation { view-timeline: --subjectReveal block; animation-timeline: --subjectReveal; animation-range-start: entry 200%; height: 0; /* ignore this, just for square */ width: 20vw; /* ignore this, just for square */ padding-bottom:20vw; /* ignore this, just for square */ background-color: bisque; animation-iteration-count: 1; animation-duration: 3s; animation-fill-mode: forwards; /*whenendanimation,holdstartstate*/ animation-play-state: paused; /*pausedatfirst*/ position: relative; /*Normalposition*/ } .animation:nth-child(1) { animation-delay: 0s; } .animation:nth-child(2) { animation-delay: 1.4s; } .animation:nth-child(3) { animation-delay: 2.8s; } @keyframes mymove { 0% { transform: rotate(0deg); } 25% { transform: rotate(360deg); } 100% { transform: rotate(360deg); } } div[class*="other-content"] { display: flex; align-item…

http://stackoverflow.com/comment/139220359
comment on: http://stackoverflow.com/q/78960567
has text: It’s not suitable to use scrollwidth on parent element because that includes content that is scrolled off the screen.
type: Comment
score: 1
type: QuestionComment

http://stackoverflow.com/comment/139138433
score: 0
type: AnswerComment
has text: Just quickly, I would advise you not to use inline CSS because if your products are used by companies that use WAF like Cloudflare inline CSS is deemed insecure and moving towards using CSPs that block them. speaking from my own experience. I see a CLS issue it should be fixable.
comment on: http://stackoverflow.com/a/78914236
type: Comment

http://stackoverflow.com/comment/139210957
comment on: http://stackoverflow.com/q/78955699
has text: FYI: `mb-2` stands for `margin bottom 2` and will add extra margins beneath the buttons
score: 2
type: Comment
type: QuestionComment

ios-darkmode
type: Tag
tags question: http://stackoverflow.com/q/79042462
tag name: ios-darkmode

http://stackoverflow.com/a/78921759
score: 1
answers question: http://stackoverflow.com/q/78921605
has body: A grid layout is great for this. The following property: grid-template-columns: repeat( auto-fill, minmax(calc(25% - 40px), 1fr) ) Creates a new column, as long as it can fit in the layout. The minimum size of the column must be the first value specificed in minmax(), and the maximum value is 1fr, which just equates to 1 column. IMHO, another value than calc(25% - 40px) should be used, as it is now calculating that value relative to the column. You can use gap instead to create gap between items. /* demo purpose */ body { display: flex; flex-direction: column; } .item-container { display: grid; grid-template-columns: repeat( auto-fill, minmax(25%, 1fr) ); max-width: 600px; } .item { display: flex; color: black; background-color: rgba(250, 250, 210); flex-direction: column; padding: 10px; margin: 10px; border-radius: 20px; }
type: AcceptedAnswer
accepted answer of: http://stackoverflow.com/q/78921605
type: Answer
downvote count: 0
upvote count: 1

http://stackoverflow.com/comment/139185920
comment on: http://stackoverflow.com/a/78941783
type: Comment
score: 0
type: AnswerComment
has text: The second works, but I need the first to work with grid.

http://stackoverflow.com/comment/139375841
type: QuestionComment
score: 1
comment on: http://stackoverflow.com/q/79045030
type: Comment
has text: Reported, but I'd reported a bunch of similar bugs and never heard back from them. And the bugs are still there. Like when you filter the console by the file name, it works, but it doesn't show you any new logs, unlike text-based filtering. Or like you can't use chrome:// urls in a href, but you can do it with a click listener and then chrome.tabs.create({url: 'chrome://... I doubt they pay much attention to the bug reports. I typically use Chrome -> Help -> Report an Issue for that, but to no avail.

http://stackoverflow.com/comment/139400392
type: Comment
comment on: http://stackoverflow.com/q/79058968
has text: The solution below seemed to work, except it doesn't restrict itself to the class. The inspector shows that the code below applied as-is simply isn't used, and defaults back to the general img styling for the sheet.
score: 0
type: QuestionComment

http://stackoverflow.com/comment/139356044
type: AnswerComment
comment on: http://stackoverflow.com/a/79033554
score: 1
has text: Just wrap an on click event handler around it
type: Comment

popover
tag name: popover
tags question: http://stackoverflow.com/q/78995412
type: Tag
tags question: http://stackoverflow.com/q/79233392
tags question: http://stackoverflow.com/q/79211407
tags question: http://stackoverflow.com/q/79440738
tags question: http://stackoverflow.com/q/79503317

http://stackoverflow.com/comment/139299908
score: 0
type: QuestionComment
has text: Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a **Stack Snippet** using the `<>` icon.. Although you have provided a link, if it was to become invalid, your question would be of no value to other future SO users with the same problem. See [**Something in my website/example doesn't work can I just paste a link**](http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to-it).
comment on: http://stackoverflow.com/q/79003457
type: Comment

http://stackoverflow.com/comment/139324704
has text: I made you a snippet. You need to wrap it is some constraining div to show the issue
type: Comment
type: QuestionComment
comment on: http://stackoverflow.com/q/79016707
score: 0

http://stackoverflow.com/comment/139185016
type: QuestionComment
comment on: http://stackoverflow.com/q/78941057
type: Comment
has text: Please show us your HTML structure and also describe in a bit more detail what is to happen - in particular when is that 3 column row to not show or do they keep building up?
score: 0

http://stackoverflow.com/comment/139300112
has text: Protip: Don't use line break tags for spacing. That's not their purpose. Use margin, padding, flexbox spacing, etc.
comment on: http://stackoverflow.com/q/79003946
type: Comment
score: 0
type: QuestionComment

http://stackoverflow.com/comment/139176699
type: Comment
has text: 'f ' is just the data of cell not a part of structure. Using &nbsp; shows extra column.
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78935678

colors
tags question: http://stackoverflow.com/q/78946419
tags question: http://stackoverflow.com/q/79034015
tag name: colors
type: Tag
tags question: http://stackoverflow.com/q/79241038
tags question: http://stackoverflow.com/q/79313417
tags question: http://stackoverflow.com/q/79362013
tags question: http://stackoverflow.com/q/79312483
tags question: http://stackoverflow.com/q/79455257
tags question: http://stackoverflow.com/q/79526209

http://stackoverflow.com/comment/139294953
has text: Just, in the code you showed, you missed a `<` for the h1 tag
type: Comment
comment on: http://stackoverflow.com/q/79000934
score: 1
type: QuestionComment

http://stackoverflow.com/a/78924208
upvote count: 4
score: 4
downvote count: 0
answers question: http://stackoverflow.com/q/78924175
has body: You can simulate this by using an overflowing coloration that comes from the header table,th,td { padding: 10px; border: 1px solid black; border-collapse: collapse; } th.red { position: relative; } th.red:before { content: ""; position: absolute; z-index: -1; /* a negative z-index */ inset: 0 0 -999px; /* big value for the bottom */ background: red; } table { overflow: hidden; /* hide the overflow of the pseudo element */ isolation: isolate; /* make sure the coloration stay within the table (create a stacking context) */ background: #f2f2f2; } q w e r t y q1 w1 e1 r1 t1 y1 q2 w2 e2 r2 t2 y2
type: Answer

http://stackoverflow.com/comment/139166919
score: 2
type: Comment
has text: If you want something that looks like a table then you may want to take a look at using [CSS grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout) instead of flexbox. Flexbox is _not_ intended to be used like this.
comment on: http://stackoverflow.com/q/78931488
type: QuestionComment

http://stackoverflow.com/comment/139363831
type: QuestionComment
score: 1
has text: Absolute positioning is relative to the nearest positioned ancestor, not to the viewport. In case you don't have positioned ancestors, it will be relative to the body, which for very long pages goes off the viewport. Fixed positioning is relative to the viewport.
comment on: http://stackoverflow.com/q/79038767
type: Comment

react-scroll
tags question: http://stackoverflow.com/q/78971122
tag name: react-scroll
type: Tag
tags question: http://stackoverflow.com/q/78960176

http://stackoverflow.com/comment/139361191
has text: wait is there a way so that when i click on one of them, itll bring the next one up to fill the gap? i dont know if that makes sense...lets say i click #two, there'll be two empty space besides #one.. is there a way to bring #three and #four to fill up that space?
score: 0
type: Comment
type: AnswerComment
comment on: http://stackoverflow.com/a/79035237

http://stackoverflow.com/comment/139173670
score: 1
has text: Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/) using the `<>` icon. See [**How to create a Minimal, Reproducible Example**](http://stackoverflow.com/help/reprex)
comment on: http://stackoverflow.com/q/78935245
type: Comment
type: QuestionComment

http://stackoverflow.com/comment/139148714
has text: Hiding the currently opened modal is actually a good trick and a working one. Thanks!
type: AnswerComment
comment on: http://stackoverflow.com/a/78921529
score: 1
type: Comment

http://stackoverflow.com/comment/139136883
type: Comment
score: 0
has text: Per the [documentation](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener), your function should be the second argument.
type: QuestionComment
comment on: http://stackoverflow.com/q/78915487

http://stackoverflow.com/comment/139317070
type: Comment
score: 0
comment on: http://stackoverflow.com/q/79013054
type: QuestionComment
has text: Thank you for sharing your attempts and findings. I've been struggling with this issue for a long time. I once solved this problem using GSAP, but GSAP is too heavy for my needs.

tabindex
type: Tag
tag name: tabindex
tags question: http://stackoverflow.com/q/79017200

http://stackoverflow.com/a/78912590
has body: OK, I feel silly but in the end it was just because I didn't have enough HTML elements to sell the illusion of an infinite marquee. I did want to try to accomplish a '.marquee__row' with only six '.marquee__row_item' elements per row but it just wasn't working. Even when I tried the solutions Andrei and Foysal have been so kind to provide. My case just had too small of a width elements (and too large of a width page) for it to work. So I duplicated the number of elements I had on the screen and wrapped it up, I made sure to give the duplicate row (I had to make two more) aria-hidden='true' too. I don't believe anything much more changed about my code except for the fact that I had to use... .marquee:hover .marquee__row { animation-play-state: paused; } To pause the animation state on children elements by simply hovering over the parent. If I hadn't then the children would be running themselves over.
type: Answer
score: 0
answers question: http://stackoverflow.com/q/78912182

http://stackoverflow.com/comment/139194468
type: Comment
score: 0
has text: I think the effect you want is using javascript [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API).
type: QuestionComment
comment on: http://stackoverflow.com/q/78946426

http://stackoverflow.com/comment/139292739
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78991280
type: QuestionComment
has text: sorry u are right! the border is set to 1px solid. and the bg of the input is set to transparent. The image of the bg i've posted shows the bg of the body. the structure is:

http://stackoverflow.com/comment/139314396
type: QuestionComment
has text: Sorry @AHaworth , I just saw that the title was misleading. I have changed it now.
comment on: http://stackoverflow.com/q/79010419
type: Comment
score: 0

http://stackoverflow.com/comment/139182748
type: AnswerComment
comment on: http://stackoverflow.com/a/78938633
has text: Done some further testing and will clarify that on my Mac, it does indeed work in Chrome, but in Safari it does not.
type: Comment
score: 0

http://stackoverflow.com/a/79000439
type: AcceptedAnswer
type: Answer
upvote count: 3
has body: This is controlled via the cross reference options with the title-delim parameter. Your YAML header should look like: --- title: "Periods are better than colons" author: "Eric" format: html crossref: title-delim: "." ---
score: 3
answers question: http://stackoverflow.com/q/79000393
downvote count: 0
accepted answer of: http://stackoverflow.com/q/79000393

http://stackoverflow.com/a/78938004
type: AcceptedAnswer
has comment: http://stackoverflow.com/comment/139178933
has comment: http://stackoverflow.com/comment/139178994
type: Answer
upvote count: 5
has body: You could consider using color-mix() in your color definition. This allows the use of the Tailwind <alpha-value> token to affect the transparency of a CSS variable that is not in HSL or RGB component format: tailwind.config = { theme: { extend: { colors: { primary: { 500: 'color-mix(in srgb, var(--color-primary-500) calc(100% * <alpha-value>), transparent)', }, }, }, }, } Example Red Theme Example Red Theme With Opacity Example Blue Theme Example Blue Theme With Opacity Alternatively, you could consider revising the CSS variable definition to be inside a Tailwind plugin. This allows the values to be manipulated to HSL or RGB component format. Then, the <alpha-value> token can be used more "natually" in a rgb() or hsl() CSS function: tailwind.config = { theme: { extend: { colors: { primary: { 500: 'rgb(var(--color-primary-500) / <alpha-value>)', }, }, }, }, plugins: [ tailwind.plugin(({ addBase, theme }) => { const toRgb = (hex) => { const r = parseInt(hex.substring(1, 3), 16); const g = parseInt(hex.substring(3, 5), 16); const b = parseInt(hex.substring(5, 7), 16); return `${r} ${g} ${b}`; }; addBase({ '.theme-red': { '--color-primary-500': toRgb(theme('colors.red.500')), }, '.theme-blue': { '--color-primary-500': toRgb(theme('colors.blue.500')), }, }); }), ], } Example Red Theme Example Red Theme With Opacity Example Blue Theme Example Blue Theme With Opacity
score: 5
answers question: http://stackoverflow.com/q/78937836
downvote count: 0
accepted answer of: http://stackoverflow.com/q/78937836

http://stackoverflow.com/comment/139315830
type: Comment
comment on: http://stackoverflow.com/a/79011686
score: 0
type: AnswerComment
has text: Oh, I realize that now.

http://stackoverflow.com/comment/139410460
type: Comment
score: 1
type: QuestionComment
has text: Would you be able to provide your sample sheet, with your initial output, and also your expected output so that we can further help you. You may use this [anonymous sheet maker](https://docs.google.com/forms/d/e/1FAIpQLSeprZS3Al0n7JiVQIEiCi_Ad9FRXbpgB7x1-Wq6iAfdmVbWiA/viewform) to create your reproducible example without your email being exposed.
comment on: http://stackoverflow.com/q/79064015

http://stackoverflow.com/comment/139157578
comment on: http://stackoverflow.com/a/78924920
type: Comment
score: 0
type: AnswerComment
has text: It was a much more effective way of doing what I wanted to do, thank you, it was very informative. @ccprog

webflow
tags question: http://stackoverflow.com/q/79001690
tag name: webflow
type: Tag
tags question: http://stackoverflow.com/q/78917961
tags question: http://stackoverflow.com/q/79355528

http://stackoverflow.com/comment/139358583
type: AnswerComment
comment on: http://stackoverflow.com/a/79035967
has text: you want to need on hover with scale padding left and right,so I am modify
type: Comment
score: 0

marquee
type: Tag
tags question: http://stackoverflow.com/q/79045395
tag name: marquee
tags question: http://stackoverflow.com/q/79510927

http://stackoverflow.com/comment/139358294
score: 1
has text: Please include your code on StackOverflow as code snippet.
type: Comment
comment on: http://stackoverflow.com/q/79035820
type: QuestionComment

http://stackoverflow.com/a/78950976
answers question: http://stackoverflow.com/q/78950959
type: Answer
score: -1
downvote count: 1
has body: I am not sure if this can be done with CSS but you can easily do it with js: // The ice cream text you hover over const iceCreamHoverText = document.getElementById("ID OF ELEMENT"); // The text that shows when hovered over const iceCreamShowText = document.getElementById("ID OF ELEMENT"); iceCreamHoverText.addEventListener('mouseenter', function() { iceCreamShowText.style.visbility = 'visible'; }); iceCreamHoverText.addEventListener('mouseleave', function() { iceCreamShowText.style.visibility = 'hidden'; }); You can add this in a script tag embedded into the html page or as a seperate file you can link. make sure to change the ID's to the actual ids
upvote count: 0

http://stackoverflow.com/comment/139214076
has text: I tried the easiest option first but unless I made a mistake in the code, it didn't work - no colour change.
type: Comment
comment on: http://stackoverflow.com/a/78956442
type: AnswerComment
score: 0

http://stackoverflow.com/comment/139188032
score: 1
type: Comment
comment on: http://stackoverflow.com/q/78941370
type: QuestionComment
has text: use tailwindCss

http://stackoverflow.com/comment/139230584
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78966048
has text: @Timeless how do you get to know its `.st-bd` and not `.st-bb` or `.st-b7` or some other ?
type: QuestionComment

http://stackoverflow.com/comment/139246444
comment on: http://stackoverflow.com/q/78974610
type: QuestionComment
score: 0
has text: It isn’t stopping short. Remember that it has to leave space for descenders so it looks as though it ought to be able to get that word further to the left, but in fact there isn’t enough vertical space left.
type: Comment

http://stackoverflow.com/comment/139143094
score: 0
type: AnswerComment
has text: I tried and got the correct output, then I shared the solution with you. However, you couldn't change the 'ParentNav' and your negative vote was disappointing to users like me.
comment on: http://stackoverflow.com/a/78918156
type: Comment

http://stackoverflow.com/comment/139135420
type: Comment
type: QuestionComment
score: 1
comment on: http://stackoverflow.com/q/78914275
has text: This looked like a good solution, but the .blue div is a child of the .red div and not the child of any pseudo-element on the .red div. "[Pseudo-elements are ... not valid selectors within :has())](https://developer.mozilla.org/en-US/docs/Web/CSS/:has)". It is thus not possible to capture the mouse over .red's pseudo-element and use that to apply a style to its .blue uncle. `.red:has(::after:hover) .blue` does not work.

http://stackoverflow.com/comment/139141015
has text: `transform: translate(-50%, 0%);` is a rather suboptimal approach but fortunately is not necessary to centre items anymore - is there a reason you're not using `flex` or `grid` instead?
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78917706
type: QuestionComment

http://stackoverflow.com/comment/139409455
comment on: http://stackoverflow.com/q/79063602
type: QuestionComment
score: 1
type: Comment
has text: note that flexbox will not work with shape-outside, you need to remove it and use float

http://stackoverflow.com/q/78978286
has title: Primevue dynamic datatable in flexible dialog
answer count: 0
tagged with: css
tagged with: vuejs3
tagged with: flexbox
type: UnansweredQuestion
has body: I have an application showing lots of data in tables, most of which have dynamic column configurations retrieved from the server. Since there a potentially a lot of rows, I'd also like to use the datatable's virtual scroller feature. Tables shown in pages filling the window work fine, but I'm having troubles with showing them in a flexible sized dialog: few rows, no need to have a full-height dialog few columns, no need to have a full-width dialog lots of rows, full height dialog with vertical scrolling in the table lots of columns, full width dialog with horizontal scrolling in the table Does anyone have a template/configuration which works in all cases?
type: Question
tagged with: primevue
score: 0

http://stackoverflow.com/a/79037362
has body: With visual debugging, I noticed that all "end caps" were off by 90 degrees. Also, their radius was incorrect. After adjusting --angle by minus 90 (degrees) and --radius by minus half (instead of all) its thickness in .circular__dial-circle::after, the end cap was properly aligned: .circular__graph { grid-area: b; max-width: 100%; width: 100%; margin-top: 36px; justify-content: center; display: flex; flex-direction: column; padding-left: 65px; } .circular__graph-chart { display: flex; width: 100%; height: 500px; } .circular__circles { display: flex; align-content: center; justify-content: center; align-items: center; position: relative; width: 100%; } .circular__dial-circle { --size: 320px; --thickness: 12px; width: var(--size); height: var(--size); border-radius: 60%; background: conic-gradient(var(--color, #1e90ff) calc(var(--value)* 1%), #F9F9F9 0); mask: radial-gradient(farthest-side, transparent calc(100% - var(--thickness)), white calc(100% - var(--thickness) + 1px)); position: absolute; /*transform: rotate(180deg);*/ } .circular__dial-circle::before, .circular__dial-circle::after { content: ' '; width: 12px; height: 12px; position: absolute; background: var(--color, #1e90ff); left: calc(50% - 7px); top: 0; border-radius: 50%; } .circular__dial-circle::after { /*border: 1px solid red;*/ /* Commented out for now */ --angle: calc(var(--value) * 3.6 - 90); /* Added: "- 90" */ --radius: calc((var(--size) / 2) - var(--thickness) / 2); /* Added: The last "/ 2" */ left: calc(50% + var(--radius) * cos(var(--angle) * (pi / 180)) - 6px); top: calc(50% + var(--radius) * sin(var(--angle) * (pi / 180)) - 6px); } Personally, I find using polar coordinates (angle and radius) with rotate() more intuitive: .circular__graph { grid-area: b; max-width: 100%; width: 100%; margin-top: 36px; justify-content: center; display: flex; flex-direction: column; padding-left: 65px; } .circular__graph-chart { display: flex; width: 100%; height: 500px; } .circular__circles { display: flex; al…
type: AcceptedAnswer
type: Answer
has comment: http://stackoverflow.com/comment/139365489
answers question: http://stackoverflow.com/q/79037039
score: 0
accepted answer of: http://stackoverflow.com/q/79037039

http://stackoverflow.com/comment/139171726
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78933453
has text: Please read [Something in my web site or project doesn't work. Can I just paste a link to it?](https://meta.stackoverflow.com/q/254428/354577)
type: QuestionComment

http://stackoverflow.com/comment/139273199
comment on: http://stackoverflow.com/a/78983496
has text: Actually, no need to add an otherwise spurious element to the DOM - CSS can do this 'on its own' now.
type: Comment
score: 0
type: AnswerComment

http://stackoverflow.com/comment/139233871
type: Comment
comment on: http://stackoverflow.com/a/78967934
score: 0
type: AnswerComment
has text: Thanks for the answer. but i also need to know the whether there is any special for using clearfix as well as the only clear property in the following element

http://stackoverflow.com/comment/139342087
type: Comment
comment on: http://stackoverflow.com/a/79025131
score: 0
type: AnswerComment
has text: Thank you! I still feel like it's dangerous to have text inside of an "invisible div" because if the text is too long it will come out of the intersection, but will use fixed sizes and also your approach to make it look as good as possible.

http://stackoverflow.com/comment/139130862
type: QuestionComment
comment on: http://stackoverflow.com/q/78911856
has text: for the `.bottom` you used first `translate` and **then** `rotate`. Do the opposite. First `rotate` and then use `translate` like in all the other classes.
type: Comment
score: 0

http://stackoverflow.com/a/79060088
answers question: http://stackoverflow.com/q/79060016
has comment: http://stackoverflow.com/comment/139403900
has comment: http://stackoverflow.com/comment/139405362
downvote count: 1
type: Answer
upvote count: 0
score: -1
has body: The problem is that you are using a reserved word to name your function. I tried changing the name of the function and it works. function checkIfValid(){ console.log("testFunction"); const pass_code = document.getElementById("passcode").value; if(pass_code === pass){ alert("passcode is correct!"); } else console.log("passcode is incorrect!"); } Another problem is also the usage of a capitalized P for Pass variable. Try to use a lowercase p when naming variables. Also, use '===' instead of '==' as it also compare types (in your case both types are string, but just in case, use '==='.)
has comment: http://stackoverflow.com/comment/139405391
has comment: http://stackoverflow.com/comment/139403002

http://stackoverflow.com/comment/139282404
comment on: http://stackoverflow.com/q/78994392
score: 2
type: Comment
has text: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Nesting_at-rules
type: QuestionComment

http://stackoverflow.com/comment/139178081
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78937508
has text: Frankly, `float` is an outdated layout method. I suggest you look into flexbox or CSS-Grid
type: QuestionComment

http://stackoverflow.com/comment/139206133
has text: Maybe something like this? https://codepen.io/tonkec/pen/yLdQWvm
score: 1
comment on: http://stackoverflow.com/q/78953076
type: Comment
type: QuestionComment

http://stackoverflow.com/comment/139322778
has text: @ferd It shouldn't be added to the split-container and definetly not `*`. There's nothing to do with box-sizing as well. It should be added to the **flex items**, which are the children divs of the split-container. I would suggest checking the [duplication link](https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size) to understand how flex works and the jsFiddle example I've posted above.
type: Comment
score: 0
comment on: http://stackoverflow.com/q/79015820
type: QuestionComment

http://stackoverflow.com/comment/139308446
type: Comment
comment on: http://stackoverflow.com/q/79008485
has text: I am not eligible as of yet toadd images, I am new here :(
type: QuestionComment
score: 0

http://stackoverflow.com/a/79021211
downvote count: 1
type: Answer
score: 0
has body: Update your css part: ul{ font-size: 19px; list-style: none; margin:0; padding:0; background-color: #cfe2cf; width: 230px; height: 100%; position: fixed; overflow: auto; top: 0; left: 0; } Add .content-area: .content-area{ padding-left: 250px; } in HTML please add: This is the content area Here will be your output
upvote count: 1
answers question: http://stackoverflow.com/q/79021126

http://stackoverflow.com/a/79050777
score: 1
answers question: http://stackoverflow.com/q/79030517
downvote count: 0
type: Answer
upvote count: 1
has body: For a no-CSS solution, just put the warning bar styles on the chart itself, so they show wherever other bars don't. We can hack the markup a bit to take advantage of Bootstrap's style classes. By moving the controlling class out a level we maintain the ancestral relationship necessary to do so. This eliminates the need for a final bar, but if you do have one it doesn't have a width anyway, so it's not a problem. If you actually need the final bar to be present and the proper size, you can use flexbox. .progress { display: flex; } .progress .bar:last-child { flex: auto; }

http://stackoverflow.com/comment/139275451
type: Comment
has text: Maybe I'm just fundamentally misunderstanding `vb` units. My reading is that `50vb` means half of height of the containing block, but it's just not working for me, even without tables involved. https://stackblitz.com/edit/stackblitz-starters-c4cpqu?file=src%2Fstyles.scss
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78989661

http://stackoverflow.com/comment/139380758
type: QuestionComment
has text: @MarkSchultheiss I would assume semantics
comment on: http://stackoverflow.com/q/79047847
score: 2
type: Comment

http://stackoverflow.com/comment/139315799
type: Comment
has text: *Chrome devtools shows a slash through the animation-timeline attribute* --> you have something else overriding the property
type: QuestionComment
comment on: http://stackoverflow.com/q/79012520
score: 1

server
tag name: server
type: Tag
tags question: http://stackoverflow.com/q/78918262

http://stackoverflow.com/comment/139195292
comment on: http://stackoverflow.com/a/78946975
type: Comment
score: 0
has text: This seems fine on Edge/Chrome but on Safari IOS the svg is slightly outside the button.
type: AnswerComment

http://stackoverflow.com/a/78993650
score: 1
upvote count: 1
answers question: http://stackoverflow.com/q/78993438
type: AcceptedAnswer
type: Answer
accepted answer of: http://stackoverflow.com/q/78993438
downvote count: 0
has body: This can be achieved by using clip-path and position: absolute; I have attached an example snippet. position: absolute and right will push the circles to the right of the parent. Setting an z-index of 99 on the text and lower z-index on the circles will mean the text always appears in front. .circle{ height: 200px; width: 200px; clip-path: circle(50% at 50% 50%); position: absolute; } .c1{ background: linear-gradient(180deg, #7C84F3 0%, #1522E0 93.74%); right: -100px; z-index: 0; } .c2{ background: linear-gradient(180deg, #7C84F3 0%, #1522E0 93.74%); right: 100px; z-index: 1; } .c3{ background: linear-gradient(147deg, #7C84F3 0%, #1522E0 93.74%); right: 200px; z-index: 2; } .hire-developer-needs__cta-info{ z-index: 99; } .hire-developer-needs__cta { background: linear-gradient(90deg, #7C84F3 0%, #1522E0 93.74%); padding: 50px 60px; max-width: 1400px; border-radius: 20px; color: #fff; display: flex; justify-content: space-between; align-items: center; position: relative; overflow: hidden; } .hire__cta { background-color: #181818; padding: 130px 20px 130px 20px; } Hire experienced React Developers now for Your Needs! Hire React developers to get the right specialists that will cater to the needs of your project fast. Apply to us, and we’ll get back to you to define all the requirements to candidates. This is not a responsive answer.

http://stackoverflow.com/a/78959684
has body: Use visibility: hidden to prevent the label from taking up any space when hidden. And visibility: visible with :hover pseudo-selector to display it on hover of button inside button.
downvote count: 0
type: Answer
upvote count: 1
answers question: http://stackoverflow.com/q/78959643
score: 1

http://stackoverflow.com/comment/139185402
type: Comment
score: 0
type: AnswerComment
has text: Yes, it has to be close to it, if it's far you'd need to use JavaScript to address it in the DOM.
comment on: http://stackoverflow.com/a/78941635

http://stackoverflow.com/a/78915335
has comment: http://stackoverflow.com/comment/139145789
has comment: http://stackoverflow.com/comment/139137166
has comment: http://stackoverflow.com/comment/139146147
has body: Above solution might actually solve the issue, but if you like to try positioning, you may use position: absolute; to the hamburger menu, you can place it on the right side of the page while keeping the header aligned to the left. #title_and_menu { position: relative; } #myHeader { display: inline-block; background-color: white; color: black; text-align: left; padding: 25px; } #drop_menu { position: absolute; top: 50%; right: 25px; transform: translateY(-50%); cursor: pointer; } .hamburger_menu { width: 35px; height: 3px; background-color: black; margin: 6px 0; } img { width: 100%; height: auto; max-width: 100%; display: inline-block; } #myHeader:hover { background-color: black; color: white; } body { padding: 25px; } 9.
type: Answer
score: 0
answers question: http://stackoverflow.com/q/78915244
has comment: http://stackoverflow.com/comment/139136545
has comment: http://stackoverflow.com/comment/139136891

semantic-markup
tag name: semantic-markup
tags question: http://stackoverflow.com/q/78905493
type: Tag

http://stackoverflow.com/a/79063825
score: 1
type: AcceptedAnswer
upvote count: 2
type: Answer
answers question: http://stackoverflow.com/q/79063788
has body: If I understand you correctly, you can try using pseudo-elements with display: sticky as indents. Example below: .container { height: 100px; width: 300px; padding: 0px 10px; overflow-y: scroll; background-color: black; color: white; } .container:before, .container:after { content: ''; display: block; position: sticky; width: 100%; height: 10px; background: inherit; left: 0px; } .container:before { top: 0px; } .container:after { bottom: 0px; } dogs dogs dogs dogs dogs dogs dogs dogs dogs dogs dogs dogs dogs dogs dogs
downvote count: 1
accepted answer of: http://stackoverflow.com/q/79063788

http://stackoverflow.com/comment/139282865
has text: @Brett Donald, thanks, I am still new to this (intersectionObserver) but hopefully I will get more comfortable because of this. Thanks again (to show my gratitude twice)
type: QuestionComment
type: Comment
comment on: http://stackoverflow.com/q/78984963
score: 0

http://stackoverflow.com/comment/139284716
type: AnswerComment
has text: They're creating an animation of the .about__content div sliding in from the right, not making it scrollable or not scrollable. https://jsfiddle.net/xLtma3n6/ though i suspect they certainly could accomplish this goal with css, maybe? doing this with gsap though is pretty common.
comment on: http://stackoverflow.com/a/78994858
score: 1
type: Comment

http://stackoverflow.com/comment/139132704
comment on: http://stackoverflow.com/q/78912766
type: Comment
score: 0
type: QuestionComment
has text: The code you show doesn't have any text within the svg. Could you show us exactly what you have tried.

http://stackoverflow.com/comment/139181469
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78939256
type: QuestionComment
has text: @makkusu could you please post code for the spacer element.

css-float
tags question: http://stackoverflow.com/q/78967851
tag name: css-float
tags question: http://stackoverflow.com/q/79066173
type: Tag
tags question: http://stackoverflow.com/q/79228338
tags question: http://stackoverflow.com/q/79194162
tags question: http://stackoverflow.com/q/79110724
tags question: http://stackoverflow.com/q/79325345
tags question: http://stackoverflow.com/q/79298108
tags question: http://stackoverflow.com/q/79391251
tags question: http://stackoverflow.com/q/79252847
tags question: http://stackoverflow.com/q/79510339
tags question: http://stackoverflow.com/q/79536794

http://stackoverflow.com/comment/139181745
comment on: http://stackoverflow.com/q/78937517
type: Comment
score: 0
type: QuestionComment
has text: Unfortunatly, text-overflow Applies to block container elements only. Textarea is a replaced element : https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element . Try a contenteditable div instead ;)

http://stackoverflow.com/comment/139243965
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78973058
has text: @Rounin I can try. The overlay-img is at the correct position when the screen is about 1200px, but if the screen becomes smaller the img stays in the same position while the background-img moves/follows the screen size. Does that make sense?

http://stackoverflow.com/comment/139130857
type: QuestionComment
comment on: http://stackoverflow.com/q/78911856
has text: yes!! I figure it out thank you for your help. How can I give you a rate on your comment? (sorry I am new here)
type: Comment
score: 0

http://stackoverflow.com/a/79036586
has comment: http://stackoverflow.com/comment/139514964
has comment: http://stackoverflow.com/comment/139485060
has comment: http://stackoverflow.com/comment/139493670
type: Answer
has comment: http://stackoverflow.com/comment/139513798
score: 0
has body: Not 100% sure on your requirement as it is hard to describe a visual but perhaps all you need is to add white-space: nowrap; to your hover * { box-sizing: border-box; } .pop-out { position: relative; transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out, border-radius 0.2s ease-in-out; &:hover { cursor: pointer; background-color: white !important; box-shadow: 0 0 1.6667rem rgba(0, 0, 0, 0.2); /* transform: scale(1.1);*/ border-radius: 10px; padding-left: 1rem; padding-right: 1rem; margin-left: -1.9rem; white-space: nowrap; } } #wrapper { margin-left: 50px; display: flex; justify-content: center; } #my-element { background-color: gray; width: 200px; flex: 0 0 auto; } My element. lipsumlipsum
has comment: http://stackoverflow.com/comment/139501413
has comment: http://stackoverflow.com/comment/139493819
answers question: http://stackoverflow.com/q/79035820

http://stackoverflow.com/comment/139161138
type: AnswerComment
has text: Thanks a lot, that's what I was trying to achieve :)
comment on: http://stackoverflow.com/a/78928149
type: Comment
score: 0

http://stackoverflow.com/a/79012875
score: 0
has body: I checked your code carefully and found a small logical issue. You updated font size in while loop, but it doesn't immediately reflect the new values of scrollWidth and clientWidth because the DOM layout hasn't updated yet. To solve the issue, you can use requstAnimationFrame for updates. I provide updated code Document Sané 9 (40,9%) Hamm 8 (36,4%) Gulászci 5 (22,7%) To know about the requestAnimationFrame, please refer the doc here
has comment: http://stackoverflow.com/comment/139325003
answers question: http://stackoverflow.com/q/79009556
has comment: http://stackoverflow.com/comment/139324980
type: Answer

http://stackoverflow.com/comment/139257148
has text: here is a URL where you can see what I am trying to accomplish. Basically I want to remove the entire category if all inputs are disabled. https://motoheaven.com.au/collections/2022-yamaha-yzf-r1?sort_by=manual&filter.p.m.my_fields.sub_category=Battery&filter.v.price.gte=&filter.v.price.lte=
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78980481

http://stackoverflow.com/a/78981159
type: Answer
answers question: http://stackoverflow.com/q/78980450
score: 3
upvote count: 3
downvote count: 0
has body: CSS-only solution: Hide by default the groups Unhide the groups that have at least one input not disabled .filter-form__group { display: none; &:has(input:not(:disabled)) { display: initial; } } GROUP: all disabled GROUP one is not disabled

http://stackoverflow.com/comment/139347942
type: Comment
has text: The default application-wide user agent stylesheet (modena.css) [gives buttons padding](https://github.com/openjdk/jfx/blob/7870a226a21826e3979e314c0218d351b3cfb82f/modules/javafx.controls/src/main/resources/com/sun/javafx/scene/control/skin/modena/modena.css#L411). You can override this by setting the `padding` property to something else (perhaps zero?).
score: 4
type: QuestionComment
comment on: http://stackoverflow.com/q/79029522

http://stackoverflow.com/comment/139176802
comment on: http://stackoverflow.com/q/78936697
has text: @A Haworth I am copying the design which I have received. Everything should match pixel to pixel.
type: Comment
score: 0
type: QuestionComment

http://stackoverflow.com/comment/139251978
type: Comment
has text: To remove them it could be as easy as using `font-size: 0` on the parent and have specific children for each text content. I didn't post it as an answer because actually it still doesn't fulfill the exact scenario where you want your `.text` container to have text nodes without their corresponding span container. If any text content had its own span and the newline were ruled by ` `s, that could be a layout that fulfill the request.
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78970177

http://stackoverflow.com/comment/139260162
comment on: http://stackoverflow.com/q/78980629
type: Comment
has text: if it is only for image and have them drawn columns by columns, css column might be enough : here a simple responsive example . you only need to set a width https://codepen.io/gc-nomade/pen/zYVXLMr You may use clamp() to set a min-width, average width according to the screen and a max-width (example sets width to min 250px, 30vw and max 400px ) no mediaquerie nor js , the browser does the job by himself.
score: 0
type: QuestionComment

lightmode
tags question: http://stackoverflow.com/q/78987305
type: Tag
tag name: lightmode

http://stackoverflow.com/comment/139227552
comment on: http://stackoverflow.com/q/78959643
type: Comment
has text: A `label` does not belong into `button`, that is invalid HTML.
score: 0
type: QuestionComment

css-transitions
tags question: http://stackoverflow.com/q/78988424
tags question: http://stackoverflow.com/q/79033988
tag name: css-transitions
tags question: http://stackoverflow.com/q/78914182
tags question: http://stackoverflow.com/q/79028815
tags question: http://stackoverflow.com/q/79044932
tags question: http://stackoverflow.com/q/78965578
type: Tag
tags question: http://stackoverflow.com/q/78917961
tags question: http://stackoverflow.com/q/78993090
tags question: http://stackoverflow.com/q/79198554
tags question: http://stackoverflow.com/q/79140118
tags question: http://stackoverflow.com/q/79086886
tags question: http://stackoverflow.com/q/79195348
tags question: http://stackoverflow.com/q/79087333
tags question: http://stackoverflow.com/q/79157847
tags question: http://stackoverflow.com/q/79136564
tags question: http://stackoverflow.com/q/79085939
tags question: http://stackoverflow.com/q/79384569
tags question: http://stackoverflow.com/q/79407475
tags question: http://stackoverflow.com/q/79298334
tags question: http://stackoverflow.com/q/79333564
tags question: http://stackoverflow.com/q/79351775
tags question: http://stackoverflow.com/q/79312483
tags question: http://stackoverflow.com/q/79518654
tags question: http://stackoverflow.com/q/79490962
tags question: http://stackoverflow.com/q/79516867
tags question: http://stackoverflow.com/q/79471335
tags question: http://stackoverflow.com/q/79474142
tags question: http://stackoverflow.com/q/79464474

http://stackoverflow.com/comment/139476624
has text: I tried the code separately in online vue editor too. It works fine there,but same code doesnt work in the project. This is very weird.
score: 0
type: Comment
type: AnswerComment
comment on: http://stackoverflow.com/a/79041752

http://stackoverflow.com/comment/139150403
type: Comment
score: 0
has text: It seems works on Chrome, but it doesn't come out on firefox. Is the `<Image>` from `@mantine/core`?
comment on: http://stackoverflow.com/q/78921976
type: QuestionComment

http://stackoverflow.com/comment/139201356
score: 0
comment on: http://stackoverflow.com/q/78950411
has text: From the documentation: "scrolls the element's **ancestor containers** such that the element on which scrollIntoView() is called is visible to the user". So since you are calling it with `block:"start"` as an option, all parent containers are being scrolled until the element is at the start (top) of the view. I don't think there is a way with this method to target a specific parent container.
type: Comment
type: QuestionComment

projective-geometry
tag name: projective-geometry
tags question: http://stackoverflow.com/q/79052069
type: Tag

http://stackoverflow.com/q/78927953
tagged with: css
has answer: http://stackoverflow.com/a/78928124
has comment: http://stackoverflow.com/comment/139160546
type: Question
has body: I have html, css and js codes for a simple cake on which I want to place some candles. But i want the candles to be placed only on the icing layer of the cake marked with the css property .icing. An algorithm to restrict the addition of candles to other layers of the cake is used but still candles can be added outside the icing layer of the cake specially the drips. How can i make the candles to be able to place on the icing layer of the cake only (which is the circular disk on top of the cake) const cake = document.querySelector(".cake"); let candles = []; function addCandle(left, top) { const icing = document.querySelector(".icing"); const icingRect = icing.getBoundingClientRect(); const icingCenterX = icingRect.left + icingRect.width / 2; const icingCenterY = icingRect.top + icingRect.height / 2; const icingRadius = icingRect.width / 2; const cakeRect = cake.getBoundingClientRect(); const clickX = event.clientX - cakeRect.left; const clickY = event.clientY - cakeRect.top; const distance = Math.sqrt( Math.pow(clickX - (icingCenterX - cakeRect.left), 2) + Math.pow(clickY - (icingCenterY - cakeRect.top), 2) ); if (distance <= icingRadius && clickY >= icingRect.top - cakeRect.top && clickY <= icingRect.bottom - cakeRect.top) { const candle = document.createElement("div"); candle.className = "candle"; candle.style.left = left + "px"; candle.style.top = top + "px"; const flame = document.createElement("div"); flame.className = "flame"; candle.appendChild(flame); cake.appendChild(candle); candles.push(candle); } else { console.log("Clicked outside of icing or in an invalid area, no candle added."); } } cake.addEventListener("click", function (event) { const activeCandles = candles.filter( (candle) => !candle.classList.contains("out") ).length; const rect = cake.getBoundingClientRect(); const left = event.clientX - rect.left; const top = event.clientY - rect.top; addCandle(left, top); }); .cake { position: absolute; width: 250px; height: 200px; top: 50%; left: 50%; margi…
has comment: http://stackoverflow.com/comment/139160466
has comment: http://stackoverflow.com/comment/139160518
answer count: 1
type: AnsweredQuestion
has comment: http://stackoverflow.com/comment/139160579
has title: How to properly filter the coordinates of touch event here
has comment: http://stackoverflow.com/comment/139160731
accepted answer: http://stackoverflow.com/a/78928124
score: 0
tagged with: javascript

calendar
tags question: http://stackoverflow.com/q/79024912
type: Tag
tag name: calendar
tags question: http://stackoverflow.com/q/79006902

http://stackoverflow.com/comment/139245461
score: 1
has text: It's just a known glitch with Safari's rendering engine that they refuse to patch. Safari is out of date garbage and is to development today what IE8 was 10 years ago, the first and only thing anyone with an Apple device should use Safari for is installing a real browser.
type: Comment
comment on: http://stackoverflow.com/q/78974025
type: QuestionComment

http://stackoverflow.com/comment/139270405
type: Comment
comment on: http://stackoverflow.com/a/78986510
score: 0
type: AnswerComment
has text: Thanks for your answer. The ratio works as expected. However, I see that the container height and width have been specified here. Is there a way that sectionA, whose height is lesser than sectionB, could dynamically resize itself to the height of sectionB here? Like one section resizes itself to the max of height of two sections?

http://stackoverflow.com/comment/139218260
type: Comment
score: 0
comment on: http://stackoverflow.com/a/78956442
type: AnswerComment
has text: Clearly I have misunderstood or made a mistake in applying your instructions.

http://stackoverflow.com/comment/139170149
type: QuestionComment
comment on: http://stackoverflow.com/q/78930153
has text: @AntonijaŠimić, this looks odd to me. I've tried to change my img's vertical alignment with no result - so, there is no way of eliminating those gaps?
type: Comment
score: 0

http://stackoverflow.com/comment/139167722
type: Comment
score: 4
type: QuestionComment
comment on: http://stackoverflow.com/q/78931907
has text: When I say "look into", that is supposed to be a prompt for _you_ to show some effort first of all. Not here to just do your work for you.

http://stackoverflow.com/comment/139391151
comment on: http://stackoverflow.com/q/79053699
has text: ` ` should be closed with ` `, not with another opening ` `
type: Comment
score: 0
type: QuestionComment

http://stackoverflow.com/comment/139294810
comment on: http://stackoverflow.com/q/79000858
type: Comment
has text: Add margin-top in negative like `margin-top: -20px`.
score: 0
type: QuestionComment

http://stackoverflow.com/comment/139522473
type: Comment
has text: Notice that when you hover the text still shifts. The problem is that the padding is causes there to be less horizontal space in the element relative to the font-size, so there will be fewer characters per line and thus the text will shift. In larger paragraphs this shift is very noticeable and ugly from a UI standpoint.
type: AnswerComment
comment on: http://stackoverflow.com/a/79121645
score: 0

http://stackoverflow.com/comment/139195971
type: QuestionComment
comment on: http://stackoverflow.com/q/78943230
score: 1
type: Comment
has text: While this might be possible, one needs to keep in mind that neither HTML nor CSS are graphical drawing programs and one should use better tools to do such things such as SVG

http://stackoverflow.com/comment/139285438
comment on: http://stackoverflow.com/a/78994858
score: 0
type: Comment
has text: I really like to work with CSS, maybe I will take a more attentive look tomorrow and try it out. I will share it if I achieve it. Let me know if you do the same, always interested in learning more :)
type: AnswerComment

http://stackoverflow.com/comment/139250177
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78976656
has text: 1fr .Box => height = 100px 0.5fr .Box => height ≈ 25px 0.1fr .Box => height ≈ 1px This is not the result I wanted @Siguza
type: Comment

http://stackoverflow.com/comment/139372648
type: QuestionComment
score: 1
comment on: http://stackoverflow.com/q/79043462
has text: A helpfull tool for email design is [Can i email?](https://www.caniemail.com/). You can check if the styling is supported on different email clients.
type: Comment

http://stackoverflow.com/comment/139210075
comment on: http://stackoverflow.com/q/78954874
has text: Are you using a [viewport meta tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag)? Have you tried adjusting the width value? Or leaving the tag out altogether?
type: QuestionComment
type: Comment
score: 0

http://stackoverflow.com/comment/139163395
comment on: http://stackoverflow.com/q/78925225
type: Comment
score: 0
has text: When the scrollbar reaches the bottom of the page, all the sections glitch rapidly on the screen. I'm new to all of this so I appreciate the help
type: QuestionComment

http://stackoverflow.com/comment/139389652
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/79052206
has text: What CSS/styling is currently being applied in your production build? Can you [edit] to include a [mcve] of the relevant code and server configuration(s), and what debugging details you have collected from the browser?

http://stackoverflow.com/a/78915363
type: Answer
has body: Use the property justify-self on .exclude
answers question: http://stackoverflow.com/q/78915295
has comment: http://stackoverflow.com/comment/139136615
downvote count: 1
upvote count: 0
score: -1

http://stackoverflow.com/comment/139402472
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/79060016
has text: change the function name to checkTheValidity() and it will work it is a reserved name. check this SO answer [link](https://stackoverflow.com/questions/42530261/javascript-button-onclick-not-working)
type: Comment

http://stackoverflow.com/comment/139408198
comment on: http://stackoverflow.com/q/79062969
has text: You may need to be aware that IOS Safari struggles with background-attachment fixed. Consider putting the background on to a fixed pseudo element instead and scaling that.
type: Comment
type: QuestionComment
score: 1

http://stackoverflow.com/a/78947264
upvote count: 1
score: 1
has comment: http://stackoverflow.com/comment/139198739
answers question: http://stackoverflow.com/q/78914275
has body: :root { --line: 1px; --side: 1vmin; --size: max(min(100vh, 50vw), min(50vh, 100vw)); --font: calc(var(--size) / 20); --rect: calc(var(--size) * 0.666 - var(--line)); --drop: calc(var(--rect) * 0.5); --edge: calc(var(--drop) - var(--side)); --red: #9009; --blue: #0099; --bg: #040; } body { margin: 0; height: 100vh; color: #ddd; background-color: #222; font-size: 0; display: flex; justify-content: center; align-items: center; } @media (aspect-ratio < 1/1) { main { width: var(--size); } } div { position: relative; box-sizing: border-box; } div[id] { font-size: var(--font); display: inline-block; width: var(--size); height: var(--size); border: var(--line) solid #ddd; p { position: absolute; pointer-events: none; z-index: 1; span { display: block; width: var(--rect); margin-top: 0.5em; font-size: 0.7em; } } div.red, div.blue, div.overlap { width: var(--rect); height: var(--rect); border: var(--side) solid red; } div.red:hover { background-color: var(--red); } div.blue { border-color: blue; &:hover { background-color: var(--blue); } } &#two { background-color: var(--bg); .blue { top: var(--edge); left: var(--edge); } } &#three { .blue { position: absolute; top: var(--drop); left: var(--drop); } .overlap { position: absolute; top: var(--drop); left: var(--drop); width: var(--drop); height: var(--drop); border-color: transparent; } } } #three:has(.overlap:hover) { .red { background-color: var(--red); } .blue { background-color: var(--blue); } } Two nested divs Roll over the red square to highlight it Rolling over the blue square also highlights its parent red square, even when the mouse is not over the intersection Three overlapping divsRoll over either square to highlight itRoll over the intersection to highlight both squares
downvote count: 0
type: Answer

wordpress-gutenberg
tag name: wordpress-gutenberg
tags question: http://stackoverflow.com/q/79032409
type: Tag
tags question: http://stackoverflow.com/q/79029787
tags question: http://stackoverflow.com/q/79233888
tags question: http://stackoverflow.com/q/79477229

http://stackoverflow.com/comment/139295460
score: 1
comment on: http://stackoverflow.com/q/79000858
type: Comment
has text: @MuhammedFayaz Predefined would be till `-mt-6` only, you can add more by adding custom properties in `tailwind.config` file.
type: QuestionComment

http://stackoverflow.com/comment/139299032
type: AnswerComment
has text: This is a part of a sophisticated 3D animation, so I don't see any point in screen reader support here and would like to disable it completely. tabIndex is already set to "-1". I added `focusable="false"`, but DevTools shows that a computed property named `Focusable` is still true. And I need mouse events since I have a tooltip, assigned to every `<image>`.
comment on: http://stackoverflow.com/a/79003163
type: Comment
score: 0

http://stackoverflow.com/comment/139160518
type: QuestionComment
has text: such approach would better deal with the off-limit area instead of doing the maths on your own... but yet there's a slight offset caused by how you determine the coords of the new candle... you should put the candle bottom at the clicked coords instead of its center like now
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78927953

http://stackoverflow.com/comment/139120325
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78906107
has text: You are a godsend, thank you--is there a way to have the image (.startup-screen__eclipse-image) sit in the back with this current setup?

http://stackoverflow.com/comment/139400732
has text: I added a snippet
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/79058917

accordion
type: Tag
tags question: http://stackoverflow.com/q/78920429
tag name: accordion
tags question: http://stackoverflow.com/q/79134680
tags question: http://stackoverflow.com/q/79085939
tags question: http://stackoverflow.com/q/79334172
tags question: http://stackoverflow.com/q/79351775
tags question: http://stackoverflow.com/q/79318160
tags question: http://stackoverflow.com/q/79493244

http://stackoverflow.com/comment/139345887
score: 1
comment on: http://stackoverflow.com/a/79028934
type: Comment
has text: Ooohh I didn't know grid columns could be animated! This is perfect, thanks so much!
type: AnswerComment

http://stackoverflow.com/comment/139186615
type: AnswerComment
comment on: http://stackoverflow.com/a/78941783
score: 0
has text: Thank you so much. I appreciate your help. I'll check the code tomorrow since it's late night here and I'll mark your answer as the best.
type: Comment

http://stackoverflow.com/a/78937155
type: Answer
has body: if you're using css modules in your project the classnames returned from the import are not equal to what you wrote. eg. .test{ display: block; } the test classname will become something like test--a12d. you can eather use :global to make the classname be the same or just plain import your CSS file: :global { .literature:hover { color: blue !important; text-decoration: underline !important; } } or import 'colorClasses.css' // instead of import styles from 'colorClasses.module.css'
downvote count: 1
upvote count: 2
answers question: http://stackoverflow.com/q/78937138
score: 1

http://stackoverflow.com/comment/139294979
type: QuestionComment
score: 0
comment on: http://stackoverflow.com/q/79000858
has text: I used that it was working only maximum -mt-6
type: Comment

http://stackoverflow.com/comment/139200579
type: AnswerComment
has text: Unexplained code dumps aren't considered good answers.
comment on: http://stackoverflow.com/a/78949060
score: 1
type: Comment

http://stackoverflow.com/comment/139182862
comment on: http://stackoverflow.com/a/78940099
type: Comment
score: 0
has text: Nearly, but your reasons are not 100% correct.. :)
type: AnswerComment

http://stackoverflow.com/comment/139332460
type: Comment
type: QuestionComment
score: 1
comment on: http://stackoverflow.com/q/79021456
has text: If it is important for understanding of the question that we see actual images, you can load them through the editor (use the icon of a mountain).

http://stackoverflow.com/q/79025462
type: UnansweredQuestion
favorite count: 0
tagged with: http://stackoverflow.com/tag/html
type: Question
downvote count: 0
has body: I'm trying to build an accessible accordion with separate navigation and find that when focusing the input that controls the state of the pane, it scrolls down the page. (($) => { $(document).on('focus', 'input', (e) => e.preventDefault()); })(jQuery); .row { display: flex; gap: 2rem; .col { &:first-child { flex: 1 0 20%; } &:last-child { & > div { grid-template-rows: 1fr; opacity: 1; display: grid; transition: grid-template-rows 250ms ease, opacity 250ms ease; div { overflow: hidden; } } input { position: absolute; left: -100%; opacity: 0; &:not(:checked) { & + div { grid-template-rows: 0; opacity: 0; } } } } } } ul { margin: 0; padding: 0; list-style: none; } Category 1 Category 2 Category 3 Category 4 Category 5 Category 6 Category 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam? Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error. Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut? Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam? Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum arch…
answer count: 1
tagged with: javascript
upvote count: 1
has title: Prevent scroll on focus when using keyboard
score: 1
tagged with: css
has answer: http://stackoverflow.com/a/79025470

http://stackoverflow.com/q/79050826
has body: I'm trying to remove the default space that appears at the start of a paragraph. Is there a CSS property like 'paragraph-spacing' that can help with this? I tried using 'paragraph-spacing' from another website, but VS Code didn't recognize it, and it didn't work on my webpage either. How can I fix this?
score: 0
tagged with: css
tagged with: deployment
has title: Remove default space made by p tag
has comment: http://stackoverflow.com/comment/139386172
has answer: http://stackoverflow.com/a/79050890
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139386579
type: Question
answer count: 1
tagged with: http://stackoverflow.com/tag/html

http://stackoverflow.com/comment/139299245
comment on: http://stackoverflow.com/q/79003190
has text: This question is similar to: [Safari: focus event doesn't work on button element](https://stackoverflow.com/questions/42758815/safari-focus-event-doesnt-work-on-button-element). If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem.
type: Comment
score: 0
type: QuestionComment

http://stackoverflow.com/q/79033436
type: UnansweredQuestion
favorite count: 0
has title: How to dynamically update table row based on user input
type: Question
downvote count: 1
answer count: 1
upvote count: 0
has answer: http://stackoverflow.com/a/79033588
score: -1
tagged with: javascript
has body: I'm trying to create a dynamic HTML table that updates its rows based on user input. The table should display a list of items with their corresponding prices. Problem: When the user clicks the "Add Item" button, the new row is added, but I want to: Validate user input (e.g., check if item name is not empty and price is a positive number). Update the table rows dynamically when the user changes the input fields. Remove duplicate item names. Using change event on input fields, doesn't update the table rows. Using blur event on input fields, but it doesn't validate input Any guidance or code snippets would be greatly appreciated! $(document).ready(function() { $('#add-item').click(function() { // Get user input var itemName = $('#item-name').val(); var itemPrice = $('#item-price').val(); // Create new table row var newRow = $(' '); newRow.append($(' ').text(itemName)); newRow.append($(' ').text(itemPrice)); // Add row to table body $('#item-table tbody').append(newRow); }); }); Item Price Add Item
tagged with: jquery
tagged with: css
has comment: http://stackoverflow.com/comment/139354068

http://stackoverflow.com/a/78933495
has body: Use display: grid and grid-template-columns: subgrid: .form-inputs { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; label { margin: 0; } &>div{ display: grid; grid-template-columns: subgrid; grid-column: span 2; } } First name: Lastname: E-mail: City of residence: By checking this box you agree to the user agreement If you click the "Register" button, the form-data will be sent to the owner of the website. Already have an account? Sign In
type: Answer
score: 0
answers question: http://stackoverflow.com/q/78920900

http://stackoverflow.com/comment/139389418
comment on: http://stackoverflow.com/a/79042941
type: Comment
score: 0
type: AnswerComment
has text: Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer).

http://stackoverflow.com/comment/139364110
has text: Please visit [ask], then click [edit] and then the `[<>]` button and make a [mcve]
type: QuestionComment
comment on: http://stackoverflow.com/q/79038954
score: 1
type: Comment

http://stackoverflow.com/comment/139290875
type: AnswerComment
has text: This fixed the issue. Makes sense to add .closest. thank you so much!
comment on: http://stackoverflow.com/a/78998820
score: 1
type: Comment

http://stackoverflow.com/a/78945363
score: 1
upvote count: 1
answers question: http://stackoverflow.com/q/78942849
type: Answer
has body: Here's a basic idea. Each flag is 'on the end' of a div as background-image. Each of those divs is placed centrally with width as you decide and placed apart from the next flag a distance around the arc of a circle that you define. The height of the divs is then calculated to make this distance happen as they are placed rotated from a central point. The whole is then rotated infinitely. The changing color to a top rectangle is done separately, but with the same animation duration. The keyframes for this set a CSS variable, --bg, to the background color that is relevant for the first, second etc flags. This set up is only in CSS as a demo. In real life I would implement some JS to make the setting up less tedious and so the number of flags can be picked up from the DOM and the keyframes set accordingly. I was worried about cpu usage, but it appears to be only a few % even on a simple laptop with no fancy gpu. body { margin: 0; display: flex; flex-direction: column; width: 100vw; justify-content: center; position: relative; align-items: center; overflow: hidden; } .flags-container { overflow: hidden; clip-path: polygon(0 0, 100% 0, 100% 25%, 0 25%); position: relative; --num: 20; /* number of flags */ --a: 10vmin; /* set this to the distance along the arc between two flags that you want */ --r: calc(2 * var(--a) * var(--num) / pi); --w: calc(2 * var(--r)); width: var(--w); aspect-ratio: 1; top: 15vmin; display: block; } .flags-container::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 10%; aspect-ratio: 2 / 1; animation: color 60s infinite linear; z-index: -1; background-color: var(--bg); } @keyframes color { 0% { --bg: red; } 5% { --bg: green; } 10% { --bg: blue; } 15% { --bg: black; } 20% { --bg: cyan; } 25% { --bg: magenta; } 30% { --bg: yellow; } 35% { --bg: red; } 40% { --bg: green; } 45% { --bg: blue; } 50% { --bg: black; } 55% { --bg: cyan; } 60% { --bg: magenta; } 65% { --bg: yellow; } 70% { --bg: red; } 75% { -…
downvote count: 0

http://stackoverflow.com/comment/139386662
type: QuestionComment
score: 0
comment on: http://stackoverflow.com/q/79050052
type: Comment
has text: I think the screenshot is missing?

http://stackoverflow.com/q/78938339
has body: Is there any way to style the label of MUI TextField to be on top, just above the border? I can use this InputLabelProps={{ shrink: true }} to make the label always on top, but the default style is like a small label over the border. But I don't need label as overlay on border. So basically I need to change this style To something like this
has title: Styling Material UI TextField label position
tagged with: reactjs
tagged with: javascript
type: UnansweredQuestion
tagged with: material-ui
tagged with: css
tagged with: textfield
type: Question
has answer: http://stackoverflow.com/a/78940036
answer count: 1
score: 0

http://stackoverflow.com/a/78990269
answers question: http://stackoverflow.com/q/78989508
type: Answer
score: 0
has body: if you play around with the y value of the shadow - the second number - you can set the top to negative and the bottom to positive. maybe even simplify the shadow to one or two values instead of three. also, you can adjust the size of the shadow - the forth value - to offset the y change like the red example. body { padding: 50px; } .block1 { padding: 20px; border-width: 1px 1px 0 1px; border-style: solid; border-radius: 4px 4px 0 0; border-color: #d5dce3; box-shadow: 0 -2px 0 2px red; } .block2 { padding: 20px; border-width: 0 1px 1px 1px; border-style: solid; border-radius: 0 0 4px 4px; border-color: #d5dce3; box-shadow: 0 2px 2px #00000017,0 5px 5px #0000000a; } &lt;div class="block1"&gt; Block 1 &lt;/div&gt; &lt;div class="block2"&gt; Block 2 &lt;/div&gt;

http://stackoverflow.com/comment/139149850
type: AnswerComment
has text: Thank you! I added the layout I'm trying to achieve to my post. Flexbox or grid hasn't been part of the curriculum yet, I'm currently at the very beginning of this course. Looking forward to learning more
type: Comment
score: 0
comment on: http://stackoverflow.com/a/78918623

react-to-pdf
tag name: react-to-pdf
tags question: http://stackoverflow.com/q/79040807
type: Tag

http://stackoverflow.com/comment/139217134
has text: Perhaps you could edit your question to be more specific about your requirements, or more detailed.
type: Comment
comment on: http://stackoverflow.com/a/78956881
score: 0
type: AnswerComment

http://stackoverflow.com/comment/139305134
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/79006685
has text: The weird <style.> occurs just after the (or, rather, within) the element which comes just before a and just after a nested element which contains this list: Solar Roof Leak Repair System Upgrade System Appraisal Cleaning Vegetation Commissioning and Decommissioning
type: Comment

http://stackoverflow.com/q/78918565
has comment: http://stackoverflow.com/comment/139142560
answer count: 2
has body: I'm just getting started with HTML and CSS (via freeCodeCamp) and struggle with my first certification project: building a survey form. Everything went well up to the point where I needed to add checkboxes and radio buttons. There's a huge amount of space between the clickable box/button and the corresponding label, and I can't get all of this content to be centered to the left. I tried experimenting with different margin and padding values, as well as text-align and display options. It had hoped I would end up with something like this: My pronouns are: [] she/her [] he/him [] they/them Choose one: () Yes () No () Maybe However, it just looks really messy and nothing I've tried changed anything in how this displays. This is what it looks like right now: My pronouns are: [] she/her [] he/him [] they/them Choose one: () Yes () No () Maybe My Code: body { background-color: #000000; color: #ffffff; width: 100%; height: 100vh; margin: 0; font-family: Futura; } fieldset { margin-top: 20px; background-color: pink; width: 70%; border: 3px solid #ffffff; border-radius: 5px; } legend { background-color: grey; color: #ffffff; border: solid; border-radius: 10px; padding: 2px 5px; } input { width: 50%; background-color: #ffffff; color: grey; margin: 5px; font-family: Futura; } input[type=submit], input[type=reset] { background-color: skyblue; color: #000000; width: 25%; margin-top: 15px; } .textarea { font-family: Futura; color: grey; font-size: 14px; } Checkbox area My pronouns are: she/her he/him they/them Yes No Maybe
tagged with: forms
tagged with: checkbox
possible better answer: http://stackoverflow.com/a/78918623
downvote count: 0
tagged with: css
has title: Why do my checkboxes and radio buttons have weird spacing?
upvote count: 1
has answer: http://stackoverflow.com/a/78918624
accepted answer: http://stackoverflow.com/a/78918624
score: 1
favorite count: 0
type: Question
has answer: http://stackoverflow.com/a/78918623
type: AnsweredQuestion
tagged with: http://stackoverflow.com/tag/html

http://stackoverflow.com/comment/139141313
comment on: http://stackoverflow.com/a/78913985
has text: You really did save me right there haha, tysm! Any idea why this happened in the first place? I thought you can apply truncate and line-clamp to any tags as long as you specify the width of your container (w-full)
type: Comment
score: 0
type: AnswerComment

http://stackoverflow.com/q/78907243
tagged with: css
answer count: 0
has title: Changing background of Shopify section - ID's reliable?
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139124889
has body: I'm trying to change the background colour of a section generated by an app, but it seems the only way to do it is via the section's ID, ie: #shopify-section-template--18331524890870__1723807728af0eaf1c { background-color: gray; } However I believe I have read these generated ID's are not completely reliable and subject to change? Is there a more reliable method to do this?
has comment: http://stackoverflow.com/comment/139126593
type: Question
tagged with: shopify
has comment: http://stackoverflow.com/comment/139125297
linked to: http://stackoverflow.com/q/32475702
has comment: http://stackoverflow.com/comment/139125539
score: 0
has comment: http://stackoverflow.com/comment/139125045
has comment: http://stackoverflow.com/comment/139123314

http://stackoverflow.com/comment/139346885
has text: First of all, you're firing the same event for different elements to toggle the display property. So, keep in mind that when the container catches the hover event, the linkContainer's display property will be set to block. When the container's parent loses the hover, the linkContainer's display property will be set to none... Also the parent doesnt have relative position prop
comment on: http://stackoverflow.com/a/79025283
type: Comment
score: 0
type: AnswerComment

http://stackoverflow.com/comment/139348685
type: QuestionComment
has text: add `min-width: 0` to `.cards`
type: Comment
comment on: http://stackoverflow.com/q/79030661
score: 0

chromium-embedded
tags question: http://stackoverflow.com/q/79029100
type: Tag
tag name: chromium-embedded

http://stackoverflow.com/comment/139268192
comment on: http://stackoverflow.com/q/78984963
type: QuestionComment
has text: Okay, so technically you are correct, IntersectionObserver is a standard API provided to you by the browser, but so is the DOM. I assume that from the "vanilla JS" code you write already that you use the DOM API, so there is no reason to avoid the IntersectionObserver API. There are plenty of examples online, and once you have done it the first time, you’ll be a believer.
score: 1
type: Comment

http://stackoverflow.com/comment/139180377
comment on: http://stackoverflow.com/a/78938633
type: Comment
score: 0
type: AnswerComment
has text: this pretty much works, but is there a way to make it work without specifying an explicit percentage height for the placeholder `div` in my original example?

http://stackoverflow.com/comment/139268073
type: Comment
comment on: http://stackoverflow.com/a/78986440
has text: @AlvaroMontoro for some reason (due to some inline CSS rule interfering) my second column has some awful gaps between its elements! What could be causing them? Other than that, indeed this seems like a legit solution to my problem!
score: 0
type: AnswerComment

http://stackoverflow.com/a/79059236
type: AcceptedAnswer
type: Answer
score: 2
downvote count: 0
has body: In fact the example does give an solution. Fortunately, there’s an easy solution. First, set grid-column-start: 1 on each grid item in your CSS; Then, simply use grid-column-end instead of grid-column on each bar’s inline styles. (Either grid-column-end: span x;, or grid-column-end: x + 1; would work, where x is the data point’s value.) This works. section { width: 100%; max-width: 30rem; padding: 1.5rem 1.5rem 2rem; border: 2px solid #a7a8aa; border-radius: 0.5rem; margin: auto; box-sizing: border-box; } .chart { display: grid; grid-template-columns: auto; gap: 0.1em 0; align-items: center; margin: 0; padding: 0; list-style-type: none; border-left: 3px solid grey; } li { background: gold; display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.5rem; border-radius: 0 0.5em 0.5em 0; grid-column-start: 1; } Players per sports team Baseball: 11 Football: 3 Volleyball: 4 Basketball: 3
answers question: http://stackoverflow.com/q/79058959
has comment: http://stackoverflow.com/comment/139415033
accepted answer of: http://stackoverflow.com/q/79058959
upvote count: 2

http://stackoverflow.com/comment/139412237
comment on: http://stackoverflow.com/q/79065331
type: QuestionComment
has text: @user2023141 Could you share a github repo where the issue happens, stackblitz is also fine, code loooks ok, so something else might be wrong!
type: Comment
score: 0

http://stackoverflow.com/comment/139310524
comment on: http://stackoverflow.com/q/79009672
type: Comment
has text: Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/) using the `<>` icon. See [**How to create a Minimal, Reproducible Example**](http://stackoverflow.com/help/reprex)
score: 0
type: QuestionComment

http://stackoverflow.com/a/79040293
answers question: http://stackoverflow.com/q/79040192
has comment: http://stackoverflow.com/comment/139372271
type: AcceptedAnswer
type: Answer
accepted answer of: http://stackoverflow.com/q/79040192
score: 0
has body: I believe your images and slider dots are in sync, the problem is just that you show all images at once before the timer is ran for the first time. When they all stack on top of each other the last one will be on top. I think what you are seeing is: 3rd image + 1st dot 2nd image + 2nd dot 3rd image + 3rd dot 1st image + 1st dot

http://stackoverflow.com/comment/139393898
comment on: http://stackoverflow.com/q/79054258
type: QuestionComment
has text: You do not style JSON, or JavaScript objects for that matter. You style HTML. The code shared here shows no indication of which image you wish to style.
score: 0
type: Comment

http://stackoverflow.com/comment/139177212
score: 1
comment on: http://stackoverflow.com/q/78937138
type: Comment
has text: Instead of pasting the TSX code, paste the resulting HTML. Your question is not clear: what *values*? What classes? How does the class looks like rendered? What colors? Please create a [mre].
type: QuestionComment

mobile-safari
tags question: http://stackoverflow.com/q/78905266
tags question: http://stackoverflow.com/q/78996817
tags question: http://stackoverflow.com/q/78965596
type: Tag
tag name: mobile-safari
tags question: http://stackoverflow.com/q/79110371
tags question: http://stackoverflow.com/q/79222206
tags question: http://stackoverflow.com/q/79085989
tags question: http://stackoverflow.com/q/79334531
tags question: http://stackoverflow.com/q/79298521
tags question: http://stackoverflow.com/q/79274274
tags question: http://stackoverflow.com/q/79482613
tags question: http://stackoverflow.com/q/79503885
tags question: http://stackoverflow.com/q/79528980

absolute
tag name: absolute
type: Tag
tags question: http://stackoverflow.com/q/78928087
tags question: http://stackoverflow.com/q/79471395

visual-studio-2022
type: Tag
tag name: visual-studio-2022
tags question: http://stackoverflow.com/q/78907119
tags question: http://stackoverflow.com/q/79092022

http://stackoverflow.com/comment/139176743
type: Comment
comment on: http://stackoverflow.com/q/78936697
type: QuestionComment
has text: "so that they both vertically align with the bottom images." - do you mean "horizontally align"? That is, the left hand side of the text to be aligned with the left hand side of the first image and the right hand side of the image to be aligned with the right hand side of the third small image?
score: 1

http://stackoverflow.com/comment/139178075
comment on: http://stackoverflow.com/q/78937508
has text: The elements will be as tall as necessary to hold the contents, so if one has more content it will be taller.
type: Comment
score: 0
type: QuestionComment

http://stackoverflow.com/comment/139148184
type: Comment
score: 0
has text: @MisterJojo I think it should all look fine now.
type: QuestionComment
comment on: http://stackoverflow.com/q/78921073

http://stackoverflow.com/comment/139223102
type: Comment
has text: I've made a code snippet from your code, but with the code posted I can't reproduce your issue. Please revise
score: 4
type: QuestionComment
comment on: http://stackoverflow.com/q/78962162

http://stackoverflow.com/comment/139391755
type: Comment
has text: Seems a lot of effort to correct a typo.
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/79053907

http://stackoverflow.com/comment/139268080
comment on: http://stackoverflow.com/a/78986440
score: 1
type: Comment
type: AnswerComment
has text: I found what it is. The first column, the second column, and the top item of the third column have the same height! So the only few elements of the second column and the even fewer elements of the top item of the third column are aligned into that height... https://prnt.sc/iKYFKDdYFu8T

http://stackoverflow.com/a/78986020
type: AcceptedAnswer
has body: Compare the el.getBoundingClientRect().top of the element in relation to the amount of scrollY the window has moved, then add/remove class accordingly. If this is not what you're looking for let know. const el = document.querySelector('#container'); const elRectTop = el.getBoundingClientRect().top; const setStickClass = () =&gt; { if(window.scrollY - 30 &gt;= elRectTop){ el.classList.add('stuck'); }else if(window.scrollY - 30 &lt; elRectTop){ el.classList.remove('stuck'); } } addEventListener('scroll', setStickClass) * { padding: 0; margin: 0; box-sizing: border-box; } body { height: 300vh; width: 100%; padding-top: 50vh; } #container { position: sticky; top: 30px; outline: 2px solid black; height: 100vh; width: 100%; } .stuck { background-color: red; } &lt;div id="container"&gt;&lt;/div&gt;
type: Answer
answers question: http://stackoverflow.com/q/78984963
accepted answer of: http://stackoverflow.com/q/78984963
downvote count: 0
has comment: http://stackoverflow.com/comment/139282876
score: 1
upvote count: 1

http://stackoverflow.com/comment/139213178
comment on: http://stackoverflow.com/a/78956802
type: Comment
has text: Not with this method, no.
score: 0
type: AnswerComment

http://stackoverflow.com/comment/139408772
comment on: http://stackoverflow.com/a/79063036
has text: Thanks a lot, BUT I wanted to use the scale out transition on the `banner-background` element :/
type: Comment
score: 0
type: AnswerComment

password-protection
tags question: http://stackoverflow.com/q/78917311
tag name: password-protection
type: Tag

material-design
tags question: http://stackoverflow.com/q/78906496
tags question: http://stackoverflow.com/q/78997595
tag name: material-design
type: Tag

http://stackoverflow.com/comment/139165722
has text: Using `display: grid` with some additional properties would be best solution.
comment on: http://stackoverflow.com/q/78929748
type: Comment
score: 0
type: QuestionComment

http://stackoverflow.com/comment/139279751
has text: We would need a minimal reproduction.
type: Comment
comment on: http://stackoverflow.com/q/78992932
type: QuestionComment
score: 1

http://stackoverflow.com/comment/139142923
type: QuestionComment
has text: Welcome to stackoverflow. Please [edit] your question to provide a [mcve] preferably in a [snippet](https://meta.stackoverflow.com/questions/358992). I would also recommend you have a look at the [ask] section of the [help], and take the [tour]. Telling people you "really need a solution asap" is not going to help you
score: 2
type: Comment
comment on: http://stackoverflow.com/q/78918783

http://stackoverflow.com/comment/139134762
type: QuestionComment
score: 1
comment on: http://stackoverflow.com/q/78914275
has text: You can apply the hover formatting for the red element, only when it doesn't have a hovered blue descendant - `div.red:hover:not(:has(.blue:hover))`
type: Comment

http://stackoverflow.com/comment/139439828
type: Comment
has text: Now the problem is that the background is not removed outside the full-banner...
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/79063036

http://stackoverflow.com/a/79203044
type: Answer
has body: Use the tailwind CLI to configure it Tailwind.config module.exports = { content: ['../jte/**/*.jte'], theme: { extend: {}, }, plugins: [], } Index.jte @import org.springframework.security.web.csrf.CsrfToken @param gg.jte.Content content Spring Security Demo ${content} If the spring security is implemented make sure you add main.css in the permit clause @Bean @Order(2) public SecurityFilterChain defaultSecurityFilterChain(HttpSecurity http) throws Exception { http .authorizeHttpRequests((authorize) -> authorize .requestMatchers("/login", "/error", "/main.css").permitAll() .anyRequest().authenticated() ) // Form login handles the redirect to the login page from the authorization server filter chain .formLogin((login) -> login.loginPage("/login")); return http.build(); } The main.css file is generated using the script in package.json. Which uses the tailwind cli
downvote count: 0
answers question: http://stackoverflow.com/q/79058417
upvote count: 1
score: 1

electron-forge
tag name: electron-forge
type: Tag
tags question: http://stackoverflow.com/q/78905228

http://stackoverflow.com/a/78943502
has body: You can achieve what you expect by reviewing your CSS, you will find the result here: https://jsfiddle.net/s2pwxa60/, you can stretch the content to see the result. Edit Not sure the result you want ? you want fixed width on mobile / tablet ? IMHO, it's a bad idea, responsive was created to have different sizes on different devices, which is useful. Explanations: Put the border on the boxes, not the container, and add a box-sizing to have better control on the width: :root { --border-separator: 2px solid #000; } .weather-box { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px 20px; width: 80px; background-color: #fff; position: relative; border: var(--border-separator); border-right: 0; margin-bottom: 30px; box-sizing: border-box; } Be sure to add the radius you want on first and last box: .weather-box:first-child { border-radius: 15px 0 0 15px; } .weather-box:last-child { border-radius: 0 15px 15px 0; border-right: var(--border-separator); } Then use media queries for medium screen (for example): @media screen and (max-width: 1280px) and (min-width: 991px) { .weather-box { flex: 1 0 25%; } .weather-box:nth-child(4n) { border-radius: 0 15px 15px 0; border-right: var(--border-separator); } .weather-box:nth-child(4n + 1) { border-radius: 15px 0 0 15px; } } The flex: 1 0 25% will allow you to have 4 elements on a row (100 / 4 = 25). Then use nth-child(4n) to add the radius to every first and last element of each row. You can control the number of elements by changing the percent, and changing the nth value. And do not use your current separator, it's easy to use a CSS border.
answers question: http://stackoverflow.com/q/78943090
type: Answer
score: 0

http://stackoverflow.com/q/78956711
accepted answer: http://stackoverflow.com/a/78956802
has body: I have a table that is being generated by PHP queries in MySql A bit of context: The queries exist of a search and count for a certain hardware type found in database called "hardware". The "userdata" database holds all user data including which hardware type they use. The query plots the hardware type and counts them in the userdata database and plots that number behind the hardware type. This way I know the amound of a certain hardware type being in use. Each itteration then plots the HTML code for the table. The thing is, the table is a bit too long for my dashboard, and I would like to see it split in more columns. Currently the table is 3 columns wide, displaying hardware type, the number and a search button. The output is a bit extensive and it has some formatting so apologies for the cluttering. Hardware Overview Hardware Type Number at customers Lenovo t480c 1 Lenovo T490c 7 Lenovo T14g1 36 Lenovo X13g1 PF 8 Lenovo T14g1_ac 2 Lenovo P15 1 Lenovo T14g2 123 Lenovo X13g2 PF 18 Apple iPad Pro 17 Lenovo T14g2_ac 4 Lenovo X13g2 NP 3 Lenovo T14g3_ac 7 Lenovo X13g3 PF 22 Lenovo T14g3 34 ThinkCentre M90 1 Lenovo X13g4 8 Lenovo X13g3 1 Lenovo P16g1 1 HP ZBOOK G11 1 HP x360 G10 cp 2 HP 840 G10 4 Is there a way to automatically "break" of the table at row 10 (e.g.) and move the rest into a next group of columns? etc etc? I looked at CSS Grid etc, but it doesn't seem to work. https://jsfiddle.net/6pnrygjp/ With span came closest, but I cannot use 3 columns. It mixes everything up
has comment: http://stackoverflow.com/comment/139212918
tagged with: http://stackoverflow.com/tag/html
type: Question
answer count: 1
type: AnsweredQuestion
has answer: http://stackoverflow.com/a/78956802
score: 0
has comment: http://stackoverflow.com/comment/139213051
tagged with: javascript
has comment: http://stackoverflow.com/comment/139213056
has comment: http://stackoverflow.com/comment/139212875
tagged with: php
has comment: http://stackoverflow.com/comment/139213055
has title: Is there a way to automatically split a long three columned HTML table into more columns
has comment: http://stackoverflow.com/comment/139212858
tagged with: css

http://stackoverflow.com/comment/139259097
type: Comment
comment on: http://stackoverflow.com/q/78981553
type: QuestionComment
has text: It certainly shows the issue for me. The text is half a page further down from the top. I cannot fix it using line height or overflow or resetting. The inspect shows the container at the top and the actual text way down the page
score: 1

http://stackoverflow.com/comment/139132382
type: Comment
score: 0
type: AnswerComment
has text: @ParasChouhan Please show your codes with the `foreignObject` tag? Remember to put your `foreignObject` tag at last if the two collides, so the content will stay on top.
comment on: http://stackoverflow.com/a/78912790

math
tag name: math
type: Tag
tags question: http://stackoverflow.com/q/79052069
tags question: http://stackoverflow.com/q/79082466
tags question: http://stackoverflow.com/q/79211594
tags question: http://stackoverflow.com/q/79131469
tags question: http://stackoverflow.com/q/79075594

http://stackoverflow.com/comment/139280096
score: 0
comment on: http://stackoverflow.com/q/78992567
type: QuestionComment
has text: your css is a little messy. mixing of px and calc(vm * vm) lots of media querys. try to organise the css better it should be easy. Maybe make a JSFIddle for demo..
type: Comment

http://stackoverflow.com/comment/139235127
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78964809
has text: @AHaworth No, i mean the elements of the audio player ie the volume slider. How would I see what CSS is being applied to things like the volume slider, if I cant see the HTML for the volume slider? Audio itself doesnt inherit the css for say audio::-webkit-media-controls-enclosure does it?
type: QuestionComment

http://stackoverflow.com/a/78918097
has comment: http://stackoverflow.com/comment/139147241
has comment: http://stackoverflow.com/comment/139142459
type: AcceptedAnswer
downvote count: 0
type: Answer
accepted answer of: http://stackoverflow.com/q/78917857
upvote count: 1
has body: If you can't modify html... I think it's possible to set the position of the topbar to absolute and match it by giving margin as high as the topbar at the top of the navbar, main content. As long as the style can be applied freely. Method 1 position absolute, and margin .wrapper { position: relative; } .top-bar { position: absolute; } .side-bar { margin-top: 48px; } .main-content { margin-top: 48px; } TopBar SideBar Main content Method2 use grid set the properties as contents so that ParentNav's children can be handled in the grid. #ParentNav .wrapper { display: grid; grid-template-columns: 256px 1fr; grid-template-rows: 48px 1fr; height: 100vh; } .wrapper>#ParentNav { display: contents; } .wrapper>#ParentNav>.top-bar { grid-column-start: 1; grid-column-end: -1; grid-row: 1; } .wrapper>#ParentNav>.side-bar { grid-column: 1; grid-row: 2; } .wrapper>.main-content { grid-column: 2; grid-row: 2; } TopBar SideBar Main content
has comment: http://stackoverflow.com/comment/139142987
answers question: http://stackoverflow.com/q/78917857
score: 1

http://stackoverflow.com/comment/139288391
type: Comment
has text: @SahilDhir this is not a helpful link. it is something the OP already stated to have tried but will not allow him to have rounded corners. Besides that, it is just a code editor that you have on SO itself.
score: 0
comment on: http://stackoverflow.com/q/78997521
type: QuestionComment

http://stackoverflow.com/a/78991582
answers question: http://stackoverflow.com/q/78991516
has comment: http://stackoverflow.com/comment/139277722
has body: Change the viewbox to the real values used in the path (4 4 40 40 not 0 0 48 48), Add css vertical-align. Do not duplicate css width and height attributes .box { width : 230px; border : 1px solid black; overflow : hidden; text-overflow : ellipsis; white-space : nowrap; } svg { width : 20px; /* height is the same because aspect-ratio is 1/1 on default */ vertical-align : bottom; } This is text and it should truncate . Also with em unit... -> vertical-align : sub; or vertical-align : middle; .box { font-size : 16px; width : 14em; border : 1px solid black; overflow : hidden; text-overflow : ellipsis; white-space : nowrap; } svg { width : 4em; /* === height (aspect-ratio: 1/1 on default) */ vertical-align : middle; } This is text and it should truncate
has comment: http://stackoverflow.com/comment/139277540
type: Answer
score: 0
has comment: http://stackoverflow.com/comment/139277800
has comment: http://stackoverflow.com/comment/139277568

http://stackoverflow.com/comment/139417053
comment on: http://stackoverflow.com/q/79067744
type: Comment
has text: Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/) using the `<>` icon. See [**How to create a Minimal, Reproducible Example**](http://stackoverflow.com/help/reprex)
score: 0
type: QuestionComment

http://stackoverflow.com/comment/139377438
type: Comment
comment on: http://stackoverflow.com/q/79045866
has text: Yes, but the color is not depending on color-scheme, read the doc. Color will inherit from the color-scheme, so you can't control it.
score: 1
type: QuestionComment

http://stackoverflow.com/comment/139354117
has text: See update. I chose jQuery UI
type: AnswerComment
comment on: http://stackoverflow.com/a/79033554
score: 1
type: Comment

http://stackoverflow.com/comment/139296012
type: Comment
score: 0
comment on: http://stackoverflow.com/a/78991510
has text: Thank you worked like a charm... Wow I thought max-height affects height aswell
type: AnswerComment

http://stackoverflow.com/comment/139193770
type: QuestionComment
comment on: http://stackoverflow.com/q/78911849
type: Comment
has text: Unfortunately, CSS alone does not support automatically adjusting the font size to perfectly fit the text within the container's width and extend it to a single line without overflowing. However, you can try using a combination of viewport units like vw to adjust the text size based on the container's width.
score: 0

javafx
tags question: http://stackoverflow.com/q/79029522
tags question: http://stackoverflow.com/q/78906838
tags question: http://stackoverflow.com/q/78975917
type: Tag
tag name: javafx
tags question: http://stackoverflow.com/q/79243603
tags question: http://stackoverflow.com/q/79237942
tags question: http://stackoverflow.com/q/79242206
tags question: http://stackoverflow.com/q/79226492
tags question: http://stackoverflow.com/q/79250960
tags question: http://stackoverflow.com/q/79416043
tags question: http://stackoverflow.com/q/79307490

http://stackoverflow.com/a/78943162
answers question: http://stackoverflow.com/q/78943090
type: Answer
has comment: http://stackoverflow.com/comment/139188434
score: 0
has body: body { font-family: Arial, sans-serif; text-align: center; margin-top: 50px; } .weather-container { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin: 0 auto; padding: 10px; border-radius: 15px; border: 2px solid #000; max-width: 100%; background-color: #fff; } .weather-box { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px 20px; width: 80px; background-color: #fff; position: relative; margin: 10px; flex: 1 1 80px; max-width: 120px; } .weather-icon { font-size: 36px; } .temperature { display: flex; justify-content: space-between; width: 100%; margin-top: 5px; font-size: 18px; } .temperature span { width: 45%; text-align: center; } .month-label { font-size: 14px; font-weight: bold; margin-bottom: 5px; } .separator { position: absolute; top: 0; right: 0; width: 2px; height: 100%; background-color: #000; } /* remove separator from last box */ .weather-box:last-child .separator { display: none; } @media (max-width: 1200px) { .weather-box { flex: 1 1 100px; /* Allows more space per box */ } } @media (max-width: 768px) { .weather-box { flex: 1 1 120px; /* Allows the box to grow larger */ } } @media (max-width: 480px) { .weather-box { flex: 1 1 100%; /* Full width for small screens */ } } New York City Monthly Weather Forecast January ☁️ HI 39° LO 26° February ☀️ HI 42° LO 29° March ☀️ HI 50° LO 35° April ️ HI 61° LO 45° May ☀️ HI 71° LO 54° June ☀️ HI 79° LO 64° July ☀️ HI 84° LO 69° August ☀️ HI 83° LO 68° September ️ HI 76° LO 61° October ☁️ HI 65° LO 50° November ☁️ HI 55° LO 41° December ❄️ HI 45° LO 32°

http://stackoverflow.com/comment/139443280
has text: @AHaworth Any ideas? Thanks :)
type: Comment
score: 0
comment on: http://stackoverflow.com/a/79041195
type: AnswerComment

mediapipe
tags question: http://stackoverflow.com/q/79055839
tag name: mediapipe
type: Tag

http://stackoverflow.com/q/78933676
type: UnansweredQuestion
has comment: http://stackoverflow.com/comment/139171002
type: Question
tagged with: http://stackoverflow.com/tag/html
has comment: http://stackoverflow.com/comment/139170982
has comment: http://stackoverflow.com/comment/139170953
has body: I have a webpage with an image. When I click on the image, it opens modal. When I click on the close button, it closes the modal. However, when I click outside the modal, it doesn't close the modal. I added event listener to detect clicks but doesn't work. I am out of ideas. Here is my code. Thanks. document.addEventListener("DOMContentLoaded", function() { var modal = document.getElementById("imageModal"); var modalImg = document.getElementById("modalImage"); var captionText = document.getElementById("caption"); // Select only images with the 'modal-trigger' class var images = document.querySelectorAll(".modal-trigger"); images.forEach(function(img) { img.onclick = function() { modal.style.display = "block"; var modalSrc = this.getAttribute("data-modal-src") || this.src; modalImg.src = modalSrc; captionText.innerHTML = this.alt; } }); var span = document.getElementsByClassName("close")[0]; // Check if the close button exists if (span) { span.onclick = function() { modal.style.display = "none"; } } else { console.error("Close button not found."); } // Close the modal if the user clicks anywhere outside the modal content window.addEventListener("click", function(event) { // Check if the click is outside the modal content if (event.target === modal) { modal.style.display = "none"; } }); }); /* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 20px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgba(0, 0, 0, 0.6); } /* Modal Content (image) */ .modal-content { margin: auto; display: block; width: 60%; } /* Caption of Modal Image (Image Text) - Add some padding */ #caption { margin: auto; display: block; width: 80%; max-width: 700px; text-align: center; color: #ccc; padding: 10px 0; } /* Add Animation - Zoom in the Modal */ .modal-content, #caption…
linked to: http://stackoverflow.com/q/152975
score: 0
tagged with: javascript
has title: why does my modal not close when I click outside the modal?
has comment: http://stackoverflow.com/comment/139170972
answer count: 0
tagged with: css
has comment: http://stackoverflow.com/comment/139170939
duplicate of: http://stackoverflow.com/q/152975

reveal.js
tag name: reveal.js
tags question: http://stackoverflow.com/q/79049572
type: Tag
tags question: http://stackoverflow.com/q/79205802
tags question: http://stackoverflow.com/q/79259745
tags question: http://stackoverflow.com/q/79258700

http://stackoverflow.com/comment/139402377
comment on: http://stackoverflow.com/q/79058041
type: Comment
has text: typically I have between 7 to 16 tubes, the whole container that is consistently more than a single row on mobile should be constrained to `90vh` not just individual tubes. (I guess the fact that there are typically at least 2 rows is not clear in my question huh, let me go fix that)
score: 0
type: QuestionComment

http://stackoverflow.com/a/79006465
answers question: http://stackoverflow.com/q/79004380
score: 1
has comment: http://stackoverflow.com/comment/139304359
has body: The problem lies in your data structure. You need to add points without a defined level or define it correctly. For example: series: [{ data: [ ..., ["West Slavic", "Polish", 6], ["Polish", "POLISH2", 7], ["POLISH2", "PPPPPPPPP", 8], ["POLISH2", "PPPPPPPPP", 8], ["POLISH2", "PPPPPPPPP", 8], ["POLISH2", "PPPPPPPPP1", 8], ["POLISH2", "PPPPPPPPP", 8], ["POLISH2", "PPPPPPPPP", 8], ["POLISH2", "PPPPPPPPP", 8], ["POLISH2", "PPPPPPPPP", 8], ... ], ... }] Live demo: https://jsfiddle.net/BlackLabel/s16c4rLf/ API Reference: https://api.highcharts.com/highcharts/series.treegraph.data
type: AcceptedAnswer
type: Answer
downvote count: 0
upvote count: 1
accepted answer of: http://stackoverflow.com/q/79004380

http://stackoverflow.com/comment/139362848
comment on: http://stackoverflow.com/q/79021330
type: QuestionComment
has text: @AlanMoore I'm not suggesting it's impossible, but I for one haven't worked out how to do it as bunny seems to take over all click handling immediately.
type: Comment
score: 0

http://stackoverflow.com/comment/139128935
has text: Please add *all* relevant code inside the question in order to create a [mre]
comment on: http://stackoverflow.com/q/78909194
type: Comment
score: 0
type: QuestionComment

http://stackoverflow.com/comment/139354844
has text: @TemaniAfif Is it possible to trigger it somehow? What is the best way to solve this problem?
comment on: http://stackoverflow.com/q/79033988
type: Comment
score: 0
type: QuestionComment

http://stackoverflow.com/comment/139215194
type: QuestionComment
score: 1
type: Comment
comment on: http://stackoverflow.com/q/78957954
has text: Please [edit] your question to show what you tried and we can go from there.

http://stackoverflow.com/comment/139293350
has text: There's not enough detail on why you need to set the width explicitly (assuming there's more components inside the div), but this really looks like it be solved by using the correct layout with correct CSS instead of calculating the width in JS.
type: Comment
score: 0
comment on: http://stackoverflow.com/q/79000174
type: QuestionComment

http://stackoverflow.com/comment/139231138
type: QuestionComment
has text: By ‘nothing nested inside it’ do you mean that element has no attributes? (I wouldn’t expect it to have any nested content).
comment on: http://stackoverflow.com/q/78964809
type: Comment
score: 0

http://stackoverflow.com/comment/139153210
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78923710
has text: Yes, I wanted to make sure that Arial is applied in place of Helvetica and not because it could be a default sans serif font.

http://stackoverflow.com/comment/139348562
has text: You can get part way there (and in a way the user may not notice) by putting mix-blend-mode: darken on the span. But of course it depends on the relationship between the background color and cross - you'd always be OK if the cross was black, In the case you have given the blue diagonal shows up over the magenta color but is just behind the actual characters.
type: Comment
score: 0
comment on: http://stackoverflow.com/q/79030490
type: QuestionComment

http://stackoverflow.com/comment/139175544
type: QuestionComment
has text: @ralph.m Done..
comment on: http://stackoverflow.com/q/78936069
type: Comment
score: 0

http://stackoverflow.com/q/79049598
tagged with: css
answer count: 3
linked to: http://stackoverflow.com/q/30661650
has comment: http://stackoverflow.com/comment/139384341
type: UnansweredQuestion
has title: How can I make a table width 100% for Safari/Firefox Reader Mode?
tagged with: accessibility
has body: On browsers like Safari and Firefox, the table width isn't shown 100% in Reader View Mode. But if I add , HTML validators flag it as an obsolete element. Adding styles won't work as Reader View Mode strips CSS. Tried using inline styles for the table but that too is stripped away in Reader View Mode. How to resolve this issue? My code for table: The table below shows nutritional values per serving without the additional fillings. Calories 227kcal Carbs 0g Protein 20g Fat 22g
has answer: http://stackoverflow.com/a/79049727
tagged with: http://stackoverflow.com/tag/html
has answer: http://stackoverflow.com/a/79051972
type: Question
has answer: http://stackoverflow.com/a/79051989
has comment: http://stackoverflow.com/comment/139383908
has comment: http://stackoverflow.com/comment/139395928
score: 0

http://stackoverflow.com/comment/139126778
type: AnswerComment
has text: You don't need any JS to implement this - you can do it using _only_ CSS with the `:has()` and `:checked` selectors.
score: 1
comment on: http://stackoverflow.com/a/78909739
type: Comment

http://stackoverflow.com/comment/139131145
type: QuestionComment
comment on: http://stackoverflow.com/q/78911849
score: 1
type: Comment
has text: With a monospaced font and a known number of characters and using container units, possibly. For the general case JavaScript would be needed.

http://stackoverflow.com/a/79028457
has body: It depends on why it is invalid. If you literally use the "auto" value in the calc, then the value is invalid when the cascade is evaluated and it plays no part in the cascade result. So the value used is whatever wins the cascade. But if the "auto" value comes from the custom property, then it's "Invalid At Computed Value Time (IACVT)". This means that it can win the cascade and the value is determined as Bramus explains in the link above: If the property is a non-registered custom property or a registered custom property with universal syntax it gets replaced by the guaranteed-invalid value. In all other cases the value becomes unset, whose outcome depends on whether the property is allowed to inherit or not. If the property is allowed to inherit, it behaves as inherit, so it inherits the computed value from its parent. If the property is not allowed to inherit, it behaves as initial, falling back to the initial value.
type: AcceptedAnswer
upvote count: 4
answers question: http://stackoverflow.com/q/79028325
type: Answer
accepted answer of: http://stackoverflow.com/q/79028325
downvote count: 0
score: 4

gt
tags question: http://stackoverflow.com/q/79004101
type: Tag
tag name: gt
tags question: http://stackoverflow.com/q/79422307
tags question: http://stackoverflow.com/q/79465039

http://stackoverflow.com/comment/139142007
has text: Unfortunately I can't adjust the html to get the TopBar out of the ParentNav.
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78918156

http://stackoverflow.com/comment/139374618
score: 0
type: Comment
has text: https://css-shape.com/inverted-radius/ (https://verpex.com/blog/website-tips/how-to-create-shapes-with-inner-curves-using-css-mask)
comment on: http://stackoverflow.com/q/79044507
type: QuestionComment

http://stackoverflow.com/q/79059550
type: Question
has answer: http://stackoverflow.com/a/79059702
answer count: 1
type: AnsweredQuestion
accepted answer: http://stackoverflow.com/a/79059702
tagged with: reactjs
score: 0
tagged with: javascript
tagged with: material-ui
tagged with: css
has title: MUI 5/6 border radius is different in default settings and when used with theme.shape.borderRadius
has body: I am using Mui for my website and while constructing theme, I set my border radius to be { palette: ..., shadows: ..., typography: ..., shape: { borderRadius: 3, }, } Now, when I import Button from MUI directly and use the buttton, it has border radius 3px checked in Chrome inspect. I have created another box using the theme.shape.borderRadius, and it is more rounded, having a border radius of 9px. Why are the border radii different even though they should be referring to the same value I set in the theme? Start now theme.shape.borderRadius, display: "flex", alignItems: "center", justifyContent: "center", }} > Start now Settings px explicity works, but that's not what I want to do. borderRadius: (theme) => theme.shape.borderRadius+'px'

http://stackoverflow.com/comment/139199584
type: Comment
score: 0
has text: Now all we need is find someone who does a ``<styled-textarea>`` Web Component, with lineNumbers and line highlightinng for (Web Component) educational purposes
comment on: http://stackoverflow.com/a/78944871
type: AnswerComment

http://stackoverflow.com/comment/139244411
comment on: http://stackoverflow.com/q/78973631
type: QuestionComment
score: 0
has text: I tried to run the code in your question, but get nothing like what you show in your image. I replace missing color variables, but it still shows nothing. Are you using something that's not included in your question? Why not test the code you publish first, and maybe use a code snippet, like in the answer below, so we can directly see what it does? (I didn't downvote your question by the way, downvoters rarely say why they do that.)
type: Comment

http://stackoverflow.com/comment/139184210
has text: @nick since both CSS2.1 and CSS2.2 are almost the same you can use the CSS2.1 option. I don't think you can produce a code that is valid in CSS2.1 and not CSS2.2 (or the opposite)
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78940897

http://stackoverflow.com/comment/139148025
comment on: http://stackoverflow.com/q/78921098
type: Comment
score: 0
type: QuestionComment
has text: This question is similar to: [How to stretch cards to fill entire div with HTML/CSS?](https://stackoverflow.com/questions/78920407/how-to-stretch-cards-to-fill-entire-div-with-html-css). If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem.

http://stackoverflow.com/a/78912278
has comment: http://stackoverflow.com/comment/139132158
has body: Here is an example of an infinite adaptive running line. No js. However, pay attention to the comments in the code: It is possible that the length of your line is less than the width of the screen, so you need to duplicate the text. You need to know the exact length of your line in pixels, after loading the font and rendering. This can be calculated in js. Or calculated in advance and written into the code. Unfortunately, it happens that fonts are rendered differently in different browsers, so you will need to test your code in each browser separately. CodePen Link body { display: flex; min-height: 100vh; } .running-line-wrapper { margin: auto; width: 100%; overflow: hidden; } .running-line { font-size: 100px; font-family: sans-serif; font-weight: 700; text-transform: uppercase; color: #444; white-space: nowrap; } .running-line { animation: run 2s linear infinite; } @keyframes run { from { transform: translateX(0%); } /* Magic is here. This is the width of the elem with text after rendering the page */ to { transform: translateX(-1683.35px); } } Lorem ipsum dolor sit amet * Lorem ipsum dolor sit amet * Lorem ipsum dolor sit amet *
type: Answer
answers question: http://stackoverflow.com/q/78912182
score: 0
has comment: http://stackoverflow.com/comment/139132034

http://stackoverflow.com/a/79063780
type: AcceptedAnswer
has comment: http://stackoverflow.com/comment/139409617
answers question: http://stackoverflow.com/q/79063741
type: Answer
accepted answer of: http://stackoverflow.com/q/79063741
has body: I found I can use the Ext.ux.TabReorderer class. Unfortunately I am having problems with hitting any of the listener events. var newTabPanel = Ext.create('Ext.tab.Panel', { plugins : Ext.create('Ext.ux.TabReorderer', {animate: false}), flex: 1, tabBar: { style: 'background-color: white; border-radius: 0px; margin-top: 5px; margin-right: 5px;' }, listeners: { tabchange: 'tabChange' }, items: [{ title: 'tab 1' },{ title: 'tab 2' },{ title: 'tab 3' }] }); i figured out i needed to add the listeners inside the TabReorderer component.
score: 0
has comment: http://stackoverflow.com/comment/139417620

http://stackoverflow.com/comment/139213183
type: AnswerComment
has text: OK. Thank you so much! This helps a lot
comment on: http://stackoverflow.com/a/78956802
type: Comment
score: 0

http://stackoverflow.com/comment/139203524
type: QuestionComment
comment on: http://stackoverflow.com/q/78951532
has text: I don't think we can give a complete answer until we know a little more about the layout you want to achieve in general cases. For starters, your picture shows a neat fitting of the image height and the adjacent text, what do you want it to look like if a) there isn't sufficient text to 'fill' the second column vertically? and b) are these indeed to be columns (if there is too much text then it stays in that column or does it flow under the image). And is there a limit widthwise on having the 3 columns? Indeed, is it 3 fixed width columns?
score: 2
type: Comment

http://stackoverflow.com/comment/139141258
type: QuestionComment
comment on: http://stackoverflow.com/q/78916876
type: Comment
score: 0
has text: Understood, you need it for accessibility, thanks for the clarification.

handlebars.js
tags question: http://stackoverflow.com/q/78976920
tag name: handlebars.js
type: Tag
tags question: http://stackoverflow.com/q/78925311

http://stackoverflow.com/a/79075550
type: Answer
score: 0
answers question: http://stackoverflow.com/q/79063993
accepted answer of: http://stackoverflow.com/q/79063993
has body: I have found the solution. For some reason, for some reason, .h-auto was giving me a panel height of 100vh, regardless of whether collapsible elements were expanded or not. The trick was to have .overflow-visible when I open the offcanvas panel, and in this way the height of the panel adjusted to the content. openTop() { this.offcanvasService.open(AdvancedSearchComponent, { position: 'top', backdropClass: 'bg-dark', panelClass: 'h-25 bg-danger text-bg-danger d-flex flex-column overflow-visible', keyboard: true, }); } Then, in order to add a scrollbar I realized that what I was missing was setting a height the child element: css: .form-height { max-height: 95vh; } That did the trick I was looking for: the offcanvas has a minimum height of 25vh, it expands up to about 100vh, and if the content expands beyond the viewport, it adds a scrollbar. For some reason, .overflow-auto.h-auto didn't adjust the height to the content, and it showed an offcanvas panel that filled 100% of the screen, even if all the elements were collapsed.
type: AcceptedAnswer

gtk3
type: Tag
tag name: gtk3
tags question: http://stackoverflow.com/q/78943132

http://stackoverflow.com/comment/139394841
type: Comment
comment on: http://stackoverflow.com/a/79055858
score: 0
type: AnswerComment
has text: Thank for your answer ! My code ins now: ``` ` `` For an unknow reasron Iget the effect I want when my screen is beetwen 699px and 583px. But under that the spacing of my inputs does not correspond at all to my initial intention.

http://stackoverflow.com/comment/139312038
comment on: http://stackoverflow.com/q/79009672
type: Comment
score: 0
has text: As others have requested, you need to show us the code that creates the triangle and also what attempts you have made at the rotation.
type: QuestionComment

http://stackoverflow.com/comment/139229816
score: 1
has text: @C3roe Thanks! That's stopped the jittering. :)
comment on: http://stackoverflow.com/q/78965578
type: QuestionComment
type: Comment

http://stackoverflow.com/comment/139352346
comment on: http://stackoverflow.com/a/79029558
type: AnswerComment
score: 0
has text: Thanks for the help @haolt.
type: Comment

http://stackoverflow.com/comment/139319118
type: Comment
comment on: http://stackoverflow.com/q/79014373
has text: You'll need to post your code here for assistance. Links aren't permanent over time, leaving out help for future developers.
type: QuestionComment
score: 4

http://stackoverflow.com/comment/140020238
has text: This question is similar to: [Problem installing TailwindCSS with Vite, after "npx tailwindcss init -p" command](https://stackoverflow.com/questions/79380514/problem-installing-tailwindcss-with-vite-after-npx-tailwindcss-init-p-comman). If you believe it’s different, please [edit] the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem.
comment on: http://stackoverflow.com/q/78908521
type: QuestionComment
type: Comment
score: 0

http://stackoverflow.com/q/78964387
tagged with: framer-motion
tagged with: css
has title: Framer motion background color change from left to right
has body: I saw this effect on the following website (link below), and I tried to replicate it using framer motion (React.js), but it didn't work. The effect is, when the user hover on the card, the background changes color from white to the primary color of the website. But the color change is directional, it moves from left to right (x: 0 to x:100). I tried it with hover and it changes, but the change happens on the whole card at once (like a normal hover). I can't figure out how they made it directional. I'm using framer motion for React.js Any help will be appreciated.. thanks in advance... This is the link to page that contains the card, you will find it in the "Trending" section: https://ukf.com/read/ This is my code: import { FC } from "react"; import { motion } from "framer-motion"; import { Stack, Typography, Divider, Button } from "@mui/material"; const NewsCard: FC = () => { return ( <motion.div whileHover={{ // backgroundColor: ["var(--dark-bg)", "var(--secondary)"] // background: "linear-gradient(to right, var(--dark-bg) 0%, var(--secondary) 100%)", // backgroundColor: "var(--secondary)", // backgroundSize: "250%" }} transition={{ duration: 0.3, ease: "easeIn" }} style={{ // height: "90%", // height: "100%", // border: "1px solid var(--secondary)", backgroundColor: "var(--dark-bg)" // background: "linear-gradient(to right, var(--dark-bg) 0%, var(--secondary) 100%)" }} > Tag1 Tag2 Tag3 {/* { dayjs(article.created_at).format("DD MMM YYYY") } */} 11/02/2024 <Divider sx={{ borderColor: "secondary.main" }} /> Ut sapiente ut nemo dicta et rem rerum ratione beatae. Ut sapiente ut nemo dicta et rem rerum ratione beatae. by Hazem Saeed Ipsam quam et non ut. Reprehenderit unde sunt minus. Sit quia similique sunt quam. Velit neque voluptatem quod. Et qui quam sint cupiditate sunt repellendus unde est temporibus. read more </motion.div> ); }; export default NewsCard;
duplicate of: http://stackoverflow.com/q/20751937
type: UnansweredQuestion
linked to: http://stackoverflow.com/q/20751937
has answer: http://stackoverflow.com/a/78964412
type: Question
answer count: 1
score: 0

http://stackoverflow.com/comment/139493819
comment on: http://stackoverflow.com/a/79036586
type: Comment
has text: I also commented out the transform and the padding which you had set - perhaps ugly visually but just changes the color on the background and adds the shadow border
score: 0
type: AnswerComment

http://stackoverflow.com/a/79066554
answers question: http://stackoverflow.com/q/79060259
type: AcceptedAnswer
accepted answer of: http://stackoverflow.com/q/79060259
type: Answer
score: 0
has body: Turns out the root of the issue is the mobile browser over-optimizing the animations, and not repainting as necessary. The fix is admittedly a bit of a workaround, but it works perfectly - add an imperceivable animation that forces a repaint: @keyframes steam { 0% { transform: scale(1); background-position: 0 0; } 50% { transform: scale(1.01); background-position: 200% 0; } 100% { transform: scale(1.0); background-position: 0 0; } }

http://stackoverflow.com/comment/139318191
comment on: http://stackoverflow.com/q/79007479
type: Comment
score: 0
has text: @Mohammadsiabbou the problem was related to Boostrap library. The BoostraopDialog.show for some reason interprets a new line as a tag. For example, if I add a new line between the tabs, the Bootstrap would add a tag. The solution that I found to solve this problem was to add the "nl2br" property to the BoostrapDialog.
type: QuestionComment

horizontal-scrolling
tag name: horizontal-scrolling
type: Tag
tags question: http://stackoverflow.com/q/78937309

http://stackoverflow.com/comment/139300074
type: QuestionComment
type: Comment
comment on: http://stackoverflow.com/q/79000282
has text: @Barmar this is not always true. In the `:focus-within` suggestion in the answer below, the focus manages to somehow stay inside of the container between `blur` and `focus`.
score: 0

http://stackoverflow.com/comment/139123527
type: QuestionComment
score: 1
comment on: http://stackoverflow.com/q/78906838
type: Comment
has text: I believe this is at least partly OS-dependent. On Windows 10/11, any *fully* transparent part of a window acts as if the mouse is hovering over whatever is behind the window. Note, however, that the *drop shadow* is not considered to be transparent. Meaning its not the "cyan" pane that's the problem, but the drop shadow effect on the red pane. Again, this is the behavior I see on Windows 10/11; I don't have access to other operating systems for testing.

http://stackoverflow.com/comment/139166775
has text: @AHaworth I set it to half a second so that the effect is more visible. No matter what delay you use, the problem persists. Unless I'm missing something in my code, it must be a browser/css-bug. Number of childs * delay = total duration. While the first example works as expected, there is no logical reason why the delay doesn't work for the variants with more children.
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78926909

http://stackoverflow.com/comment/139143697
type: Comment
score: 0
has text: I see, never worked worked with it, but you might check the link @mplungjan shared that actually explains it..
type: QuestionComment
comment on: http://stackoverflow.com/q/78919137

http://stackoverflow.com/comment/139130943
comment on: http://stackoverflow.com/q/78911737
type: Comment
has text: @AHaworth not actually I'm updating the value by +12 or +24. I'm directly setting the new number
score: 0
type: QuestionComment

http://stackoverflow.com/comment/139181389
has text: @Umesh Singh I edited the question. I am trying to fix the header image and hamburger menu and scroll the rest of the content.
type: QuestionComment
comment on: http://stackoverflow.com/q/78939256
type: Comment
score: 0

http://stackoverflow.com/comment/139270391
type: QuestionComment
comment on: http://stackoverflow.com/q/78987811
has text: The code you have shown does not demonstrate the problem you have described so please create a runnable snippet which you have tested definitely does demonstrate the problem.
type: Comment
score: 0

http://stackoverflow.com/comment/139403794
has text: It would be nice to use html2canvas library, but object-fit is in the list of ["Unsupported CSS properties"](https://html2canvas.hertzen.com/features/).
type: Comment
score: 0
comment on: http://stackoverflow.com/q/79060035
type: QuestionComment

http://stackoverflow.com/comment/139278097
score: 4
type: QuestionComment
comment on: http://stackoverflow.com/q/78991837
has text: Did you try the answers [in this similar question](https://stackoverflow.com/questions/13975198/text-shadow-and-box-shadow-while-printing-chrome)?
type: Comment

http://stackoverflow.com/comment/139315873
score: 0
type: QuestionComment
has text: Password u provided doesn't work "ustax"
comment on: http://stackoverflow.com/q/79012618
type: Comment

http://stackoverflow.com/comment/139275590
type: Comment
score: 0
has text: can we use class btn to tag and change style accordingly. Or can we add href to button directly??
type: QuestionComment
comment on: http://stackoverflow.com/q/78990560

http://stackoverflow.com/comment/139129579
type: AnswerComment
comment on: http://stackoverflow.com/a/78908116
has text: Thank you very much, it worked! You saved me time and nerves.
score: 1
type: Comment

http://stackoverflow.com/comment/139253393
type: QuestionComment
comment on: http://stackoverflow.com/q/78978467
score: 0
has text: @C3roe I've verified it, it's getting fired
type: Comment

http://stackoverflow.com/comment/139149086
type: Comment
has text: It would be a best practice not to add styles to the body. Better to create a container in it that wraps all the elements that are in ` ` and copy the styles from `body {...}` to this new container.
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78913998

text-align
type: Tag
tag name: text-align
tags question: http://stackoverflow.com/q/78995150
tags question: http://stackoverflow.com/q/79220423
tags question: http://stackoverflow.com/q/79283400
tags question: http://stackoverflow.com/q/79496615

http://stackoverflow.com/comment/139395159
type: Comment
score: 0
has text: Thank you. I added a screenshot to my original question of how the css edit you suggested is displayed. You can see box-orient and line-clamp arent being recognized. No idea why.
type: AnswerComment
comment on: http://stackoverflow.com/a/79056061

http://stackoverflow.com/comment/139155883
has text: I did see that [page-break-inside](https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-inside) and [page-break-after](https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-after) have been replaced, but I doubt that will make any difference.
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78925311

http://stackoverflow.com/comment/139195238
has text: @MisterJojo Thanks for this solution it helps me to understand better.
comment on: http://stackoverflow.com/a/78935743
type: Comment
score: 0
type: AnswerComment

flowbite
tags question: http://stackoverflow.com/q/78908058
type: Tag
tag name: flowbite
tags question: http://stackoverflow.com/q/79145579
tags question: http://stackoverflow.com/q/79432594

http://stackoverflow.com/comment/139275583
comment on: http://stackoverflow.com/q/78989496
type: Comment
score: 0
type: QuestionComment
has text: Unsure why doesn't work, as an alternative could use "50vh" and use viewport height

extends
tag name: extends
tags question: http://stackoverflow.com/q/78921611
type: Tag

http://stackoverflow.com/tag/xhtml
type: Tag
tag name: xhtml
tags question: http://stackoverflow.com/q/79017200
tags question: http://stackoverflow.com/q/79541884

http://stackoverflow.com/comment/139303023
comment on: http://stackoverflow.com/a/78996025
type: Comment
score: 0
has text: thanks for the thought but I have a job in this area so all good
type: AnswerComment

http://stackoverflow.com/comment/139146222
has text: What you're looking for is probably `flex: 1` in your `.card`, and `.card img { width: 100%; object-fit: cover }`
type: QuestionComment
score: 0
type: Comment
comment on: http://stackoverflow.com/q/78920407

http://stackoverflow.com/comment/139292154
type: Comment
has text: Well, even though I changing the max-w-96 to w-96 only the size changes, the other functions like the hidden are not working.
score: 0
comment on: http://stackoverflow.com/q/78996058
type: QuestionComment

http://stackoverflow.com/comment/139118991
score: 0
has text: _"What is the best decision so code will be semantically corrent?"_ - probably to _separate_ the button, and the modal content. Write your own click handler for the button, that then calls the JS method to show the modal.
type: QuestionComment
comment on: http://stackoverflow.com/q/78905493
type: Comment

http://stackoverflow.com/comment/139232109
type: Comment
score: 0
type: QuestionComment
has text: " If in any pair of shadows, one has inset set and the other does not, the entire shadow list is uninterpolated; the shadows will change to the new values without an animating effect." from: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow#interpolation
comment on: http://stackoverflow.com/q/78966886

http://stackoverflow.com/a/79002130
answers question: http://stackoverflow.com/q/79001772
type: Answer
score: 0
has body: In your code, you give border width right and bottom sides so the right icon shows the as per mirror or fliped so only remove the right side border add border width for the left side and rotate your symbol to the proper direction. I think below I added the code to helpful you. body, html { margin: 0; padding: 0; height: 100%; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f0f8ff; display: flex; justify-content: center; align-items: center; text-align: center; } .container { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); max-width: 600px; width: 100%; } h2 { color: #1F75FE; margin-bottom: 20px; } p { color: #333; margin-bottom: 20px; } a { color: #1F75FE; text-decoration: none; font-weight: bold; } a:hover { text-decoration: underline; } .tick { display: inline-block; width: 70px; height: 70px; border-radius: 50%; background-color: #d4edda; color: #28a745; font-size: 40px; line-height: 70px; margin-bottom: 20px; position: relative; animation: scale 0.5s ease-in-out forwards; } .tick:before { content: ''; position: absolute; top: 20px; left: 50%; width: 30px; height: 15px; border: solid #28a745; border-width: 0 0 5px 5px; transform: translateX(-50%) rotate(-45deg); opacity: 0; animation: fadeIn 0.5s forwards 0.5s; } @keyframes scale { 0% { transform: scale(0); } 100% { transform: scale(1); } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } Order Complete! Your order is completed successfully

http://stackoverflow.com/comment/139356739
comment on: http://stackoverflow.com/q/79033531
type: Comment
score: 0
type: QuestionComment
has text: It seems this answers only a part of my question.

http://stackoverflow.com/comment/139188215
type: QuestionComment
score: 2
has text: Probably easiest, if you insert some "divider" divs in the appropriate locations, that you hide when you don't want to break into a new row at that position, and set them to `width: 100%` when you do.
type: Comment
comment on: http://stackoverflow.com/q/78943090

vb.net
tags question: http://stackoverflow.com/q/78989748
type: Tag
tag name: vb.net

http://stackoverflow.com/comment/139156984
type: Comment
score: 0
has text: If you provide reproduceable code or example that would be more useful. You can use jsfiddle or codesandbox for that.
type: QuestionComment
comment on: http://stackoverflow.com/q/78925071

progress-bar
tag name: progress-bar
tags question: http://stackoverflow.com/q/79015795
type: Tag
tags question: http://stackoverflow.com/q/79189172
tags question: http://stackoverflow.com/q/79289182
tags question: http://stackoverflow.com/q/79493761

http://stackoverflow.com/comment/139228900
type: QuestionComment
comment on: http://stackoverflow.com/q/78964809
has text: @AHaworth when i inspect the audio element - i can just see the html that i embedded into the site - I can't see anything for the buttons, sliders, playback rate etc. so basically xxx - there's nothing nested inside it.
type: Comment
score: 0

uicolor
type: Tag
tags question: http://stackoverflow.com/q/79062531
tag name: uicolor

http://stackoverflow.com/comment/139132358
score: 0
comment on: http://stackoverflow.com/q/78912766
type: QuestionComment
has text: I want to add div so that card can be display in that svg div, kindly show how can I do it ?
type: Comment

http://stackoverflow.com/comment/139142987
has text: I managed to solve my 2 issues: a) Using `minHeight="calc(100% - 48px)"` on .side-bar; b) Setting `flex-wrap: nowrap` (or removing flex-wrap) and `overflow-x: auto` in .wrapper
type: Comment
score: 0
type: AnswerComment
comment on: http://stackoverflow.com/a/78918097

http://stackoverflow.com/comment/139200688
type: Comment
type: QuestionComment
comment on: http://stackoverflow.com/q/78950094
score: 1
has text: Do you want it to change width when the viewport changes width and height when the viewport changes height or do you want it to keep the same aspect-ratio? If so, what do you want to be the thing(s) that influence its dimensions?

http://stackoverflow.com/comment/139170571
type: QuestionComment
score: 1
comment on: http://stackoverflow.com/q/78932696
type: Comment
has text: Have you checked each of the phones you are testing on to make sure there are no settings that prevent video being played automatically? Video does eat up data allowances so some people may choose not to have it playing, even if the browser were prepared to play it. There may also be a difference between whether the phone was connected via wifi or on some cellular network.

http://stackoverflow.com/comment/139968293
comment on: http://stackoverflow.com/a/79369673
type: Comment
score: 0
has text: While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/late-answers/36673711)
type: AnswerComment

erb
type: Tag
tags question: http://stackoverflow.com/q/78954084
tag name: erb

http://stackoverflow.com/comment/139267807
has text: FWIW on some screens this will be 1 px size image given the constraints of no scrollbars. Even here you have broken that constraint and have scroll bars. Your page says " (the thick dashed black outline)." but there are no such thick black dashes here
type: Comment
score: 0
comment on: http://stackoverflow.com/q/78986317
type: QuestionComment

http://stackoverflow.com/comment/139613562
has text: Hi are you available for another issue I am having?
type: Comment
score: 0
comment on: http://stackoverflow.com/a/78941635
type: AnswerComment

http://stackoverflow.com/comment/139275301
comment on: http://stackoverflow.com/q/78989661
type: Comment
has text: ignoring the dual table issue, this stackblitz demonstrates how the tbody's max-height (expressed in `vb` units) is apparently ignoring any viewport size applied to its ancestor containing blocks. It seems to be treating `vb` equivalent to `vh`, and this feels wrong. https://stackblitz.com/edit/stackblitz-starters-mhmss7?file=src%2Fstyles.scss
score: 0
type: QuestionComment

http://stackoverflow.com/a/78944928
score: 0
has body: The suggestion to attach the labels to the dots, worked. Here's the finished version:
answers question: http://stackoverflow.com/q/78937749
type: Answer

http://stackoverflow.com/comment/139135093
has text: It's been about 10 years and more since any of those browsers needed a `-webkit` prefix.
type: QuestionComment
comment on: http://stackoverflow.com/q/78914356
type: Comment
score: 1

http://stackoverflow.com/comment/139330102
comment on: http://stackoverflow.com/q/79011275
type: Comment
score: 0
has text: Oof, yeah, it was a typo. Not in the folder name: in the file name. I'll add an answer
type: QuestionComment

http://stackoverflow.com/a/79042010
answers question: http://stackoverflow.com/q/79041981
accepted answer of: http://stackoverflow.com/q/79041981
type: AcceptedAnswer
has comment: http://stackoverflow.com/comment/139373466
type: Answer
score: 0
has body: It is weird, I agree. If you replace float: left; by display: block; it seems to behave like you want. The reason the floated element pushes on the last line of the quote, is that it is part of the quote. It wants to be left, so there's no other place for the last line to go. .mainBody{ width: 570px; } .saidBy{ margin-top: 22px; display: block; } A planet is a large object that orbits a star and has enough gravity to be spherical and clear its orbit of smaller objects. Here are some facts about some planet —From National Aeronautics and Space Administration As a block the citation takes up the whole width of the and has a working top margin. See: Block and inline layout in normal flow

http://stackoverflow.com/comment/139357045
score: 0
type: QuestionComment
has text: Work Portfolio link here: https://austinxduong.com/ <--- for some reason the spinner does hide via the hyperlink on the stack overflow post. Opening a new tab and copying/pasting https://austinxduong.com/, the spinner still shows as described
comment on: http://stackoverflow.com/q/79035218
type: Comment

http://stackoverflow.com/comment/139206442
has text: It doesn't work, on selected option, the background color disappears when I hover to another option. The background should stay until I choose another option. I used Chrome and Safari, same result.
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/78953159

http://stackoverflow.com/comment/139160768
score: 0
type: Comment
comment on: http://stackoverflow.com/a/78924322
type: AnswerComment
has text: @Zourab The `colgroup` tag predates css3, for this kind of thing plan to use `:nth-child()` selector instead, with a minimum of JS code. PS: my answer is in agreement with your question. You should ask a **new question** if your problem is different.

http://stackoverflow.com/comment/139203508
score: 1
comment on: http://stackoverflow.com/q/78947221
has text: @Dimaapp did you try using position `sticky`
type: Comment
type: QuestionComment

http://stackoverflow.com/comment/139264376
comment on: http://stackoverflow.com/q/78981776
type: QuestionComment
has text: @herrstrietzel no, safari doesn't support CSS scroll animations yet.
type: Comment
score: 0

http://stackoverflow.com/comment/139326813
comment on: http://stackoverflow.com/q/79012295
type: QuestionComment
has text: OK, so I've implemented the code kindly provided in Codepen. However, I'm not clear about how this will work. How will it know which JavaScript function to call. Do I need to call the relevant script from the button? Do I need a $_SESSION flag to say whether the menu is opened or closed, so that I can check which button to display?
type: Comment
score: 0

http://stackoverflow.com/a/79059282
has body: I was not able to get what you want with the flextable package because the caption is already inserted inside a span element so you cannot add other html elements inside (everything is rendered verbatim). But with a knitr::kable table, you can make it work like this: ```{r table_1, tab.cap = paste0('', ref("tab:table_1"), ': Title')} knitr::kable(head(iris)) ``` and the following CSS: .table caption::before{ content: "Table "; color: #AA3740; /* Change this to your desired color */ font-weight: bold; } .table caption .tab-number { color: #AA3740; /* Same color for the figure number */ font-weight: bold; } .table caption { color: #000000; /* Desired color for the rest of the caption */ }
type: Answer
answers question: http://stackoverflow.com/q/79059000
score: 0

http://stackoverflow.com/comment/139326018
type: Comment
score: 0
type: QuestionComment
has text: @mplungjan `let timeLeft = endTime - new Date().getTime();`
comment on: http://stackoverflow.com/q/79018085

http://stackoverflow.com/comment/139354858
type: Comment
score: 0
has text: You could use JS to calculate the scroll height and set it as height.
type: QuestionComment
comment on: http://stackoverflow.com/q/79033988

http://stackoverflow.com/comment/139310337
has text: I’m not asking for help with the code, but for ideas about why one particular image might not display, when other ones do.
type: Comment
score: 0
type: QuestionComment
comment on: http://stackoverflow.com/q/79009569

http://stackoverflow.com/comment/139188167
score: 1
type: Comment
has text: @AntonijaŠimić yeh, you are on the right track obviously. And I have the marquee code but written for Next.js application, that's why I'm not included these here.
type: QuestionComment
comment on: http://stackoverflow.com/q/78942849

http://stackoverflow.com/a/79019955
answers question: http://stackoverflow.com/q/79012374
has body: If anyone ever stumbles by this post and is looking for a solution, I have a work around for the button click effect, in general this can be applied to produce any needed effect not just the one I was looking for, This is how I did it: created a new function and added that to the onclick of my button/element, passed this in the function's argument which basically just means the element which is actually triggering the function is itself passed inside. Made the function add a class to the element, the class is just a animated keyframe which produces my desired effect, and then after some delay remove the class so the button is back to normal. You could also have directly styled and chnaged the appearance with javascript, but it just didnt give a smooth transition that i wanted so I went for the class approach Note/Tip: You can add multiple functions by seprating each funciton with a ; (semicolon) Here is the code: HTML + CSS .queueAdd { background-color: #008d3fed; transition: 0.2s; /* transition-duration: 2s; */ } .queueAdd:hover { scale: 1.1; cursor: pointer; } //the class that will be added and removed to produce the animated .animateButtonPress { animation: buttonPress 0.3s ease 0s 1 forwards; } //the animation @keyframes buttonPress { 0% { scale: 1; } 40% { scale: 0.7; } 80% { scale: 1.05; } 100% { scale: 1; } } JS function animateButtonPress(btn){ btn.classList.add("animateButtonPress") setTimeout(()=>{ btn.classList.remove("animateButtonPress") },400) }
type: Answer
score: 0

http://stackoverflow.com/comment/139385351
type: Comment
has text: I would like the center text to change to show the details of each sector as the sector is hovered over... that is why there are multiple cirlces. The other circles were to mask the text from other sectors... because I couldn't get the CSS to work quite right.
score: 0
comment on: http://stackoverflow.com/a/79045550
type: AnswerComment

http://stackoverflow.com/comment/139242096
type: QuestionComment
has text: What’s it supposed to look like when the viewport is too small for everything to be seen at once? ie which elements scroll?
comment on: http://stackoverflow.com/q/78971876
type: Comment
score: 0

http://stackoverflow.com/q/79030607
score: 0
has title: Prevent dragging image over container boundaries in React JS
tagged with: reactjs
tagged with: javascript
type: UnansweredQuestion
has body: In my react js application i am trying to create a zoomable image with the possibility to drag image in zoom mode. import "./styles.css"; import React, { useState, useRef, useEffect } from "react"; export default function App() { const [isDragging, setIsDragging] = useState(false); const [zoomLevel, setZoomLevel] = useState(1); const [position, setPosition] = useState({ x: 0, y: 0 }); const [dragStart, setDragStart] = useState({ x: 0, y: 0 }); const imgRef = useRef(null); const containerRef = useRef(null); useEffect(() => { if (zoomLevel === 1) { setPosition({ x: 0, y: 0 }); // Reset position when zoom level is 1 } }, [zoomLevel]); const handleWheel = (e) => { e.preventDefault(); const zoomAmount = e.deltaY * -0.001; setZoomLevel((prevZoom) => Math.min(Math.max(prevZoom + zoomAmount, 1), 5)); }; const handleZoomIn = () => { setZoomLevel((prevZoom) => Math.min(prevZoom + 0.1, 5)); }; const handleZoomOut = () => { setZoomLevel((prevZoom) => Math.max(prevZoom - 0.1, 1)); }; const calculateBoundaries = () => { if (!imgRef.current || !containerRef.current) return; // Get bounding rects const containerRect = containerRef.current.getBoundingClientRect(); const imageRect = imgRef.current.getBoundingClientRect(); // Calculate boundaries const minX = containerRect.left - imageRect.width + position.x; // Allow dragging to the left edge const maxX = containerRect.right - position.x; // Prevent dragging past the right edge const minY = containerRect.top - imageRect.height + position.y; // Allow dragging to the top edge const maxY = containerRect.bottom - position.y; // Prevent dragging past the bottom edge return { minX, maxX, minY, maxY }; }; const handleMouseDown = (e) => { if (zoomLevel === 1) return; // Disable dragging if not zoomed e.preventDefault(); setIsDragging(true); setDragStart({ x: e.clientX - position.x, y: e.clientY - position.y, }); }; const handleMouseMove = (e) => { if (!isDragging) return; e.preventDefault(); // Calculate the distance dragged const { minX, ma…
answer count: 0
tagged with: css
type: Question

http://stackoverflow.com/comment/139230673
type: QuestionComment
comment on: http://stackoverflow.com/q/78948123
has text: @HeikoTheißen Chrome 128 and Firefox 130. Thanks for pointing out the underlying problem. I hoped adding `Content-Type: application/xml` would solve my issue, but no.
type: Comment
score: 0