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
Related
I have the following button:
<button class="btn btn-outline-secondary btn-lg">
TEXT<i class="fa fa-plus"></i>
</button>
I would like to style the buttons text and the fa-icon with a different color. Both should be able to change the color when i hover over the button. Im able to do either of them but cant get both working at the same time:
I can style them differently:
.fa.fa-plus {
color: green;
}
.btn {
color: WHITE
}
This makes the text white and the icon green(Thats what i want). When i hover over the button, im now only able to change the texts color:
.btn:hover {
color: BLACK;
}
How can i change the icons color too if the button is hovered? I would like the text for example to be black and the icon to be white when the button is hovered. But im not able to achieve the latter.
You can use a rule to both the button inner text as well as the icon as following:
.fa.fa-plus {
color: green;
}
.btn {
color: WHITE
}
.btn:hover .fa,
.btn:hover{
color: red;
}
<button class="btn btn-outline-secondary btn-lg">
TEXT<i class="fa fa-plus">+</i>
</button>
Your code means that you want to change button text on hover.
To do what you want, you should apply styles to your icon on button hover:
.btn:hover .fa.fa-plus {
color: RED;
}
So, in this case, you will apply styles to .fa.fa-plus, but on button hover.
Hope, it makes sense to you :)
Give a parent div for that button and add hover effect using that parent class
<style>
.fa.fa-plus {
color: green;
}
.btn {
color: WHITE
}
.hover:hover .btn, .hover:hover .fa.fa-plus{
color: BLACK;
}
</style>
<div class="hover">
<button class="btn btn-outline-secondary btn-lg">
TEXT<i class="fa fa-plus"></i>
</button>
</div>
The below is an example of how to change the child via the parent :hover attribute, implement it according to how you wish to color the plus icon.
.btn:hover .fa.fa-plus {
color: red;
}
You can use this code to access the child element of hover:
.btn:hover . {
color: BLACK;
}
use this in each element one-by-one on your main page,
For an example:
div.e:hover {
background-color:red;
}
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.
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
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 am trying to achieve the effect as shown in below screenshot using Bootstrap 3.
As you can see, the search button is both:
1) inside the input
2) styled with a glyphicon so as to not appear like a "button".
How can I achieve a similar effect with Bootstrap 3? I would like to place a button with a magnifying glass glyphicon at the end of a text input, however the button keeps appearing below the input as opposed to inside of it.
A wrapper div with position: relative; then positioning the submit button on top using position: absolute;. Like this:
http://jsfiddle.net/VtP5k/
HTML
<form>
<div id="search">
<input type="text" />
<button type="sutmit">Search</button>
</div>
</form>
CSS
#search {
position: relative;
width: 200px;
}
#search input {
width: 194px;
}
#search button {
position: absolute;
top: 0;
right: 0;
margin: 3px 0;
}
Try this.
In bootstrap you have to use button type submit instead of input type;
Both works fine! use button in bootstrap!
div {
padding: 15px;
background: #000;
}
.btn {
text-align: left !important;
font-size: 12px !important;
padding: 20px 12px !important;
width: 200px !important;
color: #888 !important;
}
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet" />
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div>
<button type="submit" class="btn btn-default">
awesomeness <span class="glyphicon glyphicon-search pull-right"></span>
</button>
<div>
Or see this fiddle
<button type="submit" class="btn btn-default">
Awesomeness <span class="glyphicon glyphicon-search"></span>
</button>
The problem is because the button is adhering to the normal flow of html and thus appears below the first element. What you need to do is wrap both the input and search button in an div and then make the search button absolute positioning. Then you can ad some jQuery functionality on a click function to achieve an event is needs be.
<html>
<body>
<div>
<input type="text" value="test"/>
<span id="search" class="absolute">x</span>
</div>
<style>
.absolute {
position:absolute;
top:9px;
left:115px;
}
</style>
<script>
$(document).on('click','#search',function(){
//some functionality
}
</script>
</body>
</html>