<button class="ui button" #click="beforeAdd">添加</button>
<div class="ui modal">
<div class="header">Header</div>
<div class="content">
<div class="description">
<p>Description</p>
</div>
</div>
<div class="actions">
<div class="ui negative right labeled icon button">
取消
<i class="remove icon"></i>
</div>
<div class="ui positive right labeled icon button">
提交
<i class="checkmark icon"></i>
</div>
</div>
</div>
view methods:
beforeAdd(){
const modal = $(this.$el).find('.ui.modal')
console.log(modal)
modal.modal('show')
}
first click,modal show, second click nothing happened, I found semantic change modal to root for div class='ui dimmer modals page transition hidden',how can solve it
Semantic is removing it from your $(this.$el) so next time it does not find it.
It works when you use with global $ and an id:
show(){
const showModal = $('#mymodal')
console.log(showModal)
showModal.modal('show')
}
See Updated fiddle.
If you also want to use Vue variables in your modal, it is necessary to clone the modal and only show the cloned version.
With this approach Vue will still be able to keep track of the original modal, because Semantic doesn't remove it from the DOM.
beforeAdd(){
const modal = $(this.$el).find('.ui.modal').clone()
console.log(modal)
modal.modal('show')
}
Related
Code for Filter Button
import React from "react";
function FilterButton(props){
return (
<div className="box">
<button
type = "submit"
className="button is-info"
onClick={()=>props.setFilter(props.name)}
>
<span>{props.name}</span>
</button>
</div>
);
}
export default FilterButton;
Unfortunately, the div tag is not able to put the following buttons(All, Active, Completed, Important) on the same line.
Is there any solution for this problem?
If you want to use the grid system of BULMA, you can do the following things:
see https://bulma.io/documentation/columns/basics/:
<div class="columns">
<div class="column">
First column
</div>
<div class="column">
Second column
</div>
<div class="column">
Third column
</div>
<div class="column">
Fourth column
</div>
</div>
If you want to use css in order to do this, you can use the css property display: inline-block,as it is shown here:
https://www.w3schools.com/css/css_inline-block.asp
In PrimeNG 9, I could center-align the content projected into a button. Does anybody know how this can be achieved in PrimeNG 10?
<div class="ui-g ui-fluid" >
<div class="ui-g-12">
<button pButton>
<div>Content</div>
<i class="fa fa-home"></i>
</button>
</div>
</div>
Button Rendered in PrimeNG 9:
I already submitted an issue of having the rendered when the label is missing.
https://github.com/primefaces/primeng/issues/9482
Add style="width: 100%" to your Content div.
And you can set label=" " to avoid the char while waiting fix from PrimeNG team.
See StackBlitz
PrimeNG's documentation is not up-to-date when it comes to primeflex, please check primeflex's documentation directly instead:
https://www.primefaces.org/primeflex/
Below code snippet centers a button, you can re-use that to center content within the button as well:
<div class="flex justify-content-center">
<button pButton type="button" label="Submit"></button>
</div>
how can I get my active tab & segment to display on the initial page load - my tabs load remotely using ajax and all work when you click on them, but on first page load the tab segment is empty :
<div class="ui tabular menu grid">
<div class="ui container">
<a class="item active tabby" data-tab="home"><i class="large home icon">
</i>Home</a>
<a class="item tabby" data-tab="two"><i class="large chart bar icon"></i>Two</a>
<a class="item tabby" data-tab="three"><i class="large calendar icon"</i>Three</a>
<a class="item tabby" data-tab="four"><i class="large clock icon"></i>Four</a>
</div>
</div>
<div class="ui center aligned grid">
<div class="ui container">
<div class="ui tab active segment " data-tab="home"></div>
<div class="ui tab segment" data-tab="two"></div>
<div class="ui tab segment" data-tab="three"></div>
<div class="ui tab segment" data-tab="four"></div>
</div>
</div>
To initialise:
$('.tabular.menu .item')
.tab({
cache: false,
evaluateScripts : true,
auto : true,
path : '/dashboard',
ignoreFirstLoad: false,
alwaysRefresh: true
});
I encountered the same issue, when the page loads the first or 'active' tab will open and display the contents defined by the html source, but it does not auto-load. However, clicking on the tab causes the auto-load to occur.
I have just read an article which suggests that jQuery does not fire the activate event on the first tab when it is created. If this is true then it might explain why this happens. jQuery bug report
My solution is to programatically activate the tab. The semantic ui documentation mentions doing this, but the information is a bit vague: find it in 'Tabs - Usage': where it refers to 'Initialising Tabs ... without Menus'. Semantic UI - Tabs - usage
Tabs can be activated with jQuery:
$.tab('change tab','tab-name');
where 'tab-name' is the 'path' you specified in 'data-tab="tab-name"'. At first I found that this just opened and closed the tab without auto-load, until I used a jQuery selector which selected the MENU item, not the TAB item, then the auto-load worked.
So, I activate the tab just after initializing the tabs in the Document.Ready function:-
$('#infotabs .menu .item')
.tab({
auto: true,
path: '/pathto/'
})
$('#infotabs .menu .item').tab('change tab','tab1.php')
;
This is the corresponding HTML:
<div id="infotabs">
<div class="ui top attached tabular menu">
<a class="active item" data-tab="tab1.php">tab1</a>
<a class="item" data-tab="tab2.php">tab2</a>
<a class="item" data-tab="tab3.php">tab3</a>
</div>
<div class="ui active bottom attached tab segment" data-tab="tab1.php">
1
</div>
<div class="ui bottom attached tab segment" data-tab="tab2.php">
2
</div>
<div class="ui bottom attached tab segment" data-tab="tab3.php">
3
</div>
</div>
I have a form within modal and I don't seem to be able to catch the submit event.
Let's say we have a html page defined as (for the sake of simplicity leaving out any templates defined by me)
<body>
<button class="ui button">Open modal</button>
<div class="ui small modal">
<div class="header">
Enter your email
</div>
<div class="content">
<form class="ui form">
<div class="field">
<div class="ui left icon input">
<i class="at icon"></i>
<input type="email" name="email" placeholder="Email">
</div>
</div>
<div class="ui error message">
</div>
</form>
</div>
<div class="actions">
<div class="ui negative button">
Cancel
</div>
<div class="ui positive primary loadable button">
Reset password
</div>
</div>
</div>
</body>
and registred template events
Template.body.events({
'click button': function () {
$('.modal').modal('show');
},
'submit form': function () {
alert('called');
}
});
When I submit the form it doesn't get cought by the handler. Why and what's the best approach?
I got something similar working by defining the inner content of modal as template, but it makes things much harder. Is there any other way?
EDIT: Here's meteorpad that demostrates the issue
The reason behind this behavior is that modal is detached from the DOM. This behavior can be overriden by setting detachable: false
Here's working meteorpad
Credits
I know similar questions have been asked earlier, but I have tried them and they aren't working. I have a dialog box, with some text and a button, which I need to position in the center of the box. My HTML is given below:
<div id='step3' class='item'>
<div class='row span9'>
<div class="text center"><button id='loginButton' class='btn btn-success' onClick='window.location.reload()'>Login again</button></div>
<small>using your new credentials.</small>
</div>
</div>
I tried placing the button inside a div and used <div style="text-align:center"> but it didn't work. Does anyone know how I could place the button in the center, preferably without adding an external CSS class?
Your class="text center" should be class="text-center", and you also don't need the row tag (it breaks the responsiveness).
<div id="step3" class="item">
<div class="span12">
<div class="text-center">
<button id="loginButton" class="btn btn-success" onClick="window.location.reload()">Login again</button>
<br> <small>using your new credentials.</small>
</div>
</div>
Also you have single quotes '' on most of your markup. Keep in mind this is with an old version of Bootstrap so depending on how wide the viewport is it might not be perfectly center.