How can i remove that horrible looking double arrow in select ?
Any other answears about this article that i found doesn't work.
<div class="form-group">
<label for="date">Date</label>
<div class"row">
<div class="col-5">
<input.....>
</div>
<div class="col-7">
<div class="input-group">
<select class="custom-select">
<option.....>
</select>
</div>
</div>
</div>
</div>
Image:
I tried those solutions:
How to remove the arrow in dropdown in Bootstrap 4?
Remove arrows from form element select in Bootstrap 3
Select removing dropdown arrow
How to replace arrow dropdown select in boostrap
Change color and appearance of drop down arrow
but not works.
If you simply want to remove the arrows, you should force apply background style for your custom-select class as those arrows are set as background. Try the below code as reference.
.custom-select{
background: none !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
<label for="date">Date</label>
<div class"row">
<div class="col-5">
<input.....>
</div>
<div class="col-7">
<div class="input-group">
<select class="custom-select">
<option.....>
</select>
</div>
</div>
</div>
</div>
Hope this helps
Add this to your CSS file:
.custom-select {
background: none;
}
Change css to:
.custom-select{
background:#fff;
}
As commented above, better off using background-image: none. I've added fields so you can see the effects.
Ensure you adjust the padding to reduce the whitespace that was allocated for the dropdown arrows, otherwise the text will clip in seemingly empty space.
.custom-select{
background-image: none !important;
padding-left: 10px !important;
padding-right: 10px !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
<label for="date">Date</label>
<div class"row">
<div class="col-3">
<input type="text" placeholder="some text">
</div>
<div class="col-10">
<div class="input-group">
<select class="custom-select">
<option>Sample text</option>
<option>Second text</option>
</select>
</div>
</div>
</div>
</div>
Related
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/
Setting custom border style and -width affects the height of a select element that contains Bootstrap's form-control class.
However the same class doesn't affect an input element's height with form-control (as expected).
See this fiddle to replicate the following:
<div class="row">
<div class="col-6">
<input type="text" id="textbox" class="form-control border-foo" />
Height: <span id="textbox-height"></span>
</div>
<div class="col-6">
<select id="select" class="form-control border-foo">
<option>test</option>
</select>
Height: <span id="select-height"></span>
</div>
</div>
.border-foo {
border-style: solid;
border-width: 30px;
}
Am I missing/misusing a class here?
Reset selectbox appearance and height value added by bootstrap then it will work as expected, please have a look at the below working snippet, hope it helps :)
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<style>
select.form-control.border-foo:not([size]):not([multiple]) {
height: auto;
}
.border-foo {
border-style: solid;
border-width: 3px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
</style>
<br>
<div class="row">
<div class="col-6">
<input type="text" id="textbox" class="form-control border-foo" />
</div>
<div class="col-6">
<select id="select" class="form-control border-foo">
<option>test</option>
</select>
</div>
</div>
I am using a Bootstrap template to build a website. I have 2 questions I am struggling to solve:
1) When I put my HTML code into a < section >, automatically some sort of top margin/padding is applied to the section. There is no css code affecting the section.
I can't seem to be able to control how much padding/margin is applied at the top/bottom.
Would anyone know if this is normal and how can I control amount of spacing?
2) If I don't use the section but just the div to separate each portion of my code the text goes right at the top of my page with no spacing at all. I tried using some css but failed at any attempt. This my most recent and basic attempt (also failing)
.q2 {
position: relative;
margin-top: 20px;
}
Thanks for any help - I have tried adding and removing section, using the bootstrap grid, a table but it all still gets either squashed together (if I don't use sections) or way too far apart (if I use sections).
HTML code:
<section>
<div class="container">
<form action="sqlQuery.php" method="post" name="foundationsurvey">
<div class="row">
<div class="col-12 text-center pb-3">
<label for="Q1">Q1</label>
</div>
</div>
<div class="row">
<div class="col-sm-12 text-left ml-4">
<input type="radio" id="dry" required> <label for="dry"> Dry </label>
</div>
</div>
<div class="row">
<div class="col-12 text-left ml-4">
<input type="radio" id="normal" required> <label for="normal"> Normal</label>
</div>
</div>
</div>
<!--Q2-->
<div class="container">
<div class="row">
<div class="col-12">
<label for="Q2">Q2</label>
</div>
</div>
<div class="row">
<div class="col">
<input type="text" name="product1" placeholder="Brand, Product Name" required>
</div>
<div class="col">
<input type="text" name="product2" placeholder="Brand, Product Name" required>
</div>
</div>
</div>
</section>
</header>
Where is the q2 class applied?
try the following:
... <div class="container q2"> ...
all styles work:
section {
margin-top: 150px;
}
.q2 {
/* position: relative; */
margin-top: 20px;
}
So i am trying something very simple but can seem to figure it out. I have two select elements which I want to align horizontally with text in between. This is what I have: ( also on codepen )
<div class="row">
<div class="col-xs-2">
<select class="form-control input-sm">...</select>
</div>
<div class="col-xs-1"> vs </div>
<div class="col-xs-2">
<select class="form-control input-sm">...</select>
</div>
</div>
However I when I try to put a vs (versus) between them , if I use a <p> or <div> with no class defined the second select gets misaligned. If I wrap the vs in a div class=col-xs-1 the gap is too big and doesnt look nice. What would be the best way to get a vs between the 2 select while keeping the alignment and not having a huge space between 2 elements
I assume you are using Bootstrap looking at the CodePen. Bootstrap has a class for inline forms which you could use like this:
<div class="container">
<form action="" class="form-inline">
<div class="form-group">
<select class="form-control"><option>Select option</option></select>
</div>
<div class="form-group">vs</div>
<div class="form-group">
<select class="form-control"><option>Select option</option></select>
</div>
</form>
</div>
CodePen: http://codepen.io/anon/pen/ZOYjBm
I just tried with CSS
<div class="row">
<div class="col-xs-2 field">
<select class="form-control input-sm">...</select>
</div>
<div><span>vs</span></div>
<div class="col-xs-2 field">
<select class="form-control input-sm">...</select>
</div>
</div>
CSS:
div{
display:inline;
}
.field{
position:absolute;
}
span{
position:relative;
padding:0px;
}
I have this code:
<div class="well">
<form role="form" id="shop-order" method="post" action="">
<div class="row">
<div class="form-group">
<div class="col-md-3">
<div class="pull-right">
<label for="name">Label</label>
</div>
</div>
<div class="col-md-6">
<select class="form-control" name="clientId">
$options
</select>
</div>
</div>
</div>
// possibly other rows...
</div>
The result of this code is on this image:
I don't get how I can center label and input in a row. I want them on one line: middle of label opposite middle of input.
How I can do this? Or probably I my html is wrong and this can be achieved by correct html?
I am looking for bootstrap method, I understand, that it can be achieved by line-height. I will do it by line-height if I wouldn't find bootstrap solution. So I am looking for bootstrap solution.
JSFiddle demo
Bootstrap provides a Horizontal Forms style that seems like what you're looking for: http://getbootstrap.com/css/#forms-horizontal
Working Fiddle: http://jsfiddle.net/Nv9Q5/1/
Code:
<div class="well">
<form class="form-horizontal">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">ФИО Клиента</label>
<div class="col-sm-10 col-md-10">
<select class="form-control" name="clientId">
<option>one</option>
</select>
</div>
</div>
</form>
</div>
Set the css line-height of the label to match the height of the input. You'll have to play around to find the right value.
https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
Input elements are already inline level element. If you add text-align:center to the parent div it will automatically float to the center.
EDITS
If you want to center it vertically, you need to add one more div wrapping the input box
<div class="vertically_center">
<input type="text">
</div>
CSS
.vertically_center {
display: table-cell;
height: 200px;
vertical-align: center;
}