Posts by hugocsl • 65,517 points
1,996 posts
-
0
votes1
answer487
viewsA: How to align a text within an "input" HTML text
You have to "match" with padding-bottom, and not with height. OBS: I just don’t know why you want one input with this layout, it doesn’t make sense since it can’t have more than one line...…
-
1
votes3
answers403
views -
2
votes2
answers83
viewsA: How do I change a second fixed image by hovering over the first image?
Expensive as it seems something very simple and that will not be changing here has an example only with CSS, vc will have 3 images to the left, and 3 large images to the right, and the images to the…
-
1
votes3
answers78
viewsA: Align div with css
If you have a container flex, you must use margin in the child elements to place the right or left margin-left: auto will judge the son totally right margin-right: auto will play the son totally…
-
1
votes1
answer44
viewsA: Clear field when selecting list
Guy here has a simple example with JS, if the value you select in <option> of <select> for the value "mail" you clear the value of Email let sel =…
-
3
votes3
answers270
viewsA: How to open a new html file in the same tab?
Use window.open("seuURL", "_self"); Mozilla documentation about this https://developer.mozilla.org/en-US/docs/Web/API/Window/open <button onclick="funk()">Abrir</button> <script>…
-
2
votes1
answer310
viewsA: CSS Sticky position does not work with Bootstrap class=Row
This is a z-index problem, along with the positio:sticky you have to declare a z-indez > 1, this will solve the problem. Type as the code below .main-header{position:-webkit-sticky;…
-
3
votes2
answers95
viewsA: Move a div and remove it to release content behind
Here is a simple example with pure js. You have to take the clicked link and make a classList.add or classList.remove. The class you will add has a left 100% and scaleX(0) this will play to div out…
-
2
votes1
answer164
viewsA: How to center one div under another, exceeding the limit of the first?
Here is an option, as you are using position absolut in div of links, use bottom and left and then transform:translate to center in the base as you want. To better understand see the code below.…
-
1
votes1
answer170
viewsA: effect for navigation on Onepage
Guy first stitch that will make your life much easier and convert that red square into one pseudo-element link itself. So it gets kind of attached to the link and it facilitates alignment and…
-
5
votes2
answers5607
viewsA: Encapsulate set of HTML tags in VS Code ("Ctrl + alt + enter" in Sublime Text)
I use this extension htmltagwrap you can find here: https://marketplace.visualstudio.com/items?itemName=bradgashler.htmltagwrap This extension already comes with a defined shortcut, just select the…
-
3
votes2
answers109
viewsA: Put input at the end of the container with Bootstrap
You can quietly have only two col-4 within a row. And to put one on each side of the container you can put ml-auto in col of input or put justify-content-between right in the row. See the official…
-
1
votes2
answers193
viewsA: Segregate CSS in the construction of Angular components?
Here at the company we use VUE, not Angular, but I can tell you the practice we adopt here. Though not a canonical answer may help you in something. The answer I have is that "it doesn’t matter". At…
-
2
votes1
answer567
viewsA: Complex HTML table with bootstrap
Right here in the documentation has described this https://getbootstrap.com/docs/4.3/contenttables/#bordered-table actually you have to use colspan or rowspan depending on how you want to expand the…
-
3
votes1
answer88
viewsA: Does changing the metatags on the upload affect rankings?
Apparently you won’t have a problem. But the ideal is that you monitor how Google is really finding your content, so you can use the Google Search Console tool https://search.google.com Already in…
-
1
votes1
answer510
viewsA: How to align flexbox buttons in Angular?
Here is a simple example, you have to put margin-right:auto in his first btn, this will make it "push" the remaining buttons to the right of the container flex. .container { display: flex; }…
-
4
votes2
answers30
viewsA: Remove white spaces between tds
You have to add the property border-collapse: collapse; in <table> this will remove the "spaces" between cells. Edit: The border-collapse: collapse; it seems that for some reason also remove…
-
1
votes1
answer211
viewsA: Spacing between lines Textarea
So it works the line-height has to match the higher value of the gradient that makes the lines. See the two images below to better understand. Adjust the values and you can put the line the size you…
-
1
votes1
answer130
viewsA: HTML BACKGROUND IMAGE
You used the background-size as cover, so cut the image. If you want the image to be whole on the screen you have to exchange the cover for contain, and center in the div with background-position…
-
0
votes1
answer391
viewsA: How to use Collapse in bootstrap?
From what I understand you want to use the component of toggle of navbar Bootstrap on its correct sidebar. For this you have to use some Nav properties in your sidebar as navbar-expand-lg, you also…
-
6
votes1
answer282
viewsA: How to leave bootstrap columns under each other’s collars
It’s in the documentation. A row is a flex container by nature, that is, Bootstrap already sets the default to row with display:flex; then to align the contents of a row at the top you have to use…
-
1
votes1
answer52
viewsA: Copy hidden text equal to Whatsapp
Has a hakezinho that you can do... only has a "problem" the person has to copy the text to the end, if it does not pick up the whole text will not catch the date and time that are hidden at the end…
-
1
votes1
answer523
viewsA: Redirect to another Page With Avascript in a smooth way (slide, fade in , etc)
Face this is an animation of fade when it enters the page, so much so that if you walk in there and keep squeezing f5 the animation is recharging etc.. It is not something difficult to do, just you…
-
8
votes1
answer390
viewsA: How does CSS media query prefers-color-Scheme work?
The exact way the browser will interact with the OS I do not say exactly. What I can say is that the configuration of the color scheme is defined in the OS itself, and usually the intention to…
-
2
votes1
answer442
viewsA: Insert Html into Html without changing Styles
You can import the email as a iframe in HTML, this would maintain the CSS of iframe insolado of yours. Or else you can put !important in all styles of your HTML where you will receive the external…
-
1
votes1
answer47
viewsA: Jquery selectors - Find and swap Css class of an element
An answer with pure Javascript may be simpler for you. You can make one forEach and within the target element you look for a specific selector, in case the <i> and does the classList.toggle…
-
1
votes1
answer169
viewsA: animation wave effect in SVG string
Not to get too complex, having to import some GSAP libraries to "morfar" the path of the string in SVG, you can use some properties of transform CSS to make this animation in a particular way on the…
-
3
votes1
answer45
viewsA: THE COLOR OF MY WEBSITE DOESN’T OPEN RIGHT ON IE11 AND EDGE?
Face the problem is that you declared the color inside a "Hake" that makes the color only work on Fire fox @-moz-document url-prefix() { } everything inside of this will only render in the Mozilla…
-
1
votes2
answers66
viewsA: Large Button with Image
Friend you don’t necessarily need one <button> to open a modal, it was only done this way to get more semantic. But practically qq element can open a modal. You basically have to be careful…
-
2
votes2
answers86
viewsA: Combining CSS selections with parent child and sibling elements
Yes, but you need to change your HTML, not only CSS, you have to put the radio buttons before the UL that has the labels inside. So when you click on label with the for for the radio you can reach…
-
1
votes1
answer268
viewsA: Take content from within a div and place it in the content of a meta tag
I believe that the Crawler reads the HTML before executing the Script, yet another in jQuery that the browser has to index the external lib and then run everything etc. So maybe Facebook is not…
-
2
votes1
answer46
viewsA: Center elements responsibly
Dude just use the cols that the images are inside the Bootstrap flex classes d-flex and justify-content-center you can consult here the doc. official…
-
5
votes2
answers100
viewsA: CSS -> DIV content on ::after content
Just give a padding-right: 70px; in class body div#duvidas > section.duvidas > article > header { } It’ll stay that way:…
-
1
votes1
answer45
viewsA: Centralize div without width on a display: flex
But it is already centered friend. If a div has no defined width it will be 100% the width of the parent. So if the parent is the body one div within the body is 100% the width of body In your case…
-
1
votes1
answer79
viewsA: Effect with Hover in two elements
Put the hover in the <a> and change the color of everything inside > * {} This rule will solve your problem .icones_servicos a:hover > * { color: #00E394 !important; } See working…
-
3
votes1
answer309
viewsA: Hide scroll from an iframe
Dude you already have one div outside the iframe use it to make a "Crop box". Kind let it slightly smaller than the iframe that is inside just enough to "cut" the scroll bar... OBS: Here will not…
-
1
votes1
answer32
viewsA: Split a button to change the background of part of it
Face this has in the documentation... It is called button-group https://getbootstrap.com/docs/4.0/components/button-group/ Application example <link rel="stylesheet" type="text/css"…
-
1
votes2
answers157
viewsA: Align button inside Alert
Dude use Bootstrap’s Grid, use row>col etc, in case you need to use offset in col to generate "empty spaces" between a column and another. In this case I even removed the class pull-right that…
-
3
votes1
answer272
viewsA: Different forms on the same line
You have to use Grid, row>col and use the class text-left/right to align the btns downtown. No need for extra CSS inside your panel-body you put a row, and each form in a col-xs-6, then you put…
-
2
votes1
answer109
viewsA: Responsive table is deformed
As I warned you in the comment, table is one thing that should not change the display, for it is a complex structure, with intrinsic relationship between the parts table>tr>td By removing the…
-
2
votes1
answer247
viewsA: What is Atomic web design?
Like recently Brad Frost, the father of Atomic Design, made a "revision" of the concept after 6 years, I decided to leave a reply with a few points. Briefly were included Design Tokens (typography,…
-
2
votes1
answer221
viewsA: Crop with html/css/js
Dude I made an adjustment in the code, first I put in the JS the width $image_crop in the viewport and boundary in 100%. Then I determined a maximum width pro modal with max-width, but for less than…
-
0
votes1
answer179
viewsA: Side menu transition with easing
In your ul <ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar"> place transition: 500ms all; and you will give a "attenuated" transition in the…
-
6
votes3
answers1969
viewsA: What’s the difference of using background to background-color?
There are things that are not exactly different, but that can bring you a headache if you do not understand what is happening... I’ll show you some examples What do you think will happen with the…
-
3
votes1
answer51
viewsA: Error passing Javascritp to jQuery onScroll
Face to not see advantage in transforming your JS in jQuery, until pq with JS you can easily use the Intersection Observer to "observe" the element that wants to place the class and only do this…
-
0
votes1
answer124
viewsA: Change Dropdown name to list item names
Dude you have several problems there, your import order of JS dependencies is wrong, you should start with jQuery, which should not be the version slim, use the full version. See what the…
-
0
votes2
answers92
viewsA: How to back a label against a Checkbox
Without extra CSS you can use the Bootstrap grid itself. You only need to pass both labels into it div, and not leave a label alone in the div as you did. So you can share in the col-xs-1 the input,…
-
1
votes3
answers93
viewsA: How to remove the image attribute?
Face to img is not a link attribute, but an element within the link To remove the image that is on the link you can simply do $('a > img').remove(); <a class="whats-footer" target="_blank">…
-
1
votes1
answer31
viewsA: jQuery = Focus with this
If that’s all you do var form = $('body div#contato section.contato'); if ($(form).find('#nome').val() == '') { console.log(this); }; You’ll see that what the console returns is In other words, it…
-
0
votes2
answers171
viewsA: News page | Picture and texo next door
Dude there are several ways to fix this using Bootstrap, but in fact the way you set up your grid is very confusing. I cleaned up the code, take a few rows and cols unnecessary etc. From a look at…