I am working through Meteor React tutorial. In the code below when I change <h1> tag to h2/h3/h4 the checkbox becomes unclickable (however <b> works) in all browsers (chrome, ff, ie). Is this an issue with React or Meteor or mine?
...
return (
<div className="container">
<header>
<h1>Sample List</h1> //changing to h2/h3/h4 makes checkbox unclickable
<label className="hide-completed">
<input
type="checkbox"
readOnly
checked={this.state.hideCompleted}
onClick={this.toggleHideCompleted.bind(this)}
/>
Hide Completed Tasks
</label>
<form>...</form>
</header>
...
For me, it was solved by inserting a "br" between h1 and label.
<input
type="checkbox"
readOnly
checked={this.state.hideCompleted}
onClick={this.toggleHideCompleted.bind(this)}
/>
Hide Completed Tasks
</label>
<br /> <!-- this one here-->
<form>...</form>
To find the answer I used the devTools in Chrome. Make a right click on the checkbox and choose "Inspect element". You'll most likely see that you selected the from below.
By inserting a "br" you avoid this problem, but it isn't the ideal solution I think.
Maybe you need to update your styles/CSS to reflect the new tag being used:
h2 /* from h1 to h2, for example */ {
font-size: 1.5em;
margin: 0;
margin-bottom: 10px;
display: inline-block;
margin-right: 1em;
}
Is there a way to change the default styles of AngularJs search box?
<div ng-controller="PersonListCtrl">
<div class="bar">Search:
<input ng-model="query">
</div>
<ul class="" ng-show="query">
<li ng-repeat="person in persons | filter:query">{{person.name}}</li>
</ul>
</div>
</div>
I would like to change the colour and size of the search box and perhaps change the text colour. I've messed around in the CSS but it doesn't seem to be effecting anything.
I've tried
#bar {
background-color: #d7d7d7;
color:#000000;
}
and
.bar{
background-color: #d7d7d7;
color:#000000;
}
AngularJS does not introduces any styles as far as I know. You need to assign the id or the class to the HTML element:
<input ng-model="query" id="bar">
or
<input ng-model="query" class="bar">
You're currently targeting the wrapper of the input, you could just use
.bar input {
instead
The following page http://drivenowcard.com/form.php works great on Chrome but when loaded with Firefox you'll notice that the form is off to the right quite a bit.
I'm new to CSS so what did I do wrong or what does Firefox do differently then Chrome?
HTML
<div id="beforeForm">
<h2 id="customer" class="textFont">Customer Information</h2><h2 onclick="redirect('http://drivenowcard.com/privacy.php');" id="privacy">Privacy Notice</h2>
<p hidden="" id="required">* Indicates a required Field</p>
</div>
<form id="actionForm" action="ajax/process.php" method="post">
<!-- form contents -->
</form>
Note:
This project is using Bootstrap 3
You need to clear a left float that is cascading down from: <h2 id="customer" class="textFont">
This is the float in your CSS (don't change this)
#customer {
float: left;
}
This is the CSS you need to add to your stylesheet to clear the float
#actionForm {
clear: left;
}
I am trying to make two hyperlinked buttons go side by side. I saw this question but can not make the answers work. Below are my two attempts to make the buttons go side by side. The first attempt works but hyperlinks to the wrong location. The second one hyperlinks correctly but is not side by side. The third based on this question doesn't link anywhere but I think that has to do with using links instead of Javascript:submitRequests().
<!DOCTYPE html>
<html>
<body>
<head>
<style>
.container {
overflow: hidden;
}
button {
float: left;
}
button:first-child {
margin-right: 5px;
}
</style>
</head>
<form action="http://trinker.github.io/qdap_dev/paste2.html" target="_blank">
<input type="submit" value="paste2">
</form>
<form action="http://trinker.github.io/qdap_dev/colSplit.html" target="_blank">
<input type="submit" value="colSplit">
</form>
Attempt 1
<form action="http://trinker.github.io/qdap_dev/paste2.html" target="_blank">
<input type="submit" value="paste2">
<form action="http://trinker.github.io/qdap_dev/colSplit.html" target="_blank">
<input type="submit" value="colSplit">
</form>
</form>
Attempt 2
<form action="http://trinker.github.io/qdap_dev/paste2.html" target="_blank">
<input type="submit" value="paste2">
</form><form action="http://trinker.github.io/qdap_dev/colSplit.html" target="_blank">
<input type="submit" value="colSplit">
</form>
Attempt 3
<div class="container">
<button onclick="http://trinker.github.io/qdap_dev/paste2.html">paste2</button>
<button onclick="http://trinker.github.io/qdap_dev/colSplit.html">colSplit</button> text
</div>
</body>
</html>
If you just need plain links to work, just use links and style them to look like buttons (see also Styling an anchor tag to look like a submit button):
<style>
.button {
appearance: button;
-moz-appearance: button;
-webkit-appearance: button;
text-decoration: none;
font: menu;
color: ButtonText;
display: inline-block;
padding: 2px 8px;
}
</style>
<div class="container">
paste2
colSplit text
</div>
You could also do <button>paste2</button> but this is not actually legal HTML5. FWIW, Firefox does seem to render it correctly though.
buttons would line up side by side automatically since they're display: inline-block by default (I think). I'd remove the float: left since it could be causing some issues when nesting.
You should never nest forms. It'll lead to some really screwy things.
However, if you want two forms side by side you can make them do that by adding display: inline to them. Here's a small demo: http://jsbin.com/UgaMiYu/1/edit
The onclick attribute should't make any difference at all.
I just tried to add css to attempt 2. how about this:
HTML:
<form action="http://trinker.github.io/qdap_dev/paste2.html" target="_blank">
<input type="submit" value="paste2"/></form>
<form action="http://trinker.github.io/qdap_dev/colSplit.html" target="_blank">
<input type="submit" value="colSplit"/>
</form>
CSS:
form{
float:left;
}
DEMO: http://jsfiddle.net/uzDZN/
NOTE: Add class to form which has this buttons. Otherwise css may effect other form elements in website.
Utilizing regular buttons and setting their display property to either inline or inline-block worked for me.
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 */