Posts by hugocsl • 65,517 points
1,996 posts
-
2
votes1
answer80
viewsA: Flexbox Horizontal List
Your HTML has a semantic error that you need to correct, the direct child of <ul> has to be the <li> and not the <a> Then, in CSS, using Flexbox, for you to align on eixo X a son…
-
1
votes1
answer22
viewsA: How to insert a scrollbar inside the th element of a table?
It’s simple, but you have to have a div within the TD, is in the div that you will set the maximum height (max-height) and the overflow I made the simplest of the simple, I didn’t touch the CSS, but…
-
0
votes2
answers99
viewsA: Input in Bootstrap 4 does not take up the full width
In his <form> add the native Bootstrap class w-100 this will make the form occupy the entire width of the container <!DOCTYPE html> <html lang="en"> <head> <meta…
-
0
votes1
answer25
viewsA: Center the buttons
Guy’s basically not fitting both btn in the same row pq vc defined the column where the Form is inside as col-3, if it’s col-4 already fits everything and the btn will not break the line, to align…
-
1
votes1
answer44
viewsA: How to create a play/pause button with awesome font
An option without JS, but ai vc needs to follow the HTML structure, because it depends on the CSS selectors to show one and hide the other. I left the radios visible so you can test, but just hide…
-
1
votes1
answer31
viewsA: CAROUSEL not aligned with NAVBAR
Dude, you just take the nav from within this structure of container > row > col, because this structure has some padding and margins Bootstrap grid, something you don’t need in this situation!…
-
7
votes1
answer88
viewsQ: What are Core Web Vitals and how do they work, should I worry about them?
I saw recently that Google will consider the reports of Web Vitals (Lighthouse and Search Console) as a factor of rankings, because these factors can directly interfere with the user’s experience…
-
0
votes1
answer35
viewsA: CSS mismatch in Firefox and Chrome alignment
Basically the problem is that the user-agent of Chrome does not recognize position: relative in an element with display: table-row-group;. Note that in the Tab Computed of Devtools, the element even…
-
1
votes1
answer45
viewsA: max-height is not working
Your problem is that in the "father of all" class that is the div.container you put max-height, and in fact it should be a fixed value only height: 300px same. For in direct daughter div…
-
-1
votes1
answer39
viewsA: Menu and submenu difficulties
You put the UL with display: table, which is not very recommended, since the children of this UL do not have display: table-cell, table-row, etc.... My suggestion is to put display: flex in that UL…
-
0
votes1
answer110
viewsA: Centralize table columns with Bootstrap
First class col is to be the direct son of row, and has nothing to do with the table. If you saw in the documentation scopre="col" this refers to the accessibility and not the Bootstrap Grid (here…
-
1
votes1
answer25
viewsA: How to position/align a field (which is inside a div) together with other Fields
Face the direct daughters of div=row must be the div=col, then this div with ID=div-financeiro-fornecedor actually should be inside the Column, what is breaking your grid, basically just reverse the…
-
2
votes1
answer27
viewsA: Can you resize the background-color property?
The tags of header H1 to H6 are of the type display: block, as well as a div they occupy the total container width that are inside. Pada fix this place display: inline-block na tah H4, so it behaves…
-
2
votes2
answers181
viewsA: Can I have multiple thead and tbody inside a single table in HTML5?
Short answer, yes can, even you can have an entire table inside the other, which is called Nesting Tables and the code would be like this <table border="1" style="text-align: center; width:…
-
3
votes2
answers32
viewsA: Input and reset problems
You put your inputs Submit and reset off tag <form>, then to have a btn out of the form, but make reference to it you need to use the attribute form="" in the tag of <input>, and in that…
-
3
votes1
answer46
viewsA: How to give a translateY with Banse in the current value of translateX?
With translateY you won’t get, pq vc will not be able to pick up the value of X at runtime, or maybe even get with JS, but the job is not worth it, so even with the worse performance, I would go…
-
3
votes2
answers59
viewsQ: With CSS is there any way to put opacity in the currentColor?
I’m trying to do the box-shadow inherit the shade color in a "dynamic" way, taking the color set in the color through the currentColor. So far so good, only the color is "solid", I’m not being able…
-
2
votes2
answers474
viewsA: Turn an image into a HTML5/CSS3 Submit button
Guy basically wears a <button> with type=submit (which is already the value default actually) with a <img> within. See this documentation:…
-
1
votes1
answer29
viewsA: grid fill div
Face in class .grid > div {} you stated explicitly align-content: start; should be the value default to occupy the entire line align-content: stretch;... But since you’ve declared start, another…
-
1
votes1
answer57
viewsA: Change panel background color by clicking
Cara found it kind of strange the way you set up the structure to show the cards, but to change the color just use this CSS. I used the selector [aria-expanded="true"] to pick up when the element is…
-
0
votes2
answers48
viewsA: Icon svg does not occupy 100% of the area in svg tag
It’s not the perfect solution, but you can leave the symbol with preserveAspectRatio="none" so it occupies 100% in the X Y to control putting a width and height of the SVG in hand. Also, you have to…
-
0
votes1
answer35
viewsA: Change column height while maintaining CSS base
Guy basically in the container pai you have to put a preset height, because the children will have a % the height of the father understands. In case I put the parent container with 600px. Then,…
-
2
votes1
answer37
viewsA: How does a div go past the grid size?
Cara there is more than one way to set up the Grid to have that result, but basically what you’re trying to do is called "Grid Overlap" (and honestly I do not know why they gave -1 in your…
-
3
votes1
answer26
viewsA: CSS personal-selectors do not seem to work with the querySelector method
Your problem is that you mounted the selector the wrong way. Should be ('.menu ul li:last-child a') pseudo-selector na li Notice that you don’t have <a> brother of <a> then all are first…
-
3
votes1
answer657
viewsA: What is and how does the "clamp" function work in CSS?
The subject is extensive because there can be many variables, like everything in CSS... But it’s not just something for font-size. The clamp in fact is basically a shorthand for the construction of…
-
1
votes1
answer19
viewsA: How to add an icon to an active image
Guy puts the imagem within a label along with a input of the kind radio. If the label was clicked the icon appears. I made a simple example for you to adjust the CSS to your taste... body{…
-
3
votes1
answer36
viewsA: I can only change the "bottom" position with "px" and not "%"
It will only work in % if the father of label has a defined height, because without a reference height you would calculate the % based on what? therefore % does not work, pq does not have a value…
-
3
votes1
answer78
viewsA: How to create an oval shape with pure CSS perspective?
Guy initially you need to put the circle inside a container, and in this container you put the value of perspectiva, which would be the distance between the screen and the user’s eye on eixo Z. Then…
-
0
votes1
answer66
viewsA: CSS in React: Component disappearing when using position Absolute
It’s actually getting over each other, but everyone’s there! BiX which is the last btn to render stands over the others leaving them covered. To solve there are several ways, but a very simple one…
-
0
votes1
answer38
viewsA: Doubt with CSS (Doubt about css)
Cara doesn’t need pseudo-element, diagonal cut need not clip-path, to solve the two situations you can use two linear-gradiente diagonally, one to make the blue and one to make the line. html, body…
-
3
votes2
answers107
viewsA: How to decrease the tab opened in Visual Code and show navigation arrow between tabs?
In the user interface guide there is nothing about navigating arrows by Tabs, maybe this has existed in some previous version, but no longer exists, at least not in the official documentation as you…
visual-studio-codeanswered hugocsl 65,517 -
3
votes3
answers246
viewsA: What is the point of using scripts in links?
In your case it makes no sense, because it’s not semantic, and it will cause a accessibility and SEO problem. Links are for navigation, inside or outside the page, not for alerts. Second to Mozilla:…
-
0
votes4
answers1039
viewsA: Google fonts in React Native
First, Google does not indicate using the font name as you used The Correct is 'Lobster Two', and not 'LobsterTwo', Another tip is you create one StyleSheet.create and use the font by adding a class…
-
2
votes1
answer540
viewsA: Customize radio input
Guy the input:radio has some attributes that you can customize freely. But the tip I give you is to initially give a all:unset in it, to clean the styles of the user-agent, and then you customize it…
-
4
votes2
answers86
viewsA: catch all getElementsByClassName with exactly equal class
Class name a number is not interpreted correctly. Avoid using class or even ID names as id="1" or class="1", if you want to write in full, like id="um" or class="n1" tb works. See here: ID with the…
-
2
votes1
answer33
viewsA: How to select an element based on content
There is a Hake that can help you, you put position: relative in td and if you have a <a> direct son of td, will have a pseudo-element that will cover the entire cell of td and put the…
-
1
votes1
answer96
viewsA: In Mobile mode, Body does not fill 100% of the screen
Your problem is here margin .elementor-123 .elementor-element.elementor-element-136b839a > .elementor-widget-container { margin: -41px -41px -41px -41px; padding: -0px -0px -0px -0px; }…
-
2
votes1
answer232
viewsA: Responsive table with scroll if screen is smaller than data
Guy wears a container flex to put the table menu and container inside, in the container that will receive the table inside puts flex:1, that’s basically it Note that the scoll horizontal is in the…
-
3
votes1
answer127
viewsA: Always define standard Rule '@keyframes' when Defining keyframes
You stated wrong, you used a lot of vendor prefix all within the -webkit- that can’t... you have to declare separately! That’s wrong The correct way would be like this, see that there is no error…
-
4
votes3
answers55
viewsA: How to use mouse events to create enter/out effect without the German inside the selected element interfering
Dude change the event of mouseenter for mouseover and change .target for .currentTarget and will work as expected ;) var blocks = document.querySelectorAll('.block'); blocks.forEach(element =>…
-
7
votes1
answer269
viewsA: Use of HTML rendering tag in Jboss Seam PDF
I was going to write as a comment for not having a test environment, but it’s getting great so it goes as a response even without being able to test... First on the fonts, there’s something called…
-
5
votes1
answer24
viewsA: What is the behavior of the "order" property when not defined?
Roughly all elements inside and a Flex container are order: 0 . So even for the element you did not explicitly state order: 0, he is order: 0 by default. One detail is that you can use negative…
-
1
votes2
answers112
viewsA: Dynamic CSS in backgorund-color
There are several ways to do this, including putting an attribute style="background-color: ;" right on the tag. But only with CSS in a more "sophisticated" way would be using CSS Variables. With…
-
2
votes2
answers40
viewsA: Breaks in CSS measures
This is a problem of border Collapse, part of it is described here: Why margin-top affects the father div But basically, what happens is that the standard margin of user-agent of body is not…
-
2
votes1
answer55
viewsA: Align contents of div
A solution is using flex in the co "card" that would be your dis with class .movies__box , then you put flex-direction: column for the text and image to be one above the other and to end a simple…
-
1
votes1
answer23
viewsA: How to create a responsive skew background
Face the problem is the right: -60px that you put in the pseudo element To correct this one of the options is to discount 60px of width and not play the element 60px out of the screen with a right…
-
1
votes1
answer67
views -
1
votes3
answers79
viewsA: Skip css line keyframes
Cara vc can simply limit the width of the <p> in 10ch (ch is a measure equivalent to the character 0, that is to say, 10ch has a width of ten characters 0, guy 0000000000) With this you break…
-
5
votes1
answer56
viewsA: Create bar with CSS
I made this option using only the character / but you can create the element you want in ::after of LI html, body { width: 100%; height: 100%; margin: 0; padding: 0; } ul { padding: 10px 0; color:…
-
1
votes1
answer30
viewsA: Disable input in the form
Use the attribute itself readonly as selector and put in it the same class that in the state :focus, guy [readonly="true"] + .control-label { } also, put a color in the input that you have readonly…