if I change the standard color of button background, I lose the hover effect.
<a class="waves-effect waves-light btn blue" href="">button</a>
<a class="waves-effect waves-light btn" href=""><i class="material-icons left">cloud</i>button</a>
<a class="waves-effect waves-light btn" href=""><i class="material-icons right">cloud</i>button</a>
It's because the background-color property are now covered by the new color you have selected. (In this case, I use blue darken-3).
Best solution is to create another hover pseudo-class for the button, and don't forget the suffix !important
Related
I'm trying to autoclick this button with greasemonkey. I tried to find a reference to this button with document.getElementsBy[ClassName/Name/TagName] with ClassName i find buttons but not the one i need. Any ideas how i can automate his click-event?
<button type="button" class="ml-2 mt-2 v-btn v-btn--depressed theme--light v-size--default amber darken-1 white--text ">
::before
<span class="v-btn__content">
<!---->
Überspringen
<i aria-hidden="true" class="v-icon notranslate v-icon--right material-icons theme--light">
redo
::after
</i>
<!---->
</span>
</button>
Screenshot from Firefox Inspector with Click Function
Thanks in Advance!
Just use xpath for element searching:
document.evaluate(XPATH, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
You can use class parameter instead id or name:
xpath: //button[#class='ml-2 mt-2 v-btn v-btn--depressed theme....']
If you do not need to use all value, you can use contains keyword:
xpath:
//button[contains(#class, 'ml-2 m2-2')]
css:
button[class*='ml-2 m2-2']
Of course, this value must be unique.
You can search child element and return back to the parent:
//button/span[#class='v-btn__content']/i/../..
You can use text for searching (bad practics if location possible to change)
//button/span[text()='Überspringen']/..
We implemented the bootstrap-vue in our application and we used the b-dropdown.
How can we change the button size? we want to change the button size to btn-sm
Below is the code, it didnt change the size of the button
<b-dropdown-item-btn button="btn-sm primary" right id="dropdown-1" class="m-md-2" style="display: inline;">
<i class="fa fa-gear"></i>
<b-form-select v-model="accounting_period_1" :options="accounting_period_options" #change="filterRevenueAndCosts()">
</b-form-select>
Question: How can we change the button size?
UPDATE: This is how it could look after using b-dropdown with b-dropdown-item - set size to sm and set your class.
Here is how you can achieve that: (I don't think I have to explain what I do)
Like this in your template:
<div>
<div>
<b-dropdown size="sm" class="lang-dropdown" no-caret variant="light">
<b-dropdown-item>
Item 1
</b-dropdown-item>
<b-dropdown-item>
Item 2
</b-dropdown-item>
</b-dropdown>
</div>
</div>
Like this in your style:
.lang-dropdown .dropdown-menu { //you can also seperate these
min-width: 4rem; //set your width here
}
Please let me know if this works out for you!
Currently trying to build a portion of my site that when text is hovered over, a modal box appears below it (so people can hover over it). This would keep the modal present until they move their mouse outside of this.
The issue I face is as soon as my mouse moves from the text to the modal, the model dismisses (as it seems the mouseleave event is triggered).
<div class="relative" #mouseover="guestDropdown = true" #mouseout="guestDropdown = false">
<p class="flex items-center justify-between mt-4 text-xs font-medium leading-4 text-gray-600">
<span>Input:</span>
<span class="cursor-pointer text-deepskyblue-500">Hover</span>
</p>
<div class="absolute right-0 z-20 mt-2 -mx-3 bg-white border rounded" v-show="guestDropdown">
<p class="px-3 py-2">Some modal!</p>
</div>
</div>
Thank you.
It's hard to say without more code and reproducible example but mouseover/mouseout trigger on descendants which is probably something you don't want in this case. You can use mouseenter/mouseleave instead - those doesn't trigger on descendants and doesn't bubble...
I have a hyperlink that opens a modal dialog:
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">{{Modal}}</a>
The styling makes it appear as a button while I want it as a plain text. IF I remove class="waves-effect waves-light btn modal-trigger", the text disappear completely. Replacing it with a different class
.txt {
color: white;
}
did not work - text still disappears. Can anyone tell me why?
Remove the waves-effect waves-light btn classes. This should leave you with:
<a class="modal-trigger" href="#modal1">{{Modal}}</a>
This will remove the button styling and leave you with simple text that triggers your modal.
I would like to have more than one button on the right side of the Header bar. The docs say you can customize using a DIV, but when I do that the buttons do not have their normal style. Any advice?
The above example puts more than buttons on the header but they are all positioned to the left of the header. I think you can group your buttons in a controlgroup and position the control the group to the right of the header. Maybe something like this:
<div data-type="horizontal" data-role="controlgroup" class="ui-btn-right">
//have your button here
</div>
Hope this helps.
This is how I did it, seems clean.
HTML
<div id="myHeader" data-role="header" data-theme="a">
<span class="ui-title"></span>
<div class="ui-btn-right">
<a id="myButton1" class="headerButton" href="#" data-role="button"></a>
<a id="myButton2" class="headerButton" href="#" data-role="button"></a>
</div>
</div>
CSS
.headerButton {
float: left;
margin-right: 5px!important;
}
I've seen this done in the footer (Shown Here), might give you an idea for the header or toolbar
You can use the grid class.
<div class="ui-grid-a ui-btn-right">
<div class="ui-block-a" ><a href="#" data-role="button" data-inline="true" >Button1</a></div>
<div class="ui-block-b" ><a href="#" data-role="button" data-inline="true" >Button2</a></div>
</div>
<a href="#" class="ui-btn-right ui-btn ui-btn-up-a ui-btn-icon-left
ui-btn-corner-all ui-shadow" data-rel="back" data-icon="cancel"
data-theme="a">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text">Cancel</span>
<span class="ui-icon ui-icon-arrow-l ui-icon-shadow"></span>
</span>
</a>