I work with Bootstrap 3. i have input-group and input-group-addon class for design my input box with this Code:
<tr>
<td>
<label class="control-label">thumbnails</label>
</td>
<td colspan="3" class="">
<div class="input-group">
<span class="input-group-addon">
<a class="icon-picture boxGetFiles" id="btnChoiceThumbnail" href="#"></a>
</span>
<input type="text" name="thumbnail" class="form-control" id="thumbnail" tabindex="7" value=""/>
</div>
</td>
</tr>
This Code Work in FF true and show in full width :
But In Chrome This not work and not show in full width:(Version 39.0.2171.65 m)
how co can i fix this problem ?!
DEMO FIDDLE
Remove the colspan="3" or add width: 100% to the .input-group
See updated fiddle
Related
I am facing an issue with bootstrap ui datepicker when used in a table cell that has a horizontal scroll on outer div.
When the popup of bootstrap datepicker opens, it expands the out div to its extent. Basic html code looks like,
<div class="col-md-12">
<div style="width:500px;overflow-x:auto">
<table class="table table-bordered table-striped" style="table-layout: fixed;">
<tr>
<th style="width:300px">
Instance 1
</th>
<th style="width:300px">
Instance 1
</th>
</tr>
<tr>
<td>
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="status.opened1" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event);status.opened1 = true;"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</td>
<td>
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="status.opened2" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event);status.opened2 = true;"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</td>
</tr>
</table>
</div>
</div>
I manged to simplify the problem in this plunker.
The above link contains a basic problem where I have table cells of fixed width and with maximum possibility of overflowing horizontally in the screen, I needed the horizontal scroller.
Any idea on how to make it look like just a popup over the table, not expanding outer div vertically, which is justified but looks weird.
Thanks in advance.
I'm having problems getting a table to display uniformly across browsers using Twitter Bootstrap 3.
Here's the HTML:
<div class="row">
<div class="col-md-10 col-md-offset-1">
<table class="table table-striped table-responsive first-table">
<thead>
<tr>
<th>Ingredient</th>
<th>Amount <span class="glyphicon glyphicon-question-sign" data-toggle="popover" title="Amount" data-content="This is the amount of the ingredient you want to appear on the label." aria-hidden="true"></span></th>
<th>% Carrier <span class="glyphicon glyphicon-question-sign" data-toggle="popover" title="Carrier" data-content="The amount of carrier (or salt) that's used with the ingredient. This information should come from the quality assurance docs from the supplier." aria-hidden="true"></span></th>
<th>$$/Kilo <span class="glyphicon glyphicon-question-sign" data-toggle="popover" title="Price" data-content="The price of the ingredient. You should get this from your supplier." aria-hidden="true"></span></th>
<th>Who Sources? <span class="glyphicon glyphicon-question-sign" data-toggle="popover" title="Source" data-content="Choose whether or not you or the manufacturer will source the ingredient." aria-hidden="true"></span></th>
<th>Pack Size <span class="glyphicon glyphicon-question-sign" data-toggle="popover" title="packSize" data-content="The minimum packsize of the ingredient supplied by the provider. You only have to fill this out if you're sourcing the ingredient yourself." aria-hidden="true"></span></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr class="formulaRow">
<td>
<input type="text" class="ingredient required" name="ingredient">
</td>
<div class="col-md-1">
<td>
<div class="input-group">
<input type="number" class="amount required small-input" name="amount" >
<div class="input-group-addon">mg</div>
</div>
</td>
</div>
<td>
<div class = "input-group">
<input type="number" class="carrier required small-input" name="carrier" max="100">
<div class="input-group-addon">%</div>
</div>
<p class="message">Only use numbers smaller than 100</p>
</td>
<td>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="number" class="price required small-input" name="price" size="6">
<div class="input-group-addon">.00</div>
</div>
</td>
<td>
<select class="tableDropDown" style="min-width: 100px;">
<option value=true>The Manufacturer</option>
<option value=false>Me</option>
</select>
</td>
<td>
<div class="input-group">
<input class="packSize small-input" type="number" size="8" disabled>
<div class="input-group-addon">kg</div>
</div>
</td>
<td>
<a><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span></a>
</td>
<td>
<a><span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
You can also see it here: www.healthkismet.com/formula-analyzer/
It's the table that displays under the heading: "Per Serving"
What I want: For it to be evenly centered in the screen and so you don't have to scroll to the right to finish filling in the input fields.
My condundrum: It works fine in Mozilla. It also works fine in Chrome when I view it offline from the files on my computer.
But it bleeds to the right in Chrome and IE when I view it online.
I'm not sure why has the desired effect in Mozilla but not the other two.
The ultimate goal is to have it center-align if at all possible (or close to it).
Also, here are two screenshots to demonstrate what I'm talking about.
On Chrome, the table does not offset on the right and instead gets pushed out of the window:
Whereas in Firefox it justifies properly:
You are wrapping a table-cell in a div. I think that breaks the table, and is handled differently by different browsers.
Try removing <div class="col-md-1"></div> from:
<tr class="formulaRow">
<td>
<input type="text" class="ingredient required" name="ingredient">
</td>
<div class="col-md-1">
<td>
<div class="input-group">
<input type="number" class="amount required small-input" name="amount" >
<div class="input-group-addon">mg</div>
</div>
</td>
</div>
<td>...
I am new to html, so please try to understand if i am making any silly mistake.
I am trying to create a login window like face book. i have created a login window which looks like following:
Here i have taken a table of 2 rows first row renders 2 text boxes and a login button. second consists of 'remember me' and 'forgor password' link.
Problem is that i want 2nd row of height 12px and text "remember me " to be shown in exact center of check box not as its looking a bit down in above image.
I have written some temporary inline cssto check out look:
following is my code for this section:
<table style="float:left;margin-top:1%">
<tbody>
<tr>
<td style="padding-right: 0px;background:blue;">
<div class="uiStickyPlaceholderInput uiStickyPlaceholderEmptyInput">
<input type="text" style=" width:110px;text-align:center;"class="inputtext _5aju" id="email" name="email" placeholder="E-mail" tabindex="1" value="" aria-label="Email or Phone">
</div>
</td>
<td style="padding-right: 0px;background:red">
<div class="uiStickyPlaceholderInput">
<input type="password" style=" width:105px;text-align:center;float:right;" class="inputtext _5aju" id="pass" name="pass" placeholder="Password" tabindex="2" value="" aria-label="Password">
</div>
</td>
<td >
<button value="1" class="_42ft _42fu _5ajv selected _42g- btn btn-primary btn-small" id="loginbutton" tabindex="4" type="submit">Log In</button>
</td>
</tr>
<tr height="12" style="background:pink;">
<td height="10">
<span class="_5ajw">
<div>
<label class="_5bb4">
<input id="persist_box" style="height:10px;background:yellow" type="checkbox" name="persistent" value="1" tabindex="3">
<span style="font-size:10px;margin-top:-5px;background:yellow">Remember me</span>
</label>
<input type="hidden" name="default_persistent" value="0">
</div>
</span>
</td>
<td style="margin-top:-1%;">
<a class="_5ajx" rel="nofollow" href="https://www.google.com"
style="font-size:10px;paddig-left:2px;margin-top:-1%;background:yellow;">Forgot your password?</a>
</td>
</tr>
</tbody>
</table>
So,please can any one tell me how to adjust css to achive above mentioned.
thanks in advance. . .
Try vertical-align:middle on the span containing the Remember me text.
On a side note, I would advice you to avoid tables for this kind of layout and achieve the same layout using divs.
Ideally, you shouldn't use a table for layout purposes.
In your example, I would try removing the margins around the checkbox, leaving only the right margin like so:
<input type="hidden" name="default_persistent" value="0" style="margin: 0 5px 0 0;>
That should do the trick.
I have this registration with HTML:
<form class="registerForm" id="registerForm" action="./index_public.php?page=pilot_insert" method="post" enctype="multipart/form-data">
<table>
<tr>
<td><span>Name</span>
</td>
<td><span id="sprytextfield1">
<label>
<input type="text" name="name" id="name" tabindex="1" />
</label>
<span class="textfieldRequiredMsg">*Required</span></span>
</td>
</tr>
<tr>
<td class="style1">E-mail</td>
<td><span id="sprytextfield6">
<label>
<input type="text" name="email" id="email" tabindex="8"/>
</label>
<span class="textfieldRequiredMsg">*Required</span><span class="textfieldInvalidFormatMsg">Formato no válido.</span></span>
</td>
</tr>
</table>
<input class="btn" value=Apply name=apply type="submit" />
</form>
I want put an image next to the registration form. I tryed but I only can put it below the registration form and no next to. HELP!!!
Apply a specific width to your form and float:left and use float:right for the image
Put form and image in div and use "float" css property.
<div style="float:right">
<img src="http://assetprotectionsecured.com/wp-content/uploads/2010/12/alert_png.png"> </div>
Here is the working demo : http://jsfiddle.net/7uUK8/1/
You can try applying "display:inline-block;" to both the form and the image.
For example:
<form style="display:inline-block;"></form>
<img src="someimage" style="display:inline-block;"/>
Here's a fiddle example with your form and an image side by side: http://jsfiddle.net/VE66w/
Use div or span to make two container in body of the html one is use for form and other is use image. After that apply css according.
Just delete : "Formato no válido."
<div style="float:right"><img src="http://assetprotectionsecured.com/wp-content/uploads/2010/12/alert_png.png"></div>
If you want, image next to registration field ...
I have one row consisting of two tds. TD1 contains two texts(txt1 and txt2). txt2 in TD1 must be in line with TD2. Here's my code :
<tr>
<td width="220">
<span class="b">TB From:</span>
<span style="position: relative; left : 20px;" id="lblTBHoriz" class="b"><br>
<span style="padding-left: 1.5px"> TBN:</span>
</span>
</td>
<td>
<pre></pre>
<input type="text" id="tBFrom" name="tBFrom"
value="" size="20" maxlength="16"
onkeypress="return isNumberKey(event);" onchange="validate(this);" >
</input>
</td>
</tr>
The problem is TBN: and the input box in the other td must be in line and in mozilla its working perfectly. But in IE, the input box is going up the text TBN: and getting aligned with TB From: text. What can i do to fix this one ? Kindly help .
In case the <input> has to be at the bottom each time you can add a class to the td tag and add some CSS to it:
td.your-class
{
vertical-align:bottom;
}
Tables are supposed to have tabular data. It's not recommended to use them for lay-out.
You could use divtags instead.
<div>TB From:</div>
<div><label>TBN:</label><input type="text" vlaue="" /></div>
The divtags you can style however you like.
<tr>
<td colspan="2" width="220">
<span class="b">TB From:</span>
<span style="position: relative; left : 20px;" id="lblTBHoriz" class="b"><br>
<span style="padding-left: 1.5px"> TBN:</span>
</span>
</td>
<td colspan="2">
<pre></pre>
<br/>
<input type="text" id="tBFrom" name="tBFrom"
value="" size="20" maxlength="16"
onkeypress="return isNumberKey(event);" onchange="validate(this);" >
</input>
</td>
</tr>
http://jsfiddle.net/dolours/zvMKH/335/