The label, text field, and search icon should all be displayed horizontally, but currently the search icon is not showing up in that layout.
Check out my fiddle here: http://jsfiddle.net/yCUY7/
<div data-role="content">
<label class="searchLable">suchtest</label>
<input type="text" class="inputSearch_h">
<div class="icon-search icon-search_h" data-icon="search"></div>
</div>
It seems like jQuery Mobile really insists on doing things its own way. To achieve the desired customization, you might have to delve into writing some custom HTML and CSS since the default setup wraps inputs in divs that span the entire width of the page.
Your best bet would be to play around with the widths to tailor them to your specific app requirements and kickstart the process from there.
Check out the code snippets below for reference:
<div data-role="content">
<div class="wrap">
<label class="searchLable">suchtest</label>
<input type="text" class="inputSearch_h" />
<span class="ui-icon ui-icon-search ui-icon-shadow"></span>
</div>
<label for="search-basic">The jQuery Mobile Way:</label>
<input type="search" name="search" id="searc-basic" value="" />
</div>
CSS Tricks:
.wrap {
margin-bottom: 1em;
overflow: hidden;
}
.wrap label, .wrap .ui-input-text, .wrap .ui-input-text+span {
display: block;
float: left;
}
.wrap label {
line-height: 3em;
text-transform: uppercase;
width: 20%;
}
.wrap .ui-input-text {
width: 70%;
}
.wrap .ui-input-text+span {
display: inline-block; /* Updated styling */
margin-top: 1.4em;
margin-left: 5px;
}
NOTE: Don't forget about the inline labels this time! For a live demonstration, check out this updated Fiddle.
Incorporating four div cards functioning as buttons to collapse and expand information beneath the card row has resulted in unexpected behavior. Clicking on one card should expand its information while collapsing the previously expanded card, but the imple ...
Apologies for asking what may seem like a silly question. I'm still new to using AngularJS and recently came across a neat little scroll directive on http://jsfiddle.net/88TzF/622/. However, when I tried implementing the code in the HTML snippet below ...
In my JQuery UI tabs implementation, I am currently using 'ui.index' to get the index of the current selected tab. However, I also need to retrieve the index of the last clicked tab. For instance, when tab 1 is initially loaded and then I click ...
Currently, I am in the process of creating a simple website where the user can click a link and jQuery will dynamically populate a div with the ID "article" using an asynchronous request to the server, utilizing jQuery's load() function. Here is the H ...
On my journey of developing a basic web app, I am faced with the challenge of updating data displayed on the screen based on certain events or conditions. The data is spread across various locations and embedded in completely different markup structures. I ...
I have a vision of my desired outcome in the attached image. Each menu item should contain two additional items, 'Dashboard' and 'Battery Trends', each with unique URLs defined as 'navigationurl' in the JSON file. My attempt ...
Currently, I am diving into a new project utilizing React version 18.2 and MUI 5.10.3 library. My main task involves designing a table with specific styles within one of the components. The table header should not display any border lines. The table body ...
I am looking to customize the appearance of the file_field in CSS. Rather than displaying the default browse button, I would like to use a simpler upload button for file submission. What steps can I take to modify the CSS of the file_field and replace it ...
I have a collapsible panel set to default "expand" (collapse in) and it is working well. However, I would like to make it "collapse" (shrink) for mobile and tablet devices. Is there any built-in feature in Bootstrap that can help me achieve this? <div ...
Check out this code snippet: <a onclick="$('a[href=\'#tab-customtab\']').trigger('click');">Enquire Now</a> <div id="tab-customtab"></div> This piece of code triggers the opening of the #ta ...
Recently, I've been working with notepad++ and have come across an interesting challenge. In my index.html file, I have embedded css and javascript code. Is there a way to display this code as it appears when saved in their respective files, but maint ...
I'm currently using bootstrap's carousel to display items, and I've noticed that the box-shadow attribute on my item blocks is being limited by the parent element that wraps it. https://i.sstatic.net/ks5lC.png Is there a way for me to ensu ...
The Issue https://i.stack.imgur.com/I5EFR.png My problem is with the spacing between the panels, highlighted in red. I've attempted to remove them by using the following CSS: .panel { margin-top: 0; margin-bottom: 0; padding-top: 0; ...
Is there a way to trigger a color picker from a hidden <input type="color"> by clicking on another HTML element, like a <span>? While this functionality seems to work on Firefox, it consistently fails on Chromium. Are there any cross- ...
Hey there, I'm experiencing an issue in Firefox. When I attempt to use a hover effect on a div to change the height to 0, it's behaving strangely. Is there a way to make it function like it does in Chrome? Here is the code snippet: CSS : #squa ...
They provided me with this code snippet <iframe width="424" height="916" src="//invis.io/U5574OIA3" frameborder="0" allowfullscreen></iframe> However, I am unsure of how to properly embed it. I attempted to insert the line into my website but ...
Recently, I embarked on a new Vue(3) project. Within this project, I have set up some basic styling in the App.scss file and created a HomeView.vue with a corresponding HomeView.scss file (located in the /src/views/Home directory). The styling from both fi ...
Currently, I am studying HTML, CSS, Bootstrap 4, jQuery3, and JavaScript (ES6+), and to enhance my skills, I have devised an exercise for practice and consolidation. I have created 4 HTML files, all featuring responsive design based on Bootstrap 4: inde ...
We are in the process of developing a client-based application using HTML5 and indexedDB on Firefox 28. When large amounts of data are loaded to Firefox for the first time using AJAX requests in JSON format, each JSON response is approximately 2MB (gzipped ...
I have been attempting to display two buttons, id="strength" and id="minion", when a certain button, id="expandButton", is clicked. I want these two buttons to be positioned on either side of the button that triggers their cre ...