Does anyone know how to get rid of the top bar of the iOS mobile web keyboard circled in red below with the "Done" button on the right?
I'm using React & Next JS in case that makes a difference, and the code used to generate the screenshot is below. I've tried many combinations of input & form but can't get rid of it!?
<div className="bg-red-100">
Example input box
<div className="">
<input />
</div>
</div>
Related
When just visiting my main webpage, the tooltip when hovering over the countries in my react-simple-maps map looks pretty normal:
tooltip
However, after going to a different webpage, and then promptly returning to the map-containing webpage (same URL), the tooltip's padding changes:
changed tooltip
Here is the code behind my tooltip:
<ReactTooltip>
<div className="bg-gray-800 text-white rounded p-[8px]">
<div className="text-[16px] font-bold">
{Name}
</div>
<div className="text-[14px]">
No information available right now
</div>
</div>
</ReactTooltip>
I assume the issue lies in server/client-side rendering, since the strange border (which I assume to be the p-[8px] only appears after re-entering the webpage). However, I am still inexperienced. Any ways to fix this?
Thanks!
I tried putting the className directly into , but that resulted in a clear background... Then I just tried moving different stylings around but nothing seemed to do the trick.
I am developing web application in Angular 2. On button click I am trying to open popup. I am able to do it in JavaScript. I am trying now in Angular 2.
Below is my HTML code for popup inside main page.
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
In main page I have one text box. When I open popup inside popup text box is also displaying as below.
Filter records text box is in html page and not in popup. Can someone help me to fix this issue? Thank you.
It sounds like you've applied a high z-index to the filter records textbox and button; z-index is a styling attribute that allows you to specify which things appear in front of others, by lowering the z-index on your "Filter records" textbox/button they should sit behind the popup.
Read more on z-index here: https://www.w3schools.com/cssref/pr_pos_z-index.asp
I am using angular and I need to add an animation that will increase the size of the image.
<div class="card">
<div class="item images-parent">
<img src="img/carryout-icon.jpg" class="left-image"></img>
<img src="img/or.jpg" class="center-image"></img>
<img src="img/delivery-icon.jpg" class="right-image"></img>
</div>
</div>
demo:
http://play.ionic.io/app/933b5926b6da
I want to add same animation/transition to first and third image when the user clicks on it and should be removed when user clicks on the other one i.e if I click on first image, it increases in size, then if I click on the other one, first one goes back to normal and second one has that animation.
Also, I have tried doing it but I am just not able to get ngAnimate, I am not a CSS person either. Also, Any resources to help someone like me would be appreciated.
I see events such as ngView , ng if e.t.c But I do not really want these animations on such events. Only when user clicks on the image. Am I even supposed to use ngAnimate here?
I do not know which particular image you intend to increase it's size on click, but here's one way to go about it.
You can create a css class that increases the image, and you toggle on or off with NgClass, A tutorial Scotch.io
That is to make sure it changes class, but if you want to toggle on/off the class when you click CodePen snippet below
$scope.isActive = false;
$scope.activeButton = function() {
$scope.isActive = !$scope.isActive;
}
In the Carousel Slider at the Evolve Theme, there are a few sample pictures.
How can I change them into new pictures and add an href that an article opens by clicking on an image?
You upload a photo in the media library with the correct dimensions for the slider.
When you select to edit the image you get the full size version.
In Firefox I right click on the image and ask to copy "Image Location", in the Chrome browser "Copy image URL"
that gives me the url to the image in my clipboard something like
http://www.####.###/wp-content/uploads/2013/06/image.jpg
Then you go to the widgets
You have to add the "T4P Carousel Slider" to the Header1 area. If you don't The theme automatically loads its own custom widget for advertizing the theme. Once you add the widget you will get a code box that by default has their code in it.
You are going to replace that code with your own it is not to hard but it is certainly not a drag and drop option.
Once you drag the Carousel Slider to the Header you will see the code.
you will see 4 sections that look like this:
<img src='http://www.####.###/wp-content/themes/evolve/library/media/images/slide/slider_img_01.jpg' alt='' />
<div class='carousel-caption'>
<h4>Built-in Bootstrap Elements let you do amazing things with your website</h4>
You replace this part of the code with the url to the image from the library using cntl-v and ad a alt tag if you like
Before
http://www.####.###/wp-content/themes/evolve/library/media/images/slide/slider_img_01.jpg' alt='' />
After
http://wp.fofc.org/wp-content/uploads/2013/06/baby.jpg' alt='Baby' />
Next you can add a Caption to be over the top of the image
Before
Built-in Bootstrap Elements let you do amazing things with your website
After
This is a really cool image
down at the bottom of the code box you will see additional code.
This controls how may dots are in the rectangular window for navigation one line for each dot
So you want to have as many lines as you have images. If you only have 3 images take the line with data-to='4' completely out. or you can add another line at the bottom:
5
<div id='carousel-nav'>
<a href='#myCarousel' data-to='1' class='active'>1</a>
<a href='#myCarousel' data-to='2'>2</a>
<a href='#myCarousel' data-to='3'>3</a>
<a href='#myCarousel' data-to='4'>4</a>
-- add or remove lines above this line
</div>
This controls the navigation box in the lower center of the slider. However the dot does not seem to move as the slides change automatically. The dot only moves when you click on it.
If you prefer you can remove the entire div from the code and that will remove the navigation box.
Hope this helps.
I'm trying to create an info button (the one that is round with an i in the middle) to appear on the right side of the navigation bar. I have seen the examples in the demo page of KendoUI mobile section and I see a button saying "Index" on the right side of some screens. Instead of displaying a button with a text inside, I would like to display the info button. Is that part of the KendoUI framework that I could just name that class and it will display that info button? If not, if I have the image, how will I be able to put that inside a button and that it will look good in iOS, Android and Windows phone?
It is possible in Kendo UI mobile framework itself.
If you want use 'info button' inside navigation bar then
you should use 'detailbutton' concept.
look at the following code
......
<div data-role="navbar">
<a data-role="detailbutton" data-icon="info" title="info button"></a>
</div>
.....
It will display a button as you said.(Button that is round with an 'i' symbol in the middle)
It will work on all the platforms that Kendo UI supports