Bootstrap 4 input control

1

I’ve had to start using the bootstrap 4 input control; what a mess.
Where is the simple text box that can sit on one line?
I put a bs4 control on my form, there’s a box within a box. I can size the outer box to fit on my form, and by removing the header, but does anyone know how to size the inner box where the actual text goes?
Thanks for your help.

2

tony:

You could use the HTMLview object (ie. HTMLview1) for “Input”, inserting code something like this into the innerHTML property during design:

<input type="text" id="Input1" value="Initial text..."
style="outline:none;border-color:lightgreen;border-style:groove;border-width:3px; 
color:black;height:30px;width:286px;height:28px;">

Position and size HTMLview1 whereever desired and set properties via code for Input1 (ie Input1.value = “Different text…”). You have a lot of control over colors, border styles, etc.

For a textarea in an HTMLview object:

<textarea id="Textarea1" name="txtAreaSomething" style="outline:none;
border-color:lightblue;border-style:groove;border-width:5px;color:black;font-size:16px;
font-weight:500;line-height:1;font-family:Arial;">
Lone multi line text...</textarea>

John

3

You can also change the inner size of the input box using the settings available in the Properties window. The settings that most impact the inner box size are:

  • Size: changes the input field size to small, default, or large
  • Padding: changes the input field size by adding padding inside the input border
  • Font Size: changes the input field size by making the font larger or smaller
  • Font Weight: can change the input field size minimally by adding weight to the font
4

Thanks for that, I’ll try it out.

5

Happy to help! Let us know if you have further questions.

1 Like
6

Thanks for that, sbruck.
But is there a property that creates a border?
Thanks.

7

Thanks for that, John, but I have about 20 bootstrap 4 input controls on three pages that need borders.
There needs to be a property in the control that can do that.
I’ve seen code put into the style property in the older input text controls, but I can’t get a border set up right. When I use border-border:1, the page goes blank.
Is there a way to do something similar?
Thanks.

8

Tony:

I don’t know of a way to do this in Bootstrap, which is probably why a long time ago I decided to abandon as many Bootstrap controls as I could and find workarounds (as already noted) not restrained by their controls.

Note: Years ago I found that inputting data would sometimes change the screen display, on phones, in an unfavorable way, especially if the input was located further down the form. To solve this permanently, I created a form just for the inputting of text (or other) data. Any other form could call this input form which was always positioned towards the top of the current form, thus eliminating problems when the onscreen keyboard popped up. By exporting this input form, I could easily add it to any other app requireing input.

This single form method (basically creating your own customizable control) came in real handy when I wanted to have more border and other property capabilities of the input object. A label that looked like an input object, when selected, would call this input form. Having 20 objects spread throughout your project would take a bit of work to fix using this method.Sorry I cannot be of further help.

John

9

Bootstrap 4 has border utilities for styling borders, and you can add these to the “class” property in the Properties window to achieve some additional styling. The border classes can set the border, color it, and set a radius. Please refer to Bootstrap 4’s border documentation for all the options. Here are some examples with the class(es) used as the placeholder text:

image

Note that for input controls, you will need to use the subtractive border utility (e.g., border-bottom-0) because input controls have a border by default.

10

Diving a little deeper, I was able to confirm that along with the Bootstrap 4 border utilities, it is possible to style the input field’s border further if needed. You would do that by adding code that targets the input control by its ID. For example, the following code would add a thicker, dashed border around the first input from my example above:

function Main() {
  Input1_contents.style.borderStyle = "dashed";
  Input1_contents.style.borderWidth = "2px";
}
11

I found the class property in the Bootstrap 4 input control.
I put this in it:
border border-dark
And that’s all it took.
A black border, like magic, appeared around the input control’s text box.
I tried a couple of the other colors just to make sure, they all worked.
Yea.
OK we can count this question as solved.
Thanks everyone.