Tried everything .. this just does not budge. This forum post is my last resort on this one. Its been 3 days messing around with a plethora of CSS setting combinations, checking JS for issues and just generally losing my hair.
Please help me with this .. I really dont want to have to give up this whole project because of one stupid line of code somewhere.
Problem: The popover box loads flush to the top of the screen, i've tried adding margins to every single container I can both in the bootstrap.css and removing/adding div elements to help resolve this .. and nothing !
HTML:
<div id="login-popover" role="dialog" aria-labelledby="myPopoverLabel" aria-hidden="true" style="display: none;">
<div class="loginpopover-container">
<h1>Login to Your Account</h1>
<br>
<form method="post" >
<input type="text" name="username" placeholder="Username">
<input type="password" name="password" placeholder="Password">
<input type="submit" name="login" class="login loginpopover-submit" value="Login">
</form>
<div class="login-help"> RegisterForgot Password </div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2"> <?php echo $usernameErr; ?> <?php echo $passwordErr; ?> </div>
</div>
</div>
</div>
LOGINBOX.CSS:
#import url(http://fonts.googleapis.com/css?family=Roboto);
/****** LOGIN POPOVER ******/
.loginpopover-container {
padding: 10px;
max-width: 300px;
width: 100% !important;
overflow: hidden;
font-family: roboto;
}
.loginpopover-container h1 {
text-align: center;
font-size: 1.8em;
font-family: roboto;
}
.loginpopover-container input[type=submit] {
width: 100%;
display: block;
margin-bottom: 10px;
position: relative;
}
.loginpopover-container input[type=text], input[type=password] {
height: 44px;
font-size: 16px;
width: 100%;
margin-bottom: 10px;
-webkit-appearance: none;
background: #fff;
border: 1px solid #d9d9d9;
border-top: 1px solid #c0c0c0;
/* border-radius: 2px; */
padding: 0 8px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.loginpopover-container input[type=text]:hover, input[type=password]:hover {
border: 1px solid #b9b9b9;
border-top: 1px solid #a0a0a0;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
.login-popover {
text-align: center;
font-size: 14px;
font-family: 'Arial', sans-serif;
font-weight: 700;
height: 36px;
/* border-radius: 3px; */
/* -webkit-user-select: none;
user-select: none; */
}
.loginpopover-submit {
/* border: 1px solid #3079ed; */
border: 0px;
color: #fff;
text-shadow: 0 1px rgba(0,0,0,0.1);
background-color: #4d90fe;
padding: 17px 0px;
font-family: roboto;
font-size: 14px;
/* background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4d90fe), to(#4787ed)); */
}
.loginpopover-submit:hover {
/* border: 1px solid #2f5bb7; */
border: 0px;
text-shadow: 0 1px rgba(0,0,0,0.3);
background-color: #357ae8;
/* background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4d90fe), to(#357ae8)); */
}
.loginpopover-container a {
text-decoration: none;
color: #666;
font-weight: 400;
text-align: center;
display: inline-block;
opacity: 0.6;
transition: opacity ease 0.5s;
}
.login-help{
font-size: 12px;
}
JAVASCRIPT:
<script>
$('[data-toggle=popover]').popover({
html: true,
content: function () {
var targetId = $(this).attr('data-target');
return $(targetId).html();
}
});
</script>
Just to say in my defense, the reason I am so annoyed is because I do everything possible on my end, so I dont have to push this to you guys. I exhaust every possible reason I can - this process however, seriously tests my patience.
Anyway, any help as always is appreciated. (sad whale face -_____-)
Related
I had designed a login pop up on my website.
It is properly aligned and displayed in laptop browser but in mobile, it is being displayed very small.I need help in adding some bootstrap tags by which it would be compatible with mobile browser too.
Below is the demonstration of the code snippet you can see working
function PopUp(hideOrshow) {
if (hideOrshow == 'hide') document.getElementById('ac-wrapper').style.display = "none";
else document.getElementById('ac-wrapper').removeAttribute('style');
}
window.onload = function () {
setTimeout(function () {
PopUp('show');
}, 1000);
}
#ac-wrapper {
position: fixed;
top: 90px;
left: 0;
width: 100%;
height: 100%;
/*background: rgba(34,34,34,0.75);*/
background: rgba(255, 255, 255, .6);
/*rgba(255, 255, 255, .6)*/
z-index: 1001;
}
#import url(http://fonts.googleapis.com/css?family=Roboto);
/****** LOGIN MODAL ******/
.loginmodal-container {
max-width: 350px;
width: 100% !important;
background-color: #eceff6;
margin: 0 auto;
border-radius: 6px;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
overflow: hidden;
font-family: roboto;
border:2px solid;
border-color:rgba(0,0,0,0.5);
}
#popupHeader
{
background-color:#3c5899;padding:12px;
margin-bottom:25px;
}
.loginmodal-container form{padding:35px;}
.loginmodal-container h1 {
text-align: center;
font-size: 1.2em;
margin:0px;
font-family: roboto;
color:#fff;
}
.loginmodal-container input[type=button] {
width: 100%;
display: block;
margin-bottom: 10px;
position: relative;
}
.loginmodal-container input[type=text], input[type=password] {
width: 100%;
padding: 08px 16px;
margin: 2px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 06px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.loginmodal-container input[type=text]:hover, input[type=password]:hover {
border: 1px solid #b9b9b9;
border-top: 1px solid #a0a0a0;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
.loginmodal {
text-align: center;
font-size: 14px;
font-family: 'Arial', sans-serif;
font-weight: 700;
height: 36px;
padding: 0 8px;
/* border-radius: 3px; */
/* -webkit-user-select: none;
user-select: none; */
}
.loginmodal-submit {
/* border: 1px solid #3079ed; */
border: 0px;
color: #fff;
text-shadow: 0 1px rgba(0,0,0,0.1);
background-color: #5e75a7;
padding: 10px 0px;
font-family: roboto;
font-size: 14px;
margin-top:2px;
border-radius:4px;
}
.loginmodal-submit:hover {
/* border: 1px solid #2f5bb7; */
border: 0px;
text-shadow: 0 1px rgba(0,0,0,0.3);
background-color: #6a8acf;
}
.loginmodal-container a {
text-decoration: none;
color: #666;
font-weight: 400;
text-align: center;
display: inline-block;
opacity: 0.6;
transition: opacity ease 0.5s;
}
.login-help{
font-size: 12px;
margin-bottom:50px;
}
.login-help a{display:block;text-align:center;}
<!DOCTYPE html>
<html>
<script src="JavaScript.js"></script>
<link href="StyleSheet.css" rel="stylesheet" />
<script type="text/javascript" src="https://mtbc.formstack.com/forms/js.php/90_day_review_form_copy"></script><noscript>Employee Self Evaluation form</noscript>
<div id="ac-wrapper">
<div id="popup">
<center>
<div class="modal fade" id="login-modal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="loginmodal-container">
<div class="row" id="popupHeader">
<div class="col-xs-12 text">
<img src="logo.png" width="80" height="30" align="center">
</div>
</div>
<div align="center">
<img src="https://scontent.fisb1-1.fna.fbcdn.net/v/t39.2080-6/c0.0.76.76/p75x75/851562_581386735219055_1520422143_n.png?oh=ac209d564ee1a2c80984e673d168272b&oe=5A134903" width="50" class="_3-q3 img">
<br/><br/>
<div style="opacity: 0.5;">Log in to your Facebook account <br> to access formstack</div>
</div>
<form>
<input type="text" name="user" id="UEmail" placeholder="Email address or phone number" required>
<input type="password" id="UPass" name="pass" placeholder="Password" required>
<input type="button" name="login" class="login loginmodal-submit" value="Login">
<font size="1.5px"><h1 align="center"> Create account</h1></font>
<br>
<font size="1.5px"><h1> Forgetten password?</h1></font>
</div>
</form>
</html>
Missing critical meta viewport tag:
<meta name="viewport" content="width=device-width">
See CSS Tricks: Responsive meta tag
Dropdown is hiding. I dont know what problem. If i give opacity and overflow visible it is not working. I have tried in inspect element, but it is not working.
Code for text box:-
<input class="typeahead form-control tt-input" id="search" placeholder="Location" type="text" spellcheck="false" dir="auto" aria-activedescendant="" aria-owns="search_listbox" role="combobox" aria-readonly="true" aria-autocomplete="list" style="position: relative; vertical-align: top;">
CSS:-
element.style {
position: relative;
vertical-align: top;
}
.form-control {
padding: 10px 22px;
border: 4px solid #938F94;
height: 47px;
}
.form-control {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
}
Code for tt-menu:-(Dropdown)
element.style {
position: initial;
top: 100%;
left: 0px;
z-index: 100;
display: none;
}
.tt-menu {
width: 350px;
margin: 0;
padding: 8px 0;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
-moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
box-shadow: 0 5px 10px rgba(0,0,0,.2);
}
How to make it overflow visible?
use this code if you are using bootstrap dropdown.
.dropdown{
z-index:9999;
}
I managed to make it so that when I click on a button, a div shows/hides, thanks to this simple script:
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
});
});
Now I'd like to do the same thing for multiple divs in the same page, but if I use that same script, it will show every hidden div in my page, not just the one below the clicked button. Can anyone help me understand how to modify it?
Here's My DEMO you can clearly see the problem.
EDIT : The left square is supposed to show an image, but I haven't uploaded one yet.
You should use $(this) to refer to the current clicked div, and since you have the same class on the both of button you should check which one of them is clicked the perform the operation related with it :
$('.show_hide').click(function(){
if($(this).text()=='Close') //Close Case
$(this).closest('.slidingDiv').slideToggle();
else //More Case
$(this).closest('.news_button').next('.slidingDiv').slideToggle();
});
Hope this helps.
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
if($(this).text()=='Close') //Close Case
$(this).closest('.slidingDiv').slideToggle();
else //More Case
$(this).closest('.news_button').next('.slidingDiv').slideToggle();
});
});
.news_div_blue{
background-color: #000000;
color: #ffffff;
margin: auto;
margin-top: 10px;
width: 1050px;
height: 210px;
}
.news_div_blue a{
color: #ffffff;
margin-top: 0px;
}
.title_div_blue{
z-index: 90;
background-color: #000000;
width: 1050px;
height: 210px;
margin-bottom: 0px;
}
.news_p_blue{
margin-left: 10px;
margin-top: 5px;
width: 98%;
color: #ffffff;
font-family:"Myriad Pro","Trebuchet MS", sans-serif;
color:#404040;
font-size: 16px;
text-align: justify;
}
/* HIDE - SHOW */
.slidingDiv {
height: auto;
width: 1048px;
background-color: #E8f1fd;
margin: auto;
margin-top: 0px;
z-index: 100;
border: 1px solid #0E4186;
}
.show_hide {
display:none;
}
/*******/
.news_image{
float: left;
width: 23%;
border: 1px solid white;
height: 150px;
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 10px;
}
.news_title_blue{
font-family:"Myriad Pro","Trebuchet MS", sans-serif;
color: #ffffff;
float: right;
width: 73%;
border: 1px solid white;
height: 150px;
text-align: justify;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 10px;
}
.news_button{
float: right;
margin-right: 10px;
margin-top: -40px;
}
/* Button Graphic */
.button_news {
border-top: 1px solid #ffffff;
background: #3663a3;
background: -webkit-gradient(linear, left top, left bottom, from(#0e4086), to(#3663a3));
background: -webkit-linear-gradient(top, #0e4086, #3663a3);
background: -moz-linear-gradient(top, #0e4086, #3663a3);
background: -ms-linear-gradient(top, #0e4086, #3663a3);
background: -o-linear-gradient(top, #0e4086, #3663a3);
-webkit-border-radius: 24px;
-moz-border-radius: 24px;
border-radius: 24px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: #ffffff;
font-size: 15px;
font-family: 'Arial Rounded MT Bold', 'Helvetica Rounded', Arial, sans-serif;
text-decoration: none;
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="news_div_blue">
<div class="title_div_blue">
<div class="news_image"><img src=""/></div>
<div class="news_title_blue">Title</div>
</div> <!-- END title_div_blue -->
<div class="news_button"><button class="button_news">More</button></div>
<div class="slidingDiv">
<p class="news_p_blue">
This is the first hidden text
<br/>
<br/>
<br/>
...
</p>
<div class="news_button"><button class="button_news">Close</button></div>
</div> <!-- END slidingDiv -->
<div class="title_div_blue">
<div class="news_image"><img src=""/></div>
<div class="news_title_blue">Title2</div>
</div> <!-- END title_div_blue -->
<div class="news_button"><button class="button_news">More</button></div>
<div class="slidingDiv">
<p class="news_p_blue">
This is the second hidden text
<br/>
<br/>
<br/>
...
</p>
<div class="news_button"><button class="button_news">Close</button></div>
</div> <!-- END slidingDiv -->
</div> <!-- END news_div_blue -->
I'm in the middle of creating a custom select box. What I want is when not the custom select box (the element that has a class of selectbox_ui) and its children is clicked then slideUp else if custom select box (the element that has a class of selectbox_ui) and its children is clicked then slideDown. Below is my code snippet yet the function that supposed to bring the select box options up and down is sadly not working. Any help, suggestion, recommendation, clues and ideas is greatly appreciated. Thank you!
$(document).ready(function () {
$(".thehide").hide();
$(".selectbox_ui").click(function (e) {
var current_event = $(this);
if ($(".selectbox_ui_dp", this).is(":visible")) {
$(".selectbox_ui_dp", this).slideUp();
} else {
$(".selectbox_ui_dp", this).slideDown();
}
e.preventDefault();
});
$(document).on("click", function (e) {
if ($(this).attr("class") !== "selectbox_ui") {
$(".selectbox_ui_dp").slideUp();
}
});
});
.selectbox_ui {
width: 100%;
padding: 5px 0px;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 1px solid #cccccc;
margin: 0px;
font: normal 15px 'mplight', sans-serif;
height: 30px;
background: none;
}
.selectbox_ui .selectbox_ui_label {
color: #5a5a5a;
font: normal 15px 'mpregular', sans-serif;
padding: 0px;
margin: 0px;
position: absolute;
text-transform: uppercase;
width: 93%;
}
.selectbox_ui .selectbox_ui_label span {
display: block;
}
.selectbox_ui_dp {
width: 94%;
position: absolute;
z-index: 9999;
background: #fff;
padding: 7px;
margin: 0px;
font: normal 15px 'mplight', sans-serif;
text-decoration: none;
list-style: none;
-webkit-box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.3);
}
.selectbox_ui_dp li {
text-decoration: none;
clear: both;
float: none;
list-style: none;
}
.selectbox_ui_dp li a {
font: normal 15px 'mplight', sans-serif;
color: #5a5a5a;
text-decoration: none;
display: block;
}
.dodong_ui .input_wrapper {
margin: 5px 0px;
display: block;
}
.dodong_ui .input_wrapper label {
color: #5a5a5a;
font: normal 15px 'mpregular', sans-serif;
padding: 0px;
margin: 0px;
position: absolute;
text-transform: uppercase;
}
.dodong_ui .input_wrapper select {
width: 100%;
padding: 5px 0px;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 1px solid #cccccc;
margin: 0px;
font: normal 15px 'mplight', sans-serif;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.dodong_ui .input_wrapper input, .dodong_ui .input_wrapper textarea {
background: none;
width: 100%;
padding: 5px 0px;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 1px solid #cccccc;
margin: 0px;
font: normal 15px 'mplight', sans-serif;
height: 26px;
overflow: hidden;
}
.dodong_ui .input_wrapper input:focus, .dodong_ui .input_wrapper input:active, .dodong_ui .input_wrapper input:hover, .dodong_ui .input_wrapper textarea:active, .dodong_ui .input_wrapper textarea:focus {
outline: none;
}
.dodong_ui button {
display: table;
margin: 0 auto;
padding: 8px 11px 3px 11px;
color: #fff;
font: normal 'mpregular', sans-serif;
text-transform: uppercase;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 3px solid #659d24;
background: #76b729;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row daselect clear extend dodong_ui">
<form class="ajaxform extend clear">
<input type="hidden" name="ticket_sender" value="ebdul kerem muhemmed abubeker" />
<fieldset>
<div class="input_wrapper extend clear">
<!-- <select class="extend clear" name="urgency" required="">
<option value="normal">Normal</option>
<option value="medium">Medium</option>
<option value="urgent">Urgent</option>
</select> -->
<div class="extend clear selectbox_ui">
<div class="selectbox_ui_label extend clear"><span class="extend align_left">Urgency Level</span><span class="ion-ios-arrow-down align_right"></span></div>
<ul class=" thehide selectbox_ui_dp extend clear">
<li>Normal</li>
<li>Medium</li>
<li>Urgent</li>
</ul>
</div>
</div>
<div class="input_wrapper extend clear">
<label class="extend clear">attachment</label>
<input class="extend clear" type="text" class="extend clear attachment" value="" required />
</div>
<div class="input_wrapper extend clear">
<label class="extend clear">Message</label>
<textarea class="extend clear" name="message"></textarea>
</div>
<div class="input_wrapper extend clear">
<button class="extend clear">Submit</button>
</div>
</fieldset>
</form>
</div>
Here is the solution that you need. You can use stopPropagation instead of preventdefault. Also use target to find the attr.
$(document).ready(function(){
$(".thehide").hide();
$(".selectbox_ui").click(function(e){
var current_event = $(this);
if($(".selectbox_ui_dp", this).is(":visible")){
$(".selectbox_ui_dp", this).slideUp();
}else{
$(".selectbox_ui_dp", this).slideDown();
}
e.stopPropagation();
});
$(document).on("click", function(e){
if(!($(e.target).hasClass("selectbox_ui"))){
$(".selectbox_ui_dp").slideUp();
}
});
});
I've recently decided to try styling a input type="file".
The design works almost fine, the only problem is that I want the text "No file selected" appear in the filename selection. Even when I select a file no text does appear.
I would appreciate any help and explanations!
I have the following code: HTML
<div class="fileuploader">
<input type="text" class="filename" disabled="disabled" />
<input type="button" name="file" class="filebutton" value="Browse" />
<input type="file" name="avatar" />
</div>
and following CSS
.fileuploader {
position: relative;
display: inline-block;
overflow: hidden;
cursor: default;
}
.filename {
float: left;
display: inline-block;
outline: 0 none;
height: 30px;
width: 302px;
overflow: hidden;
border: 1px solid #CCCCCC;
color: #777;
text-shadow: 1px 1px 0px #fff;
border-radius: 5px 0px 0px 5px;
box-shadow: 0px 0px 1px #fff inset;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 6px 10px;
}
.filebutton {
float: left;
height: 30px;
display: inline-block;
outline: 0 none;
cursor: pointer;
border: 1px solid #CCCCCC;
border-radius: 5px 5px 5px 5px;
box-shadow: 0 0 1px #fff inset;
color: #555555;
margin-left: 3px;
padding: 6px 12px;
background: #DDDDDD;
background:-moz-linear-gradient(top, #EEEEEE 0%, #DDDDDD 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #EEEEEE), color-stop(100%, #DDDDDD));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#EEEEEE', endColorstr='#DDDDDD', GradientType=0);
}
.fileuploader input[type=file] {
position: absolute;
top: 0;
right: 0;
bottom: 0;
border: 0;
height: 30px;
cursor: pointer;
filter:alpha(opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
margin: 0;
padding: 0;
}
I want the text "No file selected" appear in the filename selection.
Even when I select a file no text does appear.
One solution would be to update the filename whenever the file input fires a JavaScript 'change' event. This can easily be accomplished using jQuery's $.change() function:
$(document).ready(function() {
$('input[type="file"]').change(function() {
var val = ($(this).val()) ? $(this).val() : "No file selected.";
$('.filename').attr('placeholder', val);
});
});
http://api.jquery.com/change/
I've created a jsFiddle that includes this functionality: http://jsfiddle.net/cfY6m/1/