Twitter Bootstrap Form Input Overflow on Chrome Only - javascript

I'm having a weird problem where datetime-local inputs overflow their boundaries on Chrome (tested so far on Chrome 35 x64 for Linux), but don't on Firefox (29.0). Here's a screenshot of what happens in Chrome:
chrome screenshot
And here's what it looks like in Firefox:
firefox screenshot
Here's the relevant HTML:
<div class="container-fluid">
<div class="row">
<div id="filter-panel" class="col-md-3">
<ul class="list-group">
<!-- Filter by time -->
<li class="list-group-item">
<h4>Filter by Time</h4>
<div class="input-group">
<span class="input-group-addon">Oldest</span>
<input type="datetime-local" class="form-control" id="log-filter-early-time">
</div>
<div class="input-group">
<span class="input-group-addon">Newest</span>
<input type="datetime-local" class="form-control" id="log-filter-late-time">
</div>
</li>
<!-- more li elements -->
There isn't any css except the twitter bootstrap affecting it. I'm using the most recent version (downloaded a few days ago).
How can I make it so that the input fields are constrained in their div? I do want them to take the whole width, but nothing more. Also, is it possible to get the spans with .input-group-addon to be the same width without giving them fixed, pixel-unit-ed values? I tried assigning them the same width as a percent but that didn't have any effect.

datetime is no longer supported in firefox when you put datetime-local it seems to work
here is a discussion about it
in chrome the datetime-local which is supported has a min width regardless of the container div so appears to be broken but its not .. if you want the datetime-local input you have to have enough space in the container
http://html5test.com/compare/feature/form-datetime-local-element.html

Related

Toggle resizing on materializecss textareas after populating the text

Say that I have this:
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s12">
<textarea id="textarea1" class="materialize-textarea"></textarea>
<label for="textarea1">Textarea</label>
</div>
</div>
</form>
</div>
and say that some part of my code I run this:
$('#textarea1').text(someverylongstring)
The issue with this is that my textarea will stay "small" until I click on it and arrow down to discover the text that I added to it. When the bottom is found the textarea automagically expands to a larger textarea to accommodate the content. My question is, after adding the text to the textarea is there a way to force toggle the resizing aspect of the element?
Have you tried the advanced note from their docs?
When dynamically changing the value of a textarea with methods like jQuery's .val(), you must trigger an autoresize on it afterwords because .val() does not automatically trigger the events we've binded to the textarea.
So after adding your very long text, you would call this:
$('#textarea1').trigger('autoresize');
I use this in VueJS
M.textareaAutoResize($('#textarea1'));
If it does not work, try to set timeout before initiating the autoResize.

Internet Explorer JQuery animation BUG

Hello i got this problem i got JQuery function $(element).slideUp() that i use to show hidden content. I got it working perfectly on FireFox, Chrome etc. but Internet Explorer break it.
When i click on element that activate slideUp action container that hold the element which will be hidden, stretch to enormous height and stays that way for few seconds and then do proper animation to hide or get stuck on that height forever. I dont know what causes that problem and i couldnt find solution for that.
Here are the boxes that resize. slideDown animation works fine but on slideUp transactions_container get stuck on like 1000px height for no reason.
<div class="row rec-trans-box" style="display: table;">
<div class="conf-detail" style="display: none;" id="conf1">
</div>
<div class="col-md-4 no-padding auto-margin width-box" id="news_box">
</div>
<div class="col-md-8 rec-trans-mainbox" id="transactions_container" style="height: auto;">
<div class="rec-trans" style="height: 100%; display: block;">
</div>
</div>
Here is JQuery. Show functions
$('#news_box').hide();
$('#conf1').slideDown();
Hiding functions
$('#news_box').show();
$('#conf1').slideUp();

Mixing in jQuery's UI widget with my topNav kills horizontal alignment

In my web application using jQuery and jQuery UI (1.10.2 and 1.10.4 respectively), I use the CSS in jQuery CSS in /js/jquery-ui-1.10.4/css/ui-lightness/jquery-ui-1.10.4.min.css of the zip file from the jQuery site. I had a topNav bar like so before I got the jQuery-based autocomplete function to work:
MyProfile Link1 Link2 | search box | Logout
My search box is 300px and my fonts are 12px, and the width of the div container above is 700px and BEFORE I added jQuery autocomplete support, it was something like this:
<div class="topNav">
<div class="left">
<a href...>MyProfile</a>>&nbsp&nbsp
<a href...>Link1</a>>&nbsp&nbsp
<a href...>Link2</a>>&nbsp&nbsp
</div>
<input id="searchBox" name="searchBox" type="search" >
<div class="right">
<a href...>Logout</a>
</div>
</div>
It was all well aligned then (all of topNav in one line).
Now, after adding jQuery support like so:
<div class="topNav">
<div class="left">
<a href...>MyProfile</a>>&nbsp&nbsp
<a href...>Link1</a>>&nbsp&nbsp
<a href...>Link2</a>>&nbsp&nbsp
</div>
<!-- div-ing the input searchBox was the only change: -->
<div class="ui-widget">
<input id="searchBox" name="searchBox" type="search" >
</div>
<div class="right">
<a href...>Logout</a>
</div>
</div>
And now, the search box has decided it will appear in the next line, and the Logout also appears in the second line, like so:
MyProfile Link1 Link2
| search box | Logout
Any help on how to horizontally align after jQuery autocomplete support is appreciated.
I followed the approach in the accepted answer in this SO post. That seems to have solved my problem. The CSS properties of .ui-widget (the jQuery div element) can be additionally changed (for font size etc.) in your application, that is another way you can remove the issues from including that dependency.

Search clear button does not appear in iOS

I have an application that does some searches against post codes and for the most part it works fine. However, I have noticed that the clear icon which appears on the right-hand side of the field does not appear in some browsers.
So I created a basic HTML markup to test against some browsers. This is not have any accompanying CSS stylesheet.
<input type="search" />
Under iOS 7 Safari and Chrome this does not appear.
Under Safari 7.0.1 and Chrome 31.0.1650.63 on the Mac this works perfectly fine.
Under Firefox 26 for Mac this does not appear.
The main reason why I want it is because the web app will be running mainly on the mobile platform and removing post codes in a flash would be very convenient for continued usage.
The other tactic I tried was to select the entire text once the field was on focus.
<input id="orig" type="search" value="" placeholder="Origin" onclick="this.select()">
This works under Firefox/Safari/Chrome on the Mac but not on iOS.
I do not really mind which of the above works as long as I can quickly get rid of the old text from the search field. Is there a universal markup I could use that would work across all browsers?
I have solved my query with the following code using Jquery mobile:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Insert Page Title Here</h1>
</div>
<div data-role="content">
<label for="search-enhanced">Search:</label>
<div class="ui-input-search ui-body-inherit ui-corner-all ui-shadow-inset ui-input-has-clear">
<input type="text" data-type="search" data-enhanced="true" name="search-enhanced" id="search-enhanced" value="">
</div>
</div>
<div data-role="footer">
<h1>Insert Footer Text Here</h1>
</div>
</div>
</body>
</html>
I hope this helps anyone having the same issue.

Form Broken Using JQuery UI tabs in Chrome Only

I have looked into many similar problems and solutions but none that have fixed this problem. This form works in Firefox but not Chrome. I would like to understand what Firefox is doing that Chrome is not and fix this page so it works in all browsers.
The form seems to become unusable once it is placed inside JQuery UI tabs but only in Chrome.
<form method="post" action="/data-page/" id="enter_exercise" >
<div id="tabs_ajax">
<ul>
<li>General Info</li>
<li>Heart Rate</li>
<li>Exercise</li>
</ul>
<div id="tabs-1" style="padding:0;" >
Workout Title:<input type='text' name='title' value="" />
</div> <!-- END tab-1 -->
<div id="tabs-2" style="padding:0;" >
Average Heart Rate:<input type='text' name='avgHR' value="" />
</div> <!-- END tab-2 -->
<div id="tabs-3" style="padding:0;" >
Run Miles:<input type='text' name='miles' value="" />
</div> <!-- END tab-3 -->
</div>
</form>
The javascript (which is posted at the bottom of the page)
<script>
$j = jQuery.noConflict();
$j(document).ready(function(){
$j( "#tabs_ajax" ).tabs({
});
});
</script>
This page is for exercise input on a wordpress blog and is initiated as a fancybox popup. I use include("../../../wp-load.php"); to allow this popup to access the wordpress functions. I also use wp_enqueue_scripts("jquery"); and wp_enqueue_script('jquery-ui-tabs');
If I create a plain form on this popup, it works, but when I place the form within the <div id="tabs_ajax">content, it does not allow me to enter form data in Chrome. It works in Firefox but Chrome is unresponsive, including the submit button.

Categories