I want to display set of buttons which I wrapped with a span element on a hovering effect, initially one button will be shown and when user hovers over the span element initially showed button will be hidden and other buttons will be shown.
.listbtn {
opacity: 0;
transition: opacity .35s ease;
}
.buttons:hover .listbtn {
opacity: 1;
}
.settingsbtn {
opacity: 1;
transition: opacity .35s ease;
}
.buttons:hover .settingsbtn {
opacity: 0;
}
.btn {
padding: 6px 12px;
display: inline-block;
margin-top: -10px;
text-transform: capitalize;
margin-left: 6px;
float: right;
}
.spaceTest {
margin-left: 32px;
}
.listbtn {
opacity: 0;
transition: opacity .35s ease;
}
<span class="buttons">
<button type="submit" class="btn btn-danger pull-right settingsbtn">
<i class="material-icons">settings</i>
</button>
<a routerLink="/errors/{{message.id}}">
<button type="submit" class="btn btn-danger pull-right listbtn">
<i class="material-icons">content_paste</i>
</button>
</a>
<button *ngIf="isScanning" type="submit" class="btn btn-danger pull-right spaceTest listbtn">
<i class="material-icons">refresh</i>
</button>
<button type="submit" class="btn btn-danger pull-right listbtn">
<i class="material-icons">delete</i>
</button>
<button type="submit" class="btn btn-danger pull-right listbtn">
<i class="material-icons">mode_edit</i>
</button>
</span>
The problem I am facing is when user moves mouse between delete and rescan buttons icons are disappearing which shouldn't be as I am using css hovering for the span. Could you please describe to me what I am doing wrong?
The issue you are encountering is caused by the pull-right classes that are added to your button elements. This causes the buttons to be floated to the right and therefore the wrapper span element cannot be hovered over when pointing your cursor between your floated buttons.
Here is a CodePen I made to demonstrate your issue: https://codepen.io/robertcooper_rc/pen/mqYGKN. I've got the functionality working as you desire at the moment, but if you uncomment the last three lines of CSS, you will see how the pull-right class affects the hovering of your buttons.
The styles for pull-right are added through Bootstrap. See the documentation for Bootstrap quick floats here: https://getbootstrap.com/docs/3.3/css/#helper-classes-floats
Solution - Clearfix
One way to solve this is by applying a "clearfix" to the span element to take care of all the floated elements inside of it. Here is what a clearfix looks like in CSS:
// Clearfix
.buttons:after {
content: "";
display: table;
clear: both;
}
The clearfix forces the span element to take up a width and height that is large enough to contain the floated elements. Without the clearfix, the span's height collapses to 0 if all child elements are floated and this is what is preventing you from hovering over the span.
Related
I need a button group like the one shown in the code below and want to apply a border-shadow when the user hover's on top of a button.
The elements seem to be staking on top of each other from left to right, covering the right side's border-shadow.
How can I prevent this?
I tried z-index and doesn't work on my code but I can see it working on other people's code snippets...
.btn:hover {
box-shadow: 0 0 0 0.2rem red
}
div {
display: flex;
}
<div>
<button class="btn">
BTN
</button>
<button class="btn">
BTN
</button>
<button class="btn">
BTN
</button>
<button class="btn">
BTN
</button>
</div>
When you create a flex container with display: flex the <button> elements group together and the space in between each element is removed. To prevent this and allow your box-shadow to be more visibly seen, you could just add a bit of margin to each child <div> in the flex container.
If you don't want to add margin to separate the buttons, you can add the z-index property to the buttons hovered state so when you hover a <button> the box shadow appears and "stacks" above the other buttons. Remember, z-index only works on "positioned" elements:
postion: relative
position: absolute
position: fixed
position: sticky
From the Flexible Box Layout Spec, "Flex items do respect z-index" so if you have items in a flexbox container, they are eligible to utilize z-index without explicitly adding position.
.btn:hover {
box-shadow: 0 0 0 0.2rem red;
box-shadow: 0 0 0 0.2rem rgba(233, 181, 12, 0.6);
z-index: 99;
}
div {
display: flex;
}
div > button {
/* margin: 0 .5rem; */
/* position: relative; not necessary for flexbox children */
}
<div>
<button class="btn">
BTN
</button>
<button class="btn">
BTN
</button>
<button class="btn">
BTN
</button>
<button class="btn">
BTN
</button>
</div>
All you need to do is give a z-index to the hovered button
.btn:hover {
box-shadow: 0 0 0 0.2rem red;
z-index: 1000
}
div {
display: flex;
}
<div>
<button class="btn">
BTN
</button>
<button class="btn">
BTN
</button>
<button class="btn">
BTN
</button>
<button class="btn">
BTN
</button>
</div>
.btn{
margin:5px 10px;
}
.btn:hover {
box-shadow: 0 0 0 0.2rem red
}
div {
display: flex;
}
<div>
<button class="btn">
BTN
</button>
<button class="btn">
BTN
</button>
<button class="btn">
BTN
</button>
<button class="btn">
BTN
</button>
</div>
Give the button position relative. Then make the z-index: 100; on hover
button{
position: relative;
}
button:hover{
z-index: 100;
}
I have the following HTML:
<div class="total">
<span id="pledged-money" class="money">
<p>${{ total.amount }}
<span class="btn btn-xs btn-info question-mark"
data-toggle="tooltip"
data-placement="top"
title="Hello there">
!
</span>
</p>
</span>
</div>
with the following scss:
#pledged-money {
p {
display: block;
position: relative;
}
span {
position: absolute;
top: 22%;
margin-left: 10px ;
font-size: 0.5em;
width: 9%;
}
}
As a result I have the following:
So far everything is okay, but what I need is to display a dialog when clicking on this span element like this:
I have not too much experience with HTML and CSS and I am currently stuck with this. How can I display this element that has a close button and the dialog pointing to the span element.
If you use bootstrap, it would be very easy to implement the popup message.
Use bootstrap popover, here is the link for reference https://www.w3schools.com/bootstrap/bootstrap_popover.asp
I have created this fiddle to demonstrate the problem I'm having:
https://jsfiddle.net/gpb5wx8h/
<button id="add-redirect" class="ui-button ui-widget ui-corner-all ui-state-default" name="add-redirect" value="add-redirect" type="submit">
<span class="ui-button-text">
<i class="fa fa-plus">visible</i> not visible
</span>
</button>
<style>
button .ui-button-text {
visibility: collapse
}
button .ui-button-text i.fa {
visibility: visible
}
</style>
As you can see in the fiddle, the text is indeed not visible, exactly what I want, but it's still taking up space in my button, exactly what I don't want.
I can't change the HTML, so altering the layout is not an option.
I'd like the text to be completely invisible and not taking up any space in the element at all. At the same time, child element should be visible.
visibility: collapse; is only for table elements. collapse removes a row or column, but it does not affect the table layout. The space taken up by the row or column will be available for other content.
In your case, you can simply use this trick:
button .ui-button-text {
font-size:0
}
button .ui-button-text i.fa {
font-size:12px;
}
<button id="add-redirect" class="ui-button ui-widget ui-corner-all ui-state-default" name="add-redirect" value="add-redirect" type="submit"><span class="ui-button-text"><i class="fa fa-plus">visible</i> not visible</span></button>
Use font-size for button - no need to define visiblity.
button .ui-button-text {
font-size: 0;
}
button .ui-button-text i.fa {
font-size: 14px; // choose font size you want
}
Check if this solution helps. Requires a bit of structure change in html.
CSS:
button .ui-button-text i.fa {
display:block;
}
button .ui-button-text i{
display:none;
}
Hope this helps you
button .ui-button-text {
visibility: collaps
}
button .ui-button-text i.fa {
visibility: visible
}
button{
max-width: 60px;
overflow: hidden;
height:23px;
}
<button id="add-redirect" class="ui-button ui-widget ui-corner-all ui-state-default" name="add-redirect" value="add-redirect" type="submit">
<span class="ui-button-text">
<i class="fa fa-plus">visible</i> not visible
</span>
</button>
Thanks
How would I select the span in this html to make the text in it white when hovering over the button?
<button type="button" class="multiselect dropdown-toggle none" data-toggle="dropdown" title="Auckland" style="width: 100%; overflow: hidden; text-overflow: ellipsis;">
<span class="multiselect-selected-text" style="visibility: visible;">Auckland</span>
<b class="caret"></b>
</button>
I have tried this but it doesn't work:
button.multiselect > span:hover {
color: #fff;
}
Change css like:
button.multiselect:hover > span {
color: #fff;
}
Because, You want hover effect on button
Working Fiddle
I basically have a button that I need to align center. Next to that button I need to display something (a checkmark for example). I have been trying to do this but have run into a problem that:
1) if i use display:inline I can't center it
2) if i use display:block I can't add another element next to it
I have been trying to figure it out with display:inline-block to no avail
JFiddle: https://jsfiddle.net/2x5a5zdx/
code:
<input type="button" class='btn btn-md btn-primary' value="Submit Responses" id="submitBttn"/>
<span class="green-success" id="surveySuccess" >✔</span>
<span class="red-danger" id="surveyFailure" >✖</span>
And then the css
#submitBttn {
margin:auto;
display:inline-block;
}
#surveySuccess, #surveyFailure {
}
Thank you
As you have pointed out, margin: auto will not center an inline element.
Since inline/inline-block level elements respect the text-align property, you could simply add text-align: center to the parent element. In doing so, the children elements will be centered since they are inline by default.
Updated Example
.parent-element {
text-align: center;
}
.parent-element > span,
.parent-element > input {
display: inline-block; /* Added for example purposes */
vertical-align: middle;
}
Alternatively, in supported browsers, you could also utilize flexbox layouts and set the display of the parent element to flex and add justify-content: center for horizontal centering:
Updated Example
.parent-element {
display: flex;
justify-content: center;
}
To display the button and icons horizontally centered on the page, wrap them both in a div and set it's text-align property to center.
<div id="wrapper">
<input type="button" class='btn btn-md btn-primary' value="Submit Responses" id="submitBttn"/>
<span class="green-success" id="surveySuccess" >✔</span>
<span class="red-danger" id="surveyFailure" >✖</span>
</div>
#wrapper {
text-align: center;
}
Basic
If you want to center the button and the checks together, as a whole, centering is simple. You just need to add text-align: center to the parent element (which you may have to introduce).
.container {
text-align: center;
}
<div class="container">
<input type="button" class='btn btn-md btn-primary' value="Submit Responses" id="submitBttn" />
<span class="green-success" id="surveySuccess">✔</span>
<span class="red-danger" id="surveyFailure">✖ This content <i>does</i> affect centering.</span>
</div>
Or, if you want the button itself to be centered, regardless of the labels, you can use position: absolute to pull the labels out of the flow. This is especially useful if you want to display only one label at a time. If you display both, they will be on top of each other, so you'd have to solve that.
.container {
text-align: center;
}
#surveySuccess, #surveyFailure {
position: absolute;
margin-left: 5px;
}
#surveyFailure {
display: none;
}
<div class="container">
<input type="button" class='btn btn-md btn-primary' value="Submit Responses" id="submitBttn" />
<span class="green-success" id="surveySuccess">✔ Button is not moved</span>
<span class="red-danger" id="surveyFailure">✖ Button is not moved</span>
</div>
Personally, I'd like to show labels like that through CSS mainly, so this code is slightly altered again, adding a feedback text in the span (if you like), but adding the check or cross (and color too) in CSS by setting a class of the span. By simply adding the class success or failure you can change the way symbol and the color of the single 'surveyResult' span you have now:
.container {
text-align: center;
}
#surveyResult {
position: absolute;
margin-left: 5px;
}
#surveyResult.success {
color: green;
}
#surveyResult.success::before {
/* \2714 is the CSS (hexadecimal) notation of ✔ */
content: '\2714 ';
}
#surveyResult.failure {
color: red;
}
#surveyResult.failure::before {
content: '\2716 ';
}
<div class="container">
<input type="button" class='btn btn-md btn-primary' value="Submit Responses" id="submitBttn" />
<span class="success" id="surveyResult">You did great!</span>
</div>