i am struggling with an issue when using <Dropdown.Toggle>, actually the arrow moves its position slightly up when clicked, i have spend quite a bit time and tweaked few things inorder to make its position fixed but it remains the same , any suggestions/thoughts please.
Update-1 the original issue is resolved when i set the height=0px under the <Dropdown.Toggle> but now the menu that apperas after i click it appears just after the arrow below but i was expecting it to start after some padding/margin, any thoughts please
-Snippet from ReactJS
return (
<nav className="header">
<ul>
<li>
<Dropdown id="dropdownbasic" as={ButtonGroup} style={{ marginTop: "5px", position: "relative", float: "left", top: "13px" }}>
<Button .......> </Button>
<Dropdown.Toggle
className="signinDropdown"
split
variant="success"
aria-expanded="false"
// below i added the height it solved my first issue and the arrow is now still all the time
style={{ "height":"0px", background: "none", borderStyle: "none", outline: "none !important" }}
/>
<Dropdown.Menu>
<Dropdown.Item href="#/action-1">Action</Dropdown.Item>
<Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</li>
</ul>
</nav>
)
-Snippet from CSS file
```
// added the below css but still the menu starts just below the arrow
#dropdownbasic > :second-child{
top:158px;
padding-top: "13px";
}
.signinDropdown:focus,
signinDropdown.focus {
outline: none;
box-shadow: none;
background-color: none;
box-shadow: none !important;
}
Related
I am working on a simple app in Ionic.
I have a problem that the keyboard pushes my input field up and over another div while there is enough space for they keyboard. How do I fix this? I already looked around on the internet but wasn't able to find any solution to my problem.
This is what happens:
As you can see, the text is in the image and there is no reason for it being so high. There is more then enough space below it.
This is my code:
HTML:
<ion-header>
<ion-navbar>
<ion-title>Login</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding class="login content">
<div class="logo-container">
<img src="assets/imgs/Mikos_logo.jpeg" class="logo-img">
</div>
<div class="center">
<p>Vul hier je naam in:</p>
<ion-item class="code-field">
<ion-input placeholder="naam" type="text" (keyup)="nameInput()" [(ngModel)]="name"></ion-input>
</ion-item>
</div>
</ion-content>
CSS:
page-login {
.login {
background-color: #EEEEEE;
}
.logo-container{
position: absolute;
width: 400px;
left: calc(50% - 400px / 2);
}
.logo-img{
display: block;
width: 100%;
height: auto;
}
.center{
position: absolute;
top: 40%;
width: 300px;
left: calc(50% - 300px / 2);
}
#media only screen and (max-width: 600px) {
/* For mobile phones: */
.logo-container{
position: absolute;
width: 300px;
left: calc(50% - 300px / 2);
}
}
}
What I have tried:
I have added the Ionic native keyboard and added this in my app module:
IonicModule.forRoot(MyApp, { scrollAssist: false, autoFocusAssist: false } ),
This unfortunately did not work.
Update:
Adding
.scroll-content {
padding-bottom: 0 !important;
}
is also not working.
This is a known bug of Ionic 3 and can be fixed by adding the following CSS style:
.scroll-content {
padding-bottom: 0 !important;
}
I have had similar issues and this piece of CSS fixed it.
When an input is focused, Ionic adds some padding to the bottom of the scroll-content class, to create room for the keyboard.
Update
Relative top positioning may cause the issue (as well).
This person's answer helped me"
https://stackoverflow.com/a/61337530/10661436
Basically just go to your AndroidManifest.xml file,
search for:
android:windowSoftInputMode=ABC
Replace "ABC" with adjustPan
Just add this to your config.xml and make sure you have your keyboard plugin installed.
<preference name="KeyboardResizeMode" value="ionic" />
On the top of the page, I’ve got a div for which background image has been set. I want to place the fab button on the bottom right edge of this div. Exactly like the following image. How can I do this?
Just use the edge attribute that comes along with fabs:
<ion-fab bottom right edge>
<button ion-fab><ion-icon name="camera"></ion-icon></button>
</ion-fab>
For this to work the div (or any tag) having the fab inside must have position set to relative, absolute or fixed to work, position: inherit may work too depending on parent positioning.
Hope this helps.
Thanks to #Garrett and #Gabriel, I got it working using the following markup and scss. It's important to place the FAB button inside the div to which we want to assign the background image so that we can use relative positioning:
<ion-content>
<div id="header">
<ion-fab bottom right edge>
<button ion-fab><ion-icon name="camera"></ion-icon></button>
</ion-fab>
</div>
</ion-content>
And the scss file:
#header {
background-image: url('../assets/images/anonymous.jpg')!important;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
height: 25vh;
}
ion-fab {
position: relative;
}
ion-fab[bottom][edge] {
bottom: -21vh;
}
.fab {
margin-right: 3vw;
}
Here is what I could get to work.
This works by creating a fab-container that is going to overlay the main container on this page. For this to work you need to know their heights. Then we make the fab-container z-index of 1 to be on top. Then we can use flex to make the fab be in the bottom right. Then we can add a margin-top half the size of the fab to the fab-container to have the fab hover halfway in-between. Lastly we can add margin-right to get the fab off the right side.
This may not be the best way to do it, since it requires knowing the height of your container, but it was the way that I would approach this task.
<ion-content>
<div class="container"></div>
<div class="fab-conatainer">
<ion-fab class="fab">
<button ion-fab>
<ion-icon name="camera"></ion-icon>
</button>
</ion-fab>
</div>
<div class="contacts-container">
<ion-list>
<ion-item>
<ion-input placeholder="Name"></ion-input>
</ion-item>
<ion-item>
<ion-input placeholder="Phone"></ion-input>
</ion-item>
<ion-item>
<ion-input placeholder="Email"></ion-input>
</ion-item>
</ion-list>
</div>
</ion-content>
CSS
.container {
width: 100%;
background: #333;
height: 500px;
}
.fab-conatainer {
display: flex;
justify-content: flex-end;
align-items: flex-end;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 500px;
z-index: 1;
margin-top: 28px;
}
.fab {
margin-right: 14px;
}
I'm working on a digital textbook feature that would allow the student to click a link to open up a simple div form for them to input their answer to that specific question. The pop-up form is just simple HTML/CSS with some jQuery UI to hide, show, and make it draggable. Here's the twist. I've got multiple questions that each need to be attached to a unique div. No problem, I thought. I'll just set each a href to link back to a unique ID that I've assigned within the DIV. Problem is, I can't seem to target the proper DIV with its corresponding a href. Instead the same set of questions appear no matter which link is clicked. This seems super simple and I'm probably overcomplicating it. What can I do here?
HTML:
<div id="draggable" class="messagepop pop">
<form method="post" id="new_message" action="/answers">
<p><label for="body">What type of person is Carsten?</label><textarea rows="15" name="body" id="body" cols="55"></textarea></p>
<p><label for="body">How do you know?</label><textarea rows="15" name="body" id="body" cols="55"></textarea></p>
<p><center><input type="submit" value="Submit" name="commit" id="message_submit"/> or <a id="hide" href="#">Cancel</a></center></p>
</form>
</div>
<div id="draggable" class="messagepop pop">
<form method="post" id="new_message" action="/answers">
<p><label for="body">What can you learn about an active volcano from the photograph?</label><textarea rows="15" name="body" id="body" cols="55"></textarea></p>
<p><center><input type="submit" value="Submit" name="commit" id="message_submit"/> or <a id="hide" href="#">Cancel</a></center></p>
</form>
</div>
Draw Conclusions What kind of person is Carsten? How do you know?
Use Text Features What can you learn about an active volcano from the photograph?
Where the first a href needs to open the first div and the second a href opens the second div, etc., etc.
CSS:
.messagepop {
overflow-y: auto;
overflow-x: hidden;
cursor:default;
display:none;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
text-align:left;
width:394px;
height: 335px;
z-index:50;
padding: 25px 25px 20px;
background-color: #fff;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-moz-border-radius: 4px 4px 4px 4px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 4px 4px 4px 4px;
border-color: #E5E5E5 #DBDBDB #D2D2D2;
border-style: solid;
border-width: 1px;}
JS:
$(document).ready(function() {
$('.show').click(function() {
if ( !$(this).next('div').is(':visible') ) {
$(".messagepop").slideFadeToggle();
$(this).next('div').slideFadeToggle();
}
});
$('.hide').click(function() {
$(this).parent().slideFadeToggle();});
$.fn.slideFadeToggle = function(easing, callback) {
return this.animate({ opacity: 'toggle', height: 'toggle' }, "fast", easing, callback);};
$(function() {
$("#draggable").draggable();});
Thank you for your advice and for ironing out my poorly written method. It seems you've got it working.
I've since discovered a jQuery Mobile solution that is much easier than what I was trying to pull together.
For future viewers, it would simply look like this.
Draw Conclusions
Use Text Features
<div data-role="popup" id="popup1" class="ui-content" data-position-to="window">
Close
<p>What kind of person is Carsten?</p>
<input type="text"/>
<p>How do you know?</p>
<textarea></textarea>
</div>
<div data-role="popup" id="popup2" class="ui-content" data-position-to="window">
Close
<p>What can you learn about an active <mark><b>volcano</b></mark> from the photograph?</p>
<textarea></textarea>
</div>
The logic here makes a lot more sense to me and there's the added benefit of ensuring it will work properly on mobile devices. Then if you want to make it draggable, just drop in:
<script>
$(function() {
$(".ui-content").draggable();
});
</script>
And then if you want it to be draggable on mobile (remember, jQuery UI isn't natively supported on mobile), you'll have to call up a hack of sorts. I like Touch Punch.
You may run into issues with form inputs when using Draggable combined with Touch Punch, but that's a story for another thread.
Here is a demo: http://jsfiddle.net/ebNsz/
I've set id:s for the question-div:s and target them with the 'href' attribute in the 'a' elements. Not sure what you wanted to do with the 'slideFadeToggle' function, so i used 'fadeToggle' instead.
HTML:
<div id="q1" class="messagepop">
<form method="" id="form1" action="/answers">
<label for="answer1">What type of person is Carsten?</label><textarea name="answer1" class="answer"></textarea>
<label for="answer2">How do you know?</label><textarea name="answer2" class="answer"></textarea>
<div>
<input type="submit" value="Submit" name="submit" /> or <a class="close" href="">Cancel</a>
</div>
</form>
</div>
<div id="q2" class="messagepop">
<form method="" id="form2" action="/answers">
<label for="answer1">What can you learn about an active volcano from the photograph?</label><textarea name="answer1" class="answer"></textarea>
<div>
<input type="submit" value="Submit" name="submit" /> or <a class="close" href="">Cancel</a>
</div>
</form>
</div>
<p>Draw Conclusions What kind of person is Carsten? How do you know?</p>
<p>Use Text Features What can you learn about an active volcano from the photograph?</p>
jQuery: (jsFiddle doesn't support .draggable(), so i commented out the first line and added the second.)
$(function() {
/* $("div.messagepop").draggable().hide();*/
$("div.messagepop").hide();
$("a.toggle").click(function(e)
{
e.preventDefault();
var targetpop = $(this).attr('href');
$(targetpop).siblings("div.messagepop").fadeOut();
$(targetpop).fadeToggle();
});
$("a.close").click(function(e)
{
e.preventDefault();
$(this).closest("div.messagepop").fadeToggle();
});
});
CSS:
.messagepop {
position: absolute;
top: 20%;
left: 50%;
z-index: 50;
margin-left: -197px;
text-align: center;
width: 394px;
height: 335px;
padding: 25px 25px 20px;
background-color: #fff;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
border-color: #E5E5E5 #DBDBDB #D2D2D2;
border-style: solid;
border-width: 1px;
}
label {
display: block;
}
textarea {
width: 75%;
height: 5em;
margin: 0 0 1em 0;
}
On an e-commerce website that I set-up Link on a page that has 4 alternative product views (they are the 4 small images underneath the add to basket) On an iPhone or iPad the 4th image isn't having its right margin removed so it goes onto the next line.
Basically each images has a 10px right margin, and then the last image that has a class of 'end' has a right margin of '0px !important'.
This works fine in web browsers but on the iPad / iPhone the 0px right margin is not being applied.
I have a feeling this is going to be an easy one but I just can't see it, thanks in advance for any help.
EDIT I have added the code below and have also set-up a stripped down version of the page I am having the problems on: link, it is the 4 small images at the bottom of the right hand side.
Below is the HTML for the images:
<div class="image-additional">
<img alt="" title="" src="larchblue-cr-55x55.jpg" class="thumb ">
<img alt="" title="" src="larchgreen-cr-55x55.jpg" class="thumb ">
<img alt="" title="" src="larchpink-cr-55x55.jpg" class="thumb ">
<img alt="" title="" src="larchyellow-cr-55x55.jpg" class="thumb end">
</div>
And here is the CSS:
.image-additional {
width: 268px;
margin-top: 13px;
clear: both;
position: absolute;
bottom: 0;
overflow: hidden;
}
.image-additional img {
border: 1px solid #E7E7E7;
margin-right: 10px;
}
.image-additional img.end, .image-additional img:last-child {
margin-right: 0px !important;
}
Try using :last-child pseudo element for your mobile targets.
.img:last-child {
margin-right: 0px;
}
Note: It works everywhere except for IE8 and below.
I am developing a webapp for ipad and have come across an issue using select option elements when moving divs with webkit-transform. Forgive the table layout but I'm trying to replicate the issue in the app as closely as possible.
Click on the green box and the panels move to the left and the select box is fine. Reload the page and click on the red box and the panels move to the left (using webkit-transform) and when you click on the select box, the list is displayed outside of the browser and the container box jumps.
Note that this is not an issue on the latest GA chrome builds.
<html>
<head>
<title>Select Testing</title>
<style>
.button {
position: relative;
width: 44px;
height: 44px;
}
#moveGood {
background-color: lime;
}
#moveBad {
background-color: red;
}
div#panels {
position: relative;
height: 100%
}
div.panel {
position: relative;
top: 0px;
left: 0px;
width: 200px;
height: 50px;
border: 2px solid black;
}
.leftBad {
-webkit-transform: translate3d(-200px, 0, 0);
}
.leftGood {
left: -200px;
}
div#panelContainer {
position: absolute;
top: 100px;
left: 0;
overflow: hidden;
width: 210px;
}
</style>
<script type="text/javascript">
function leftBad() {
document.getElementById("panels").className += ' leftBad';
}
function leftGood() {
document.getElementById("panels").className += ' leftGood';
}
</script>
</head>
<body>
<div id="moveBad" class="button" onclick="leftBad();"></div>
<div id="moveGood" class="button" onclick="leftGood()";></div>
<div id="panelContainer">
<div id="panels">
<table>
<tr>
<td>
<div id="page1" class="panel">
</div>
</td>
<td>
<div id="page2" class="panel">
<select>
<option value="volvo">
Volvo
</option>
<option value="saab">
Saab
</option>
<option value="mercedes">
Mercedes
</option>
<option value="audi">
Audi
</option>
</select>
</div>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
Safari tries to be helpful when there's a select box partially out of view, if you see:
http://jsfiddle.net/H5J27/
The first example doesn't have -webkit-transform, but when you click on it, it will be displaced in order to reveal it fully.
Now, Safari apparently isn't aware that, once transformed, the select box is in full view. The engine still thinks it's partially obstructed and it will move the select box and it's parent container to a point where it thinks you can see it.
The workarounds are not very encouraging. I'm guessing you're doing this coupled with animation in order to enjoy the benefits of hardware acceleration, so I'd add an event listener and the end of the animation, remove the css transform and apply normal positioning. This will get complicated if you have to do it on several elements, but it's good enough for a one time thing.