Having a problem displaying text when longer than one line in a span with a bootstrap form-control class (see images below). Looking for a solution in Bootstrap which would wrap the text in a box but keep the look even when overflowed on to the next line.
HTML Code
View Result
EDIT Complete Code:
#*Kpi Selection/Display*#
<div class="form-group">
<label class="col-lg-2 control-label">KPI Selection</label>
<div class="col-lg-10">
<span id="KpiCode-display" class="form-control">
#Html.DisplayFor(model => model.WorkOrder.KpiDetails.DetailsKpi.KpiFull)
</span>
<span id="KpiSelection-edit" style="display: none">
</span>
</div>
</div>
The form-control class needs to be applied to an input/select. The style it applies doesn't work with something like a span. If you're looking for a static text control, the class you should be applying is form-control-static. See: http://getbootstrap.com/css/#forms-controls-static.
Related
I'm having real issues trying to get my bootstrap datepicker icon to attach to my textbox. I've read through all documentation and searched for hours to find a solution but nothing seems to work.
is the closest i've gotten with my markup but the icon seems to align to the right hand side of the screen
<div id="sandbox-container">DATE
<div class="input-group date">
<input type="text" class="form-control"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>
</div>
It's pretty easy to do with Bootstrap input group and Font Awesome icons:
Structure
<label for="xxx">Date</label>
<div class="input-group">
<input type="text" class="form-control" id="xxx">
<div class="input-group-append">
<span class="input-group-text">
<i class="fas fa-calendar-alt"></i>
</span>
</div>
</div>
Icon Choices
I am showing you the free version of Font Awesome Icons. You can use whatever you like to represent the date picker icon. Here is some: https://fontawesome.com/icons?d=gallery&q=calendar&m=free
Screenshots
Demo
https://jsfiddle.net/davidliang2008/9a20fp3u/37/
My text is overflowing within a span element which has the class: form-control
Code:
<div class="row">
<div class="form-group col-sm-12">
<label>Notes:</label>
<span class="form-control"><%= #stuff.notes %></span>
</div>
</div>
And when #stuff.notes has a lot of text, it overflows like this:
I did look at this question, as well as this ticket within bootstrap. I am still having trouble coming up with a solution.
Update:
I realized I could use a form helper (even though it isn't a form) like this:
<div class="row">
<div class="form-group col-sm-12">
<label>Notes:</label>
<%= text_area_tag :notes, #complaint.notes, {class: "form-control", disabled: "disabled"} %>
</div>
</div>
Which renders it like this:
But I don't like how the disabled html attribute grays out the box and mutes the text. It makes it difficult for the user to read.
You could use a basic panel to get a similar feel. See Bootply Here
<label>Notes:</label>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
And if you really want to match the look of the form-control class, you could add a custom .inset-box-shadow class which would override the box shadow on the panel and give it that formy look. That may confuse users though, they may want to click and type in it.
When using the horizontal-form in simple_form 3, I've got a f.input :name, hint: "this is a really long hint" the hint will display under the input field and wrap to whatever width the input is constrained to.
How do I make the hint display under both the label and the input but still within the form-group div that is around the label and the input?
This is how one of my fields is currently rendered (as shown in the screenshot above):
<div class="form-group string optional scenario_answers_value">
<label class="string optional col-xs-8 control-label" for="scenario_answers_attributes_14_value">Customer's Normal Oil Change Interval</label>
<div class="col-xs-4">
<input class="string optional form-control" data-original-title="hrs" data-placement="bottom" data-toggle="tooltip" data-trigger="focus" id="scenario_answers_attributes_14_value" name="scenario[answers_attributes][14][value]" rel="tooltip" type="text">
<p class="help-block">Most LT manufacturers recommend 250 hours because of wet stacking problems from the engine not running under a load.</p>
</div>
</div>
You force your form-group to render with bootstrap grid. 8/12 of row for a label and 4/12 for input field. In this way, you can`t use hint as you want.
You need something like:
`
<div class='form-group'>
<div class='row'>
<div class='col-xs-8'>
<label>
</div>
<div class='col-xs-4'>
<input class='form-control'>
</div>
</div>
<div class='row'>
<div class='col-xs-12'>
<p class='hint'></p>
</div>
</div>
</div>
Or you could try to style hint with CSS, but it is not the best way.
Also, you could provide your erb\haml\slim markup for more useful answers.
I'm having difficulty getting Bootstrap's button addons to work in my MVC view. I'm using the latest NuGet version of ASP.NET MVC (5.1 rc1) and Bootstrap (3.03).
I have the following in my view (now that I've pared it back to just hand-coded HTML rather than using Html.EditorFor(), in an attempt to getting it to work):
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
#Html.ValidationSummary(true)
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" />
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
<div class="col-lg-6">
</div>
</div>
This generates the following HTML:
<form action="xxx" method="post">
<input name="__RequestVerificationToken" type="hidden" value="T3k..." />
<div class="form-horizontal">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" />
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
<div class="col-lg-6">
</div>
</div>
</div>
</form>
The problem is that, when this is displayed in the browser (Chrome 32 / IE 11), there's a big gap between the input box and the button. Like this:
If I reduce the size of the div surrounding the input-group div to col-lg-3 or smaller, it's fine. But anything larger than that leaves a gap.
It's as though there's a maximum size on the input - and indeed, all my inputs do seem to be smaller their container div...
What could be causing this?
The default Site.css stylesheet that comes with a new MVC 5 project has a rule that limits the max-width of inputs. What you're getting is the result of the control spanning the full available width like it's supposed to, but then the input, itself, is being constrained to a defined width. Just comment out that piece of the stylesheet and everything will work as it should.
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
It's a pretty egregious shortcut the team seems to have taken in order to quickly build the sample site.
I am getting started with JQueryMobile and love it. I am wondering if there is a way to place a prepended a select menu beside a standard text input.
For example, if the text input were to be for a name, then the prepended select would contain Mr, Mrs, etc.
Edit 1:
I've looked at the control group docs and for a case like buttons it works e.g.
<div data-role="controlgroup" data-type="horizontal">
Icon only
Icon only
</div>
However if I use an input like
<div data-role="controlgroup" data-type="horizontal">
Icon only
<input type = "text" name = "some_input" id = "some_input">
</div>
It gives a weird result with the input overlapping the button.
Edit 2:
I've looked at grids but cannot see a way to have a div span 2 grids. e.g.
<div class="ui-grid-b">
<div class="ui-block-a">Block A</div>
<div class="ui-block-b ui-block-c">Block C</div>
</div>
I've tried the above, but it doesn't work as desired, for example
<div class="ui-grid-c">
<div class="ui-block-a">
<label for = "full_name">
Name
<select id = "honorific" data-mini="true" data-inline="true">
<option value = "mr">Mr</option>
<option value = "mrs">Mrs</option>
<option value = "miss">Miss</option>
</select>
</label>
</div>
<div class="ui-block-b ui-block-c ui-block-d">
<input type="tel" data-clear-btn="true" id = "full_name" name = "full_name">
</div>
</div>
simply yeilds the select box below the full name label, and the input only spans what appears to be one cell/block - rather than the 3 cells/blocks of the grid.
From what I've seen control group works best with buttons, check boxes, etc. Not with the combination you're expecting to do. So here are two solutions for you.
Without using grids
You'll just have to make the two elements as an inline-block, like this :
.ui-select, .ui-input-text {
display:inline-block
}
Demo with No grids, No control group.
Using grids
The way you're using grids is wrong. You'll have to use two-column grid, which will have these two two classes alone: ui-block-a & ui-block-b, like this :
<div class="ui-grid-b">
<div class="ui-block-a">Block A</div>
<div class="ui-block-b">Block B</div>
</div>
This will scale your markup accordingly. Here's how the HTML looks like :
<div class="ui-grid-a">
<div class="ui-block-a" style="width:100px">
<select name="select-choice-min" id="select-choice-min" data-mini="true">
<option>Mr.</option>
<option>Mrs.</option>
<option>Ms.</option>
</select>
</div>
<div class="ui-block-b">
<input type="text" name="name" id="name" value="" placeholder="Enter Name" />
</div>
</div>
Demo with grids