i'm currently working with Twitter Bootstrap creating forms.
For styling an file input i'm using input-append:
<div class="input-append">
<input type="text" name="product[picture]-input" id="picture" readonly="readonly" placeholder="Produktbild (optional)">
<button class="btn" id="picture-reset" type="button"><i class="icon-remove"></i></button>
<button class="btn" id="picture-select" type="button">...</button>
</div>
But i don't get the styling fit to other inputs. I'm using the responsive design and i tried the relative sizing with
class="input-medium"
or the grid-sizing with
class="span4"
but it seems that input-append not optimized for. The full code you can see here:
http://jsfiddle.net/6cvYr/
And here some screens with different screen-sizes, in each size it won't fit:
https://drive.google.com/folderview?id=0ByywF8ZXCU9kbTdUZ1N6bkxodGs&usp=sharing
Any ideas?
Related
I'm using Angular UI Bootstrap datepicker popup on a modal dialog. The width of the outside border is not calculated properly based on the inside contents. In some cases, the outside box is bigger than inside contents. In other cases, the outside is smaller. Also, it seems the width of the outside of the datepicker has impact on the width of the popup. For example, "col-sm-4" will make the border smaller, while "col-sm-5" will make the border larger.
Can anyone please point me to the right direction to check where the problem might be?
Thanks in advance!
Look this: http://plnkr.co/edit/JTkIvBwl9agQCYxLaN6X?p=preview
Just change to: is-open="opened" to: is-open="$parent.opened"
So relevant snippets of HTML will look like:
<div class="input-group">
<input type="text" class="form-control"
datepicker-popup="dd.mm.yyyy"
ng-model="dt"
is-open="$parent.opened"
ng-required="true"
close-text="Close" />
<span class="input-group-btn">
<button style="height:34px;" class="btn btn-default" ng-click="open()">
<i class="icon-calendar"></i>
</button> <b><- button not working</b>
</span>
</div>
Just figured that out. It was a mistake. I have changed the "dropdown-menu" css class buried somewhere, which affects the datepicker layout.
I am seeing an issue when viewing a website in IE8 (but which works fine when using the emulation mode in dev tools in IE 11).
In modern browsers I see what I would expect:
But in IE, I see the following:
I've added the html5 shim and respond,.js as suggested in the docs, and I've tried wrapping the controls in divs to manually size them, but I end up with gaps between the inputs that look pretty bad. Is there something obvious that I'm doing wrong here?
<form class="form-horizontal" role="form" style="max-width: 500px">
...
<div class="form-group">
<label class="control-label col-sm-2">Phone</label>
<div class="input-group">
<span class="input-group-addon">
<input type="radio" name="SearchMethod" value="2" class="radio-inline" />
</span>
<input type="text" id="phone" class="form-control" placeholder="Phone" />
<input type="text" id="phoneExt" class="form-control" maxlength="4" placeholder="Ext" />
</div>
</div>
Your input group is invalid since it has two text input form-controls. Per the docs:
Basic example
Place one add-on or button on either side of an input. You may also place one on both sides of an input.
We do not support multiple add-ons on a single side.
We do not support multiple form-controls in a single input group.
So you'll need to either hack together some custom styles, or restructure your form.
I'm using a template based on Bootstrap 3 and there is a weird display issue with Firefox for file input elements: basically the click area covers a huge part of the page, which means that anything around them cannot be clicked without triggering a file upload.
Here is what I mean by large area (with Firebug, based on the <input type="file"> element):
While with Chrome it's fine:
And with IE it's also fine.
Here is the link to the theme page where you see the issue (only happening to the first type of "advanced file input", where the input element itself is displayed): http://www.keenthemes.com/preview/metronic_admin/components_form_tools.html
And here is the code for the file display:
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="input-group input-large">
<div class="form-control uneditable-input span3" data-trigger="fileinput">
<i class="fa fa-file fileinput-exists"></i>
<span class="fileinput-filename"></span>
</div>
<span class="input-group-addon btn default btn-file">
<span class="fileinput-new">Select file</span>
<span class="fileinput-exists">Change</span>
<input type="file" name="documents-0">
</span>
Remove
</div>
</div>
Any idea how I can force the input element click zone to stay within its limits on Firefox?
Thanks in advance!
I copied prepended input from twitter bootstrap examples but it does not work properly. What is the problem?
<div class="input-prepend">
<span class="add-on">#</span>
<input type="text" placeholder="Username" id="prependedInput" class="span2"/>
</div>
http://jsfiddle.net/jGbFt/
You are trying to use code from bootstrap 2.3.2 and linking to the bootstrap 3 css file, you can change your css to link to
//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css
and it will work.
Fiddle
I havent much experience on jquery mobile or related mobile UI frameworks, I am finding it difficult to align elements horizontally.
I want to horizontally align text field and select tag. so that they appear inline.
I tried data-type="horizontal" and data-inline="true". but they are not working.
Here's the code i am using,
<div data-role="controlgroup" data-type="horizontal">
<label for="cs" class="fieldLabel">option 1: </label>
<select name="cs[param_string_1]" id="cs[param_string_1]" data-inline="true">
<option>options</option>
</select>
<input type="text" data-inline="true" style="width:100px" id="cs[param_num_1]" name="cs[param_num_1]" />
</div>
Comments/Suggestions?
Tom's answer was useful. but that dint work exactly as per the need
I used following to get the required output.
<div data-role="controlgroup" data-type="horizontal">
<table>
<tr>
<td width="30%">
<select name="cs_abc" class="fieldLabel" style="width: 100%" data-inline="true" id="cs[abc]">
<option>...</option>
</select>
</td>
<td width="70%">
<input type="text" id="cs_xyz" style="width:160px" data-theme="d" name="cs[xyz]" />
</td>
</tr>
</table>
</div>
One can use layout grids for this (Refer here)
But layout grids may not give precise results, at least in my case i was not getting the needed alignment.
Some good fiddles were useful.
Take a look at Text inputs & Textareas.
It does not support data-inline on its own, but you can use data-role=fieldcontain instead:
<div data-role="fieldcontain">
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" value="" />
</div>
As far as I can see you can't put multiple inputs next to each other using only jQuery Moblie...
<div href="#" data-role="button" style="margin:30px;">Adjust</div>
if you want to manipulate just right and left adjustments use style="margin-left=30px;margin-right=30px;"
...I am still learning the jQuery Mobile framework myself, so I know it is a pain when you just need to get something done, but you really should try to use what is already built within the framework, especially if you are going to build mobile friendly apps. Do yourself a favor and take the time needed to learn it.
Also, another tip; you need to stay away from using px values for sizing elements as that typically doesn't scale well on mobile devices, em values work best for cross platform use.
I have successfully used something similar to the following code to "inline" text input and select boxes with jqm. if you want the styles to be different - you can add the theme swatch letter after the individual ui-block element so that it looks something like ui-block-b or ui-block-c, etc. This is all documented here: http://demos.jquerymobile.com/1.0rc1/docs/content/content-grids.html
<div class="ui-grid-a">
<div class="ui-block">
<label for="cs[ps_1]" class="fieldLabel ui-hidden-accessible">option 1: </label>
<select name="cs[ps_1]" id="cs[ps_1]" data-mini="true">
<option>options</option>
</select>
</div>
<div class="ui-block">
<input type="text" style="width:10em;" id="cs[pn_1]" name="cs[pn_1]" />
</div>
</div><!-- /grid-a -->