Posts by hugocsl • 65,517 points
1,996 posts
-
1
votes2
answers124
viewsA: Point in CSS below image
You have to include the X coordinate in your transforn:translate() also. Note that you now have 2 values (X, Y) See the template below to better understand: .selecionado { display: inline-block;…
-
3
votes1
answer687
views -
2
votes1
answer1093
viewsA: Decrease tables to fit on a page
I warn you that is not the most "elegant" solution, but ultimately can break your branch. With this CSS you will decrease the scale of your table by 20% with scale(0.8), ie 80% of the original size.…
-
4
votes1
answer740
viewsA: How to swap inline indentation for Vscode dot
The lines you activate going on File > Preferences > Settings and puts "editor.renderIndentGuides": false "editor.renderWhitespace": "all"
-
4
votes2
answers164
viewsA: Could someone please tell me how I can do this by passing the mouse?
Option 1 I made a simplified version, but sometimes it can suit you. It uses jQuery with a very basic function just to make an element follow the mouse. This element that follows the mouse that has…
-
0
votes1
answer637
viewsA: Background image in white
Rick believes that the problem as I said in the comment is that a " is missing. " in the path from your directory to the image folder. Changed from ./ for ../ In this answer you can read more about…
-
1
votes1
answer1289
viewsA: Vertically align data from a line into a datatable
You have to set vertical-align: middle !important in th and td About the height of the lines this is due to the fact of the td/th have a height set, or else a padding internal generating this…
-
1
votes1
answer30
viewsA: Selector 'not' does not work
Man what happens is when you put opacity on div everything that is inside it also inherits this opacity and there is no way to take, even as the selector :not() or using !important. Using techniques…
-
0
votes1
answer333
viewsA: Automatic slider with 5 columns how to do?
Isabela by the classes you used in your question I see that you are using Owl Carousel, to make it work on the page you need to adjust some details on your page. Official project link with…
-
1
votes2
answers5887
viewsA: How do I make this table mobile responsive using only html programming?
You can use display:none / display:table along with a simple rule of @media screen and (max-width: 768px) { } to show and hide <tr> of the table depending on the width of the screen. See the…
-
1
votes1
answer114
viewsA: menu sending the first read to last read
Just put text-align:right in <ul> and not float in <li> See how it looks: .menu { position: absolute; top: 10px; left: 0; width: 100%; height: 35px; background-color: purple; } .menu ul…
-
0
votes2
answers1031
viewsA: How to create a panel that Displays/Hides fields using Html/Bootstap/Javascript
I made an option with jQuery that can meet you. It makes a .slideToggle() in the advanced search form. As it seems that you are using BS4 I put the css of this framework, but it works in any…
-
0
votes1
answer574
viewsA: How to apply css to an open page with window.open?
You can add another html to this print window and call CSS this way for example WinPrint.document.write('<html><head><title>Print it!</title><link rel="stylesheet"…
-
4
votes1
answer261
viewsA: CSS: Border Radius
Is not with border-radius, for Radius = radius, that is, this property creates a radius of curvature at the vertices of the div so it gets rounded. But with a pseudo-elemento and skewX() you can.…
-
1
votes1
answer1981
views -
2
votes1
answer2444
viewsA: Align elements horizontally - Bootstrap 4
Guy made a simple example he doesn’t use CSS only what is BS4’s default. The idea is the same you’ve used, but it has 2 logos, one that only appears in Mobile in the middle of the bar and the icons…
bootstrap-4answered hugocsl 65,517 -
1
votes1
answer93
viewsA: Modal problem
Marcos consulting the Template official on the site you realize that the class mdl-layout__content has a z-index set as :1, as you can see on the link…
-
2
votes2
answers9216
viewsA: Bootstrap - Change font
This is the pattern of font-family used in the body of Bootstrap 4 as you can check this link:https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.css body { margin: 0; font-family:…
-
1
votes2
answers61
viewsA: I cannot remove default background
Your problem is that in linha 173 of your style.css has this style that this leaving the background pink. .content-page ul { background: #FFD1D1; /* aqui vc coloca a cor que quiser */ margin-left:…
-
2
votes2
answers200
viewsA: Delay closing a dropdown
I made an example that has a delay of 500ms before the menu closes. I left it commented in the CSS where you change this time to more or less. TB had to change the style of sub-menu of…
javascriptanswered hugocsl 65,517 -
1
votes1
answer407
viewsA: Scrollspy is not working
Face for Scrollspy works you need to follow the rules established by the official documentation that you can consult here! https://getbootstrap.com/docs/3.3/javascript/#scrollspy Point 1: I don’t…
-
0
votes1
answer44
viewsA: HTML help (button with <area> and <input>)
Try it this way, on href you call the function href="javascript:document.getElementById('formID').submit();" <form action="/teste.php" method="get" id="formID"> <map name="image-map">…
-
0
votes1
answer417
viewsA: Dropdown Materialize date attributes
Man you’re using the properties the wrong way I believe. Customization should be done with attributes in the component script as in the example below. $('.dropdown-trigger').dropdown({ suas opções…
materializeanswered hugocsl 65,517 -
1
votes1
answer1293
viewsA: Hide mobile menu after clicking
EDIT After your comments your problem became clearer. In fact that makes the menu expand and collect is this CSS rule nav #menu-toggle:checked ~ ul then what you need is to make sure that if the…
-
2
votes1
answer46
viewsA: create menu instead of select to change form
I made a model with jQuery in a way that was as simple as possible. I also made CSS as simple as possible just so you understand how the dynamics of showing and hiding forms. Notice that each item…
-
1
votes1
answer73
viewsA: @Keyframes, attribute 'Animation-delay' does not work inside a 'from' or 'to'
His animation had some problems, first that in the P tag had an unnecessary transition, after the parameters of "Animation" were half wrong. And your text had a left:300 before the animation started…
-
2
votes1
answer49
viewsA: Using shapes with CSS
Just put the skew in a pseudo element for it not bend the text together with the P where the text is, then vc z-index:-1; to play this element behind the text. html, body { width: 100%; height:…
-
2
votes2
answers1158
viewsA: Create an image gallery
Face with display:flex and object-fit:cover you get only with CSS a result very close to that and still leave everything with a good responsiveness including. See in the example: EDIT OBS1: left…
-
6
votes1
answer5362
viewsA: CSS gradient with image
Edit with more modern form (more limited browser support) There is a more modern way to make this image blend with the background color and the technique is using CSS Masks With the property…
-
1
votes2
answers500
viewsA: bar effect filling css in menu
Just put z-index:-1 in the ::after there it appears behind the text. OBS: put in the transition an effect equal to the site with cubic-bezier, left commented tb in css, now the animation is the same…
-
4
votes1
answer332
viewsA: How to standardize vertical box size with CSS?
I don’t know if it will suit you exactly, but there is a CSS-only solution that can help you with this. Using FlexBox you can set an auto pro height Container. So it will grow as the size of the div…
-
2
votes1
answer135
viewsA: Javascript - Hide children from radiobutton when selecting another radio from the same group
EDIT As you said you have to be dynamic without using ID, I made a template with CSS. I had to move little thing in the HTML structure, just put the fields that will appear inside the div "father",…
-
3
votes3
answers3985
viewsA: Centralize div de class="Row" with bootstrap
Bootstrap 3 In BS3 as the flex is not native you can build the styles in hand. See how it looks in the example below. .permissoes { display: flex; justify-content: center; flex-wrap: wrap; }…
-
1
votes3
answers840
viewsA: DIV Bootstrap Alignment
You don’t necessarily need to place the images inside the Grid, you can only separate them by Rows as you did. With just a few lines of CSS you can align everything, I left the images with a border…
-
0
votes2
answers522
views -
1
votes1
answer357
viewsA: Reduce fonts or break text in Bootstrap 4 or HTML5
To keep the words whole even if it’s bigger than the div that’s inside you can use word-break: keep-all See in the example how it looks. div { width: 60px; word-break: keep-all; border: 1px solid; }…
-
4
votes1
answer579
viewsA: How to declare and use the @viewport rule?
The viewport is the area where your website appears. It is the white area of the window when you open the browser. The viewport will always be the size of the window. But how the elements are…
-
6
votes1
answer64
viewsA: Divs has width at 33%, why don’t they line up?
It’s breaking because the value of padding is always added to the width of the element, so how you are using padding of 20px for each side your element ends up with 33% + 40px wide in total. To fix…
-
1
votes1
answer678
viewsA: how to make a background Pattern with CSS?
Face this is with background-size if needed and background-repeat. In the example here is just an image that repeats itself horizontally and vertically occupying the entire page, but in reality the…
-
2
votes2
answers200
viewsA: Combobox without formatting Bootstrap / Firefox
See what the Official Bootstrap 3 Documentation says https://getbootstrap.com/docs/3.3/components/#input-groups Avoid using <select> Elements here as they cannot be Fully Styled in Webkit…
-
3
votes2
answers44
viewsA: how to use max-height and display table
As I told you, see that with display:flex you align the item easily, without needing position or display:table. It works from IE 10 to good forward. (IE9 is used by less than 0.05% of people in…
-
2
votes2
answers651
viewsA: How can I use mouseover to change the background color of a div?
Guy doesn’t work because his element .MP has no size, altura x largura. I made a pseudo element and I put in it the size you use in the other element and I discounted the width of the border so the…
-
2
votes2
answers65
viewsA: Animate CSS - Correct syntax?
Follow the model, left commented where you control the width of the lines, just do not to put one of each color pq the effect does not work with repite-linar but like the linear-gradiente normal.…
-
1
votes3
answers223
viewsA: Click and block inputs function
You can do it using a class. I named it after .erro, ai when you click on btn all fields that have the class .error become disabled $(document).ready(function() { $(".btn").on("click", function() {…
-
0
votes2
answers190
viewsA: HTML Select (active disabled attribute) - How to display a message when mouseover is triggered?
If you want something simple with just CSS I made this very basic template. NOTE: It doesn’t let btn disabled, it just doesn’t let the user interact with the field. input + .holder:hover::after {…
-
1
votes2
answers509
viewsA: CSS3 Adjust table to fill blank space generated on Landscape page
Your problem is you’re using fixed width in divs where the tables are inside, you have to use values in % look at the example, there was no margin left! body { background: rgb(204, 204, 204); }…
-
3
votes3
answers1608
viewsA: How to make Confirm custom?
As you said that a response only with CSS could suit you, here I will leave a technique. The principle here is that the btn Close actually is a label linked in a input:radio that when checkadomakes…
-
0
votes2
answers55
views -
1
votes1
answer961
viewsA: Adjust Div position in CSS and HTML
You can put display:inline-block in div and you have to take these left:300px / 600px With this rule you take all the Ivs that start with "rela" and put the display to stay in line [class^="rela"] {…
-
1
votes1
answer487
viewsA: Lock site vertically
There are a few ways to do this. The first one you can test is this Hake CSS, with it when you change the view for landscape It turns page -90% @media screen and (min-width: 320px) and (max-width:…