Add a line break between two ionic form inputs

Is there a way to insert a line break between these Ionic form elements?

Here is the current layout:

https://i.sstatic.net/BxTcW.png

Here is the desired layout:

https://i.sstatic.net/mSlnK.png

This is the code I have so far:

    <div class="item item-input-inset">
        <label class="item-input-wrapper">
            <i class="icon ion-ios-search placeholder-icon"></i>
            <input type="search" placeholder="What are you looking for?">
        </label>
        <label class="item-input-wrapper">
            <i class="icon ion-ios-search placeholder-icon"></i>
            <input type="search" placeholder="Current Location">
        </label>
    </div>

You can view the fiddle here: http://jsfiddle.net/o5z6d8z0/

htmlcss

Answer №1

Include the following css styles

.item-input-wrapper {
   margin-top: 10px;    
 }

.item-input-inset {    
   display: block;   
}

View Demo

Answer №2

To shift the second label below the first one in .item-input-inset, simply include flex-flow: column.

.item-input-inset{
  flex-flow: column;
  align-items: stretch;
}

See it in action on this Working Fiddle

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Question about transparency - HTML, CSS, and Bootstrap

I adjusted the opacity of the bootstrap card to 0.8, but now I want the table to be opaque while the rest of the card remains translucent. How can I achieve this effect? I attempted to add the style opacity : 1 to the table, but it didn't have the des ...

htmlcsstwitter-bootstrapbootstrap-4

Learn how to create a stunning effect by combining two half images and revealing a full image upon hover with a smooth animation

I am struggling with implementing a specific feature using jQuery. I have designed a page hero with two sections (red and black): My goal is to have the black section expand over the red section when hovering, creating a full black box. I want the same ef ...

javascriptjqueryhtmlcss

Interactive Infographics in HTML5 format

Currently, I am unable to find any examples on how to accomplish a specific task mentioned in the following link. If you have a tutorial with step-by-step instructions or a code project available, it would greatly assist me. Link: Evolution of WEB ...

jqueryhtmlresponsive-design

Navigation bar in HTML positioned on the right side of the webpage

My goal is to have a navigation bar on the right side of the page, taking up 250px, while allowing the main content to naturally adjust its size based on the window dimensions. I do want the main content to appear before the navigation in the HTML structur ...

htmlcss

What is the best way to center images horizontally in CSS and HTML?

I'm looking to create a driver's page where the desktop view displays images horizontally instead of vertically. I've tried adjusting the display attribute with limited success, and so far, the grid display is the closest I've come to a ...

htmlcss

Is it possible to include ternary in the "homepage" section of the package.json file?

When making API calls in production, they will be on the same domain as where my app is hosted, so it's necessary to include "homepage": "." in the package.json. However, when working locally from localhost, I need to make API calls to the production ...

javascripthtmlnode.jspackage.json

What steps do I take to include alternative text for images I insert within the content?

Ensuring all my images have alt text is important, but I overlooked this when I added my background images to the CSS under the body tag. The following code shows the background image in my CSS that needs alt text: body { background: url('contact ...

javascripthtmlcssaccessibilitybootstrap-5

The presence of parentheses in a JQuery selector

My database contains divs with ids that sometimes have parentheses in them. This is causing issues with my JQuery selector. How can I resolve this problem? Let me provide an example to illustrate: https://jsfiddle.net/2uL7s3ts/1/ var element = 'hel ...

javascriptjqueryhtml

I'm having trouble getting my dropdown content to align properly with my centered search bar. Any suggestions on how to fix this issue?

How can I align the dropdown content to the center in its td element? I haven't included all of my code here, so feel free to ask if you need more information. The search bar is supposed to be at the center of this table navbar. This is the HTML: &l ...

htmlcss

Show text on Canvas when hovering

Recently, I've been working on a project inspired by this example where I made adjustments to the code in order to display it on a canvas. var canvas = document.getElementById('nokey'); var ctx = canvas.getContext('2d'); ctx ...

javascripthtmlcsscanvas

Issue with flash installation

I'm currently working on a WordPress website at www.studium.cl. However, I've encountered an issue when trying to open it in Internet Explorer. Each time I try to access the site, a window pops up prompting me to install Adobe Flash Player. Even ...

phphtmlflashwordpress

The SetInterval notifications remain stagnant without any alterations

I am currently working on designing a loading screen for a game using HTML and JavaScript. My goal is to have different messages displayed every three seconds. Despite using the setInterval function successfully for other tasks (like triggering an alert ...

javascripthtmlsetinterval

Tips for switching "a" tag elements to reveal concealed DIVs in a similar way to the Facebook notification center

I have a situation in my code where I need to toggle between two a elements to display a hidden div with content one at a time. This functionality is similar to how the Facebook notification center works when you click on the icons, which I'm sure mos ...

jqueryhtmlcss

Creating dynamic images in JavaScript by assigning URL paths from string variables

Currently, I am utilizing JavaScript to parse through an XML file. One interesting aspect of the XML is that it contains URLs which link to images like this one: http://localhost/pic.jpg Throughout the parsing process, I am storing each URL as a string va ...

javascripthtmlxml

How to assign attributes to all child elements in Angular?

I have a unique component in Angular that I utilize throughout my app. It's a button component which I use by calling <app-delete-btn></app-delete-btn> wherever needed. I tried to set the tabindex="1" attribute for my component ...

javascripthtmlcssangulartypescript

Hide additional tabs on the page when the width of the tabs exceeds the page width

I am currently working on a Google module tab application. I have successfully added the tab control with drag and drop functionality within a specific area. However, I now need to limit the number of tabs displayed on the page. Regardless of the total cou ...

jqueryhtmlcsstabs

Angular Dynamic Alert Service

Is it possible to customize the text in an Angular Alert service dynamically? I'm looking to make certain words bold, add new lines, and center specific parts of the text. Specifically, I want the word "success" to be bold and centered, while the rest ...

javascripthtmlcssangular

What is the best way to send variables through an HTTP post from a JavaScript function in one file to a separate Python function in a different location?

I have a JavaScript script that retrieves user inputs from my HTML session storage and sends them to a database. Additionally, I need to send a HTTP request to pass a JSON object containing the entries to a Python file hosted elsewhere. Can anyone suggest ...

pythonhtmljsonnode.jsfirebase-realtime-database

Manipulation of CSS DOM elements for achieving responsive design

I am working with a div field that contains an input element and a label element, both set to display:block <div class="cf-full"> <input id="a" > <label class="helptext"></label> </div> In the standard view, the inpu ...

htmlcssdomresponsive-design

Guidelines for comparing two distinct dates using jQuery

const currentDate = $("#date").text(); // the current date is set as a variable 01/06/2017 // Another date is declared as a variable let startDate = '01 / 06 / 2017'; if (currentDate == startDate) {} if (currentDate < startDate) {} <script ...

jqueryhtml