I am working on laravel livewire datatables. when change sorting of table, after refresh the page sorting not removed. I need to completely refresh page & show original datatable results when refreshing page.
<div class="col-md-12">
<div class="table-responsivemt-2">
<livewire:table.admin-match :params="['filter' => $this->filter]"/>
</div>
</div>
Related
I have a form inside another form and I want to prevent default action for both forms on submit event:
Vue component:
<template>
<div v-show="isActive" #submit.prevent="onSubmit">
<slot :form="form"></slot>
</div>
</template>
Child:
<form method="POST" action="/update-user">
// form fields part 1
<form method="GET" action="/delete-user">
<button type="submit">
<span>{{ $is_deleted ? 'Cancel Delete' : 'Delete Account' }}</span>
</button>
</form>
// form fields part 2
<button type="submit">
<span>Update</span>
</button>
</form>
When I submit update-user form then the component onSubmit method is hit and prevents default action. However, when I hit delete-user form then the onSubmit method is not hit and the page gets reloaded.
If I get the second form outside of the first one, then it works.
How I can trigger onSubmit method for the second form?
No, This looks like nested form and it violates the spec as outlined in Prohibitions.
Form must not contain another form. I think you should design your app differently. May be two different forms. Or just use plain ajax request as its a vue app anyway?
I am creating a user interface that is to be responsive.
I have three buttons that I would like to move into a drop down when the users screen size dictates.
My issue is that the "show-on-med-and-down" helper I am using to display the drop down menu is always showing regardless of the screen size.
The materialize helper "hide-on-med-and-down" is working and the content is being hidden correctly, but I cannot get the drop down to display only when the screen is medium and down.
<div class="entry">
<div class="icon> icon for user </div>
<div class="name"> user name </div>
<ul class="hide-on-med-and-down">
<div class="button>yes</div>
<div class="button>no</div>
<div class="button>maybe</div>
</ul>
<ul class="show-on-med-and-down">
<div class="dropdown"> dropdown menu</div>
</ul>
</div>
I expect this code to show exclusivity the drop down button or the three buttons in any case. But as you can see from my attached screenshot the dropdown menu place holder always is shown.
large view
small view
Thank you for your time in advance.
"show-on-med-and-down" css class just set the display property when the screen width is > 600px.
You need to set the style of the item to be style="display: none;"
OR change the class to "hide-on-large-only" (suggested).
I am using the first basic card example from http://materializecss.com/cards.html as a starting point. The card-action div contains two links that render beautifully.
Now I want to add a new card action that doesn't just open a link but performs an action. This could probably be done using a standard link with an tag as well but since I'm using Rails my standard way is that this action becomes a button with a form around it. It looks like this now:
<div class="row">
<div class="col s12 m6">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">Card Title</span>
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
This is a link
This is a link
<form>
<a class="waves-effect waves-light btn">button</a>
</form>
</div>
</div>
</div>
</div>
I would have expected that the button is nicely aligned with the two existing links, in one row at the bottom of the card. But what actually happens is that the button appears in the line below.
How can I align a button with a form together with standard HTML link tags in one row?
UPDATE: here is a JSFiddle with the code above: https://jsfiddle.net/hendrikbeck/zq1pv3y6/
You just need to add display: inline to your form tag.
See the updated JSFiddle : https://jsfiddle.net/zq1pv3y6/2/
I have a Bootstrap Modal in which I am trying to display a select2 control. The control shows up and it works perfectly well but it doesn't display properly. I have attached a screenshot of how it is rendering as. I also copied and pasted the exact same code to a regular page and that is displaying properly. I inspected the border property as well as various other css properties but am unable to determine why it is displaying like that. Can anyone give me some pointers on how I can solve this issue?
JsFiddle showing the issue
Note: Please maximize the width of the result window to see the issue in action.
Html:
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-3 control-label">Country</label>
<div class="col-sm-6">
<select class="js-example-basic-single form-control">
<option></option>
<option>Canada</option>
<option>Mexico</option>
<option>United States</option>
</select>
</div>
</div>
</form>
Javascript:
$('.js-example-basic-single').select2({
placeholder: "Select country..."
});
EDIT:
I would also like to point out there is a dependency to the select2-bootstrap library. If I use just the select2 library, I am not witnessing this issue.
I am trying to figure out how to get an image/map or whatever, in this case a map, displayed to the right side of my form.
This image shows what I want it to look like. It will be a dynamically generated Google map however.
Here is my current code for the form itself via bootply.
Bootply Example
Thanks!
You need to add another wrapper row and column inside your container.
<div class="row">
<div class="col-md-8">
<!-- Your Form Here-->
</div>
<div class="col-md-4">
<!-- Your Image here-->
</div>
</div>