Bootstrap 3.0 inline forms with validation -
I have tried to work inline forms but it appears that the width of the input does not spread to 100% call -MD-X Not only this, glyphicon does not work because the width does not spread to 100%.
Here is the code:
& lt; Div class = "form-line" role = "form" & gt; & Lt; Div class = "col-md-2 form-group" & gt; & Lt; Label class = "sr-only" & gt; & Lt; / Label & gt; & Lt; Select class = "form-control" id = "add-assessment_questionType" & gt; & Lt; Option value = "slider" & gt; Slider & lt; / Options & gt; & Lt; Option value = "radio" & gt; Radio button & lt; / Option & gt; & Lt; / Select & gt; & Lt; / Div & gt; & Lt; Div class = "col-md-5 form-group" & gt; & Lt; Label class = "sr-only" & gt; & Lt; / Label & gt; & Lt; Textarea class = "form-control add-assessment_new question" rows = "3" id = "add-assessment_question" placeholder = "enter question" & gt; & Lt; / Textarea & gt; & Lt; / Div & gt; & Lt; Div id = "add-assessment_title_color" class = "col-md-5 form-in-group feedback" & gt; & Lt; Label class = "sr-only" & gt; & Lt; / Label & gt; & Lt; Input type = 'text' class = "form-control add-assessment_new question" id = "add-assessment_optionMaxValue" placeholder = "Enter maximum value" & gt; & Lt; / Input & gt; & Lt; Span id = "add-assessment_optionMaxValue_icon" class = "glyphicon glyphine-form-control-feedback" & gt; & Lt; / Span & gt; & Lt; / Div & gt;
The bootstrap's .form-inline is not intended to actually be used with columns inside it: To use inline form, Must specify width to be used within
Alternatively you can use a standard form and put your form control in one line. Look at the code below and boot this example:
& lt; Div class = "container" & gt; & Lt; Form & gt; & Lt; Div class = "row" & gt; & Lt; Div class = "col-md-2" & gt; & Lt; Div class = "form-group" & gt; & Lt; Label class = "sr-only" & gt; & Lt; / Label & gt; & Lt; Select class = "form-control" id = "add-assessment_questionType" & gt; & Lt; Option value = "slider" & gt; Slider & lt; / Options & gt; & Lt; Option value = "radio" & gt; Radio button & lt; / Option & gt; & Lt; / Select & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "col-md-5" & gt; & Lt; Div class = "form-group" & gt; & Lt; Label class = "sr-only" & gt; & Lt; / Label & gt; & Lt; Textarea class = "form-control add-assessment_new question" rows = "3" id = "add-assessment_question" placeholder = "enter question" & gt; & Lt; / Textarea & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "col-md-5" & gt; & Lt; Div id = "add-assessment_title_color" class = "form-group-in-reaction" & gt; & Lt; Label class = "sr-only" & gt; & Lt; / Label & gt; & Lt; Input type = "text" class = "form-control add-evaluation_nuvenicity" id = "ad-evaluation_pace maxwell" placeholder = "Enter maximum value" & gt; & Lt; Span id = "add-assessment_optionMaxValue_icon" class = "glyphicon glyphine-form-control-feedback" & gt; & Lt; / Span & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Form & gt; & Lt; / Div & gt;
Comments
Post a Comment