I am using the Vue-datetime package for a datepicker in the UI and also am using Bootstrap 5's input group form component for placing buttons on sides of input fields.
I would like to make the entire input field clickable, as well as the button. Does anyone have any advice on how to do so? My current attempt just makes only a small part of the input field clickable. How to extend it for the entire field, as well as the button?
Screenshot of my current attempt:
I have a codesandbox here: https://codesandbox.io/s/gallant-glade-orwv9?file=/src/components/HelloWorld.vue
Note: It would be nice to hide the inner date field border, as well.
You can solve this issue by using some Bootstrap utility classes.
Applying form-control and p-0 to the wrapper will give it the look of a normal bootstrap input.
Then we can add some classes to the input itself using the input-class prop.
Here we'll add w-100 to stretch it to full width. py-1 and px-2 to give the placeholder some padding and then border-0 to remove the base border on the <input />.
class="form-control p-0"
input-class="w-100 py-1 px-2 border-0"
You'll also want to move the hidden input field to after the datetime component, to avoid the border-radius being messed up on the left side.
The button we can make into a <label> and point to the input to allow us to open the datepicker by pressing it. We can style the label using the btn classes.
new Vue({
el: "#app"
})
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap#5.1.0/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/vue-datetime#1.0.0-beta.14/dist/vue-datetime.min.css" />
<script src="//unpkg.com/vue#2.6.14/dist/vue.min.js"></script>
<script src="//unpkg.com/luxon#1.28.0/build/global/luxon.min.js"></script>
<script src="//unpkg.com/weekstart#1.1.0/dist/commonjs/main.js"></script>
<script src="//unpkg.com/vue-datetime#1.0.0-beta.14/dist/vue-datetime.js"></script>
<div id="app" class="p-4">
<label class="form-label" for="date_input">Date:</label>
<div class="input-group">
<datetime input-id="date_input" type="date" ref="dateInput" class="form-control p-0" input-class="w-100 py-1 px-2 border-0" placeholder="Choose a date..." aria-label="Choose a date..." aria-describedby="dateField" auto required></datetime>
<input type="text" class="d-none" placeholder="Choose a date..." aria-label="Choose a date..." aria-describedby="dateField" />
<label for="date_input" class="btn btn-primary">
Button
</label>
</div>
</div>
Related
I'm tinkering with DaisyUI within Vue.js 3 (porting an existing Vue+Bootstrap application to Tailwind CSS). I liked the idea that DaisyUI doesn't have JS wizardry going on behind the scenes, yet there seems to be some CSS voodoo magic that is doing things more complicated than they need to be (or at least this is my impression).
From the DaisyUI examples, here's the modal I'm trying to integrate:
<input type="checkbox" id="my-modal" class="modal-toggle"/>
<div class="modal">
<div class="modal-box">
<h3 class="font-bold text-lg">Congratulations random Internet user!</h3>
<p class="py-4">You've been selected for a chance to get one year of subscription to use Wikipedia for free!</p>
<div class="modal-action">
<label for="my-modal" class="btn">Yay!</label>
</div>
</div>
</div>
no javascript, yet the problem is that the modal will come and go according to some obscure logic under the hood that tests the value of the my-modal input checkbox at the top. That's not what I want. I want my modal to come and go based on my v-show="showModal" vue3 reactive logic!
Daisy doesn't seem to make that possible. Or at least not easily. What am I missing?
The modal is controller by the input field, so to open or close the modal just toggle the value of that input:
<template>
<!-- The button to open payment modal -->
<label class="btn" #click="openPaymentModal">open modal</label>
<!-- Put this part before </body> tag -->
<input type="checkbox" v-model="paymentModalInput" id="payment-modal" class="modal-toggle" />
<div class="modal modal-bottom sm:modal-middle">
<div class="modal-box">
<h3 class="font-bold text-lg">Congratulations random Internet user!</h3>
<p class="py-4">You've been selected for a chance to get one year of subscription to use Wikipedia for free!</p>
<div class="modal-action">
<label class="btn" #click="closePaymentModal">Yay!</label>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
const paymentModalInput = ref()
const openPaymentModal = () => {
paymentModalInput.value = true
}
const closePaymentModal = () => {
paymentModalInput.value = false
}
</script>
I'm making a form in React native.
A field in this form in (non-native) React would be like this:
<div>
<label htmlFor="lastName">Last Name:</label>
<input type="text" id="lastName" />
</div>
Or in plain html:
<div>
<label for="lastName">Last Name:</label>
<input type="text" id="lastName">
</div>
I find the label tag important for accessibility reasons.
Every tutorial I found uses only placeholders and I couldn't find any reference for <label> in the react native documentation.
The placeholder disappears as the user starts typing, which makes the page less accessible.
The <label> tag also has the advantage of directing focus to the input in case it is clicked.
This means a click on <label htmlFor="lastName">Last Name:</label> prompts the user to input in the field <input type="text" id="lastName" />.
For this reason using <Text> tag as a <label> is not ideal.
You can use <View> as your <div> and <Text> as your <label>.
<input> is <TextInput>
then you just have to style the elements to your needs.
I am very new to Vue.js, I want to learn in this codepen (not mine) why if we remove the div with id="app" fails to render email validator input field.
<div class="container" id="app">
<div :class="['input-group', isEmailValid()]">
<span class="input-group-addon" id="basic-addon1"><span class="fa fa-envelope"></span></span>
<input type="email" class="form-control" placeholder="Email Address" v-model="email" />
</div>
</div>
I want to sue this email validator input field in my single file component i.e. (.vue), if I add attribute el: '#app' still I get not able to find element app in the console. even if I keep the div with id="app"
I tried this:
<div :class="['input-group', isEmailValid()]" id="app>
<span class="input-group-addon" id="basic-addon1"><span class="fa fa-envelope"></span></span>
<input type="email" class="form-control" placeholder="Email Address" v-model="email" />
</div>
to fit it in my single file component but it doesn't work!
It's because Vue doesn't know where to mount.
see new Vue({ el: '#app' in the script? If you want to change the id, change both the div id and the el value. If you remove it, you'll need to find another way to mount.
How to show the Text box layout in MVC as text box without having drop down in the side?
In the attached screen shot, we have the drop down lay out. It has to be plain text box.
<div class="form-group">
<div class="col-sm-5 control-label">
<label class="hthin">ExceriseTimes</label>
</div>
<div class="col-sm-1">
<textarea id="ExceriseTimes" asp-for="ExceriseTimes" style="height:25px;" class="form-control" type="text"></textarea>
</div>
</div>
The <textarea> form element doesn't have type attribute, it belongs to <input>. If you want a plain single-line text box, just use <input> tag with type="text" attribute:
<input id="ExerciseTimes" asp-for="ExerciseTimes" style="height:25px;" class="form-control"
type="text" />
However if you want fixed size <textarea> element without scroll bar (looks like spinner in sample image), use both CSS styling overflow:hidden & resize:none:
<textarea id="ExerciseTimes" asp-for="ExerciseTimes" style="height:25px;" class="form-control"
style="overflow:hidden;resize:none"></textarea>
Note: You can apply additional CSS class containing both styles above (e.g. noscrollbar) and append it like class="form-control noscrollbar".
I'm using WinJS (JavaScript) to create a Windows 8 app.
I wish to make a container, either a DIv or something else, that I can put content in to and can be used for scrolling by touch.
I've looked at flex box, but that appears to be just for Internet Explorer?
Am I missing something?
This is my markup so far, I want to make the wrapper scrollable
<div id="wrapper">
<div class="login_box">
<form method="post">
<label class="login_label">Username:</label>
<input type="text" class="login_input" name="login_username" />
<label class="login_label">Password:</label>
<input type="password" class="login_input" name="login_password" />
<input type="submit" id="login_submit" name="login_submit" />
</form>
</div>
</div>
Is this done via CSS?
For WinJS, you can add the .win-scrollview class to your wrapper div and then use the overflow-x and overflow-y css properties to control scrolling behavior.