I’m stuck with putting one button inside of another one: it’s prohibited, but I use bootstrap, that’s why I appoint class “btn …” to span and it looks like the button.
My button should look like this:
Filename.jpg <small delete button<
When you press on filename, file opens, when on small delete button - it sends request to API and deletes file
But now link is not working, but delete button does work. Putting and so one did not solve my problem
Code:
<span v-for=“link in links”
class= “btn btn-success”
v-bind:href=“<domain> + link.file”>
<button type=“button” class=“btn btn-danger” #click=“deleteFile(`$(link.file_id) `)”>-</button>
</span>
href only works on certain elements. Use <a> anchor instead of <span>.
Generally speaking it is not a good idea to wrap clickable elements inside other clickable elements. It's bad for accessibility and tab navigation and it can lead to easy missclicks from your users.
The right thing to do would be to put your two buttons next to each others to indicate that there is in fact two separate actions your users can take related to the file.
Related
I'm using Element Plus 2.2.28 and Vue.js 3.2.45.
I want to have a button like this:
<el-button>Contact</el-button>
When I click the button, I want it to behave like a link tag using mailto:someone#example.com.
I tried this:
<el-button href="mailto:someone#example.com">Contact</el-button>
However, this doesn't work.
I could use pure JS in the #click event of the button, but I understand this is not recommended.
Since you want to click on the button to redirect you, then you do not need any other functionality that the el-button offers. As such, you only want the appearance of an el-button. Therefore, you can use the el-button class instead on an anchor tag as follows;
<a class="el-button" href="mailto:someone#example.com">Contact</a>
I'm trying to style a Buefy button to look like a simple text-link.
For example, it is possible to use:
<b-button
tag="a"
type="is-text"
href="https://www.example.com"
>
Click here
</b-button>
This produces near the result I'm looking for, except I want to achieve a type such as is-text-red and is-text-blue to make the button appear as text of particular colours.
I could solve this by simply using:
Click here
Click here
But I want to use <b-button type="is-text-red"> to make an inline link.
Can anyone point me in a direction that involves Bulma CSS and/or Buefy CSS modifications that would achieve this?
I'm looking at the node_modules BButton component, and it looks like the type prop is passed through, so it looks possible to create a custom type somewhere that would be analogous to is-info and is-warning.
I would like to have text-only versions such as is-text-info and is-text-warning so I can use the button component to place inline anchor tags.
Stated concisely, how does a person add another type to <b-button> that provides arbitrary styling?
Check this link(https://buefy.org/documentation/customization/). You might need to define your own css overrides.
I have a straightforward XPage that lets a user answer a question with a simple Yes/No/NA response using radio buttons. I have restyled the radio buttons to look like a bootstrap button group to make it visually more interesting for the user. If the user chooses "Fail" then they are informed that they need to do something else - easily done with a simple partial refresh to a div further down the page.
This all works fine.
The problem I'm having is that I'd like it so that when the user selects an option, I would like to add a new class of "active" to the selected option so that it highlights in a pretty colour. But for the life of me I can't get this to work and though I'm sure it's a straight forward problem, I can no longer see the wood for the trees.
My current (abridged) iteration of the radio button code is this:
<xp:div styleClass="btn-group item-result" id="edit-result" loaded="${Question.open}">
<xp:radio text="${lbl.kwPass1}" id="itemPass"
styleClass="btn btn-pass #{(item.itemResult eq '0')?'active':''}" groupName="itemResult"
selectedValue="1">
<xp:eventHandler event="onchange" submit="true"
refreshMode="partial" refreshId="actionAlert">
<xp:this.script><![CDATA[XSP.partialRefreshPost('#{id:edit-result}');]]></xp:this.script>
</xp:eventHandler>
</xp:radio>
<!-- other radio buttons -->
</xp:div>
<!-- other page compenents -->
<xp:panel id="actionAlert">
<!-- panel content and appropriate rendered value -->
</xp:panel>
This was attempting to do a chained partial refresh on the radio button container so that the EL would evaluate and apply/remove the 'active' style based on the document datasource ('item') value. I have also tried using dojo.addClass, dojo.removeClass, XSP.partialRefreshGet and other options. I don't mind what the solution is as long as it's efficient and works. I'd prefer not to move the actionAlert panel to within the same container as the radio buttons and I can't do a full page refresh because there are other fields which will lose their values.
Some notes:
I'm not using a RadioGroup control because it outputs a table and I haven't got around to writing my own renderer for it yet. Single Radio button controls work fine for what I need them to do.
I originally tried using the full Bootstrap solution of using "data-toggle='buttons'" (source) which sorts out applying the "active" style fine but then, inevitably, prevents the partial refresh from working.
the radio button styles are clearly not Bootstrap standard
Any assistance pointers or, preferably, working solutions would be appreciated.
You need to aim your partial refresh at the div containing all your radio buttons. Give it an id, so you can address it.
Partial refresh, as the name implies, refreshes one element and its content only. So you target the element that covers all of the items you need to recompute.
Stepping away from the problem, a couple of beers and an episode of iZombie later, I realized what I was doing wrong and sorted it out. So, for posterity, here is the simple solution that I swear I tried earlier but clearly works now:
<xp:div styleClass="btn-group item-result" id="edit-result" loaded="${Question.open}">
<xp:radio text="${lbl.kwPass1}" id="itemPass" value="#{item.ItemResult}"
styleClass="btn btn-pass" groupName="itemResult" selectedValue="1">
<xp:eventHandler event="onchange" submit="true" refreshMode="partial" refreshId="actionAlert">
<xp:this.script><![CDATA[dojo.query('.item-result > .btn').removeClass('active');
dojo.query('.btn-pass').addClass('active');]]></xp:this.script>
</xp:eventHandler>
</xp:radio>
<!-- et cetera -->
The many places I was going wrong:
In my code in the question, I was calling XSP.partialRefreshPost in the CSJS script of the radio button when it should have been in the onComplete of the eventHandler. It has to be chained to another partial refresh so that it runs after it, not at the same time. I did end up getting this right - but overlooked something I'll come to in point 3.
In my original attempt to use Dojo, my first mistake was to try and target the ID of the radio button, something like:
dojo.addClass(dojo.byId('#{id:radio2}'),'active');
This actually works as expected, so long as you remember that the ID of the radio button on the XPage refers to the actual radio button control and not the label wrapping; and the label is what I wanted to style. So the class "active" was being actually being added, just not to the element I thought it was. I should have spotted this in my browser code inspector except for the third thing I got wrong:
Ironically, I sorted out the first issue, remembering to put the XSP.partialRefreshPost into the onComplete - and then didn't remove it when trying to run the Dojo.addClass(). So I didn't notice the mistake with the addClass targeting the wrong element because after it ran, the partial refresh updated the container and removed the class I had just added which made me think that nothing was working.
So now I have some neatly styled radio buttons that don't look like radio buttons and it's all managed client side without any unnecessary partial refresh trips to the server barring the one where I actually need to look stuff up from the server. And the vital lesson is - sometimes you just need to step away from a problem and come back to it with fresh eyes later on.
I am trying to build an admin dashboard using material design framework. As a part of it, I am trying to add modal-trigger element inside a <td></td> tag of a table that uses datatable.js library. But when I click on the trigger no modal is appearing. Did anyone face similar issue before?
I think that what's happening is that your trigger isn't in the DOM when you draw the table, but without seeing your code I can't be sure. Generally, it will trigger a modal when it is clicked or something? You might want to change the actual triggering to clicking on a td with a given class contained within the table so something like this:
$(".modal-trigger").click(function(){//Open Modal});
This would work on the first page but not after the first draw of the table as the event had been registered before the elements were within the DOM. Rather, you'd need to listen to the click within the table like this:
$("#table-id").on("click", ".modal-trigger", function(){//Open Modal});
I hope that makes sense and that it helps, if not perhaps work up a JSFiddle illustrating your issue?
So your page consists of sections, each section has a unique id or anchor and you would like browser's URL update with current section's id/anchor as you scroll.
PS I'm not asking a question but rather sharing a recipe. All relevant code examples and demo are in the answer, so please don't vote against this question.
This is possible with Skrollr! But you'll need to help him.
First, create a menu with links to page sections:
>
<nav><ul>
<li><a href='#home'>Home</a></li>
<li><a href='#about'>About</a></li>
<li><a href='#goods'>Goods</a></li>
<li><a href='#services'>Services</a></li>
</ul></nav>
Tie each <li> to corresponding page section with Skrollr's data-anchor-target (read this for info). Then add some Skrollr transitions:
<li
data-anchor-target="#about"
data--200-center-bottom="opacity: 0.2;"
data--200-center-top="opacity: 1;"
data-200-center-bottom="opacity: 1;"
data-200-center-top="opacity: 0.2;"
>
From now on, Skrollr will apply the skrollable-between classname to those <li> elements, whose corresponding page sections are currently visible on the page. And we're gonna exploit that feature! :D
When initializing Skrollr, you can assign a callback to the render parameter. This callback will fire during scrolling. In that callback, you need to:
Retrieve the list of currently active menu items (those who have the skrollable-between classname).
Decide which of the active menu items to consider current. If there's only one active item, the choice is obvious. If there's more than one, i suggest you pick the second one.
Retrieve the value of the href attribute of the link of the current menu item.
Update browser URL with that value.
Note that Skrollr hijacks vanilla browser behavior of scrolling the page to the current item on page load. So we have to work around that. Even worse, Skrollr executes the render callback multiple times on page load, resetting the browser's URL hash to that of the first page section. To work around this issue:
Before initializing Skrollr, read the hash from browser's URL.
Set a timer for 500-1000 ms that would reset the hash scroll the page to the beginning of the corresponding section. The simpliest way to do this is to use the click method of the skrollr-menu plugin.
The timer approach is kinda ugly. If you have a better idea, please leave a comment here.
Another issue you'll have to work around is the fact that Skrollr executes render callback hundreds of times per second during scrolling. You definitely don't want your callback to run that much: that's completely unnecessary and will slow down the browser.
So you need to throttle your callback. If you happen to use a standard library extension plugin like Lo-Dash in your project, use it's throttle method. If you don't, you can use the tiny jquery.timer-tools plugin.
Here's a demo that embraces all of the above, written in comfy CoffeeScript:
Demo: http://jsbin.com/gozota/7
Source: http://jsbin.com/gozota/7/edit?html,css,js