The following patch is a quick fix that I needed for responsive inputs on a project I'm working on. I'm sure this isn't the cleanest way to add the required classes to make form inputs bootstrap-responsive, but perhaps someone else could take a look to see if this could be improved?

CommentFileSizeAuthor
#5 2012-11-29_06h25_50.png47.05 KBandregriffin
#5 2012-11-29_06h27_13.png53.68 KBandregriffin
#2 responsive_inputs.patch2.25 KBandregriffin
#1 responsive-inputs.patch2.27 KBandregriffin
responsive-inputs.patch2.51 KBandregriffin

Comments

andregriffin’s picture

andregriffin commented
StatusFileSize
new responsive-inputs.patch2.27 KB

Whoops, I narfed that last patch.

andregriffin’s picture

andregriffin commented
Status: Active » Needs review
StatusFileSize
new responsive_inputs.patch2.25 KB

New patch for testing.

frankbaele’s picture

frankbaele commented

seems to break the styling of my input fields and also overwrites search input, everything works fine out of the box with boostrap 2.2.1

frankbaele’s picture

frankbaele commented
Status: Needs review » Needs work
andregriffin’s picture

andregriffin commented
StatusFileSize
new 2012-11-29_06h27_13.png53.68 KB
new 2012-11-29_06h25_50.png47.05 KB

I suppose I should have clarified what this aims to do. When the window is sized down to mobile size, inputs retain their maxlength value and run off the page. A bootstrap input-size class needs to be added to all inputs to allow them to resize properly for mobile layouts. See attached images.

Also, can you clarify what it breaks so that I can take a look?

jaguero’s picture

jaguero commented

@andregriffin

Can you add a check code below and maybe add it to patch for prefix/suffix check to add input size accordingly. Below is what I added to my input field to work for the time being, not sure if it is the best method.

$prefix = isset($element['#field_prefix']) ? '<span class="add-on">' . _webform_filter_xss($element['#field_prefix']) . '</span> ' : '';
  $suffix = isset($element['#field_suffix']) ? '<span class="add-on">' . _webform_filter_xss($element['#field_suffix']) . '</span>' : '';
  if ($prefix && $suffix) {
	  	$addon = 'input-medium';
	} elseif ($prefix && !$suffix) {
  		$addon = 'input-large';
	} elseif (!$prefix && $suffix) {
		$addon = 'input-large';
	} else {
		$addon = 'input-xlarge';
}
  $output = '<input class="' . $addon . '"' . drupal_attributes($element['#attributes']) . ' />';
andregriffin’s picture

andregriffin commented
Title: Make form inputs responsive. » Make form inputs width-responsive.

Hm, I'm having a little difficulty finding the most appropriate way to get these classes added, and I'd still like to know what problems were caused earlier. Care to shed any light on this frank, or anyone?

bfodeke’s picture

bfodeke commented

I was able to solve this issue with a few lines of css

select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
	display: inline-block;
	height: 20px;
	padding: 4px 6px;
	margin-bottom: 10px;
	font-size: 14px;
	line-height: 20px;
	color: #555;
	vertical-align: middle;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	box-sizing: border-box;
	width: 100%;
}

Instead of width: 100%, you can do max-width:100%. The magic here is 'box-sizing:border-box'.

markhalliwell’s picture

markhalliwell
Primary language English
commented
Title: Make form inputs width-responsive. » Fix input elements from overflowing on mobile
Status: Needs work » Fixed

Form inputs often have various width needs depending on the input/site. These should also be handled by the input's size attribute (which can be controlled in FAPI). All that's really needed here, is to ensure they don't even overflow the parent container. The technique @bfodeke uses in #8 is correct. I've used this technique for a while and just patched all the styling fixes in #1984354: Improve LESS/CSS consistency..

markhalliwell’s picture

markhalliwell
Primary language English
commented
Status: Fixed » Closed (duplicate)

Sorry, should have marked this as a dup of #1984354: Improve LESS/CSS consistency. instead of fixed (since no code from this issue was actually committed).