I need to put a date in my apllication so I do this:
<!--data -->
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 form-group">
<mat-form-field>
<mat-label>Data di nascita</mat-label>
<!-- #docregion toggle -->
<input matInput [matDatepicker]="picker" placeholder="gg/MM/yyyy">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
<!-- #enddocregion toggle -->
</mat-form-field>
</div>
The problem is I don't know how remove this focus in the image:
In my style.css I do this:
#import '~#angular/material/theming';
#import '~bootstrap-italia/dist/css/bootstrap-italia.min.css';
The problem could be some rules that I import. Anyone can help to remove the focus yellow in the components that I have seen in my image?
It's because of the default input style use this
input:focus { outline: none; }
::ng-deep *,*:focus,*:hover{
outline:none !important;
}
Add this CSS to your Page CSS file
Navbar search is broken on chrome 50+ using either of these versions:
materialize 0.97.6
materialize 0.97.5
Code used is as described in the documentation:
<nav>
<div class="nav-wrapper">
<form>
<div class="input-field">
<input id="search" type="search" required>
<label for="search"><i class="material-icons">search</i></label>
<i class="material-icons">close</i>
</div>
</form>
</div>
</nav>
this code leads to visual issues as depicted on the documentation page as well as my site:
http://materializecss.com/navbar.html
How do i fix this to make it look uniform?
I just noticed this today and I just did this:
input[type="search"] {
height: 64px !important; /* or height of nav */
}
Alright I was having the same issue. However, I added this CSS and it worked for me.
nav .nav-wrapper form, nav .nav-wrapper form .input-field{
height: 100%;
}
I use bootstrap-datepicker3 from a gem, his Github of bootstrap datepicker
But I use a black bootstrap theme and I don't know how to isolate or change the background color of the datepicker window... It seems to take the background color of the main bootstrap theme.
<div class="form-group">
<div class="col-lg-10">
<span class="input-group-addon">Dates</span>
<div class="input-group" id="datepicker">
<input class="form-control" type="text" name="date_start" data-behaviour='datepicker'>
<span class="input-group-addon">à</span>
<input class="form-control" type="text" name="date_end" data-behaviour='datepicker'>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('[data-behaviour~=datepicker]').datepicker();
});
</script>
I tried a solution but it's for datetimepicker and it doesn't work..
Thank you !
Try overriding the background-color in your CSS:
.datepicker.dropdown-menu {
background-color:#FFF;
}
Try this
<style type="text/css">
.datepicker.dropdown-menu table {
background-color: #FFFFFF;
}
</style>
it works !
I was able to resolve this issue by following the steps provided in the following thread, with one change. I used the ".datepicker .table-condensed" selector.
Reduce size and change text color of the bootstrap-datepicker field
I got a following set up using the lastest twitter bootstrap framework:
http://jsfiddle.net/hfexR/2/
I now want that the input field takes the maximum width when there is no button next to.
How can I do this with pure css or with twitter-bootstrap itself?
Something like inline-block should go, I just don't get it at the moment...
You can use te class input-block-level like in this fiddle
<div class="container">
<div class="span4 well">
<form class="form-search">
<input type="text" class="input-block-level search-query">
</form>
<form class="form-search">
<input type="text" class="input-medium search-query">
<button type="submit" class="btn">Cancel</button>
</form>
</div>
</div>
EDIT : since bootstrap v3, classes have evolved so use col-xx-X classes to obtain the result explained below (further changes may be necessary)
Live demo (jsfiddle)
You could use a .row-fluid and use .spanX to make the inputs fill their container :
<form class="form-search">
<div class="row-fluid">
<input type="text" class="input-medium search-query span12">
</div>
</form>
<form class="form-search">
<div class="row-fluid">
<input type="text" class="input-medium search-query span8">
<button type="submit" class="btn span4">Cancel</button>
</div>
</form>
It appears that a little fix is needed for the button/input combination :
/* May not be the best way, not sure if BS has a better solution */
/* Fix for combining input and button spans in a row */
.row-fluid > input + button[class*="span"] {
float: none; /* Remove the */
display: inline-block; /* floating */
margin-left: 0; /* Stick it to the left */
}
Last thing, you shouldn't combine .spanX and .well because of the padding and borders and other things, here is an example of why (jsfiddle).
The bootstrap examples for the navbar search form have just a text box.
I'd like to be able to add a search icon at the beginning, like Twitter does on their search box. How can I do this with bootstrap?
Here's what I've tried so far but it's failing:
http://jsfiddle.net/C4ZY3/3/
Here's how to use the :before pseudo selector and glyphicons for Bootstrap 2.3.2 instead of a background image on the input.
Here's a couple of simple examples: http://jsfiddle.net/qdGZy/
<style type="text/css">
input.search-query {
padding-left:26px;
}
form.form-search {
position: relative;
}
form.form-search:before {
content:'';
display: block;
width: 14px;
height: 14px;
background-image: url(http://getbootstrap.com/2.3.2/assets/img/glyphicons-halflings.png);
background-position: -48px 0;
position: absolute;
top:8px;
left:8px;
opacity: .5;
z-index: 1000;
}
</style>
<form class="form-search form-inline">
<input type="text" class="search-query" placeholder="Search..." />
</form>
Update For Bootstrap 3.0.0
Here's an updated fiddle for bootstrap 3.0: http://jsfiddle.net/66Ynx/
One of the way to do it is to add left padding to the field and add background image for the field.
See example: http://jsfiddle.net/hYAEQ/
It's not exact way twitter.com do it, they used absolute position element above search field because they have all images in the single sprite, and can't easily use them as backgrounds, but it should do.
I used inline image for a background to make it easier to post it to jsfiddle, but feel free to use normal links to images here.
EDIT: The way to do it using bootstrap sprite and additional container for icon
http://jsfiddle.net/hYAEQ/2/
EDIT 2:
Fix for white bootstrap theme: http://jsfiddle.net/hYAEQ/273/
EDIT 3:
If you are using navbar-inverse (black navbar) you will want this minor tweak: http://jsfiddle.net/hYAEQ/410/
.navbar-search .search-query {
padding-left: 29px !important;
}
Play this fiddle, I put some rosin on the bow for you:
http://jsfiddle.net/pYRbm/
.fornav {
position:relative;
margin-left:-22px;
top:-3px;
z-index:2;
}
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<form class="navbar-search">
<div class="input-append">
<input type="text" class="search-query span2" placeholder="Search…"><span class="fornav"><i class="icon-search"></i></span>
</div>
</form>
</div>
</div>
</div>
You can also not touch the css at all by using prepending form inputs like so
<form class="navbar-search">
<div class="input-prepend">
<span class="add-on"><i class="icon-search"></i></span><input name="url" type="text" class="span2" placeholder="Page Url">
</div>
</form>
Note that whitespace between </span> and <input> will create a gap between the icon and the text box.
In bootstrap 3.x.x
<div class="input-group">
<input type="text" class="form-control" id="search">
<span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>
</div>
The new version 2.1.1 fixes the problem. It doesn't handle the case of the 15 pixel radius, so I went ahead and styled it accordingly. I also added navbar-inverse for fun.
A couple of caveats. The CSS can be better optimized, but recently I've been spoiled by less. Finally, there's an ever so slight, barely visible, left border to the left of the magnifying glass. I don't know exactly what's causing it, but it is likely the box shadow.
Please feel free to fork and improve.
http://jsfiddle.net/joelrodgers/hYAEQ/333/
For those using Rails, my solution is not the most beautiful but works.
<%= form_tag PATH_TO_MODEL, :method => 'get', :class => "navbar-search" do %>
<%= text_field_tag :search, params[:search], :class => "search-query",
:style => "padding-left:29px" %>
<div class="icon-search" style="position:absolute;top:7px;left:11px;"></div>
<% end %>
Bit late to the party on this one ...
I used the following to achieve the search input as an icon
<div class="input-append">
<input id="appendedInputButton" class="span6" type="text" placeholder="Search...">
<button class="btn" type="button"><i class="icon-search"></i></button>
</div>
You should change your approach. Use span.search-query as an overlay - here you have the most important things:
.navbar-search { position: relative } /* wrapper */
.search-query { position: absolute; left: 0; top: 0; z-index: 2; width: x } /* icon */
.span3 { position: relative; z-index: 1; padding-left: x } /* input */