All my Text Input fields show up as a single line, not a box. The Bootstrap 3 docs show text input fields as a box, how do I get them to show up that way in BSS?
I started a new project and used the "Bootstrap without theme" theme and the input fields came out as boxes. However if I change the theme to use "Bootstrap without theme" in my real project, the text input fields are still a single line, not a box.
To get the proper styling, make sure that your form elements are contained in a FORM element.
<*form>
<div class="form-group">
<*label class="control-label">Label<*/label>
<input type="text" class="form-control" />
</div>
<*/form>
Also if you click on the FORM element in the Overview pane on the bottom left of the app, and then check the Options pane on the top right, is the TYPE setting set to default or something else?
Saj
Everything is in a Form with form-groups within it and labels/text input controls within each form-group.
The form type is Horizontal but if I change it to Default, I still see the single line text input fields.
Can you copy/paste your form code or if you can provide a way to share your .dsdesign file I could take a better look. Or even if it's available to see at a website?
If you were to take my example and if it where to be set as horizontal, the app adds DIVs around the label and input. If you then set the form back to default the DIVs are removed. Does this behavior happen to you on your form? Are there any DIVs around the label and inputs? Are they added by you or the app?
Saj
I don't recall if changing the form to default added Divs. The form is back to Horizontal now and I'd rather not change it to default since it messed up the layout. In it's current state, there is a DIV around each text input control which I added so I could add a col-md-* to control how wide the text input controls are.
I feel that this is an issue with the theme I picked not being handled correctly. I'm currently using the "Bootstrap Without Theme" theme which I assume means I should see pure Bootstrap. When I've manually coded other Bootstrap sites, the text inputs appear in boxes. Also, the Default button style is showing with a light green color which is not in the Bootstrap palette and the pure Bootstrap default button has no background color. Originally, this site had the "Bootstrap" theme which I believe does have the single line text inputs and the light green default button I'm seeing but switching to the "without theme" theme should have changed that, right?
Here is the code for the form I'm using. It's within a tab content pane which in turn is within a modal.
<body>
<div class="modal fade" role="dialog" tabindex="-1" id="HospitalAddChange" style="margin-left:10px;margin-right:10px">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span>×</span></button><img src="assets/img/KE-logo.jpg" />
<h2 class="modal-title">Add new hospital</h2></div>
<div class="modal-body">
<div>
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#Basic">Basic </a></li>
<li><a href="#Curtains">Curtains </a></li>
<li class="hidden"><a href="#Users">Users </a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" role="tabpanel" id="Basic">
<form class="form-horizontal" style="margin-left:10px;margin-right:10px">
<div class="form-group">
<div class="col-md-2 col-sm-4 text-right">
<label class="control-label" style="text-align:right">Name </label>
</div>
<div class="col-sm-8">
<div class="col-md-10">
<input class="form-control input-sm" type="text" required="" style="height:30px">
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-2 col-sm-4 text-right">
<label class="control-label">Account</label>
</div>
<div class="col-sm-8">
<div class="col-md-4">
<input class="form-control input-sm" type="text" style="height:30px">
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-2 col-sm-4 text-right">
<label class="control-label">City </label>
</div>
<div class="col-md-8 col-sm-8">
<div class="col-md-4">
<input class="form-control input-sm" type="text" style="height:30px">
</div>
<label class="control-label col-md-2">State </label>
<div class="col-md-4">
<select class="form-control input-sm">
<option value="12" selected="">California</option>
<option value="13">Oregon</option>
<option value="14">Washington</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-2 col-sm-4 text-right">
<label class="control-label">Country </label>
</div>
<div class="col-sm-8">
<div class="col-md-4">
<input class="form-control input-sm" type="text" style="height:30px">
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-2 col-sm-4 text-right">
<label class="control-label">Measurements </label>
</div>
<div class="col-sm-8"><span><label class="control-label radio-inline" style="margin-right:10px"><input type="radio">Imperial</label></span><span><label class="control-label radio-inline" style="margin-right:5px"><input type="radio">Metric</label></span></div>
</div>
<div class="form-group">
<div class="col-md-2 col-sm-4 text-right">
<label class="control-label">Active </label>
</div>
<div class="col-sm-8">
<input type="checkbox" checked="">
</div>
</div>
</form>
Thanks for your help.
Pete
Supporting my theory of the theme not being supported correctly, any tooltips I define show up as the standard, grey background, no arrow format not the Bootstrap black background. I'm implementing them by adding the attributes data-toggle="tooltip" and title="here's the tooltip"
... and panel headings have a white background instead of the pur Bootstrap grey background.
Ok so, it looks like maybe the forum killed some of the code you pasted in, but that's ok.
I'm wondering if I'm mis-understanding what you mean by "box" I assumed you meant stacked which is not entirely what horizontal is. Horizontal is effectively inline form elements within the Form-Group(s) as stacked and Inline is the Form-Group(s) being inline as well as the form elements. The Default option is stacked form elements and Form-Group(s).
So since you are using Horizontal form then you are wanting stacked Form-Group(s) with inline form elements.
So the other thought then is I think you talking about the look of the input element it's self looking like a default input rather then the styled input with the slightly rounded corners etc..?
Now that I see you have put heights on the inputs I'm assuming that what your talking about is that the inputs are thin lines and have no height to them.
I started a new project and added a modal, made it visible, added tabs to the modal, added Custom Code element to the first tabs content, replaced the Custom Code content with your form.
In doing this I have also removed your height styles, and I don't get the thin lines for inputs regardless of the Theme I choose so I'm sure that you have some CSS in your project that is causing the default Bootstrap styling from being applied.
The thing to try is this. Don't add anything extra, such as an outside sourced CSS.
- Create a new blank project
- Drag/Drop FORM element on the BODY element in the Overview pane
- Drag/Drop FORM-GROUP element on the FORM element in the Overview pane
- Drag/Drop FIELD LABEL element on the FORM-GROUP element in the Overview pane
- Drag/Drop TEXT INPUT element on the FORM-GROUP element in the Overview pane
- You can even set the FORM element as Horizontal in the Option pane if you like
In doing this, if the input doesn't look right then I think something is wrong with your app install. If it looks right then you have some CSS conflict somewhere that is causing your inputs to be flattened.
One of the things that I do to see what's going on with an element is that in the STYLES pane it will show me all the styles that effect the selected element that I click on from within either the Overview pane or HTML pane. This even works with Custom Code elements in those 2 panes as well. You will need to scroll through the list of style blocks to see if something is overriding the default Bootstrap CSS.
Once you find that CSS that is the issue, if you look at the bottom right of that block it tells you what CSS file that CSS code block is in. It should be something other "Bootstrap" like either your own CSS file or a third party/external CSS file.
So for one of your inputs remove the style=height:30px. Then select the STYLES tab in the STYLES pane and then select that input in the HTML pane or Overview pane. Scroll through the STYLES tabs CSS code blocks and look for one that might be something like height:auto or 0 etc... and possibly padding:0 etc... That would be your issue if you uncheck that style property and the input appears correctly then you know where your problem is.
Saj
Thanks Saj. I was looking for a rectangular box for the text input controls. I found the problem - it was as you correctly pointed out, a css file that was in the loop that shouldn't have been there.
Thanks for your help.
Pete