search

SAP / openui5

OpenUI5 lets you build enterprise-ready web applications, responsive to all devices, running on almost any browser of your choice.
http://openui5.org
Apache License 2.0
2.96k stars 1.24k forks source link

Page title not centered anymore since release 1.72.0 #2743

Closed kruemelmonstr closed 4 years ago

kruemelmonstr commented 4 years ago

Hey UI5 Team,

I am currently facing a bug or feature for the component sap.m.Page. Titles are not getting centered anymore if I am using a OpenUI5 version newer than 1.71.4. I tested this with Chrome and Safari on MacOS. Seems like there are two style classes applied on the title and ".sapMBarTitleStart .sapMBarPH" is overriding ".sapMBarMiddle".

OpenUI5 version: 1.72.0 and later

Browser/version (+device/version): Chrome (78.0.3904.108) on MacOS

Any other tested browsers/devices(OK/FAIL): Safari (13.0.3) on MacOS MS Edge

URL (minimal example if possible): OpenUI5 Samples

User/password (if required and possible - do not post any confidential information here):

Steps to reproduce the problem:

  1. Open Page
  2. Take a look on the title "Centered Title"

What is the expected result? a centered title css is text-align: center

What happens instead? title is aligned to the left css is text-align: start

Any other information? (attach screenshot if possible) image

makifycl commented 4 years ago

I think it's not a bug but I don't like it. I used this CSS and works. .sapMBarTitleStart .sapMBarPH { text-align: center; }

tsanislavgatev commented 4 years ago

Hello,

This is a feature. There is a property called titleAlignment, with this property you can align the page title. . If set to TitleAlignment.Auto, the Title will be aligned as it is set in the theme (if not set, the default value is center); Other possible values are TitleAlignment.Start (left or right depending on LTR/RTL), and TitleAlignment.Center (centered).

Best Regards, Tsanislav

kruemelmonstr commented 4 years ago

Hey @tsanislavgatev , thanks for you response. I didn't noticed this new property. I am now seeing that the change was announced in the change log. Is there an easy way to set this option globally without creating a complete new custom theme?

myordanov commented 4 years ago

Hi kruemelmonstr, you just need to set the provided property to what your needs are.

Regards, Mihail.

tfey commented 4 years ago

Hi,

to add a the property works, but it shows an error in the Web IDE Picture1

kruemelmonstr commented 4 years ago

@tfey - maybe the schema files you are using for validation are not up to date.

codeworrior commented 4 years ago

AFAIK, WebIDE takes the information for XMLView validation from the release that is configured as minVersion for the app (but I'm not 100% sure).

prtkkr commented 3 years ago

I changed the theme from sap_fiori3 to sap_belize and title began showing in the middle of the page.

iamBHK commented 3 years ago

@prtkkr ; it worked for me too. Big Thanks

boghyon commented 3 years ago

@prtkkr @HarikrishnaTheDeveloper @kruemelmonstr @portatifparcacik Guys, just change the titleAlignment to "Center". No need to change or create an entire custom theme.

dxlaw commented 3 years ago

@kruemelmonstr Re: @tfey - maybe the schema files you are using for validation are not up to date.

I give up, how do you update them? I see the same thing.

dxlaw commented 3 years ago

@tsanislavgatev

This is a feature. There is a property called titleAlignment, with this property you can align the page title. . If set to TitleAlignment.Auto, the Title will be aligned as it is set in the theme (if not set, the default value is center); Other possible values are TitleAlignment.Start (left or right depending on LTR/RTL), and TitleAlignment.Center (centered).

It doesn't work. SAPUI5 version 1.87.0. Context:

`

... </contentMiddle> <contentRight> ... </contentRight> </Bar> </customHeader> <pre><code><content> ... </content></code></pre> <p></Page>`</p> <p>In the running application the property is set to Auto. Title is not centered. And setting it in the controller onInit() didn't work either.</p> <p>More context: this is when the application is deployed in a SuccessFactors extension. The title is centered when I run it in WebIDE without setting titleAlignment. In the SF extension the title text is left justified and titleAlignment is set to Auto despite attempts to set it to Center.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/codeworrior"><img src="https://avatars.githubusercontent.com/u/9580095?v=4" />codeworrior</a> commented <strong> 3 years ago</strong> </div> <div class="markdown-body"> <p>@dxlaw It's a property of the <code>Page</code>, not of the Bar, see @tfey's <a href="https://github.com/SAP/openui5/issues/2743#issuecomment-620742974">comment and screenshot</a> above.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/dxlaw"><img src="https://avatars.githubusercontent.com/u/22581733?v=4" />dxlaw</a> commented <strong> 3 years ago</strong> </div> <div class="markdown-body"> <p>@codeworrior It's also a property of <a href="https://sapui5.hana.ondemand.com/#/api/sap.m.Bar%23controlProperties">sap.m.Bar</a> which is where I'm trying to center Title text. But adding titleAlignment to Page worked. Thanks.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/codeworrior"><img src="https://avatars.githubusercontent.com/u/9580095?v=4" />codeworrior</a> commented <strong> 3 years ago</strong> </div> <div class="markdown-body"> <p>I don't know the <code>Page</code> control in detail, but <a href="https://github.com/SAP/openui5/blob/master/src/sap.m/src/sap/m/Page.js#L323-L326">from the code</a>, it looks as if the <code>Page</code>'s <code>titleAlignment</code> will always override a <code>titleAlignment</code> that has been set on the <code>header</code> or <code>customHeader</code>, whenever that header has a <code>setTitleAlignment</code> method.</p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>