I am trying to incorporate ZocialCSS buttons in my site but the color of the background changes automatically to white when I insert them instead of retaining the rest of the buttons default color.
<div className="form-group">
<div className="col-sm-offset-2 zocial facebook">
<button class="zocial facebook">
Sign in with Facebook
</button>
</div>
</div>
I works in JSFiddle: http://jsfiddle.net/Bc6Et/, but in my computer, the class part is ignored, so I just get a plain HTML button.
Here is a picture of what it looks like when I write the zocial facebook within the className part:
Everyone is saying I should use class instead of className, but it gets ignored wherever I substitute it. Does anyone know why?
Additional comments
I am using React.
I have a index.html file that calls a js file, containing a render function with the above HTML code in it.
ANSWER
Incluiding className within button worked perfectly:
<div className="form-group">
<div className="col-sm-offset-2">
<button className="zocial facebook">
Log in with Facebook
</button>
</div>
</div>
You need your CSS to affect the <button> within your <div>.
Also, it should be class instead of className
<div class="zocial facebook">
<button>Log in with Facebook</button>
</div>
CSS:
.zocial.facebook button {
background-color: #somecolor
}
Or simply put the same class to the button as well as the div:
<div class="zocial facebook">
<button class="zocial facebook">Log in with Facebook</button>
</div>
First you should use "class=" not "className="
If background color is still imported after correcting, you can do the following:
you can override css by adding element styles
<div class="zocial facebook" style="background: none">
or
<div class="zocial facebook" style="background-color: rgba(0, 0, 0, 0);">
you can also rewrite the css for .zocial facebook by targeting it in a style tag
<style>
.zocial facebook {background: none; background-color: rgba(0,0,0 0);}
</style>
ANSWER Incluiding className within button worked perfectly:
<div className="form-group">
<div className="col-sm-offset-2">
<button className="zocial facebook">
Log in with Facebook
</button>
</div>
</div>
Related
I am working with a 3rd party support provider and am trying to work around some limitations around what can be customized. I would like to add an HTML element (a) below a label, but only have access to css and footer html. My current idea is to add a hidden anchor in the footer and then try to reposition it via the css. I guess this MIGHT be possible with flexboxes, but my css foo is not that strong. So I figured I would come here and see if there was any way around it.
Concretely, I have a multiline textbox where users will enter their support request, and I need to insert an href to what can be asked right above it. I already have a ::before in place for some basic helper text, but I know that you cannot insert markup using css...thus my current attempt.
Is this even possible without knowing the specific location of each item...only their respective identifiers?
Here is a jsfiddle that reproduces the page as minimized as I can get it.
Again, please note that I ONLY have the ability to add HTML to the bottom of the page (in the footer element), and a global css file (shown in the separate css). That means I cannot edit the html outside the footer - that would be too easy ;)
HTML
<html id="portal_html"><head>
</head>
<body>
<div id="container">
<portal>
<div data-id="ticketForm" id="layoutContainer">
<div>
<div>
<div><h2>Submit a ticket</h2></div>
<div id="field_description">
<label for="description"><!-- react-text: 1235 -->Description<!-- /react-text --></label>
<div>
<div>
<div data-id="description">
<div id="description"><iframe name="deskEditor_New"></iframe></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer id="footerContainer"><div id="footerContainer"><div class="Footer__footerCopyrigt">
<div class="Footer__container2">
<span>Powered by </span>
<a rel="noopener noreferrer" href="supporturl" target="_blank" class="Footer__footerLink">Support Provider</a>
<span> | </span>
<a rel="noopener noreferrer" href="terms" target="_blank" class="Footer__footerLink">Terms of Service</a>
<span> | </span>
<a rel="noopener noreferrer" href="privacy" target="_blank" class="Footer__footerLink">Privacy Policy</a>
<a rel="noopener noreferrer" href="foo">target</a>
</div>
</div>
</div></footer></portal></div></body></html>
and current css:
.ticketDetail .ConversationForm__list+.ConversationForm__list { display:none; }
div[data-id="description"]::before {
content: "Some custom content";
font-size: smaller;
}
label[for="description"], a[href="foo"]{
order:-1;
}
body {
display:flex;
flex-direction:column;
}
UPDATE
I found this SO that sadly shows flexbox will not work because they are not in the same heirarchy :/
....so I believe the answer is that this is not possible :(
Can you use JS?
const textAreaWrapper = document.querySelector('.text')
const linky = document.querySelector('[href=linky]')
document.body.insertBefore(linky, textAreaWrapper)
.someclass {
display: block;
}
.rest {
display: block;
}
.text {
display: block;
}
<span class="someclass">
<label>foo</label>
</span>
<span class="text">
<textarea></textarea>
</span>
<label class="rest">more stuff</label>
<label class="rest">even more stuff</label>
Here is a link I want above the textarea
I would like to use an icon as a drobdown button on my navbar, but I am new to html and stuff, so I do not know where my snipplet fails:
<button type= "image" class="dropbtn" onclick="myFunction()">
<img src="someimage.png" title="Some title">
</button>
In your case the issue is most likely with the source of the image. Check the path (where your image is located) and link it correctly.
Example: src="../folder/folder/image.png"
You can also add the image as a background with CSS like this:
.dropbtn {
background: url("");
}
I think the problem is that you are using the button.
Try this:
<a href="" class="dropbtn" onclick="myFunction()">
<img src="someimage.png" title="Some title">
</a>
This is my angular template code:
<!-- Modal -->
<ng-template #levelsmodal let-c="close" let-d="dismiss">
<div class="modal-header">
Select the levels you want to show in the table and chart
</div>
<div id="segments-modal" class="modal-body">
<div class="row margin" *ngFor="let level of config?.data?.groups; let i = index" (click)="selectLevel(level)">
<div class="colorspan" [style.backgroundColor]="level.active ? colors[i] : 'gray'" class="colorspan">
</div>
<span class="level-labels pointer-cursor" [innerHTML]="getLabel(level)" ></span>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-success" (click)="c()">Close</button>
</div>
</ng-template>
The class "pointer-cursor" is plain simple:
.pointer-cursor{
cursor: pointer !important;
z-index: 500;
}
The z-index was only added for trying if it could make some difference, but it doesn't. I also tried applying this class to other parts like the wrapper div and so, but it's just not working. I keep seeing the normal "text cursor" instead of the pointer one...
Does anybody know why this happens?
Try that
::ng-deep .pointer-cursor{
cursor: pointer !important;
z-index: 500;
}
Edit
The ::ng-deep combinator (https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep) ensures that the defined style applies to all child elements of the component, not only elements directly created by the component.
Since the element you want to style in inside a ng-template tag (so it does not belong directly to the component), you need to use this to style its elements
I have a button inside a link, how can I make it so that clicking on the button will not cause a redirect, but clicking outside the button will.
<a href="http://google.com" class="block">
<button>Don't redirect on click</button>
</a>
Is it possible to do with css only?
See here:
https://jsfiddle.net/d4mr7mm6/
This will provide what you are looking for. However, you will need to style the disabled button to accommodate the aesthetics. As said before in a previous post, this is not recommended.
<a href="http://google.com" class="block">
<button type="button" disabled>Click Me!</button>
</a>
https://jsfiddle.net/d4mr7mm6/1/
Just add a class inside you'r button with the following attributes :
<a href="http://google.com" class="block">
<button class="no-redirect">Don't redirect on click</button>
</a>
.no-redirect{
pointer-events: none;
cursor: default;
}
see : Disable link using css
Also, it's illegal to nest interactive element inside an anchor.
It isn't a good html structure, but if you want to stay with this structure I think this will work:
<a href="http://google.com" class="block" onclick="event.preventDefault();">
<button>Don't redirect on click</button>
</a>
Similar answers here:
preventDefault inside onclick attribute of a tag
preventDefault() on an <a> tag
I'm not sure why but there is this small little line connecting these buttons together. Anyone know the css to make it go away?
<div class="button">
<button> Register with <br> facebook </button>
<button> Make a new account </button>
</div> <!--end of div button-->
.button{
text-align:center;
}
Thank you very much :)
It's the default underline from the link. The line you see is actually due to the space between the end of the button and the end of the link tag.
</button> </a>
Change it to:
<div class="button"><button> Register with <br /> facebook </button>
<button> Make a new account </button>
</div>
jsFiddle example
It is caused by the default anchor tag property or text-decoration: underline;.
You can simply add a universal anchor tag style to remove it from all links like so:
a {
text-decoration: none;
}
or only to the ones in .button like so:
.button a {
text-decoration: none;
}
Finally a fiddle: Demo
Try this
<button> Register with <br> facebook </button>
I removed the space between the closing button and anchor tag
http://jsfiddle.net/4GHH4/1/
<div class="button">
<button>Register with <br> facebook</button>
<button>Make a new account</button>
</div> <!--end of div button-->
Your white spaces in your anchor tag were causing your problem. Just remove them and your problem should be solved.