I added a border-bottom to the button and when button is clicked border-bottom is removed and button is moved 3px down to create press effect. But when button is clicked the div below the active div also moves down and up.
This screenshot can make things clear.
HTML
<div id="contactus">
<a class="dropcontact" href="javascript:void(0)">Contact Us</a>
<div id="contact-container" class="body">
<ul>
<li><input type="text" placeholder="Name" /></li>
<li><input type="text" placeholder="Email" /></li>
<li><textarea placeholder="Message"></textarea></li>
<li><input type="submit" value="send"></li>
</ul>
</div>
</div>
<footer>
<div id="footer-container" class="body">
<span>© All Rights Reserved 2014. Design By Mohit Chawla.</span>
<div class="social">
<img src="images/social/facebook-3-128.png" alt="">
<img src="images/social/pinterest-4-128.png" alt="">
<img src="images/social/twitter-4-128.png" alt="">
</div>
</div>
</footer>
CSS of the button
#contact-container input[type="submit"]{
border: none;
background-color: #f4f4f4;
color: #ffb851;
padding: 10px;
font-size: 16px;font-size: 1.6rem;
border-radius: 5px;
border-bottom: 3px solid #e5e5e5;
cursor: pointer;
}
#contact-container input[type="submit"]:active{
position: relative;
top: 3px;
border-bottom: 0px;
}
Don't change the border width, change the border colour:
#contact-container input[type="submit"]:active{
position: relative;
top: 3px;
border-bottom: 3px solid transparent;
}
This way the sizes remain constant, and don't affect the layout/sizing.
Related
I have been out of the web development scene for a number of years and am getting back into it and developing a website using Bootstrap 4.
This maybe a stupid question but I have some CSS styling for checkboxes for some form elements and when reducing the screen size < 768px the styling vanishes...
Is this something fundamental to Bootstrap (although have not had this happen with any other CSS styled elements?) or am I doing something very obviously wrong?
Here are some code segments:
.question input {
position: absolute;
left: -9999px;
}
.question label {
display: block;
position: relative;
margin: 5px;
padding: 15px 30px 15px 55px;
border: 3px solid #fff;
border-radius: 20px;
color: #fff;
background-color: #005552;
white-space: pre-wrap;
cursor: pointer;
user-select: none;
transition: background-color .2s, box-shadow .2s;
}
.question label::before {
content: '';
display: block;
position: absolute;
top: 10px;
bottom: 10px;
left: 10px;
width: 32px;
border: 3px solid #fff;
border-radius: 20px;
transition: background-color .2s;
}
.question input:checked + label {
background-color: #ab576c;
}
.question input:checked + label::before {
background-color: #fff;
}
<form target="nextQuestion.php" action="post" style="margin-bottom: 0px;">
<input type="hidden" name="percentage" id="percentage">
<input type="hidden" name="currentQuestion" id="currentQuestion" value="1">
<div class="container-fluid">
<div class="row">
<div class="col-12 my-auto toxic-red-background" align="center">
<h6 class="white-text">Your Progress Through Our Questionnaire: </h6>
<div class="progress">
<div class="progress-bar-animated bg-primary" role="progressbar" style="width: 5%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 toxic-teal-background questionnaire-left-section question">
<h3>Q1: Would you use out website again?</h3>
<p> </p>
<input type="hidden" value="Question2">
<input id="yes" type="checkbox" class="QuestionnaureInput">
<label for="yes" class="QuestionnaireLabel">Yes</label>
<input id="no" type="checkbox" class="QuestionnaureInput">
<label for="no" class="QuestionnaireLabel">No</label>
<input id="maybe" type="checkbox" class="QuestionnaureInput">
<label for="maybe" class="QuestionnaireLabel">Maybe</label>
</div>
</div>
<div class="row">
<div class="col-sm-12 clearfix">
<button class="btn btn-primary mb-2 float-left">Prev</button>
<button type="submit" class="btn btn-primary mb-2 float-right">Next</button>
</div>
</div>
</div>
</form>
Here are some screen grabs to illustrate what is happening:
On larger screen - All OK
Screen resized to < 768px and styling is removed
Any suggestions, answers or guidance gratefully received as I am pulling my hair out!!
Thanks in Advance!
I am trying to make a search field with a dropdown inside. I have been trying to use bootstrap's input group to give the illusion that the button is inside the field.
This is what I am trying to accomplish in the screenshot below:
This is what I have so far:
I am trying to figure out how to get the dropdown menu to move over to the far right of the search field and get that carrot to show as well.
Any tips on adjusting the position of the menu as well as making that dropdown button have no color on hover?
<div class="container div-cntr">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control input-lg" id="toolSearch" name="toolSearch" placeholder="What are you looking for?">
<div class="input-group-btn">
<button aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" class="btn btn-default btn-lg dropdown-toggle filterOptions" type="button"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button>
<ul class="dropdown-menu">
<li><input type="checkbox"/> Option 1</li>
<li><input type="checkbox"/> Option 2</li>
</ul>
</div>
</div>
<br />
<button type="button" class="btn btn-default btn-lg">Search</button>
</div>
</div>
-
.div-cntr {
left: 50%;
margin-left: -350px;
margin-top: -150px;
min-height: 150px;
position: absolute;
text-align: center;
top: 50%;
width: 700px;
}
.filterOptions{
border-left: 0px;
}
.btn-lg {
line-height: 1.22;
}
#toolSearch:focus {
outline:none;
}
Here is a fiddle I have set up: https://jsfiddle.net/carlhussey/tfrpncu7/
Here is the CSS you need to accomplish what you indicated you wanted:
.dropdown-menu {
right: 0; /* Align dropdown-menu to right instead of left */
left: auto;
}
.input-group .dropdown-toggle.filterOptions {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
z-index: 5; /* Fix for 2 input-group-btns and this one not being the last-child */
}
.dropdown-menu>li>a:focus,
.dropdown-menu>li>a:hover {
background-color: transparent; /* Fix for dropdown-menu item hover background-color */
}
Here is what it looks like:
I went ahead and updated your Fiddle:
https://jsfiddle.net/tfrpncu7/3/
You should be using input-group-lg along with input-group and dropdown-menu-right to position the dropdown menu correctly. For the other CSS use pseudo elements.
Working Example: (The level of specificity is so the example works on Stackoverflow.)
.div-cntr {
margin-top: 100px;
text-align: center;
max-width: 700px;
/*for example only*/
background: red;
min-height: 300px;
/*for example only*/
}
.form .open>.dropdown-toggle.filterOptions.focus,
.form .open>.dropdown-toggle.filterOptions:focus,
.form .open>.dropdown-toggle.filterOptions:hover .input-group-lg>.form-control,
.form .input-group.input-group-lg>.input-group-btn>.filterOptions {
border: 1px solid #ccc;
border-left: 0;
outline: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border-radius: 0;
background: #fff;
}
.form .dropdown-menu.dropdown-menu-search {
top: 60px;
right: 110px;
border-radius: 0;
border: 0;
background: #fff;
}
.form .dropdown-menu.dropdown-menu-search:after {
top: -15px;
right: 10px;
position: absolute;
content: '';
border-width: 0px 15px 15px 15px;
border-style: solid;
border-color: #fff transparent;
height: 0;
width: 0;
}
.form .form-control.toolSearch,
.form .form-control.toolSearch:focus {
outline: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border-radius: 0;
border: 1px solid #ccc;
border-right: 0;
}
.form .input-group-btn .btn.btn-search,
.form .input-group-btn .btn.btn-search.active {
border-radius: 0;
border: 1px solid #ccc;
border-left: 0;
}
.form .input-group-btn .btn.btn-search:hover,
.form .input-group-btn .btn-search:focus {
outline: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border: 1px solid #ccc;
border-left: 0;
border-radius: 0;
background: #fff;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container div-cntr">
<div class="form-group form">
<div class="input-group input-group-lg">
<input type="text" class="form-control toolSearch" id="toolSearch" name="toolSearch" placeholder="What are you looking for?">
<div class="input-group-btn">
<button aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" class="btn btn-default btn-lg dropdown-toggle filterOptions" type="button"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu dropdown-menu-right dropdown-menu-search">
<li>
<a href="#" class="small" data-value="option1" tabIndex="-1">
<input type="checkbox" /> Option 1</a>
</li>
<li>
<a href="#" class="small" data-value="option2" tabIndex="-1">
<input type="checkbox" /> Option 2</a>
</li>
<li>
<a href="#" class="small" data-value="option3" tabIndex="-1">
<input type="checkbox" /> Option 3</a>
</li>
<li>
<a href="#" class="small" data-value="option4" tabIndex="-1">
<input type="checkbox" /> Option 4</a>
</li>
<li>
<a href="#" class="small" data-value="option5" tabIndex="-1">
<input type="checkbox" /> Option 5</a>
</li>
<li>
<a href="#" class="small" data-value="option6" tabIndex="-1">
<input type="checkbox" /> Option 6</a>
</li>
</ul>
<button role="button" class="btn btn-lg btn-default btn-search"><span class="glyphicon glyphicon-search"></span> Search</button>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Here's a Fiddle with the position of the dropdown set, and the button with a white background on `:active'. Let me know if this is what you were looking for.
https://jsfiddle.net/tobyl/4p41p3kg/2/
Added CSS:
.dropdown-menu {
left: auto;
right: 0;
}
.open > .dropdown-toggle.btn-default:active, .open > .dropdown-toggle.btn-default:focus {
background-color: #fff;
}
I'll start by answering the second part of your question
Making that dropdown button have no color on hover
Chrome dev-tools (right click any element of the page and select Inspect element) can help a lot when it comes to styling elements under certain states (like hover). To see which style rule is applied during hover we can force the hover state on the button through dev-tools. We see that .btn-default is applying
.btn-default:hover {
color: #333;
background-color: #e6e6e6;
border-color: #adadad;
}
Since this button has the following class precedence
<button class="btn btn-default btn-lg dropdown-toggle filterOptions"> (classes to the right override rules from classes to the left)
We can override the hover styles of .btn-default by making a rule for the hover state of filterOptions.
.filterOptions:hover {
background-color: white;
border-color: #ccc;
}
Adjusting the position of the menu as well as
Again by inspecting the dropdown element in dev-tools we can see that the correct style rule to override the default positioning and make the dropdown position to the right would be:
.open>.dropdown-menu {
right: 0;
left: initial;
}
Updated fiddle:
https://jsfiddle.net/tfrpncu7/4/
Remember, css has no scoping what so ever so it's a good idea to always apply new non-bootstrap classes when styling a specific element.
If your project is large, consider using a css naming convention like BEM to keep the risk of naming collisions low.
i have a horizontal navigation bar.
i wish to add a search bar to the navigation bar, but when i insert it, my navigation bar is misaligned.
https://jsfiddle.net/r6ntxg2f/
as you can see my menu is hovering above the green line, and the right side menu is hovering even more. i wish to align the whole menu to the green line.
<li id="searchbar">
<form id="search" method="post" style="">
<input id="bb" type="text" style="" />
<input id="cc" type="submit" value="Search" style="" />
</form>
</li>
this is how it is without search. https://jsfiddle.net/q476f585/ (working)
Seems like your sizes and padding was causing the issue, see the jsfiddle for an updated solution. All I done was updated the padding and display style. For the bottom border you will have to ensure that the other padding on the first two buttons are correct.
You can fix the issue by adjusting padding. Here is the working code.
ul#menu_left {
position: relative;
left: 100px;
width: 75%;
font: 75% verdana;
list-style-type: none;
padding: 10px 10px 5px 10px;
border-bottom: 1px solid green;
}
ul#menu_right {
padding-right: 10px;
float: right;
padding-top: 2px
}
ul#menu_left li {
display: inline;
}
ul#menu_left li a {
padding: 6px 4px;
border-bottom: 1px solid green;
text-decoration: none;
color: white;
background-color: green;
}
ul#menu_left a:hover {
color: black;
background: yellow;
border-bottom: 1px solid yellow;
}
li#searchbar {
background-color: green;
padding: 6px 4px;
border-bottom: 1px solid green;
}
li#searchbar form {
display: inline;
}
li#searchbar input {
width: 50px;
}
<ul id="menu_left">
<li><a id="tab1" href="#">The We</a>
</li>
<li><a id="tab2" href="#">Book</a>
</li>
<li><a id="tab3" href="#">Tab</a>
</li>
<li id="searchbar">
<form id="search" method="post">
<input id="bb" type="text" />
<input id="cc" type="submit" value="Search" />
</form>
</li>
<ul id="menu_right">
<li><a id="tab5" style="" href="#">Up</a>
</li>
<li><a id="tab6" href="#">Contact</a>
</li>
</ul>
</ul>
I'm developing a website for Facebook application which is based on grid image layout. The following code works fine for me but when i zoom my browser everything gets messed up. browser with 100% zoom view works. please help me to find some other code if possible or fix the following code.
<style>
div.img {
margin: 5px;
padding: 5px;
border: 1px solid #0000ff;
height: auto;
width: auto;
float: left;
text-align: center;
}
div.img img {
display: inline;
margin: 5px;
border: 1px solid #ffffff;
}
div.img a:hover img {
border: 1px solid #0000ff;
}
div.desc {
text-align: center;
font-weight: normal;
width: 120px;
margin: 5px;
}
</style>
HTML:
<div class="img">
<a target="_blank" href="klematis_big.htm"><img src="image1.jpg" alt="PHOTO" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis2_big.htm"><img src="image2.jpg" alt="PHOTO" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis3_big.htm"><img src="image3.jpg" alt="PHOTO" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis4_big.htm"><img src="image4.jpg" alt="PHOTO" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
I updated the fiddle of Sdghasemi. Added fallback for older browsers without width calculation function and set the image width to 100% and cleaned up the Html a little (closing image tags etc)
The reason that images where flowing out of the container div was the width and height attributes in the HTML. I set it now to 100% of the container. Meaning 100% -2px because of the border. Same with the image caption.
<div class="img">
<a target="_blank" href="klematis_big.htm">
<img src="http://lorempixel.com/110/90/" alt="PHOTO"/>
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis2_big.htm">
<img src="http://lorempixel.com/110/90/" alt="PHOTO"/>
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis3_big.htm">
<img src="http://lorempixel.com/110/90/" alt="PHOTO"/>
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis4_big.htm">
<img src="http://lorempixel.com/110/90/" alt="PHOTO"/>
</a>
<div class="desc">Add a description of the image here</div>
</div>
css:
div.img {
margin: 5px;
padding: 5px;
border: 1px solid #0000ff;
height: auto;
width: 24%;
width: calc(25% - 22px);
float: left;
display: block;
overflow: hidden;
text-align: center;
font-size: 100%;
}
div.img a:hover img {
border: 1px solid #0000ff;
}
div.img img{
width: 99%;
width: calc(100% - 2px);
border: 1px solid #fff;
}
div.desc {
text-align: center;
font-weight: normal;
width: 100%;
width: calc(100% - 10px);
margin: 5px;
}
http://jsfiddle.net/or2ua75e/5/
In this case you have to use CSS's calc() function to calculate the right width of every image on page resize or zoom:
width: calc(24.9% - 22px);
the reason i used 22px: 2 * (margin + border.width + padding) for every image.
and use 24.9% instead of 25 for sure.
See working FIDDLE here
For simplicity, I'm using inline styles so you can see what's going on. I've used a red border for list elements and a black border for the images? Why aren't the images aligned properly? This has been driving me nuts.
See screenshot:
See code:
<ul>
<li style="border: 1px solid red">Result <span style="display: block; float: right; border: 1px solid #000"><img src="../../resources/images/delete.png" /></span></li>
<li style="border: 1px solid red">Result <span style="display: block; float: right; border: 1px solid #000"><img src="../../resources/images/delete.png" /></span></li>
<li style="border: 1px solid red">Result <span style="display: block; float: right; border: 1px solid #000"><img src="../../resources/images/delete.png" /></span></li>
</ul>
JS Fiddle
http://jsfiddle.net/jMzub/
You need to clear the floats
<ul>
<li style="border: 1px solid red">Result
<span style="display: block; float: right; border: 1px solid #000">
<img src="../../resources/images/delete.png" />
</span>
<div style="clear: both;"></div>
</li>
<!--Same for other li-->
</ul>
But this is a dirty way, I would've used background-image and background-position for <li> element instead(Unless and until you'll be using image as a link or for some click purpose)
You need to include height to li
li{height: 30px;}