I have created a dropdown using select tag but the height of that dropdown is too small, and if I try to increase the height by using height:100px; or max-height: 100px; the button below that slips down, how do I increase the height by not moving the below button down by 100px and display dropdown over it.
The code for the dropdown is:
<div class="form-group row">
<label for="name" class="col-sm-4 col-form-label">Select Location:</label>
<div class="col-sm-8" style="overflow:auto;">
<select class="form-control multiselect" multiple="multiple" role="multiselect">
<option value="1">Item 1</option>
...
</select>
</div>
</div>
Related
I'm trying to create an inline form with a text and select input, but I'm unable to get it to look how I want it.
<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Body -->
<div class=r ow>
<div class="col-lg-12">
<div class=r ow>
<div class="col-md-2">
<label for="the_select" class="form-label">Key Name</label>
</div>
<div class="col-md-2">
<select class="form-select" id="the_select">
<option selected>Open this select menu</option>
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
<option value="Other">Other</option>
</select>
</div>
<div class="col-md-2">
<label for="value_field_id" class="form-label">Variable Name</label>
</div>
<div class="col-md-2">
<input type="text" class="form-control" id="value_field_id">
</div>
</div>
</div>
</div>
This is my current hmtl code. I'm using bootstrap 5. The label is waaaay to far apart from the corresponding input/select and it's not vertically center with it. Is there an easy way to correct this? I tried chaging the display in the styled field of the label but it gets completely ignored.
These 2 Bootstrap Flex class additions should:
center both flex items vertically and
move 1st flex item's <label> content to the right border of its parent flex item.
<div class = row align-items-center*>
<div class = "col-md-2">
<label for="the_select" class="form-label ms-auto">Key Name</label>
I am attempting to space elements throughout my webpage that are contained within a <div class="card"> from a template I am using. I have been trying to use inline CSS to space elements, as I am new to HTML/CSS and the CSS file from the template is difficult for me to navigate (and understand).
Inline CSS overrides the CSS files contained in the directory, as far as I understand. My elements looks like:
And I would like them to be spaced like:
My code looks like:
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="card ">
<div class="card-body">
<select class="custom-select">
<option selected>Zero</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<div class="form-group">
<label for="comment">Input:</label>
<textarea class="form-control" rows="10" id="comment"></textarea>
</div>
<i class="material-icons" style="font-size: 48px;">arrow_forward</i>
<div class="form-group">
<label for="comment">Output:</label>
<textarea class="form-control" rows="10" id="comment"></textarea>
</div>
</div>
</div>
</div>
</div>
</div>
I have tried a number of methods to get this to work, and nothing has worked particularly well for me. My question is, how can I achieve the spacing I laid out in the second picture?
That's the CSS I applied to your html.
.card-body > select {
vertical-align: top;
}
.card-body > div {
vertical-align: middle;
display:inline-block;
}
Demo link
You said you wanted inline css, so I did inline css.
We are doing display:inline-block so that we can keep our divs on the same row, float-left so they are positioned as far left as possible without colliding with other elements.
On class custom-select we also set the position to relative which enables us to do top:35px which moves that element down 35 pixels. I did that because that's sort of how it appears in your image.
Finally the use of !important will override ANY css usually unless !important is declared elsewhere, then you may still have a conflict. I highly doubt it's declared elsewhere however as there is no real point to doing it unless you want to override a previous setting.
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="card ">
<div class="card-body">
<select class="custom-select" style="display:inline-block !important;float:left !important;position:relative;top:35px">
<option selected>Zero</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<div class="form-group" style="display:inline-block !important;float:left !important">
<label for="comment">Input:</label>
<textarea class="form-control" rows="10" id="comment"></textarea>
</div>
<i class="material-icons" style="font-size: 48px;display:inline-block !important;float:left !important">-›</i>
<div class="form-group" style="display:inline-block !important;float:left !important">
<label for="comment">Output:</label>
<textarea class="form-control" rows="10" id="comment"></textarea>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
JSFIDDLE: https://jsfiddle.net/hw2tv6g1/
I have placed two div elements contained in a form. My aim is to place the second div "App" side by side with the "Status" div like in the mock up below:
What I've tried so far is the following, setting the align="right" which positions the div on the extreme right.
Also I tried setting style="margin-left: which places the second div underneath and too far right of the first div.
Question:
Does anyone know how I can place the second div in line and side by side with the first div?
Form markup:
<form action="" method="post">
<div class="form-horizontal">
<div class="col-lg-6">
<!-- SELECT STATUS STATIC-->
<div class="form-group">
<label class="col-md-3 control-label" for="Current Status">Status</label>
<div class="col-md-8">
<select id="Status" name="Status" onchange="" class=" form-control">
<option value="Down">Down</option>
<option value="Up">Up</option>
</select>
</div>
</div>
<!-- SELECT APP STATIC-->
<div class="form-group">
<label class="col-md-3 control-label" for="App">App</label>
<div class="col-md-8" >
<select id="App" name="App" onchange="" class=" form-control">
<option value="SAP">SAP</option>
<option value="JAP">JAP</option>
</select>
</div>
</div>
</div>
</div>
</form> <!--END OF FORM ^^-->
You can set both divs to display: inline-block.
.form-group {
display: inline-block;
}
I am trying to add a checkbox below a select element in an inline form. Is there an option to "break" the line in order to add the checkbox below?
This is what I am trying to achieve:
And this is what I have at the moment:
jsFiddle
<div class="form-inline">
<div class="form-group">
<select class="form-control select-year text-smd">
<option>Month</option>
<option>January</option>
<option>February</option>
</select>
</div>
<div class="form-group">
<select class="form-control select-year text-smd">
<option>Year</option>
<option>2016</option>
</select>
</div>
<div class="form-group ml-15 mr-15">
<label> - </label>
</div>
<div class="form-group">
<select class="form-control select-year text-smd">
<option>Month</option>
<option>January</option>
<option>February</option>
</select>
</div>
<div class="form-group">
<select class="form-control select-year text-smd">
<option>Year</option>
<option>2016</option>
</select>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> I currently work here
</label>
</div>
</div>
I think the easiest way is to put it in a help-block and right align it. Then add a little CSS to override the form-group aligment to the top.
.form-inline .form-group {
vertical-align: top;
}
http://bootply.com/dCbo7trghW
best answer is that from Aramil (in the comments)
if you wan the "lazy" option, you can always use this
(i do not recommend this code, use the grid instead)
.checkbox-inline{
position: relative;
top: 2em;
right: 11em;
}
I got 2 input fields below. One select another input text. I need it to stay inline even in mobile mode.
How do I prevent input fields within from breaking? They stay inline regardless of screen size.
<div class="col-sm-4">
<label class="control-label">Form label</label>
<div class="form-inline">
<div class="form-group">
<select class="form-control">
<option value="A">Option A</option><option value="B">Option B</option><option value="C">Option C</option><option value="D">Option D</option>
</select>
</div>
<div class="form-group">
<input class="form-control" type="text">
</div>
</div>
</div>
From http://getbootstrap.com/css/
Bootstrap's inline forms, as in:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form class="form-inline">
<div class="form-group">
<select class="form-control" >
<option>Thing One</option>
<option>Thing Two</option>
</select>
</div>
<div class="form-group">
<input type="text" class="form-control">
</div>
</form>
States in the docs 'This only applies to forms within viewports that are at least 768px wide.'
You could directly force them to stay inline with a fluid width in CSS and floating the elements.
Ex: https://jsfiddle.net/cm94dup9/
You can use tables for both select field and text field.
In table you can specify the width of the so both are inline.
<table>
<tr><td><div class="form-group">
<select class="form-control">
<option value="A">Option A</option><option value="B">Option B</option><option value="C">Option C</option><option value="D">Option D</option>
</select>
</div></td></tr>
<tr><td>
<div class="form-group">
<input class="form-control" type="text">
</div>
</td></tr>
</table>
if you mean inline, both to be have same width and are on each other. Not that both are in same line.
What has worked for me is wrapping the label and input, select, checkbox, etc.. in a div tag.
<form>
<div style=" white-space: nowrap;overflow: hidden;" >
<label>
<select>
<option value="?">Select</option>
<option value="february">February</option>
<option value="march">March</option>
<option value="april">April</option>
</select>
</label>
</div>
</form