<div class="container vertical-center" style="background: url('background.png')";>
<div class="row">
<div class="panel panel-primary">
<div class="panel-heading">LOGIN</div>
<div class="panel-body">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">
<span class="glyphicon glyphicon-user"></span>
</span>
<input type="text" class="form-control" placeholder="Username" />
</div>
<br />
<div class="input-group">
<span class="input-group-addon" id="basic-addon2">
<span class="glyphicon glyphicon-lock"></span>
</span>
<input type="text" class="form-control" placeholder="Password" />
</div>
</div>
<div class="text-center">
<button type="button" class="btn btn-primary btn-sm" style="align-content: center">Submit</button>
</div>
<br />
<div class="panel-footer">Trademark</div>
</div>
</div>
</div>
this is my code i have written the entire code i dont know why stack
overflow is displaying like this....
please help me regarding this
IMAGE IS HERE
SKYRIM BACKGROUND
You can try change your first line to
<div class="container vertical-center" style="background: url('background.png'); background-repeat: repeat;">
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
this is the code that works properly.
makes background image responsive as well.
found answer on stackoverflow only
Related
I have a Bootstrap 5 carousel with captions. Is it possible to add any class to the div containing the carousel-item or the carousel-caption to put the captions in the centre of the slide? Or I still need to use CSS as in older versions (below)? I tried align-middle and similar classes but without success.
Eg. Old solution from Fiddle:
.carousel-caption {
top: 0;
bottom: auto;
}
Can't really find a good combination of just using utility class to achieve what you want, but able to find a minimum way where still need to define a manual class :
.carousel-caption {
transform: translateY(50%);
}
and then add bottom-50 to carousel-caption. Since so it could rather just write
.carousel-caption {
transform: translateY(50%);
bottom: 50% !important;
}
LOL :)
#carouselExampleCaptions {
width: 600px;
height: 400px;
}
.carousel-caption {
transform: translateY(50%);
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<div id="carouselExampleCaptions" class="carousel slide">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://rb.gy/18mzdx" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block bottom-50">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://rb.gy/18mzdx" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block bottom-50">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://rb.gy/18mzdx" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block bottom-50">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
I am using Firefox Quantum.
It's something different than Mozzila firefox. I can't use firebug now as it is not supporting.How can i verify that the i am on a different frame.
As currently i can't write on the popup message. Maybe it is on different frame.
Can anyone explain me with proper example.
The HTMLM of the code is:-
<div class="store_form">
<div class="row">
<div class="col s12 m12 marg-top">
<div class="row">
<div class="col s12 m6 store_band_contact">
</div>
<div class="col s12 m6 store_add_left">
</div>
</div>
</div>
<form id="form_contact" class="col s12 m12" novalidate="novalidate">
<div id="errorMsg"></div>
<!-- <div class="row">
<p class="col s12" style="font-size: 15px;" >
<strong id="buyer_company"></strong>
</p>
</div> -->
<!-- <div class="row">
<p class="col s12" id="">Subject: Request to remove my bid
</p>
</div> -->
<div class="row">
<div class="input-field col s12">
<span class="editFiledHeading">Request to remove my bid</span>
<!-- Contact Seller -->
<textarea name="comment" maxlength="20000" id="comment" class="ckeditor" placeholder="" style="visibility: hidden; display: none;"></textarea><div id="cke_comment" class="cke_1 cke cke_reset cke_chrome cke_editor_comment cke_ltr cke_browser_webkit" dir="ltr" lang="en" role="application" aria-labelledby="cke_comment_arialbl" style="width: 99.8%;"><span id="cke_comment_arialbl" class="cke_voice_label">Rich Text Editor, comment</span><div class="cke_inner cke_reset" role="presentation"><span id="cke_1_top" class="cke_top cke_reset_all" role="presentation" style="height: auto; user-select: none;"><span id="cke_12" class="cke_voice_label">Editor toolbars</span><span id="cke_1_toolbox" class="cke_toolbox" role="group" aria-labelledby="cke_12" onmousedown="return false;"></span></span><div id="cke_1_contents" class="cke_contents cke_reset" role="presentation" style="height: 200px;"><span id="cke_16" class="cke_voice_label">Press ALT 0 for help</span><iframe src="" frameborder="0" class="cke_wysiwyg_frame cke_reset" title="Rich Text Editor, comment" aria-describedby="cke_16" tabindex="0" allowtransparency="true" style="width: 439px; height: 100%;"></iframe></div></div></div>
<input type="hidden" name="bid" id="bid_id" value="1035">
</div>
</div>
<div class="row" style="margin-top: 10px;">
<div class="col s6">
<p style="margin: 5px 0 0;">
<input type="checkbox" name="is_copy" id="is_copy" value="1">
<label for="is_copy">Send me a copy</label>
</p>
</div>
<div class="col s6">
<span class="right remainingLimit" id="comment_label" data-length="2500">Remaining: 2500</span>
</div>
</div>
<div class="row">
<div class="col s12">
<p class="defaultP">
If you like to remove a bid you can do that by
sending the request to the seller. Please make
sure that you state the reason for doing this.
Obvious accidents by using the wrong value are
easy to justify.
Please note that it is up to the seller to accept
or decline your request!
</p>
</div>
</div>
<div class="row">
<div class="col s12 center" style="margin: 20px 0 15px;">
<button class="transParentBtnSmall">Submit</button>
</div>
</div>
</form>
</div>
</div>
I want to click on all View Contact tabs in webpage,there are 10 View Contact tabs in webpage. each tabs having the same html code
Please see the image of webpage.
https://i.stack.imgur.com/vTocP.jpg
my html code:-
<input type="button" class="boxOpener btn blue b" style="width: 150px;font-size: 14px;" value="View Contact">
<input type="button" class="boxOpener btn blue b" style="width: 150px;font-size: 14px;" value="View Contact">
The HTML is :
<div id="226235653" class="lmsSearchTpl1">
<div class="lmsSearchTplDetail">
<div class="lmsTplQualify">
<span class="hasEllipse">
<i class="lmsIcons requirement-verified-tuple"></i>
<div id="expelipse" class="infoTip f12 ital tool_tip6" style="width: 200px; top: 40px; left: -15px; display: none;"><em class="upPin"></em><em class="text">Verified: Lead’s information has been verified by our system.</em></div>
</span>
<!-- Classes of such icons : mobile-verified-tuple, mobile-exist-tuple, requirement-verified-tuple -->
</div>
<div class="clearAfter">
<div class="bulkSmsTupleCheckboxDiv lf" style="width: 4%;display: none;">
<input type="checkbox" class="bulkSmsTupleCheckbox" id="tuplecheckbox_226235653" value="226235653_27395571" onclick="leadSrch.listUnlistForSms(this)">
</div>
<div class="lf lmsIndName">
Arjun Singh </div>
<div class="rf lmsTplDate">
<span>Received : </span>
<span class="sb" style="color: #666;">10 Dec 2017</span>
</div>
</div>
<div class="clearAfter rel">
<div class="lf lmsTypeAndAddress f13">
<div>
<span class="sb"><span>Residential Apartment</span></span>
<span>for</span>
<span class="sb">Rent</span>
</div>
<div>
<span>City :</span>
<span class="sb"><span>Kolkata South</span></span>
<span> | </span>
<span>Locality : </span>
<span class="sb"><span>Tollygunge</span></span>
</div>
</div>
<div class="rf">
<i></i>
</div>
</div>
<div class="clr" style="height: 10px;"></div>
<div class="clearAfter tabularFacts">
<div>
<div>Min Budget</div>
<div>5,000 </div>
</div>
<div>
<div>Bedrooms</div>
<div>2 BHK</div>
</div>
<div>
<div>Car Parking</div>
<div>----</div>
</div>
<div>
<div>Furnishing</div>
<div><span>Unfurnished</span></div>
</div>
<div>
<div>Tenant Type</div>
<div>----</div>
</div>
<div>
<div>Projects</div>
<div>----</div>
</div>
<div>
<div>Preferred Call Time</div>
<div>Any Time</div>
</div>
<div>
<div>Site Visit </div>
<div>----</div>
</div>
</div>
<div class="clearAfter tabularOtherFacts mt20">
<div>
<span>Requirements : </span>
<span>----</span>
</div>
</div>
</div>
<div class="lmsViewMoreLine clearAfter">
<div class="lf" style="padding: 0px 15px 5px 15px;">
<a id="vmr_226235653" href="javascript:void(0);" class="vmr inlineMiddleChild lmsViewMore">
<span>
View more requirements from this buyer
</span>
<i class="lmsIcons lmsBlueArrow ml5"></i>
</a>
<div class="clr" style="height: 10px;"></div>
<div id="vmrWrap_226235653" class="otherAssociateLeads" style="display:none;">
<div class="clr pdt8"></div>
</div>
</div>
<div class="rf lmsSearchControls">
<div class="lmsCredits">
<span class=" numCredits">1.00</span>
<span>Credit(s)</span>
</div>
<div class="lmsLookout">
<i class="lmsEye lmsIcons"></i>
<span id="viewTime">0 Time(s)</span>
</div>
<div>
<input type="button" class="boxOpener btn blue b" style="width: 150px;font-size: 14px;" value="View Contact">
</div>
</div>
<div class="lmsTplConfirm clr confirmBox" style="background-color: rgba(134, 134, 134, 0.05);display: none;">
<div class="lmsTplConfirmQues">
<div class="f13 grey">
You cannot view this lead's contact details.
</div>
</div>
<div class="lmsTplConfirmAns clearAfter" style="display: none">
<div class=" clearfix" style="display:block">
<div class="clr f14 lf grey"> Some error has occurred. Please refresh your search and try again. </div>
</div>
</div>
</div>
</div>
</div>
To click the View Contact button for Arjun Singh you can use the following xpath :
"//div[#class='lf lmsIndName']//following::input[#class='boxOpener btn blue b']"
I am having issues making the text area fill the width of the panel any ideas??
My code is below
<div class="panel panel-primary">
<div id="div_EssentialInformation" class="panel-heading">Essential information</div>
<div id="content" style="display:none;">
<div class="panel-body">
<textarea class="form-control" rows="3" style="resize:none;"></textarea>
</div>
<div class="panel-footer clearfix">
<div class="pull-right">
<a id="btn_edit" class="btn btn-primary">Edit</a>
<a id="btn_save" class="btn btn-danger" style="display:none">Save</a>
</div>
</div>
</div>
</div>
i have a script that toggles the display of the content div, below is the js script
$("#div_EssentialInformation").click(function () {
$("#content").slideToggle(500);
})
I am getting this
Add this to your css
textarea {
width: 100% !important;
}
I'm using Bootstrap, I have a registration form. When register button is clicked, I call ajax to send the form. While remote page is executing, I'd like to overlay the form with a div with a message like "Please wait" How can I overlay the row with exact size.
This is my form:
<div class="row">
<div class="col-xs-12 col-sm-8 col-md-6 col-sm-offset-2 col-md-offset-3">
<form id="forminscr" method="post">
<h2>Registration <small></small></h2>
<hr class="colorgraph">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="text" name="name" id="name" class="form-control input-lg" placeholder="Name" tabindex="1">
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="text" name="surname" id="surname" class="form-control input-lg" placeholder="Surname" tabindex="2">
</div>
</div>
</div>
<div class="form-group">
<input type="text" name="company" id="company" class="form-control input-lg" placeholder="Company" tabindex="3">
</div>
<div class="form-group">
<input type="email" name="email" id="email" class="form-control input-lg" placeholder="Adresse email" tabindex="4">
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="password" name="mdp" id="mdp" class="form-control input-lg" placeholder="Mot de passe" tabindex="5">
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="password" name="mdp2" id="mdp2" class="form-control input-lg" placeholder="Confirmer" tabindex="6">
</div>
</div>
</div>
<hr class="colorgraph">
<div class="row">
<div class="col-xs-12 col-md-6"><input type="submit" value="Register" class="btn btn-primary btn-block btn-lg" tabindex="7"></div>
<div class="col-xs-12 col-md-6">Login</div>
</div>
</form>
</div>
http://jsfiddle.net/stjyjgmb/
you set "please-wait" class in your ajax.
CSS Code
.please-wait{
background-color: rgba(0, 0, 0, 0.8);
bottom: 0;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 99;
display:none;
}
.please-wait-text{
border: 1px solid #ffffff;
border-radius: 4px;
color: #ffffff;
float: left;
font-size: 22px;
left: 38%;
padding: 20px;
position: absolute;
top: 40%;
width: auto;
}
Js Code
$( document ).ready(function() {
setTimeout(function(){
$('.please-wait').show();
}, 3000);
});
[
// A $( document ).ready() block.
$( document ).ready(function() {
setTimeout(function(){
$('.please-wait').hide();
}, 3000);
});
.please-wait{
background-color: rgba(0, 0, 0, 0.8);
bottom: 0;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 99;
}
.please-wait-text{
border: 1px solid #ffffff;
border-radius: 4px;
color: #ffffff;
float: left;
font-size: 22px;
left: 38%;
padding: 20px;
position: absolute;
top: 40%;
width: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<div class="row">
<div class="col-xs-12 col-sm-8 col-md-6 col-sm-offset-2 col-md-offset-3">
<form id="forminscr" method="post">
<h2>Registration <small></small></h2>
<hr class="colorgraph">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="text" name="name" id="name" class="form-control input-lg" placeholder="Name" tabindex="1">
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="text" name="surname" id="surname" class="form-control input-lg" placeholder="Surname" tabindex="2">
</div>
</div>
</div>
<div class="form-group">
<input type="text" name="company" id="company" class="form-control input-lg" placeholder="Company" tabindex="3">
</div>
<div class="form-group">
<input type="email" name="email" id="email" class="form-control input-lg" placeholder="Email" tabindex="4">
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="password" name="mdp" id="mdp" class="form-control input-lg" placeholder="Password" tabindex="5">
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="password" name="mdp2" id="mdp2" class="form-control input-lg" placeholder="Confirm" tabindex="6">
</div>
</div>
</div>
<hr class="colorgraph">
<div class="row">
<div class="col-xs-12 col-md-6"><input type="submit" value="Register" class="btn btn-primary btn-block btn-lg" tabindex="7"></div>
<div class="col-xs-12 col-md-6">Login</div>
</div>
<div class="please-wait"><div class="please-wait-text">
Please Wait...
</div></div>
</form>
</div>
</div>
Demo