I have some problem guys.
I have to delete the content of my with .html() jquery function. All worked fine, but the footer of my iphone phonegap app go to upper. But when I comment or erase the content of my directly in my html code, all is ok, the footer of my app stay in his place. Please help me.
Here is my code snippets:
<script id="div_mainheader" type="text/html">
<div id="check_place">
<div id="idcheckin" style="width: 210px; position: relative;" align="left" class="mystatus2 clickable" onclick='showPartnersNearYouPopUp();'>
<div id="leave" style="top: 81px;"><img src="graphics/picker.png" style="margin-left: 5px; margin-top: 5px; margin-bottom: -1px;">
CHECK A PLACE ...
</div>
</div>
<div id="idbtleave" style="position: absolute; top: 81px; left: 270px;">
<button id="btleave" class="checkout-button" type="button">{{Localize.quit}}</button>
</div>
</div>
</script>
And this is the function that I call to erase the content of my :
$('#check_place').html('');
I've also tried document.getElementById('check_place').innerrHTML = ''; but it's the same thing with .html()
Please help me. Thanks a lot.
Use
$('#check_place').empty();
Related
I'm using bootstrap 4 input-group and appending or pretending my inputs with add-ons as labels.
For the inputs its looking good. Now I need a multi-line add-on or label for text area.
I'm looking for best possible solution in Bootstrap or CSS.
Here is the code I'm trying.
<style>
.h-unset {
height: unset !important;
}
.multiline-label {
display: inline-block;
word-wrap: break-word;
word-break: break-word;
width: 100%;
}
</style>
<div class="input-group input-group-sm mb-3 row mx-0">
<div class="input-group-prepend col-md-3 px-0">
<label for="naastVastgoedbeleg-ging"
class="input-group-text w-100 rounded-0 multiline-label h-unset"
id="label-naastVastgoedbeleg-ging">
<strong>Werkzaamheden naast vastgoedbeleg-ging (bijv. loondienst of onderneming)</strong>
</label>
</div>
<textarea id="naastVastgoedbeleg-ging"
class="form-control rounded-0 col-md-9 h-unset"
aria-label="naastVastgoedbeleg-ging"
aria-describedby="label-naastVastgoedbeleg-ging">
</textarea>
</div>
Thankx for helping Happy Coding!
It worked by using this css
.multiline-label strong {
white-space: pre-wrap;
}
I have added a jumbotron to my webpage, my page is now displaying the bottom and right scroll bar! Not sure how to resolve this.
Any tip's or pointers much appreciated.
url http://tyrescanner.net/contact-us
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="jumbotron">
<h1><span style="color: #ffffff;">Welcome to Tyrescanner</span></h1>
<p></p>
<h2>Contact us.</h2>
</div>
</div>
</div>
</div>
what are you asking for? I assume you just don't want bottom scrollbar ,is that right?
If so, below is your CSS for HTML . change that as below it's in your bootstrap.css file and line number 1071
html {
font-size: 10px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
overflow: auto;
overflow-x: hidden;
}
Your jumbotron is wrapped with divs row and col-md-12:
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="jumbotron">
Delete them and leave only jumbotron.
or remove paddings from your css:
.container-fluid {
width: 100%;
padding-top: 0px;
/* padding-left: 0px; */
/* padding-right: 0px; */
padding-bottom: 0px;
}
It overwrites bootstrap css and cause problem with page width.
After viewing your site I see some issues:
You're using a container-fluid and a nested container-fluid as the jumbotron parent element, the nested one is redundant.
Then I see you've overridden container-fluid and .col--12 classes default bootstrap left/right padding to 0px but you didn't change the default margin of the .row class to have 0px left/right margin hence your bottom scroll bar.
For the footer, remove the margin-top and make the footer a direct child of the body element then add the following css to the form, body and html elements: height:100%;, the rest is margins that you added to the elements.
** How to bring browse button inside text-box?
I have tried many solutions but I could not find.
Thanks-in-advance**
I had the same problem as you, if I understand it correctly.
You may want to use a javascript function to do so, or check the Mickael McGrady's solution :
http://www.quirksmode.org/dom/inputfile.html
Indeed, the display of your button/text-box depends on the version of your browser, so you may want to implement a relative button. On my website I did it in javascript which is more elegant, but if you prefer in html only :
<div class="fileinputs">
<input type="file" class="file" />
<div class="fakefile">
<input />
<img src="search.gif" />
</div>
</div>
and css :
div.fileinputs {
position: relative;
}
div.fakefile {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
input.file {
position: relative;
text-align: right;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}
<div class="fileinputs">
<input type="file" class="file" />
<div class="fakefile">
<input />
<img src="search.gif" />
</div>
</div>
(everything is detailled on the website since it's a well-known issue). Hope it helps.
I'm a beginner for web front-end design, using bootstrap to make a project prototype.
I want to do a product like this website
The features I want is
* expand carousel to full screen when visiting the website and then can scroll down to another div element.
I found this similar solution, but unfortunately it uses Carousel as the whole background.
To get the effect I want, I check the javascript src code and edit it.
modify this line (Shown on JSFIDDLE line 13 )
$('.carousel .item').css({'position': 'fixed', 'width': '100%', 'height': '100%'});
into this line (Shown on JSFIDDLE line 13 )
$('.carousel .item').css({'position': 'relative', 'width': $(window).outerWidth(), 'height': $(window).outerHeight()});
Yep, finally get the effect I want!! However, when the photo transition, a unexpected flicker appear, seems the photo is not at right location at first, then go to its right place immediately.
It's annoying when I see the content inside div below, like 1info or 2info.
here is the jsfiddle demo example for the issue.
I tried to use the solution like set z-index, but fail...
Can someone help me to solve this annoying problem? Thanks a lot!!
Here's a flicker-free version without any plugins:
HTML:
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<div id="slide1" class="fill">
<div class=" carousel-caption">
<h1>1</h1>
</div>
</div>
</div>
<div class="item">
<div id="slide2" class="fill">
<div class=" carousel-caption" >
<h1>2</h1>
</div>
</div>
</div>
<div class="item">
<div id="slide3" class="fill">
<div class=" carousel-caption" >
<h1>3</h1>
</div>
</div>
</div>
</div>
</div>
CSS:
html, body {
height: 100%;
}
.carousel, .item, .active {
height: 100%;
}
.carousel-inner {
height: 100%;
}
.fill {
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
}
#slide1 {
background-image: url('http://stylonica.com/wp-content/uploads/2014/03/Cute-Dog-Wallpaper.jpg');
}
#slide2 {
background-image: url('http://hdwallimg.com/wp-content/uploads/2014/02/White-Dog-Running-Wallpaper-HD.jpg');
}
#slide3 {
background-image: url('http://www.petfinder.com/wp-content/uploads/2012/11/122163343-conditioning-dog-loud-noises-632x475.jpg');
}
No additional javascript required, just make sure that the jquery and bootstrap.js files are linked in your page.
I have a problem here
The problem area is two images on the right side of this website using max-height:50%; is not working in Firefox.
Open the page in Chrome or Safari and it works but then open it in Firefox and it does not work.
I have tried changing the div id=rightcontent to % width, but still not working.
#total #content {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -108px; /* the bottom margin is the negative value of the footer's height
*/
}
#total #content #leftcontent {
position:relative;
width:60%;
padding-left:10%;
float:left;
}
#total #content #rightcontent {
position:relative;
max-width:237px;
float:right;
}
#total #content #rightcontent img {
position:relative;
max-height:50% !important;
float:right;
max-width:100% !important;
}
And HTML:
<div id="content">
<div id="leftcontent">
<h1>Kola <strong>STEVENS</strong> nejen prodáváme,<br/>ale hlavně na nich jezdíme.</h1>
<p></p>
</div>
<div id="rightcontent">
<div id="tst">
<img src="img/right1.png" />
<img src="img/right2.png" />
</div>
</div>
</div>
I found some similar questions like this one and I think it's a firefox way of handleing image sizes.
Your code is okay but if I was writing the code, I would use an image-wrapper for images to make it browsers cross-compatible. If you resize the page after loading in chrome you can see your images are no longer looking like before.
My solution (fiddle):
<div id="rightcontent">
<div id="tst">
<div class="image-holder">
<img src="img/right1.png" />
</div>
<div class="image-holder">
<img src="img/right2.png" />
</div>
</div>
</div>