I'm having an issue with Angular Material checkbox where after rendering there is an additional vertical line that is added because a class in the material.
This is my HTML:
<div class="col-md-6 col-sm-12">
<div class="col-sm-12">
<mat-checkbox class="full-width" formControlName="TPA_NUSC">{{ 'GLOBAL.TAX_NUMBER_MANDATORY_AB' | translate}}</mat-checkbox>
</div>
<div class="col-sm-12">
<mat-checkbox class="full-width" formControlName="TPA_VLNC">{{ 'GLOBAL.VALIDATE_TAX_NUMBER_AB' | translate}}</mat-checkbox>
</div>
</div>
And this is my output:
That verical line comes from the class "mat-checkbox" that is added after the rendering, at least, if I remove the class the line will disappear.
Any tips about this issue?
I had a similar problem but realized that I didn't have a theme.
Make sure you have something like this in styles.css: #import "~#angular/material/prebuilt-themes/indigo-pink.css";
I have found the issue, seems that someone add a class in our company css that override that indigo-pink.css
Many thanks to #Peter Kim to allow me to find the issue.
If anyone will have an issue like this, there is how I found out what could be wrong.
Try to get the cloested element in your developer console
Doing that I found out that the class had an border-right.
Click in the right top corner to go to the css file that is causing the issue
It will redirrect you to the css file, however it may not tell you which file it's, but you can go to your index.ts or where you declared your css and count the css until you get a match, for example, in my case it was the 14th sheet.
Just go to that sheet and search for the issue, in my case I searched for #b7b7b7 and it was a direct match.
Hope it help some else.
Related
We recently switched to webpack for our assets (js, scss, ...) and everything went fine so far, except a small bug where the input label behind the file-selector-button overflows with is neighbour as you can see in these examples below. Even with the default bootstrap styles (no additional whatsoever) we still encounter this bug.
Basic webpack application configuration:
import "bootstrap/scss/bootstrap.scss";
import "bootstrap-icons/font/bootstrap-icons.css"
// [...]
import "bootstrap";
Snippet of the first example:
<div class="row pb-3">
<div class="col">
<input class="form-control" type="file" name="uploadFile" id="uploadFile" required>
<div class="invalid-feedback">
Please select a file
</div>
</div>
</div>
The second example is from Bootstrap Docs
Even the inspector from e.g. Google Chrome does not help either and by now i could not find any solutions to fix this issue.
I am using Bootstrap 5.2.0 (tested 5.2.2, 5.1.x, ... with same results), no additional changes made to bootstrap itself.
Okay, looks like it has something to do with postcss-loader. Arguments like margin-inline-starts will be "removed" from built version (other Post: How to prevent 'postcss-preset-env' from removing CSS logical properties?)
The suggested solution does not work but removing postcss-loader at all is a possible temporary solution right now... but i will look forward to fix it and keep using postcss-loader
On my webpage there are DIV's that are created dynamically with the class of jOUT.
I want to change the color of every other iteration of the class.
I'm trying to do it this way:
.jOUT:nth-child(even){
background:#eeefff;
}
.jOUT:nth-child(odd){
background:#cccffe;
}
My HTML is as follows:
<div id="outData">
<input type="hidden" name="outDivider" value="-------">
<div class="jOUT isOpaque">
<!-- ... -->
</div>
<input type="hidden" name="outDivider" value="-------">
<div class="jOUT isOpaque">
<!-- ... -->
</div>
<input type="hidden" name="outDivider" value="-------">
<div class="jOUT">
<!-- ... -->
</div>
</div>
Full HTML here
But it's not working. What's really weird is that using the console in Chrome, when I select each jOUT, it shows ALL of them as having the "even" attribute.
I thought for sure that I had invalid CSS or HTML but I can't find it. It has to be something I'm doing, but what? I guess what I'm asking for is an idea for a place to start looking for the problem. I've verified the CSS using w3c CSS verification, and the HTML using HTML Tidy.
Your current CSS is working as it should, because you're targeting ALL children (including input); which means, in this scenario, all your div.jOUT are even - you should rather use :nth-of-type, which will only target instances of div.jOUT ...
.jOUT:nth-of-type(even){
background:#eeefff;
}
.jOUT:nth-of-type(odd){
background:#cccffe;
}
DEMO fiddle
This would work here:
.jOUT:nth-child(4n){
background:#eeefff;
}
More on that
This is somewhat fragile, though. A better approach is to add an alternative style class on those elements, possibly via your server-side app.
Your input[name="outDivider"] elements are in the way, thus making every jOUT element even. Here's a working pen where I took them out and made the selector work properly. I also changed the colors, so it's easier to see.
Edit: #isherwood beat me to it, but if this input[name="outDivider"] elements are absolutely necessary, his solution works best!
So for my question you can refer to udacity.com main page.
Im trying to access this text -"The Udacity Difference" somewhere on the middle of the page.
I tried this :
d3.select("div.banner-content.h2.h-slim")
d3.select("div.banner-content.h-slim")
None of the above is working. So I tried looking in dev-tools element section for this page.
Then I could hover and see that :
div.banner-content has further
{div.container
{div.row
{div.col-xs-12 text-center
{h2.h-slim}}}}
Then I thought ok I shoud try if I can get the "container" atleast, but then even this
d3.select("div.banner-content.div.container")
OR
d3.select("div.banner-content.container")
doesnt work !!!!
Wheres the fault in logic ?
You can find nested elements using d3's chained syntax as shown below.
HTML:
<div class="banner-content">
<div class="container">
<h2 class="h-slim">Header</h2>
</div>
</div>
Code:
d3.select("div.banner-content").select("div.container").select("h2.h-slim")
EDIT: No need to type such long syntax. Just need to separate the selectors using a space.
d3.select("div.banner-content div.container h2.h-slim")
Code below will also give you the same results in this case. You can specifically add tags if necessary.
d3.select("div.banner-content .container .h-slim")
I'm trying to use Bootstrap 3.0 as a template to create a website. The issue I'm having is that when you refresh the page all of the text disappears. It does not do it every time but 8/10 times it does. Here is the demo I have put on my website for you guys to check it out. http://dwayned.co/JSwebsite/
Please let me know if you have any questions or need to see any code.
Your HTML is quite messed up. Bootstrap structure should be like this...
<div class="container">
<div class="row">
<div class="col-xs-12">
YOUR CONTENT HERE
</div>
</div>
</div>
In the above example I've used one col-xs-12 class but you can use any combination of cols here as long as they add up to 12. See more on the Bootstrap grid system here in their docs: http://getbootstrap.com/css/#grid
I also notice in your code you are using a span12 class but this is from Bootstrap v2 and not the new v3 which uses the col classes I've outlined in my example above.
I found this existing thread that has a couple different answers referring to your issue. https://stackoverflow.com/questions/21984543/google-chrome-bug-website-not-displaying-text
quick question here:
I am using DCE on Typo 6.1.5. I am trying to set an element out of the "container" div. But it rarely works.
<div id="contentMarginFix">..</div>
<div id="contact">
<div class="container">
<div class="gmaps">
</div>
</div>
</div>
I want to get the "gmaps" div in the "contact" div. Not in the "container" one.
Here is the DCE Template
http://gyazo.com/2c0a13746cdd834ebdb86a0b64fd10b1.png
And here is the template for the page
http://i.imgur.com/y2rwP6P.jpg
I was trying for two hours now maybe i just don't see it but i appreciate your help very much!
From the screenshots you provided I'd say it's possible the layout template is in the wrong place. Make sure the contact.html you use as a layout is in the right place.
If this is a basic fluid template directly in typo3 make sure the file is in the place you defined in your setup typoscript. Default would be something like this:
layoutRootPath = fileadmin/templates/Layouts/
If this is inside an extension the correct place for the layout template is
Resources\Private\Layouts
Be aware that in more recent extbase versions the naming conventions are more strict and require a capital first letter for the html files (so Contact.html)