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.
Related
here's the picture
here's the style when input is clicked
Here's my code:
<ion-item fill="outline">
<ion-icon :src="mail" slot="start"></ion-icon>
<ion-label position="floating">Email Address</ion-label>
<ion-input placeholder="Enter text"></ion-input>
</ion-item>
I am using ionic framework and vue.js as a javascript framework. Please help.
The extra space above the <ion-label> is present because the text inside the tag is going to move there when clicked.
In case you want the Icon and the text of the label on one level you can easily achieve this by repositioning the Icon itself.
<style>
ion-icon{
margin-block-start: auto;
}
</style>
Here is an example.
I tried to add an #click to a font awesome icon. However, whether I add an #click event to span or i tag, it doesn't work at all. I suspect the event is taken by the input field. How can I make the magnifier icon clickable?
<div class="control has-icons-right">
<input v-model="keyword" #keyup.enter="findName" class="input is-large" type="text" placeholder="Input 1 word, hit Enter"/>
<!-- or 2 words separated by space -->
<span class="icon is-right" #click="findName">
<i class="fa fa-search"></i>
</span>
</div>
Source: 3sName.com
It is because, you are using bulma class .icon which having the following css.
pointer-events: none;
Try to override it with
pointer-events: all;
pointer-events css will prevent your element from emitting a click event.
:)
use a button / anchor 'a' instead span to wrap the fa-icon, along with #click method? Span isn't good practice for click event as well.
Have you tried #click.prevent="findName" modifier?
I am trying to automate the assignment for toggle button on the below link :
http://way2automation.com/way2auto_jquery/accordion.php
where the icons will go on and off based on the toggle button.
The HTML code snippet for the buttons are :
<h3 class="ui-accordion-header ui-state-default ui-accordion-icons ui-corner-all" role="tab" id="ui-id-1" aria-controls="ui-id-2" aria-selected="false" aria-expanded="false" tabindex="-1"><span class="ui-accordion-header-icon ui-icon ui-icon-circle-arrow-e"></span>Section 1</h3>
I have switched to the frame already and trying to check the element using :
chromeDriver.findElement(By.xpath("//*[#id=\"ui-id-1\"]/span")).isEnabled()
however after clicking on toggel buttons the icon gets disappeared and the element is not visible at all. Hence I am getting error for the above line. Is there any way to check the icons are there or not?
I am using bootstrap popover with vuejs.
How can I trigger vue functionality?
In below code when I am clicking on add break link, it opens bootstrap popover, with click me button. Now here vuejs doesn't work, if I click on click me, it is not prompting alert.
<a data-toggle="popover" data-placement="top" v-d2d-popover data-content='<button v-on:click="alert(6)">click me</button>' href="javascript:void(0)" class="btn btn-link popover-notitle">
<i class="ace-icon fa fa-plus-circle bigger-120 green"></i>add break
</a>
Can anybody help me?
Since the button is just written in a string, it isn't being compiled by Vue. Here are a couple of ideas to try:
Use Vue for popover as well: https://yuche.github.io/vue-strap/#popover
Create popover content in a separate div (in your component so Vue will compile it) and then fetch the content for the popover:
{
content: $('#myPopoverContent').html(),
html: true
}
I have a simple logout button in my navbar and I would like the word "Logout" and the icon from font-awesome to display inline. I thought <span> was an inline tag, but it is causing a line break. I need the span in order to hide the extra text on small screens.
<a href="/logout/" type="button" class="btn btn-default navbar-btn pull-right">
<span class="hidden-xs">Logout</span><i class="fa fa-sign-out fa-lg"></i>
</a>
You can see the problem here: http://bootply.com/94625
try to add:
#media(min-width:768px)
{
.hidden-xs{display:inline !important}
}
the .hidden-xs sets the display of your span to block
It's because you need to download font-awesome and have it in your root directory also point it in your head section. That's because it doesn't show on your live link.
Hope this helps.