Posts by hugocsl • 65,517 points
1,996 posts
-
0
votes1
answer1067
viewsA: How do I align Divs from left to right from top to bottom with flexbox?
Yes it is possible to get what you want, but you will need a trick for some situations... First to align everything left you need to use justify-content: flex-end; this way if your grid is…
-
4
votes2
answers547
viewsA: Alignment of fields in bootstrap
What happens is that by default the label of Bootstrap has a margin-bottom: .5rem;. You have to remove this margin-bottom to the label align with the input correctly as you can see in the image…
-
1
votes3
answers28
viewsA: I can’t leave the ROW imgs with flexbox
If you want all imgs in the same line the father has to be display:Flex and flex-wrap: nowrap. This property will not let the line break even the children adding up a width larger than the father’s…
-
0
votes1
answer1264
viewsA: How to add search filter to bootstrap
Face on the table and the font size just vc put on font-size Meno for table with the ID you are using, see in the image the markings I left in red and notice how the font size in the table. About…
-
1
votes2
answers104
viewsA: Center span in div using flexbox
On the items that are horizontal, just vc remove the margin-top: -100 that you put on and already resolve. On those standing upright take the margin-left: -25% and put translateX(50%) along with the…
-
1
votes1
answer35
viewsA: How to center content with dynamic CSS dimensions?
It is not working because these classes of flex you have to use on the father you have display:flex. Also, there is no need to use the styles in hand, as Bootstrap itself has classes of flex to make…
-
0
votes1
answer86
viewsA: Add image thumbnail and toggle switch to table
Follow the template. Just set in css a Width and leaves the height in the self that facilitates, or else puts the two measures in hand... About the Toggle you must be letting something go... I…
-
2
votes1
answer666
viewsA: How to edit a theme installed on vscode on Linux
Customize the Theme I do not know, but in your Settings you can include a default color, it will be valid for qq theme, but as it is something that is not changed all the time, you can change later…
-
2
votes2
answers54
viewsA: Vertical distance between LI’s
Follow an option, but you will need to put the text that is inside the <li> in a <span>. This way you rotate the text inside the LI and not the LI in itself. This will give you more…
-
7
votes2
answers506
viewsQ: With making CSS a Carbon Fiber type background? Is it possible to make carbon fiber style background with CSS?
I’d like to create a patter to my background in order to simulate the texture of carbon fiber. Like this image, or something close to it. What I have so far is this... It doesn’t have to be exactly…
-
4
votes2
answers89
viewsA: Li s leaving UL
One of the ways to fix this will be more elegant in my view and using transform-origin. Thus vc defines where the rotational vertex will be, as you want it not to leave the UL, vc defines the vertex…
-
5
votes2
answers1250
viewsA: How to close menu by clicking outside or anywhere on the page?
You can at the same time open the sidebar tb "open" an element behind the sidebar that will cover the entire screen and will serve to close the menu if it is clicked. I called this element from…
-
2
votes2
answers2291
viewsA: How to Decrease Card Size in Boostrap
The Bootstrap grid can be divided up into columns, so your grid to have 4 cards per row you need to 4 col-3, totalling 12 col (4x3=12) I strongly recommend that you read the official grid…
-
4
votes1
answer94
viewsA: What CSS properties for specific background?
What happens is that vc does not have an element that is a square, but a rectangle, it causes the axis of curvature to be ellipse-shaped and not circle-shaped, since half the width is not equal to…
-
0
votes1
answer2516
viewsA: Insert css image into HTML tables
I don’t know if this is exactly what you wanted, but see what you can use text-align: center and vertical-align: middle to centralize elements within the td and does not need to stylize directly the…
-
10
votes2
answers293
viewsA: Should different states of an HTML element be represented in different properties?
In my view the problem is that you did not follow a hierarchy of classes, just as you put two states of .btn as the same style. What according to the laws of heuristics would be incorrect, because…
-
0
votes2
answers168
viewsA: Modal closes even clicking on it
Ideally you build your structure as close as possible to what the documentation says. Then use modal in the form not cool. Try to put the form whole within the structure of modal which would be the…
-
4
votes3
answers78
viewsA: How to style classes initiated with . fa-?
I agree with @Anderson, but there is a way to get all classes that start or have inside with a given name or character as for example the "fa-"... Briefly you will make the selection by attribute…
-
8
votes2
answers813
viewsA: Draw circle in Html5
Here is a simple option with SVG, tried to leave in the most didactic way possible, the idea is to use a "dotted line" on the edge of a circle svg and how the stroke-dasharray and the…
-
2
votes1
answer260
viewsA: Problem with bootstrap
Guy your Bootstrap grid is having various organization problems regarding row/col/offset so I reworked html. In addition you put a fixed value in PX for an element that should have the variable…
-
2
votes1
answer73
viewsA: How to make the input follow the last character inserted?
I’ll give you a hint and an answer that might solve your problem. All aligned to the right 90% of the calculators I know the alignment of the text is right. Do you know why? Because as the number…
-
3
votes1
answer173
viewsA: Text transition effect
His CSS was a bit confused, I preferred to make a version from scratch to be more didactic. I left the color in yellow just for easy viewing, but then you put the colors you want. EDITE After the…
-
4
votes2
answers56
viewsA: Scripts - Load all or split?
I don’t have a testing environment to validate this technique, but it exists and is even described in that article by Google itself. But as I’m saying it’s up to you to test for the result... What…
-
1
votes1
answer45
viewsA: Media Querries Breakpoints are colliding
Look this is not an absolute answer, because you have to analyze applying in your document, but the way you are doing the @media can rather be optimized using orientation: portrait or orientation:…
-
3
votes2
answers298
viewsA: How to overlay flex items during a CSS Hover?
Although the code didn’t look very pretty because I did it in the rush I think it might help you. The idea here is to involve the input in a label, because of semantics, and tb to be able to use a…
-
2
votes2
answers144
viewsA: Display None on label calling by ID does not work in Safari browser
I’m going to leave a slightly more semantic approach with a focus on accessibility. It starts from the approach suggested by Bootstrap. Using display:none there is no way to guarantee that the…
-
2
votes1
answer343
viewsA: IOS does not apply CSS
As the subject was resolved in the comment, I will post here the record as reply. What probably happens is that the user-agent iOS puts some styles by default in the elements. So even if you don’t…
-
3
votes1
answer66
viewsA: My input suggestions are tracking the screen movement
That’s a "bug" from Chrome known and already documented as you can consult here: https://bugs.chromium.org/p/chromium/issues/detail?id=849616 Note that in the Chrome, even though you click on scroll…
-
6
votes2
answers70
viewsA: How to check the absence of a pointing device on the page on desktops?
There is a CSS-only solution for this, and you will use @media (pointer: none); in case there is no pointer input show or hide the div Look at the image, first I enter the normal page, give a…
-
2
votes1
answer33
viewsA: color mobile problem
It seems to me that this character you are using is not a common source but a emoji, so you can’t change his color for color in CSS. So much so that if you exchange this character for a X normal…
-
1
votes2
answers130
viewsA: Label and Checkbox not working
First you need to decide whether you want to start showing or hiding the Nav, for that you will need to do: To the nav hidden initial nav{ display: none; } Or for visible start Nav nav{ display:…
-
0
votes3
answers345
viewsA: How to hide a div if access is mobile in materialize
The correct way to do this is by using the Helpers classes of Materialize itself Then it would look like this <div class="hide-on-small-only"></div> Official documentation according to…
-
2
votes2
answers604
viewsA: Multiple pages in the same HTML file
Your question is a little fuzzy, but here’s an option. First you put overflow:hidden in the html and body, after you create multiple Section, each one will be a page. The important thing is that…
-
4
votes2
answers185
viewsA: What is the relation of the <figure> tag to the main stream in HTML?
One observation is that the element figure is very close to what we have in the printed world, and which is standardized by ABNT in academic texts etc. You must have read in articles "See Figure 1…
-
2
votes1
answer196
viewsA: Overlay effect from bottom to top
Dude you need to basically adjust where your gradient will start. In case here I put it to him to start after 25%, i.e., the 1/4 total height will be fully occupied by black, and in the other 3/4…
-
5
votes1
answer320
viewsA: How to align the content of a Nav Bar so that it is in the center of the screen?
See that you’re putting the class justify-content-center in navbar, but you put as direct son of this navabar one div with class container, this prevents centralized alignment. To fix this just you…
-
3
votes3
answers2246
viewsQ: How to disable a link semantically while maintaining accessibility?
I noticed some elements like select, input and button has the attribute disable, but the element of link <a> does not seem to recognize this attribute and is not disabled. Is there any way to…
-
0
votes1
answer71
viewsA: time animation with css
Your code guy was a little confused, so I decided to make a model from scratch I made that image without overflow:hidden in the container, just to help you understand better! More below follows the…
-
3
votes1
answer877
viewsA: Paging with Owl Carousel
I’ll give you an answer with CSS only the first part of it is based on that question Counter properties in CSS. What they are for and how they work? and but basically it uses the counter property of…
-
3
votes3
answers72
viewsA: Add class and remove
You can use the $(this) and .siblings() to say that the clicked item should add the class ativo at the same time you remove the class of brothers. Follow the example:…
-
4
votes2
answers91
viewsA: Help with css animation!
Follow a CSS-only option I used two techniques, the div .backdrop that covers the content I used transition, already the menu list that appears at the top I used a @keyframes with an animation of…
-
0
votes3
answers179
viewsA: How can I make a div disappear when I click a button
Follow the option only as CSS as you wanted. I did as I said, I put a div the more hidden, I called her .backdrop, so when the label active the checkbox I’ll show you this div and it covers up all…
-
2
votes2
answers669
viewsA: Tables with vertical and horizontal scroll
Follow a model only with CSS, tested in Firefox, Chrome and Edge, but most likely tb will work in Safari. The idea is simple, basically just put position: sticky; in the th html, body { width: 100%;…
-
8
votes2
answers504
viewsA: Pop up an icon in the middle of my image by hovering the mouse
Note that in your code the <i> is inside a <a> then the ideal would be the :hover was .edit_hover_class:hover a and not .edit_hover_class:hover i Keeping this in mind just put the tag…
-
1
votes1
answer88
viewsA: How to remove fixed side banner from footer
Do it like this div that gets fixed you put a top of 100% - the height of itself and the height of the footer. It would be something like top: calc(100% - (altura div fixa + altura do footer) ). For…
-
2
votes1
answer113
views -
2
votes2
answers51
viewsA: images do not side by side with display-block, vertical align and float(CSS) just below each other
Your problem is that you opened several <ol> with only one <li> within... This is not good practice: <ol> <li> item 1 </li> </ol> <ol> <li> item 2…
-
3
votes1
answer97
viewsA: Edge doesn’t cover everything
Your problem is that somewhere in your CSS or Framework you are using there are properties in legend that should not! I believe inside the tag legend vc may have put some other tag, or some class of…
-
4
votes1
answer503
viewsA: Create HTML shape and overwrite navbar
As you said you were using Bootstrap 3 I made this model based on Navbar original of framework. Briefly there are some pseudo-elements with positions and transform. I recommend that you study the…
-
2
votes3
answers1050
viewsA: Separate Tables in Columns using HTML
You can use display:flex in a container father of divs that will be with the table inside, so you leave the table with 100% of the width of this div, whereas the div which will have the table inside…