I'm trying to create an input that has a button to the right that contains an icon and can be clicked a bit like this
Here is my code so far
http://www.bootply.com/udRtNLsCgV
<div class="input-group">
<input class="form-control" placeholder="Select area...">
<span class="input-group-addon glyphicon glyphicon-edit" onclick="openDialog()">Area</span>
</div>
My problem is that the font in the button doesn't seem to be the default font and the input is far too wide
Include your icon separately (inside div with input-group-addon class).
You can control width of input group in CSS.
HTML:
<div class="input-group">
<input class="form-control" placeholder="Select area...">
<span class="input-group-addon" onclick="openDialog()"><i class="glyphicon glyphicon-edit"></i> Area</span>
</div>
CSS:
.input-group {
width: 200px;
}
.input-group-addon > a {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
BOOTPLY
Related
I am working on a accordion in Bootstrap V 3.37. I have icons on the accordion which change with open and closed states. When I the state set to collapse init works fine. But when I have the accordion with none of them accordions collapsed in the icons are not working properly.
The icons should be working as:
Arrow facing down on closed state
Arrow facing up on open state
My code is as follows so far:
HTML Structure
<!-- Panel list accordion -->
<div class="panel-group">
<div class="panel-heading-one panel-main-heading-one">
<h4 class="panel-title panel-main-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
<img src="../images/image.svg" class="panel-icon">
<p>Title here</p>
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body panel-bodymain-one">
<p>Text body here</p>
</div>
</div>
<div class="panel-heading-one panel-main-heading-one">
<h4 class="panel-title panel-main-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
<img src="../images/image.svg" class="panel-icon">
<p>Title here</p>
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body panel-bodymain-one">
<p>Title body here</p>
</div>
</div>
<div class="panel-heading-one panel-main-heading-one">
<h4 class="panel-title panel-main-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
<img src="../images/image.svg" class="panel-icon">
<p>Title here</p>
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body panel-bodymain-one">
<p>Text body here</p>
</div>
</div>
</div>
</div>
<!-- End panel list accordion -->
CSS
.panel-heading-one .accordion-toggle:after {
/* symbol for "opening" panels */
font-family: 'Glyphicons Halflings';
content: "\e113";
float: right;
color: #ffffff;
height: 24px;
width: 40px;
background-color: #000000;
}
.panel-heading-one .accordion-toggle.collapsed:after {
/* symbol for "collapsed" panels */
content: "\e114";
}
Screenshots attached also.
Closed state - still point up:
Open state is fine as it points up:
Any help would be great.
Change your css to:
.panel-heading-one .accordion-toggle:after{
font-family: 'Glyphicons Halflings';
content: "\e114";
float: right;
color: #ffffff;
height: 24px;
width: 40px;
background-color: #000000;
}
.panel-heading-one .accordion-toggle[aria-expanded="true"]:after {
/* symbol for "opening" panels */
content: "\e113";
}
.panel-heading-one .accordion-toggle[aria-expanded="false"]:after {
/* symbol for "collapsed" panels */
content: "\e114";
}
And it will work perfectly.
Extra: In your accordion you have used same href='#collapseThree'
for last and second last item. When you will click on last element, it
will open second last item. So change your href in last element.
I want to add search box to my navbar but not as the traditional way as appears in the picture , I want to add a search icon button in the navbar only and when user click on it the search box appears under the search icon .
How can i do this any one can help me please ?
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" >
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Contact US</li>
<li class="dropdown">
Who we are <b class="caret"></b>
<ul class="dropdown-menu">
<li>About</li>
<li> Mession</li>
<li> Vision</li>
<li class="divider"></li>
<li>Goals</li>
</ul>
</li>
<li>Publications</li>
<li>Media</li>
<li>Partners</li>
</ul>
There are lot of things on the net e.g https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_anim_search
Run below code:
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
width: 130px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('https://www.w3schools.com/howto/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
</style>
</head>
<body>
<p>Animated search form:</p>
<form>
<input type="text" name="search" placeholder="Search..">
</form>
</body>
</html>
You can try these snippets.
Solutuion with CSS Only:
.hide
{
opacity: 0;
max-height: 0;
}
#trigger {
position: absolute;
left: -999em;
}
#container input[type="checkbox"]:checked + div
{
max-height: 99em;
opacity: 1;
height: auto;
overflow: hidden;
}
<div id="container">
<label for="trigger">click me for Search</label>
<input type="checkbox" id="trigger">
<div class="hide">
<form>
<input type="text" name="search" placeholder="Search..">
</form>
</div>
<div>
Solution with JS:
function myFunction() {
if (document.getElementById("form").style.display === "none") {
document.getElementById("form").style.display = "block";
} else {
document.getElementById("form").style.display = "none";
}
}
button {
width: 50px;
height: 50px;
}
<p>show and hide search</p>
<button onclick="myFunction()"></button>
<form id="form">
<input type="text" name="search" placeholder="Search..">
</form>
<div class="alertCount" tooltip="" data-placement="top" data-toggle="aa" title="" data-original-title="Bin">
<img src="sample/red.png" style="width:20px">
<span class="ng-binding" style="font-weight: bold; margin-left: 5px;margin-top: 5px">0</span>
</div>
<div class="alertCount" tooltip="" data-placement="top" data-toggle="aa" title="" data-original-title="Bin">
<img src="sample/green.png" style="width:20px">
<span class="ng-binding" style="font-weight: bold; margin-left: 5px;margin-top: 5px">0</span>
</div>
i want to print only text from red.png's div.
That image doesn't actually contains the text but what I guess is that its the following sibling Span which has a text '0' If I understood it correctly then use xpath as it is in below java code :
String Text = driver.findElement(By.xpath("//img[#src='sample/red.png']/following-sibling::span")).getText();
and print the Text.
Bootstrap includes a rectangle around the check box in this jsFiddle Example. Have I used markup incorrectly or is there a work around?
<form class="form-horizontal" role="form">
<div class="form-group form-group-lg">
<label for="cbLabel" class="col-sm-3 control-label">Label:</label>
<div class="col-sm-3">
<input type="checkbox" id="cbLabel" class="form-control" />
</div>
</div>
</form>
Add a custom class to the form-control element (.fix in my example) and some custom styling to override Bootstrap's styling.
.fix {
-webkit-box-shadow: none;
box-shadow: none;
}
.fix:focus {
-webkit-box-shadow: none;
box-shadow: none;
}
HTML
<input type="checkbox" id="cbLabel" class="form-control fix">
Sample: http://www.bootply.com/61qJqP5whr
The label and button are not vertical aligned. The button floats up. I've searched and tried those solutions but they did not work. Head thoroughly banged against wall.
Here's the fiddle. http://www.bootply.com/5877LkksdX
<div class="row ">
<div class="col-xs-2 ">
<h3><label class="label label-primary">
Student Information</label></h3>
</div>
<div class="col-xs-2 ">
<input id="Button3" type="button" value="Add Student" class="btn btn-success btn-sm">
</div>
</div>
The "Student Information" text is wrapped in an H3 tag which has margin-top: 20px; and margin-bottom: 10px; I suggest you take it out of the H3 and create a custom CSS class for it.
HTML
<div class="mytitle">
<label class="label label-primary">Student Information</label>
</div>
CSS
.mytitle {
font-size: 24px;
font-family: inherit;
font-weight: 500;
line-height: 1.1;
color: inherit;
}