Posts by hugocsl • 65,517 points
1,996 posts
-
1
votes1
answer361
viewsA: Line break in HTML tables
You can’t break a table in the middle or break a table inside the other. "The authors are advised that the nesting of floats, divs and boxes with postion absolute between themselves, and between…
-
4
votes2
answers83
viewsA: Fit li:Dropdown Menu
You need to declare a border-radius special only for the first and last child of each sub menu, for this you can use first-child and last-child, and the first child only has border-radius in the…
-
4
votes2
answers98
viewsA: images escaping from the column
You have some problems in your code, first that in BS 4 does not exist col-xs-6, if you want each column to be 50% wide on small screens just put col-6 in place of xs-6. Another problem is that you…
-
1
votes1
answer47
viewsA: Vertical centering with Translate
Look what happens when you declare the translate 2x, the browser only recognizes the second, because it overwrites the first The right thing would be to use the long-hand thus: transform:…
-
6
votes2
answers777
viewsA: What is the difference between the 'Outline' and 'border' properties?
There are some differences between the two, but the main issue is accessibility, as the Outline is to give a feedback visual to the user when the field is focused. And different from the answer of…
-
2
votes2
answers772
viewsA: How to center an ul inside the div?
Your problem is that the UL is 100% the width of NAV so if you have two elements 100% wide they are already aligned in each other. You need the UL has only the size of the content itself, so an…
-
1
votes1
answer51
viewsA: How to make the bootstrap3 icon transparent with white edges?
The glyphicon is a font, so it gets text properties like color, font-size, etc... So it also accepts the property text-stroke, with it you can put a contorne in the text, in case in the icon that is…
-
2
votes2
answers54
viewsA: Hide and show content
Man to my see this part of the code doesn’t make much sense... function myFunction(x) { if (x.matches) { $(document).ready(function () { .... Another mistake is that you put the toggle button inside…
-
2
votes1
answer57
viewsA: How to avoid layout breakage in a PWA project?
There’s one way to do it that I think can fit you. I forgot the name of this technique, but it does a "versioning" of the CSS file URL, this makes the browser always download the "new" CSS. What you…
-
1
votes1
answer69
viewsA: Show Divs when category number increases
You can create a CSS rule that only works if you have more than 3 elements. For this you will use a pseudo-class with nth-child(n+3) and the selector ~ The nth-child(n+3) means: from the third…
-
2
votes1
answer59
viewsA: How do I leave the background of a Hover color input in a table?
Yes, but then the user will not realize that the field is editable, see how it would look input { border: none; outline: none } .table-hover tbody tr:hover input{ background-color: rgba(0,0,0,0); }…
-
10
votes1
answer844
viewsA: What is the CSS "display: ruby" for?
display:ruby is the standard ta tag display <ruby>. Just like the standard display of <div> is block and of <span> is inline. Chrome seems not to use display:ruby for the tag…
-
1
votes1
answer46
viewsA: Problem with div’s that don’t "fit"
The problem is that you used the class jumbotron jumbotron-fluid as if it were a container, and it doesn’t work that way. Trade all you want <div class="jumbotron jumbotron-fluid"> for <div…
-
3
votes5
answers1315
viewsA: Join two events that have the same function
What you can do and take the function out of the tag and make a script associating the element that will have the interaction, so vc can assign several eventListners to the same element. Below I add…
-
3
votes5
answers93
viewsA: How to explain this FOR loop in Javascript?
You have a button that has onclick="esconde()" that is, when you click it performs the function esconde() The function esconde in turn has a getElementsByClassName, notice that it is a getElements…
-
0
votes1
answer24
viewsA: Clear text coming from Laravel
According to the documentation you need to make one reset https://summernote.org/deep-dive/#reset Reset: Clear the editor content and remove all stored history. So I know script should look like…
-
3
votes1
answer361
viewsA: Change parent properties if CSS child exists
It seems your system generates a span with the tag that actually stays outside the input and not inside it, this makes it a little difficult to do only with CSS, an alternative is to generate this…
-
6
votes1
answer145
viewsA: How to detect screen width smaller than height with CSS?
Testing with the @media portrait / landscape i achieves this result, note that there is no pixel measurement, only the orientation of the device The orientation CSS media Feature can be used to test…
-
1
votes1
answer824
viewsA: Bootstrap Datetimepicker Moment.js
Your problem is that you missed indexing Moment.js before JS datapicker You can put it down here:…
-
0
votes2
answers83
viewsA: Align menu to center
In the UL of NAV you put display:inline-block, so it will only be the size of the content itself, having only the size of the content itself and not the width of the whole screen, you can center it…
-
1
votes3
answers65
viewsA: Select the next TD within a Loop
If I understand what you want, you can use the this.next to get the next text TD which comes after the first. Would look like this $("tr td:first-child").each(function(index) { var texto =…
-
1
votes1
answer123
viewsA: Change widget CSS when menu is pinned to top
As you said you have jQuery on the project here is an answer. But keep in mind that only CSS does not detect Scroll events in the window like this... The idea is to use the methods fadeIn and…
-
1
votes1
answer211
viewsA: How to fix a content or a background to a div
This technique is actually not with an element with position:fixed, but rather an element with background-attachment: fixed. That way the element rolls with the screen, but the background of it no,…
-
1
votes2
answers669
viewsA: How to change parent element attribute from within child
As agreed in the comment I made this model with pure JS and following its HTML structure, including with the Bootstrap that I think you tb is using it. See that when I click on the menu I add a…
-
1
votes1
answer77
viewsA: Blur that is disturbing the navbar
Your main problem is with the box-shadow same and not with the blur(), note that in class .navbar-container you put a box-shadow: 0px -20px 5px 20px #333333; see that it has in the third value 5px,…
-
1
votes1
answer647
viewsA: How to set up Gulp.task default Sass and watch
Your gulpfile.js code has some details, but the main thing is that you are not putting the function inside the gulp.series and not using the gulp.parallel( ['sass'] ) in the task Test by putting…
-
1
votes2
answers1548
viewsA: Remove standard container space
In Bootstrap just use the class .no-gutters in the container or row, or put m-0 the element that wants to draw the margins, or p-0 where you want to take the padding. See what the documentation…
-
0
votes1
answer62
viewsA: How to make the footer accompany the retractable menu
I saw that you are using Bootstrap so it gets a little complicated to mess with the columnar grid. my suggestion is you take the total size of the footer, which is 100% and take away from it the…
-
4
votes1
answer124
viewsA: position: Sticky together with overflow;
Dude but if you don’t set a size for your table like you want it to have scroll? If vc will not set the table size you need to set the height of some element that the table will be in, even if it is…
-
1
votes1
answer757
viewsA: Visual Studio Code - Create multiple files at the same time
As you can see in this Issue project on Github does not yet natively exist this option on VS Code https://github.com/Microsoft/vscode/issues/310 BUT...... there is an extension that you can do this:…
-
1
votes2
answers255
viewsA: Why is my image passing from my div?
It turns out that in the image inside the Card has the class card-img-top, and this class defines the image with width of 100%, this means that the image will be 100% of the width of the element it…
-
1
votes2
answers49
viewsA: How to use desired CSS file property
Your select does not have the attribute size (:not[size]), nor the attribute multiple (:not[Multiple]), so it picks up the unwanted height. If you put in your select any one of those attributes size…
-
1
votes2
answers63
viewsA: Checked attribute does not respond with sr-only
You have 2 labels different, each with a data-for specific data-for="step-one-form-sex-male" and data-for="step-one-form-sex-female" However in SASS you only put the reference to an element label {…
-
2
votes2
answers66
viewsA: Prevent user to change field before completing
Here’s a simple option, if the guy clicks input and then click cora and the input is invalid he gives a alert. Kind in the .blur of input you make a if .is(":invalid") and whether or not the alert.…
-
1
votes2
answers171
viewsA: How to change the type of an input through events?
Option 1 You have two options one is to hide one input and show another depending on the width of the screen, this option is only with CSS and Bootstrap Classes d-block and d-none using the bracking…
-
1
votes1
answer488
viewsA: How to change the validation error language in HTML5?
Very likely this is because your OS or your Browser is in English, test on another machine, which is with local language Pt that should appear in msg in Portuguese. Other than that you can try to…
-
7
votes5
answers964
viewsA: How to progress steps using thread chart?
I made this model using a circle on SVG bypass and dasharray to control the size of the contour, and css variable that I will switch with JS to make the outline in SVG grow by completing the graph…
-
11
votes1
answer293
viewsQ: What is and how does CSS Post-processing work?
What would be a CSS post-processing? I’ve heard of pre-processed CSS, like Gulp does when it compiles a SASS in CSS. But recently I heard the term post-processed CSS and I didn’t really understand…
-
8
votes1
answer1176
viewsA: What are and what are .js.map files for?
From what little I actually know .map sane Sourcemaps (source map). Imagine that you have a development environment where you work on editable files, which in turn generate minified files when…
-
2
votes1
answer492
viewsA: show/hide form using javascript buttons
Guy your code had some problems, the main thing is you didn’t put the id="tabela" in his <table>, so it didn’t grab the CSS and the click function wasn’t working. The second "problem" is that…
-
0
votes1
answer248
viewsA: I’m unable to change the size and color of the input button type Submit:
Your mistake is that you left a space when you declared the property, between the word input and the keys [] should not have room This way you wrote the comment in CSS with double bar // tb is not…
-
0
votes1
answer386
viewsA: How to style a checkbox input?
Young first creates a input:checkbox and puts in it the class sr-only, this class is original to BS4 and serves to make the element only visible to Screenreaders Then in your CSS you create a rule…
-
8
votes4
answers1595
viewsA: Leaving div height equal to width using css only
It has a very simple way for it one is using calc(), and flex and CSS variable. The other is the hake of padding and maintaining the Aspect-ratio in a more responsive way, because you will see that…
-
2
votes1
answer2485
viewsA: Label and input on the same line
You can follow the documentation of inline-Forms Bootstrap to get this layout https://getbootstrap.com/docs/4.0/components/forms/#inline-Forms Note that you don’t need extra CSS or anything like…
-
3
votes1
answer87
viewsA: How to make the element disappear from the screen after a second
A CSS-only option would be... First creates a new @keyframe and puts in it the vanishing effect you want, like your animation has 5s puts in this new @keyframe one animation-delay of 6s, so when the…
javascriptanswered hugocsl 65,517 -
1
votes1
answer447
viewsA: Menu using Css Grid
Basically your problem is that you put the display:inline in UL and should be in the LI Now if you want each LI item of your UL to stay inside a Grid column you will have to make one Sub-Grid, which…
-
0
votes1
answer500
viewsA: Blocks side by side above and below
The element <li> the way you graduated with display:inline-block can receive the property vertical-align, then just put vertical-align:top that it will align to the top and not the base of the…
-
1
votes1
answer63
viewsA: How to align an image within an Alert Bootstrap component
Guy first you have to put position relative in the box to be able to place positon absolute in the icon and control things. After you give a padding-left in the box to push the text to the right…
-
1
votes1
answer341
viewsA: Slide on Bootstrap does not work
Your problem is that you write the JS link wrong. In addition to not following the basic template formatting suggested by Bootstrap where scripts should come at the end of the document... Here is a…
-
2
votes1
answer129
viewsA: z-index does not work
You’re probably putting the z-index in the wrong element! See that putting the z-index in class ul.menuAdmin li:hover ul {} works right /* CSS Document */ @import…