News from date and news to date icons alignment in admin edit product page #21651
Description
Preconditions (*)
- Magento 2.3.0 with sample data
Steps to reproduce (*)
- Go to a product edit page in admin
- Look on fields 'Set Product as New From' and 'To'.
Expected result (*)
- The date picker icon (calendar icon) is not visually aligned. The icon of news from date attribute is over the input text of attribute news to date.
Actual result (*)
- The icons should be aligned. The calendar icon should be inside/outside the input fields at the right side. And should not overlap over the next field horizontally. Or something else clean visually.
It seems that the <button> tag CSS is missing position: absolute; and display: block;. I think the CSS was changed in newer versions. Magento 2.2.6 displays the icons right. Magento 2.2.7, Magento 2.3.0 do not display the icons correctly.
For anyone looking for a quick fix:
#app/code/MyNamespace/MyModule/view/adminhtml/web/css/fix-news-from-date.css
.catalog-product-edit input[name="product[news_from_date]"]._has-datepicker + .ui-datepicker-trigger,
.catalog-product-edit input[name="product[news_to_date]"]._has-datepicker + .ui-datepicker-trigger {
position: absolute;
display: block;
}
#app/code/MyNamespace/MyModule/view/adminhtml/layout/catalog_product_edit.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="MyNamespace_MyModule::css/fix-news-from-date.css"/>
</head>
</page>
Not much of a great fix but works.