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.
Related
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 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>
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 have a nested v-for of item
<div class="media" v-for="(comment, parentIndex) in adminComments">
<div class="media-body">
<div class="media" v-for="(answer, index) in comment">
<label class="control-label upload" v-if="comment.data===''">
<input class="file-upload" type="file" #change="uploadFile($event, parentIndex)">
Upload file
</label>
<label class="control-label upload" v-else>
<input class="file-upload" type="file" #change="uploadFile($event, parentIndex)">
{{comment.name}}
</label>
</div>
</div>
</div>
This is basically it, my adminComments is an array of objects and these objects have some attrs, including name, however, this name is changed with a function after the file is uploaded as well as a "loading" attribute to change an icon class, however, none of them is rendering.
As i read here the labels should be rendered well, however, this is not happening. I know that my comment object is indeed working because I also have a textarea with a v-model="comment.response". What could be wrong? I have done the same before and it has worked but in a single v-for and not in a nested list. Thanks in advance
I create one Method in MVC 4.0 which taking the Request.Form (Namevaluecollection) in Form. I faced below issue in checkbox and radio button.
I added dynamically checkbox or radio button with below code, and I set the form value collection as "NameValueCollection formsCollection = Request.Form" in one of my controller method but that checkbox or radio button is not coming in "formsCollection.AllKeys" while other control like text box, text area, dropdown will work properly.
<form>
<div class="divLeft div1" id="div83ac0fad-41d5-40e5-99cd-f99ea8877b04">
<div class="control-group">
<label class="control-label">Checkbox 2</label>
<div class="controls">
<div id="cfCheckbox">
<label>Option 1</label>
<input type="checkbox" id="checkbox83ac0fad-41d5-40e5-99cd-f99ea8877b04" name="checkbox83ac0fad-41d5-40e5-99cd-f99ea8877b04">
<label>Option2</label>
<input type="checkbox" id="checkbox83ac0fad-41d5-40e5-99cd-f99ea8877b04" name="checkbox83ac0fad-41d5-40e5-99cd-f99ea8877b04">
</div>
</div>
</div>
</div>
</form>
You're having id="checkbox83ac0fad-41d5-40e5-99cd-f99ea8877b04" on both check-boxes and the main div. IDs in HTML are supposed to be unique.
Remove the IDs on the checkboxes. This should fix your problem.
FormsCollection uses Name for binding, not ID. So you don't really need your elements to have IDs.