getting a button to respond in size to responsive div - javascript

I have a Google Map within a responsive div so that the map changes size depending on screen size, which is working perfectly. I also have a button above the map. I need this button to always be the same width of the map, is this possible?
My column:
<div class="col-lg-6">
<br />
<p>
<button style="width:60vh" formtarget="_blank"
onclick="window.open('https://www.google.com/maps/search/?api=1&query=#Model.OfficialSchoolName+#Model.Address1+#Model.County+#Model.Eircode')"
type="button" class="btn btn-primary">
<span class="glyphicon glyphicon-road" aria-hidden="true"></span>
Get Directions
</button>
</p>
<div class="embed-responsive embed-responsive-16by9">
<div id="map" class="embed-responsive-item"
style="border: 1px solid black;"></div>
</div>
</div>
How it looks currently at full screen size (perfect):
How it looks currently at small screen size (button is too large):

At first: Please don't use a button when its purpose is the same as an link / anchor. So please use an <a href="…"> element and style it like a button.
The solution for your problem is to use relative sizes that doesn't depend on the screen size. You can use the following solution:
<p>
<a style="width:100%" href="https://www.google.com/maps/search/?api=1&query=#Model.OfficialSchoolName+#Model.Address1+#Model.County+#Model.Eircode"
class="btn btn-primary">
<span class="glyphicon glyphicon-road" aria-hidden="true"></span>
Get Directions
</a>
</p>

It's hard to replicate without having your google maps api key, however i would try and put the map and the button in the same div container and give the width of the button and map div the same percentage
<div class="container">
<div class="button">
<!-- button here -->
</div>
<div class="map">
<!-- map here -->
</div>
</div>
.button {
width: 100%;
}
.map {
width: 100%;
}
You will just then need to set the property of your button and map to 100% width as they will both be in their own containers
working example can be found here https://codesandbox.io/s/awesome-dust-7hkpz

Related

Adding div inside another div without separate scope

I have project, where I need to add popup form. Here is my project structure.
<body>
<div class="header">ART Compiler Explorer </div>
<div class="container">
<div class="box1">
<div id="inside" >
<label for="input-file" class="custom-file-upload">Select Java File</label>
<select class="tab" name="android" id="android"> </select>
</div>
<textarea id="editor" name="field1"><?php if(isset($_POST['field1'])){echo htmlentities ($_POST['field1']);}?>
</textarea>
</div>
<div class="box1 box2">
<div id="second" >
<select class="tabb" name="launguage" id="launguage" onchange='this.form.submit()' > </select>
<button type ="button" class="btn" onclick='this.form.submit()'>Refresh</button>
</div>
</div>
</div>
</body>
I want to add popup form under div id="inside"
which have code structure like:
<button class="add" onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Add ToolChain</button>
<div id="id01" class="modal">
<div class="imgcontainer">
</div>
<div class="container_form">
</div>
</div>
The problem I am facing is The popup does not come in fully as in above link, instead it get hidden by first half text editor (see the blue colour line, which get shifted by left).
It seems popup div id "id01"make seperate space inside the div id ="inside", so not coming properly. Please suggest me how to tackle this problem as I have to add popup form under div id="inside", but this pop up form contain itself another div which make separate space.
Please help me to resolve this problem.
The popup is not coming over the textarea because of z-index, add z-index:4 to your popup modal so that it can come on top of the textarea.
.modal {
z-index:4
}

Why doesn't the 'next button' work in a smaller screen?

I am trying to modify this code from site point, but I can't figure out why the 'next' button doesn't work in the screen size of 345px and below. What is the problem? I appreciate your help. Please see here for the complete code:
https://codepen.io/SitePoint/pen/GmPjjL
<h1>Quiz on Important Facts</h1>
<div class="quiz-container">
<div id="quiz"></div>
</div>
<button id="previous">Previous Question</button>
<button id="next">Next Question</button>
<button id="submit">Submit Quiz</button>
<div id="results"></div>
Because label tag overlap the button tag
It doesn't work because your previous label tag is overlapping the button tag.
Change the position of the button and apply z-index to fix it.
button{
position: relative;
z-index: 4;
}
New Codepen Link

Load iFrame On Click

I have 20 iframes on one page and I am trying to prevent all of them loading at once. The iframes are generated by a shortcode, so it's not as easy as inputting the source URL onclick. Is there a way to do this once the iframe code has already been generated.
When #file-1 is clicked, I wanted to load the iframe in the wrapper #file-1-p
<h4 id="file-1" class="click files shadow">Seven Habits Profile</h4>
<section id="file-1-p" class="popup white big-shadow">
<div class="popup-wrapper">
<div class="ex purple shadow">
<div>
<span class="f-white">X</span>
</div>
</div>
<div class="ead-preview"><div class="ead-document" style="position:relative;padding-top:90%;"><iframe src="//docs.google.com/viewer?url=http%3A%2F%2Fyourroundtable.com%2Fwp-content%2Fuploads%2F7_Habits_Profile.pdf&embedded=true&hl=en" title="Embedded Document" style="width:100%; height:100%; border: none; position: absolute;left:0;top:0;"></iframe></div><p class="embed_download">Download [49.83 KB] </p></div>
</div>
</section>

Image div class and margin class

I am using bootstrap for the following mark-up and adding in my own classes of css where needed to style the pages how they are required
.sm-margin {
margin-top: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col">
<div class="thumbnail">
<a href="menu.php">
<img src="img/turkey.jpg" alt="Turkey dinners" style="width:100%">
<div class="caption text-center sm-margin">
<p><button type="button" class="btn btn-success">Check out our menu</button></p>
</div>
</a>
</div>
</div>
I am unclear to why the .sm-margin doesn't add the small margin at the top - see it in effect on my website here
The margin is added to the top of your button in the website
U can inspect and un check the checkbox of your class to see the difference if u use that css class or not...
My code was correct, it was a browser error. I cleared my cache on the Chrome browser and it corrected it.
Thanks all for input.

Bootstrap make part of the image clickable

Fairly new to this. At the moment I have an image and a button in one of the containers in my front page. I'm trying to embed that button into that image. Should I
make part of that image clickable, and let that trigger a function?
or force that button to float on certain position of that picture?
Or is there another way that I should follow? and how do I implement this? Many thanks!
<div class="col-md-10 col-lg-offset-1 text-center">
<img src="../img/background.png" class="rounded" alt="">
<button type="button" id="s" class="btn" >Make payment</button> //I'm trying to have this button float on that image above
</div>
You can use position: absolute to make it float on the image. look at this
https://jsfiddle.net/5ueau24b/1/
#s
{
position: absolute;
margin-left: -200px;
margin-top: 130px;
}
<div class="col-md-10 col-lg-offset-1 text-center">
<img src="http://www.planwallpaper.com/static/images/images_1_05GM1zY.jpg" class="rounded" alt="">
<button type="button" id="s" class="btn" >Make payment</button> //I'm trying to have this button float on that image above
</div>
Try using imagemap of html. (map tag in specific)

Categories