html5 making the time stepper bigger - css

I've been playing with the different types in html for the app I'm making. However, I'm making this app for touch screen computers so I a wondering if the 'stepper' that appears when it is either a type="time" or type="date" can be made larger so it is easier to press. Right now it is quite hard with big fingers and I can't find anything on google.
the html looks like this
<input type='time' value='' />
And a picture of what it ends up looking like.
Any help would be great!

Related

How to make VoiceOver "not" to interact with an image element?

It seems there is not much documents out there explaining my question or even mention about.
Hoping anyone can helps me with this.
Having an simple image on the website, let's say
<img src="..." alt="some meaningful text">
Screen reader in Google extension works well as expected when reading the image that it says "some meaningful text".
However, the VoiceOver reads it as "some meaningful text, image", "You are currently on a image... To begin interacting with the contents of this image, press Control-Option-Shift-Down Arrow. To exist...".
And that is incorrect.
I don't want the VoiceOver to let users interacts with the image which is not able to, but don't know how to achieve.

How do I bring a drop down list to the front in Laravel?

I have a website build on Laravel/ css and I have a drop down list but it seems to cut off as soon as it hits the next section of the site (I'll provide screenshots to explain this). I'm rather new to this so looking for any help on how to make sure the full list is displayed. Maybe some sort of 'bring to front' on the css file? The first screenshot is on a 4k desktop monitor and the second is a mobile phone (iPhone 12) Any help is greatly appreciated.
Thanks
Try giving a z-index to your select menu.
<select style="z-index: 10"> </select>

Visual Studio 2010 Auto-Formatting ASPX maladies

Alright. I've done a LOT of searching around, and found many posts that address this issue, but do not actually have any resolutions.
Visual Studio 2010 really likes auto-formatting my code. This is all great and wonderful, when it's actually doing what I tell it to.
Whilst editing an .aspx file, formatting does not work well for me. So I try to place spaces before and after all my closing tags and Format Document (ctrl+k,Ctrl+d or Ctrl+e,d), and it will format it according to the Tag Specific Options... in Text Editor->HTML->Formatting, which I have obsessively set, checked, and double-checked.Apparently the requirement of leading and trailing spaces for formatting was a design decision, although it's lost on me as to why, since most whitespace is ignored in parsing of normal html documents. Whatever, I can deal, I just need to put in a ton of extra spaces, then it will do it right, right? In short: no.
Point being: After I've taken pains to make sure that it is formatting everything the way I have it set to, by putting a ton of extra spaces in my markup and Format Documenting, like so:
</asp:TableCell>
</asp:TableRow>
</asp:Table>
</div>
<div id="Week2Summary" align="right">
Week 2 - Summary
</div>
<br />
<div id="PayPeriod" align="right">
Pay Period- Summary
</div>
</div>
<br />
<asp:Panel ID="pnlTimeModify" runat="server" Visible="False" borderColor="#009900"
Width="100%">
whenever I switch to the designer view, save, or sometimes just look at it wrong, it takes out all of the spaces, reformats, and screws it all up:
</asp:TableCell></asp:TableRow></asp:Table></div><div id="Week2Summary" align="right">
Week 2 - Summary </div><br /><div id="PayPeriod" align="right">
Pay Period- Summary </div></div><br /><asp:Panel ID="pnlTimeModify" runat="server" Visible="False" BorderColor="#009900"
Width="100%">
So, I've installed PowerCommands and Productivity Power Tools, one of whom adds a "format on save" setting that is defaulted to off. Great! Restart, and it seems to work great. Reboot a couple times, and it's doing it again. Now I'm about to blow up the computer and walk out of the office. I'll save the rant for some other place.
In Short: I need to know how to make VS either:
stop formatting automatically whenever it feels like it
stop taking out my spaces that force formatting to work correctly when it does
or stop requiring the extra spaces in the first place
so I can work in peace again. (I'm sure the girls down the hall are getting sick of my periodic screaming.)
What I've tried:
Set formatting settings in Text Editor->HTML->Formatting->Tag Specific Options...
Install PowerCommands and Productivity Power Tools and edit the settings to "prevent" formatting on save
Use extra spaces to force formatting to work properly (which are taken out automatically by VS whenever I save or switch views)
Change the File Extensions options so that .aspx are opened as XML and HTML documents, neither helping at all.
However, it continues to raise my blood pressure. Thanks for any help you can give me. I'm going to go have lunch and try to calm down.
was having the same problem, and I found the answer on Scott Gu's blog.
The solution is to setup the formatting rules in Visual Studio (right click on any tag, click on Formatting and Validation, click on Tag Specific Options)
When press ctrl-k, ctrl-d the document will format as per your settings. If a closing tag does not move to a ne.w line, it's because there is no space between the end tag and what is preceding it. This happens because Visual Studio is being careful to not change how the page is rendered.
For the full blog post checkout Scott Gu's blog post.
http://weblogs.asp.net/scottgu/archive/2006/07/07/Tip_2F00_Trick_3A00_-Custom-formatting-HTML-in-Visual-Web-Developer-and-Visual-Studio-2005.aspx

How do I code web forms that Mobile Safari will autofill?

I haven't been able to find a tutorial for developers, just endless tutorials showing users how to turn the feature on via a Google search. Does anyone care to share how this was achieved? Here is a small example of my code..no autofill (yet). I do have my contact card filled out and the option turned on.
<div style='display:block;'> <
<input name='first_name' id='firstName' type='text' />
</div>
Works if you wrap it with form tags. It's maddening that there isn't any documentation around this feature.

Why is <input type="file"> box grey in IE8?

Can anyone explain why my input type="file" is greyed out in IE8 but not IE7. It's still usable, but you can't actually type in the box any more.
<INPUT id="fil1" type="file" size="44" name="fil1" runat="server">
IE7:
IE8:
<input type='file'> is treated as a special case input field in all browsers. It looks different in pretty much every browser, and it can't easily be styled using CSS.
The reason for this is that the browsers consider it to have security issues, for example, where users may upload files without realising it. They therefore enforce a standard look and feel for it, so that the field will always be recognised for what it is. They also prevent CSS and Javascript from having access to the field so that they cannot modify the how it looks or alter the value of it.
In the case of IE8, the browser developers have decided that the only way the user should be allowed to access the field is via the file selector button. This is a concious decision by the IE developers to increase security. There's nothing you can do about it.
For the sake of curiosity, you should try seeing how <input type='field'> is rendered in other browsers - Firefox, Safari, Chrome, Opera... you'll be surprised by how different they all are in how they render this. It's probably the single most inconsitently rendered element.
Because the textbox is readonly; which is the expected behaviour. You can select a file using the Browse button.
Typing is not an option, since the file is on the users pc and the webpage cannot directly access those files.

Resources