I am trying to define an Angular component that displays an info area. This disappears when the condition is met. partially this works, but the border always remains, the rest of the style elements are hidden when the condition is met.
info-component-html:
<div *ngIf="visible" >
<div class="s-help-content "><span [translate]="text"></span></div>
</div>
CSS:
.s-help{
background-repeat: no-repeat;
background-position: center left calc(0.37em + 0.37rem);
background-size: calc(1em + 1rem) calc(1em + 1rem);
border: 2px solid $warning !important;
border-radius: 4px;
display: block !important;
color: $gray-700;
min-width: 220px;
white-space: normal !important;
padding-left: 5px !important;
padding-right: 5px !important;
}
.s-help-content {
padding-top: 6px;
padding-bottom: 6px;
padding-left: 45px;
padding-right: 6px;
}
component used in code
<s-help [visible]="true" [ngClass]="'s-help'" [text]="'INFOTEXT.101' | translate"></s-help>
When the condition is met, the components are hidden but I still see the defined border which comes from the CSS directive. When I hide the border in the browser inspector, the components border disappears but I don't understand why the border is not hidden.
If I set my code so that the style statement is in the component.html and not inside the code with the component, I don't have the following problem. However, I need to use these components in other code places where I need to define other border colors, so the following solution does work, BUT i can´t use it because i need to define other css classes, and it cant be static the s-help css class:
info-component.html:
<div *ngIf="visible" class="s-help" >
<div class="s-help-content "><span [translate]="text"></span></div>
</div>
component used in code
<s-help [visible]="true" [text]="'INFOTEXT.101' | translate"></s-help>
The following solution works for me. Here the border is also hidden. however, the class statement must be made when the component is defined in the code!
Any suggestions?
this border shouldnt be here
I am not an Angular developer, but my first approach would be to add a CSS class that has a display: none property to try to solve it.
It's little bit unclear for me, but ngClass and ngStyle always override other styles. if you want to hide the border check the border's css from devtools and apply class based on appropriate condition to hide it with display: none property
Related
I'm new at Vuejs and Nuxt. I'm using a library facebook-login-vuejs,
it works but I need little bit modifying like the button width adjustment.
I tried to give a "fbutton" class in this component :
<facebook-login
class="button fbbutton"
appId="102023513468xxx"
loginLabel="Facebook"
#login="fbOnLogin"
#logout="fbOnLogout"
></facebook-login>
and here my CSS :
.fbbutton button{
width: 100px;}
But nothing gonna change
here in this picture, the width doesn't change. Seems like set by facebook
this one also, the button still out of the container
Please any body can help me how to solve this, thanks
Checking the facebook-login-vuejs source code you clearly see "the html structure".
You need to override the "default" css rule.
.facebook-login button {
border: none;
color: #fff;
position: relative;
line-height: 34px;
min-width: 225px;
padding: 0 15px 0px 46px;
background-image: linear-gradient(#4c69ba, #3b55a0);
}
In the dynamic login button i've ._4z_d ._4z_f class with some padding . And i'm giving him padding through styling tags as
._4z_d ._4z_f {
padding: 9px 24px !important;
}
so as expected my padding is not implemented because button is dynamic and it's original padding is also dynamic . Any help will be quite appreciatable
The fact that the button is dynamic shouldn't be a problem for you, try giving it a block box model, I suspect that the button is still inheriting its default box model.
._4z_d ._4z_f {
display: inline-block;
padding: 9px 24px !important;
}
I've tried to change on navbar, the margin-bottom that is 20px.
.navbar {
position: relative;
min-height: 50px;
margin-bottom: 20px;
border: 1px solid transparent;
}
This error occurred when I've tried to put an empety content. So, to solve this I use in my css, !important:
.navbar1{
margin-bottom: 0px !important;
position: absolute;
min-height: 50px;
border: 1px solid transparent;
}
and added on the index page the navbar1 on the class:
<div class="navbar navbar1 navbar-inverse navbar-fixed-top" role="navigation">
How ever, the !important override the margin-bottom: 20px but it still keeps active, i've tried with div.navbar1 but it's the same problem.
Any suggestions?
Do you load it in 2 seperated css files? If yes your overwrite have to be loaded at last.
But I think it is better to overwrite it directly with modifying the .navbar attributes.
So make a new css file for your overwrites load it behind the bootstrap.css and than put in your overwrites:
.navbar{
margin-bottom: 0px !important;
position: absolute;
}
And delete the navbar1 in html. This works for me every time I modify the bootstrap css.
Do not forget that margin may overlap one another. maybe the margin-bottom that you see isn't because of your div. Please inspect the element (Right click -> Inspect Element) and go to "Box Model" or "Layout" tab to see there the real margin of this specific div.
A code sample will really help us (use http://jsbin.com or something similar)
Actually, the margin-bottom in bootstrap is assigned to ol and ul elements, not the nav or navbar classes, which is why this didn't work.
So, instead of adding "margin-bottom: 0px !important;" to .navbar, try assigning it to an ol or ul element.
Also, if all goes well and the css file is linked after the bootstrap file, the !important is no longer neccessary.
I have a menu that under certain circumstance some items show a little red box (think facebook friend count).
I've recently redone the css targetting the menu but nothing should have changed to cause the problem I'm seeing.
It's a simple div like this:
<div id="request-count" class="noticount"></div>
The CSS looks like:
.noticount {
background: none repeat scroll 0 0 #E43C03;
color: #FFFFFF;
font-size: 0.6em;
font-weight: bold;
position: absolute;
top: 3px;
left: 3px;
text-align: center;
}
I've checked the page sounce and my javascript is correctly setting the value so the div ends up looking like this:
<div id="request-count" class="noticount">1</div>
The only way I can get this to actually show up is by manually hacking the live CSS and setting the Width and Height, then it shows up without a problem.
The really odd bit is that the content "1" never shows in the div either. Very confused over this and really don't know what to try.
Not sure if this is significant or an oddity with FireBug but sometimes this div appears in the code view slightly tranparanent which usually disnifies that an element is display:none which I'm not getting either.
What can I try to solve this?
EDIT
Here is a fiddle displaying the problem:
http://jsfiddle.net/UYa5Z/
Not sure of the exact reason, but it appears that the formatting of your font-size is not working as intended. With the example that you linked, if you simply change the font-size of the noticount class from em based to px based it seems to fix the issue.
.noticount {
background: none repeat scroll 0 0 #E43C03;
color: #FFFFFF;
font-size: 10px; /* this instead of font-size: 0.6em */
font-weight: bold;
position: absolute;
top: 3px;
left: 3px;
text-align: center;
}
JSFiddle
Edit:
Based on my second comment below, I investigated the issue further. As this JSFiddle shows, you can keep .noticount's font-size relative if you remove the font-size: 0; from both ul#moomenu and ul#moomenu li. I'm not sure what the purpose of setting those to 0, but given you use px (instead of em) on ul#moomenu a and ul#moomenu ul a I'd suggest using my first suggested fix as it's consistent with the other font-sizes you set in your css.
Make sure the parent of.noticounthas a relativeposition that will fixe the problem
.noticountParent{
position:relative;
}
.noticount{
position:absolute;
}
Html:
<article class=noticountParent>
<div id="request-count" class="noticount">1</div>
</article>
Your ul#moomenu and ul#moomenu li define font-size:0
Since the .noticount has font-size:0.6em, the resulting font size is... 0
A font size of zero is invisible.
I am using dijit.form.dropDownbutton in my application. However, I want to remove the down arrow icon in the drop down button. Is there a way to do so?
First, don't do it. It's there because of the various usability conventions - something users come to expect. It points them to a familiar functionality, where a down arrow icon indicates a dropdown box.
Secondly, if you choose to ignore the first advice you can go ahead and do it. The button is controlled by (in case of claro theme):
.claro .dijitArrowButtonInner {
width: 15px;
height: 15px;
margin: 0 auto;
background-image: url(form/images/buttonArrows.png);
background-repeat: no-repeat;
background-position: -51px 53%;
}
overriding it and adding: display: none; removes the arrow and re-sizes the button. You can override it by, for example, assigning an additional class yourclass to the div and building a paraller CSS hierarchy:
.claro .yourclass .dijitArrowButtonInner {
display: none !important;
}
so that in your <head> part you have:
<style>
.claro .yourclass .dijitArrowButtonInner {
display: none !important;
}
</style>
and then:
<body class=" claro ">
...
<div id="dropdownButtonContainer" class="yourclass"></div>
...
If there is a programmatic way that is simpler than that - I am not aware of it.
EDIT
also, as a friendly advice, you should really try and accept answers for your questions, otherwise at some point no one will answer you.