"Aligning Images and Text in Sencha Touch Proves to be Ch

Exploring Sencha Touch for the first time and running into challenges with styling images (such as centering) and text (like adjusting size/color).

Can anyone guide me on where to add style tags?

Sample item below:

 // The following represents a simple HTML structure for the home page 
            {
                title: 'Home',
                iconCls: 'home',
                cls: 'home',
                scrollable: true,
                style: 'text-align:center',  // Centering text
                html: [
                    '<img height=260 src="http://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png"/>',
                    '<h1>Welcome to the Demo HTML5 App</h1>',
                    "<p>Built with Sencha Touch</p>"
                ].join("")
            }

Answer №1

The technique presented doesn't involve utilizing STYLE tags. Instead, a "cls" is being assigned to the component, which functions as a CSS class. Construct your styles using CSS:

.landing img {}
.landing h2 {}
.landing p {}

Answer №2

While I understand arthurkay's perspective, adjusting to inline styling may require updating the code...

style: 'justify-content:center'

...in order to achieve the desired effect.

style: 'text-align:center'

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

Setting Image Height with CSS

I have a div with a height of 105px. The image inside the div is 359px tall. How can I adjust the div's size to prevent cutting off the image and ensure it displays in full height? Thank you for your help! ...

css media queries not taking precedence over default styles

Struggling to find a solution as no similar case was discovered!! To avoid adding a class name for each page, I am eager to utilize a generic class name as shown below: <div id="news"> <div class="news column">content 1</div> &l ...

Defeat the all-powerful !important tag and enable dialog customization for positioning

I am currently developing a browser extension and I am encountering an issue with using JQueryUI to display a modal dialog. The problem arises when certain websites, for example espn.com, also utilize JQueryUI but do not properly scope their own elements. ...

Add a fading effect to the margin section of an HTML element

Check out this example code showcasing HTML and CSS: HTML <nav>...</nav> <div class="row"></div> CSS .nav{ margin-bottom: 10px; } I am looking to create a subtle fading effect in the bottom margin of the navbar. Can you as ...

Custom Angular directive for collapsing sub menus with CSS

I found a helpful article on creating collapsible menus and submenus using only Bootstrap and custom code for Angular 2, 4, 5, 6. I've been able to implement the logic successfully, but I'm facing an issue with multiple menus where clicking on an ...

set a variable to determine the padding-top of a div

Below is the code snippet: return '<div style="width: 100%; height: 0; position: relative; padding-top: 56.25%"> <div style="position: absolute; top: 0; left: 0; bottom: 0; right: 0;"> <unitydog width="'.$width.'" hei ...

Placing a table inside a div container to ensure compatibility on all browsers

Although I typically avoid using tables, I am struggling to find a better solution for setting up a page layout with a search bar, three buttons, and two hyperlinks stacked on top of each other. The challenge is to have this control centered on the webpage ...

Unable to remove the most recently added Object at the beginning

I am currently working on a project to create a dynamic to-do list. Each task is represented as an object that generates the necessary HTML code and adds itself to a div container. The variable listItemCode holds all the required HTML code for each list it ...

Using jQuery to apply CSS with relative percentage values (+=/-=/)

Today, I experimented with using relative values in jQuery's .css() function. $block.css({'margin-left': '-=100%'}); This resulted in the following style for the div: <div class="block" style="margin-left: -100px;"> I not ...

Creating universal CSS for all platforms

Seeking assistance in making this Chrome CSS code compatible across different platforms. It currently does not function properly in Firefox and is completely non-functional in IE8. Your help is greatly appreciated, thank you for taking the time to read. . ...

How to implement scrollspy in Bootstrap 4 without relying on nav or list-group components?

Is it possible to implement scrollspy functionality without utilizing the nav or list-group elements? According to Bootstrap's documentation on scrollspy, it is typically restricted to use within nav or list group components. DOCUMENTATION How Scroll ...

tables that are intertwined

There are three tables on my page and they are all overlapping. Is there a way to prevent this overlap? Check out this link <table id="inventoryTable" class="table dataTable" aria-describedby="inventoryTable_info"> <thead& ...

Ways to correctly import various CSS files for individual routes in a Vuejs application

Currently, I am in the process of developing a project using Vue.js and Laravel. This project will have distinct layouts for the admin/user panel and landing page, requiring different CSS files to be loaded for each route. At the moment, I am utilizing va ...

Is there a way to modify localStorage without having to refresh the page?

I'm currently working on a shopping cart that pulls products from a json-server. So far, I've successfully displayed the products, added the functionality to add items to the cart, and show the quantity. However, I'm facing a roadblock with ...

Button, anchor not aligned horizontally due to differing padding

I've been pondering this question for quite some time now. Whenever I try to style a button in HTML using the a tag or button tag with equal padding on the top and bottom, the buttons still align horizontally. Please refer to the image below for clari ...

Exploring Angular Material Design's method for vertically populating a column

Is there a way to fill a column vertically in my current app? https://i.sstatic.net/uu4yO.png I've been struggling for hours trying to make the vertical items span the entire height of the page. I have pored over documentation and other posts, but I ...

Modify the MUI Select icon background color on hover

I have been working on customizing the MUI Select method, and I've encountered difficulty when trying to hover over the "NarrowDownIcon": https://i.sstatic.net/VEZFP.png My goal is to change the hover behavior of this icon by setting its backgroundC ...

Pandas now supports exporting data frames to HTML with the added feature of conditional

Is there a way to format a table in pandas where data in each column are styled based on their values, similar to conditional formatting in spreadsheet programs? An example scenario is highlighting significant values in a table: correlation p-value ...

The SVG path is not aligned properly with the container's viewbox dimensions

Recently, I came across an icon provided by a plugin I am using called calendar. However, I wanted to enhance my icons set with a new addition - the twitter icon. svg { display: inline-block; height: 16px; width: 16px; margin: 2px 0; ...

"Bootstrap is functioning properly on my local environment, but it seems to

Utilizing the MVC framework and bootstrap has been successful for optimizing my website locally. However, when I upload it to the server, none of the CSS is being rendered. Additionally, the front page, meant to be a carousel slider, appears as a vertical ...