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;
}
Related
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
I have a .cshtml file which contains search/upload/download/save buttons that uses materialize.min.css for styling of these buttons and a ag-grid in the same page to show the uploaded file data in the grid.
So the page is referred to both materialize.min.css and ag-grids javascript community edition file i.e. ag-grid-community.min.js.
I wanted to select each rows of ag-grid and then send it to backend for processing. So i have enabled ag-grids column property checkboxselection. But unfortunately the checkbox in ag-grid is not working (i.e. not able to check the checkbox) since CSS of materialize.min.css are getting applied to checkbox element instead of ag-grids checkbox CSS.
I have tried below ways to sort this out but none helped,
Changed the order of CSS files in my page.
Wrote a separate CSS file and copied ag-grids checkbox related CSS and added !important tag to each of its properties.
Tried using ag-grids cellclass property.
As per my project structure, I can't have separate CSS file for search/upload/download/save buttons because its written as a separate framework.
Is there any way to bypass materialize.min.css file getting applied to ag-grid?
I came across the same issue recently and the following worked for me, inspired by this answer.
Add the following CSS to undo the Materialize formatting as per the link above:
[type="checkbox"].reset-checkbox,
[type="checkbox"].reset-checkbox:checked,
[type="checkbox"].reset-checkbox:not(checked) {
opacity: 1 !important;
position: relative !important;
pointer-events: inherit !important;
}
[type="checkbox"].reset-checkbox+span::before,
[type="checkbox"].reset-checkbox+span::after,
[type="checkbox"].reset-checkbox:checked+span::before,
[type="checkbox"].reset-checkbox:checked+span::after {
display: none !important;
}
[type="checkbox"].reset-checkbox+span:not(.lever) {
padding-left: 10px !important;
}
Add the following to your ag-grid. This will add the class to all the checkboxes. It needs to called dynamically on the scroll event because ag-grid use DOM Virtualisation.
gridOptions.onBodyScroll = function(){
var inputs = document.querySelectorAll(".ag-checkbox-input");
for(var i = 0; i < inputs.length; i++) {
inputs[i].classList.add('reset-checkbox');
}
}
After many trial and error method, having the below css code in new css file and then refereeing it in working page worked for me.
[type="checkbox"]:not(:checked), [type="checkbox"]:checked {
position: initial;
left: initial;
opacity: initial;
background-color: initial !important;
cursor: default !important;
appearance: checkbox !important;
box-sizing: border-box !important;
margin: 3px 3px 3px 4px !important;
padding: initial !important;
border: initial !important;
left: 0px !important;
}
input[type="checkbox"], input[type="radio"] {
box-sizing: initial;
padding: initial;
background-color: initial !important;
cursor: default !important;
appearance: checkbox !important;
box-sizing: border-box !important;
margin: 3px 3px 3px 4px !important;
padding: initial !important;
border: initial !important;
}
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);
}
I have a new website
and i used some template online and did some modification.
However I am unable to change the grayish color on the sub header on the upper left, which is called "More than just junk" I wanna change it to white. Any help?
Also, when u navigate to the menu on the top right, you can see a drop down menu. I created a 'About Me' page but the top half seems to be whitish and not displaying properly. If it was unable to display the main page sliding pictures then I don't mind to remove it on this page. Any help?
The template I used is from here
Thanks
Alter your stylesheet. Find .Header .description in your theme's stylesheet.
.Header .description {
margin: .5em 0 10px;
padding: 0 2px;
}
to this, adding the color property.
.Header .description {
margin: .5em 0 10px;
padding: 0 2px;
color: #fff;
}
I am getting weird problem in using custom validator function in asp.net page and showing validation summary on the top of web page using CSS Styles.....
and this is the screen shot before clicking the button submit changes
after submitting the page the validation summary is displayed on top but controls positon is changing like this
and this is my code for
<div id="validationSummaryHolder" class="validationSummaryHolder">
<asp:ValidationSummary runat="server" ID="valsErrors" ValidationGroup="TestValidation" DisplayMode="BulletList"
CssClass="validationsummary" HeaderText="<div class='validationheader'>Please correct the following:</div>" />
</div>
and this is my css styles for validation summary
Css Styles for validation summary
.validationheader
{
background-color: white;
color:green;
height: 14px;
font-weight: bold;
border-bottom: 1px solid #b08b34;
padding-top: 3px;
}
.validationsummary
{
border: 1px solid #b08b34;
padding: 0px 0px 0px 0px;
margin:5px 0 20px 0px;
font-size:12px;
width:99%;
}
.validationsummary ul
{
padding-top: 1px;
font-size: 12px;
color:#982b12;
}
.validationsummary ul li
{
padding: 1px 0px 0px 1px;
}
I have placed all controls in individual divs and mentioned type of positon for all controls is Relative ..
I don't know why I am getting this weird thing,
Do i need to set fixed height and width for total page ?
would any one pls help on this
Many thanks In advance....
Check the width of
<div id="validationSummaryHolder" class="validationSummaryHolder">
It is not likely the the validation summary's insides are causing anything of their own accord since they are contained in that div, but maybe the containing div is stretching or shrinking the page. Also some html in the question would help. If you can't paraphrase the html here, another option would be to show the wire frame of the page with and without the validation summary and the answer should be clear at that point what is happening.