Clever Geek Handbook

Change width of .ui-title inside data-role = "header"

I am working on a site with jQuery Mobile. My title is centered on the menu like in the image above:

Title of page aligned center with green border

My CSS for the green border:

.ui-title 
{
    border: 2px solid lime;
}

And HTML:

<div data-role="header" data-position="fixed" class="menu">
    <a href="#" data-icon="home" data-theme="a">Home</a>
    <h1>Title</h1>
</div>

I want the title to span the entire width (relative to the current window width), but still be centered like the pink lines in the following image:

Title of page aligned center with green border and pink lines describing the target width

Any idea how to achieve this without breaking the jQuery Mobile layout (e.g. device width for different target devices)?

Decision:

margin-right: 1% !important;
margin-left: 1% !important;

Seems to work in my case (even if the title goes behind the button if the window is small enough).

Update:

No workaround with the surrounding div or changing CSS styles like margins fixes the issue where the title is too wide on some devices. I guess the name is so small to get all the devices right. I didn't have time to test this for hours, so I eventually gave up and went back to the default layout and just made sure the title was narrow enough.

+3


source to share


3 answers


Use this css and set left and right percentage (change 10% to any other number)

.ui-title {
    margin: 0.6em 10% 0.8em !important;
}

if you want to use different values ​​from different sides then use this css:



.ui-title {
    margin: 0.6em 10% 0.8em 5% !important;
}

Also give each title an id if possible, because the css mentioned will change each element using the .ui-title class.

Here's an example: http://jsfiddle.net/Gajotres/QP9qm/2/

+3


source


Set the title or ui title:

 .post .ui-header .ui-title {
  margin:0;
  width:100%;

  }


It should work this way.

0


source


Why are you expecting a workaround without div or css? And what's wrong with that?

Option 1: copy what they do to JqueryMobile.com

Anyway, this is how they do it on a real jQuery Mobile site (1.4.2). I cannot comment that jQuery mobile state returned in January 2013.

<div data-role="header" class="jqm-header">
    <h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2>
    <p><span class="jqm-version"></span> Demos</p>
    <a href="#" class="jqm-navmenu-link ui-btn ui-btn-icon-notext ui-corner-all ui-icon-bars ui-nodisc-icon ui-alt-icon ui-btn-left">Menu</a>
    <a href="#" class="jqm-search-link ui-btn ui-btn-icon-notext ui-corner-all ui-icon-search ui-nodisc-icon ui-alt-icon ui-btn-right">Search</a>
</div>

The default stylesheet for .ui-title (which is what h2 gets automatically) looks like this. You will see what is margin: 0 30%

causing the problem here .

ui-header .ui-title, .ui-footer .ui-title 
{
   font-size: 1em;
   min-height: 1.1em;
   text-align: center;
   display: block;
   margin: 0 30%;
   padding: .7em 0;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
   outline: 0!important;
}

In your stylesheet, the overrides

.jqm-demos .jqm-header h2 
{
   padding: .4em 0 .1em;
   margin: 0 3em;
}

Adding this override was enough for my logo to be centered.

(there might be an alternative way to do this using data-enhance='false'

, but that's not im

Option 2: disable automatic enhancement

You can turn off auto-promotion to prevent the class from being applied ui-title

in the first place and breaking your css. There are other side effects, just like other buttons, are not configured properly and I do not recommend this method, but it is good to know about this feature, possibly elsewhere.

You must first install

$.mobile.ignoreContentEnabled = true;

Note. You must do this on mobileinit

, which must be configured BEFORE loading jQueryMobile. How it is or how you would not do it.

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

<script>
    $(document).on('mobileinit', function () {
        alert("ignoreContentEnabled initial value = " +$.mobile.ignoreContentEnabled);
        $.mobile.ignoreContentEnabled = true;
    });
</script>

<script src="//code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.js"></script>

Then update the header

<div data-role="header" id="defenderHeader" data-enhance="false">

Nothing in it will be automatically improved. Unfortunately, it won't work if you put it on <h2>

, which is what I wanted to do. You can explore this option further, but I think option 1 is better and easier.

See also: http://api.jquerymobile.com/global-config/

0


source






More articles: