CODEWITHSUNDEEP
htmlbuttonsafariangular-materiallumx
Sajib Acharya
Sajib Acharya

Reputation: 1733

A certain snippet of HTML code does not render well on specifically Safari browsers

First of all, I do not know if the Question title is appropriate, but I could not think of anything else out of my mind. Do suggest an edit, if you have a better one. Thank you.

I am working on a web page that uses both the Angular Material and the LumX libraries. Everything else works well on all browser, but this specific snippet of code does not run properly on Safari browsers (both iPhone and Mac) when in small screen mode.

<md-content flex layout="column">
        <form layout-padding name="newSuperuserForm" flex>
            <span flex layout="column">
                <span flex layout="row" layout-sm="column" layout-xs="column">
                    <span flex="50" flex-sm="100" flex-xs="100" layout="column">
                        <lx-button lx-type="raised" lx-size="m" lx-color="orange">reset</lx-button>
                        <span flex class="ph-padding-bottom-20"></span>
                        <lx-button lx-type="raised" lx-size="m" lx-color="teal">submit</lx-button>
                    </span>    
                </span> 
            </span>    
        </form>            
    </md-content>

I have omitted the rest of the code that works. Only this snippet renders blank on a Safari browser, while on other browsers (Firefox on Mac, Chrome on Windows, Android browser) it works just fine.

Specifically, if anything goes within the div:

<span flex="50" flex-sm="100" flex-xs="100" layout="column"> ... </div>

Safari is able to render it, for example, if I put some text in it, everything works just fine. But it is not able to render the LumX buttons when the screen is small.

enter image description here

This screenshot shows how the code is rendered in Safari (left) and Firefox (right) when the screen size is small.

enter image description here

The Safari Web Inspector shows that the button elements are there.

I am really novice in front-end development. Any idea what is going on here? It'd really help me complete my project. Thank You.

Upvotes: -1

Views: 60

Answers (1)

Nobal Mohan
Nobal Mohan

Reputation: 486

I don't know the exact issue without a working code snippet. But the correct use of flex and layout will be

    <span flex layout="column">
        <span flex layout="column" layout-gt-sm="row">
            <span flex="100" flex-gt-sm="50" layout="column">
                <lx-button flex lx-type="raised" lx-size="m" lx-color="orange">reset</lx-button>
                <span flex class="ph-padding-bottom-20"></span>
                <lx-button flex lx-type="raised" lx-size="m" lx-color="teal">submit</lx-button>
            </span>    
        </span>

Upvotes: 0

Related Questions