Can anyone provide an example of aligning a label and dropdown in the same row using sweetalert2?
I attempted to customize the label placement, but it appears on a separate line. I would like to log the selected dropdown item upon clicking the OK button.
Here is my StackBlitz link for reference:
Utilize the inputLabel and customClass parameters:
Swal.fire({
title: 'Select + label in one row',
input: 'select',
inputOptions: {
apples: 'Apples',
bananas: 'Bananas',
oranges: 'Oranges'
},
inputLabel: 'Select a fruit',
customClass: {
input: 'inline-flex',
inputLabel: 'inline-flex'
}
}).inline-flex {
display: inline-flex !important;
margin: .5em !important;
}<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>Find out more information about customClass:
Here is an example of how you can use plain/styled html and capture the dropdown value:
swal.fire({
showCancelButton: true,
type: "warning",
html: ` Choose a reason <select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>`,
preConfirm: function() {
var element = document.getElementById("cars");
alert(element.value); // access user selected value
}
});
I've been working with the react markdown library and wanted to share my code: import Markdown from 'react-markdown'; import PreClass from './PreClass'; type MarkdownFormatTextProps = { markdown: string; tagName?: string; ...
Greetings! I am currently working on a React project where I am managing the authentication process. I am using Material UI and Formik for validation and handling input changes. However, I encountered an issue with my onchange Formik handler in the TEXTF ...
Having trouble retrieving local storage data with the following code. localData = { id: localStorage.getItem("id"), token: localStorage.getItem("token"), }; This snippet is housed within a function called getStaticProps ...
I have been searching all over the internet and have not been able to find a grid layout like this. The "grid-template-columns" property is not achieving what I need, as I cannot make one box larger than the others. I am looking to create 4 equal boxes an ...
I have been attempting to insert an image into an SVG using Bobril, but the following code is not functioning as expected: { tag: 'svg', children: { tag: 'image', attrs: { 'xlink:href': &ap ...
I've developed a web application using .NET Core 3.1 that interacts with a JSON API, returning data in the format shown below: [ { "partner": "Santander", "tradeDate": "2020-05-23T10:03:12", "isin": "DOL110", "type ...
After referencing the Markdown Syntax guide on Telegram’s Wiki page, it appears to be quite straightforward to format text as bold and italic. The guide explains that: *this is in italic* and _so is this_ **this is in bold** and __so is this__ ***this ...
I am trying to conceal the script for the photoset until it is fully loaded, but unfortunately the code below does not seem to be effective: JavaScript $('.photoset-grid').photosetGrid({ rel: $('.photoset-grid').attr("data-id"), gutte ...
Having troubles with react-datepicker? I encountered an issue where setting the value of react-datepicker from props caused it to either not show the value or display a 'wrong time format' error. Here is a snippet of the Datepicker code: this.sta ...
My goal is to download a CSV file, read it line by line, and add the split lines (based on ',') to the tmparray. This code successfully prints all the elements in the array. var request = require('request'); var fs = require('fs&a ...
As a beginner user and coder, I'm currently working on creating a portfolio website. I had the idea to implement tabs that would allow for content swapping, but unfortunately, I'm having trouble getting the JavaScript to function correctly. I at ...
Having a technical issue and seeking assistance: Currently, I am encountering an issue with my axios request to the database. After successfully retrieving the data, I aim to display it in a select form. However, the response is coming back as one continu ...
Currently, I am executing an automated test script in a selenium-webdriver environment using Phantomjs. My approach involves running the script through node.js, rather than utilizing Python or C#. The steps I took to set up the environment are outlined b ...
$('.cinput').each(function(){ console.log($(this).val()); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type='radio' name='radiox' class='cinput' v ...
When no option is selected from the dropdown list, I require the default value to be used for business logic purposes. ...
I have a table with only one row that contains various elements like textboxes and buttons. I want to clone the table row using the append() function when a button is clicked. However, I am facing an issue - how can I increment the id of the textboxes and ...
I am facing an issue with a multiselect dropdown in my kendo grid, which is being used for a kendo modal window. The dropdown box initially appears correctly but when I scroll horizontally due to multiple columns, the selected value still displays at the o ...
I currently have a substantial amount of code containing multiple event listeners on various HTML objects, all using the 'click' listener. However, I now realize that in addition to these click listeners, I also want mouseenter listeners on all o ...
Currently working on a website using Vue 3.0 and Element+ and encountering an inconsistency. There is a div displayed on the page (an array of objects) and the goal is to remove the object from the array when a button is clicked. The issue arises when som ...
I've been trying to integrate an image cropper into my website, but I'm encountering some issues that I can't seem to resolve. Expected outcome : Upon selecting a picture from the disk using the file input, a modal should appear prompting t ...