[Bug] Nested Resource Button Iframe Styling Issue

[jackcaspers]

Describe the bug When using the nested resource button, the iframe that gets created does not use up the whole space. The width and height get cut way too short.

To Reproduce Create a nested button with any view will demonstrate the issue.

Expected behavior The page takes up the height and width in the frame.

Screenshots Example

This seems to fix the issue when added to the css. .ant-drawer-body { height: 100%; } .maelstrom-wrapper.iframe-mode { min-width: unset; }

[OwenMelbz]

Hi,

Can you provide more browser information please and the code you're using to initiate the drawer please.

We've been using this feature a lot and have not come across this problem yet e.g.

[jackcaspers]

Here are the main pieces of code I'm are using which initiates the drawer and the template file it uses. File that initiates it.

@extends('maelstrom::layouts.form')

@section('content')
    @component('maelstrom::components.form', [
        'action' => $action,
        'method' => $method,
    ])

        <h2 class="cloak">Account information</h2>

        @include('maelstrom::inputs.text', [
            'label' => 'Full name',
            'name' => 'name',
            'required' => true,
        ])

        @include('maelstrom::inputs.text', [
            'label' => 'Email address',
            'name' => 'email',
            'html_type' => 'email',
            'required' => true,
        ])

        <h2 class="cloak">Security</h2>

        @include('maelstrom::inputs.secret', [
            'label' => 'Change password',
            'name' => 'new_password',
            'help' => 'Only enter your password here if you want to change it.',
            'autocomplete' => 'new-password'
        ])

        @include('maelstrom::buttons.nested-resource', [
            'url' => route('2fa'),
            'button' => '2FA',
            'style' => 'primary',
        ])

        @slot('buttons')
            <div class="mt-6">
                @include('maelstrom::buttons.save')
            </div>
        @endslot

    @endcomponent
@endsection

Template file being used

@extends('maelstrom::layouts.basic')

@section('title')
    Two Factor Authentication
@endsection

@section('content')

<p>Two factor authentication (2FA) strengthens access security by requiring two methods (also referred to as factors) to verify your identity. Two factor authentication protects against phishing, social engineering and password brute force attacks and secures your logins from attackers exploiting weak or stolen credentials.</p>
<br/>
<p>To Enable Two Factor Authentication on your Account, you need to do following steps</p>
<strong>
<ol>
    <li>Click on Generate Secret Button , To Generate a Unique secret QR code for your profile</li>
    <li>Verify the OTP from Google Authenticator Mobile App</li>
</ol>
</strong>
<br/>

@if (session('error'))
 <div class="alert alert-danger">
     {{ session('error') }}
 </div>
@endif
@if (session('success'))
 <div class="alert alert-success">
     {{ session('success') }}
 </div>
@endif

 @if(!($data['user']->passwordSecurity))
    <form class="form-horizontal" method="POST" action="{{ route('generate2faSecret') }}">
        {{ csrf_field() }}
         <div class="form-group">
             <div class="col-md-6 col-md-offset-4">
                 <button type="submit" class="btn btn-primary">
                    Generate Secret Key to Enable 2FA
                 </button>
             </div>
         </div>
    </form>
 @elseif(!$data['user']->passwordSecurity->google2fa_enable)
    <strong>1. Scan this barcode with your Google Authenticator App:</strong><br/>
    <img src="data:image/png;base64, {{$data['qrcode_image']}} " width='200px' height='200px'/>
<br/><br/>
    <strong>2.Enter the pin the code to Enable 2FA</strong><br/><br/>
    <form class="form-horizontal" method="POST" action="{{ route('enable2fa') }}">
    {{ csrf_field() }}

    <div class="form-group{{ $errors->has('verify-code') ? ' has-error' : '' }}">
        <label for="verify-code" class="col-md-4 control-label">Authenticator Code</label>

        <div class="col-md-6">
            <input id="verify-code" type="password" class="form-control" name="verify-code" required>

            @if ($errors->has('verify-code'))
                <span class="help-block">
             <strong>{{ $errors->first('verify-code') }}</strong>
         </span>
            @endif
        </div>
    </div>
        <div class="form-group">
            <div class="col-md-6 col-md-offset-4">
                <button type="submit" class="btn btn-primary">
                    Enable 2FA
                </button>
            </div>
        </div>
    </form>
@elseif($data['user']->passwordSecurity->google2fa_enable)
    <div class="alert alert-success">
        2FA is Currently <strong>Enabled</strong> for your account.
    </div>
    <p>If you are looking to disable Two Factor Authentication. Please confirm your password and Click Disable 2FA Button.</p>
    <form class="form-horizontal" method="POST" action="{{ route('disable2fa') }}">
    <div class="form-group{{ $errors->has('current-password') ? ' has-error' : '' }}">
        <label for="change-password" class="col-md-4 control-label">Current Password</label>

        <div class="col-md-6">
            <input id="current-password" type="password" class="form-control" name="current-password" required>

            @if ($errors->has('current-password'))
                <span class="help-block">
             <strong>{{ $errors->first('current-password') }}</strong>
         </span>
            @endif
        </div>
    </div>
    <div class="col-md-6 col-md-offset-5">

            {{ csrf_field() }}
        <button type="submit" class="btn btn-primary ">Disable 2FA</button>
    </div>
    </form>
 @endif
</form>

@endsection

Thanks for the quick response!

[OwenMelbz]

Hi,

What about browser information please? Im guessing at the moment it's most likely that as it works on other sites.

---

I've noticed the html you've included contains Bootstrap css classes e.g. col-md-6 have you included Bootstrap with the CSS?

---

Also with your $errors stuff you can use the simplified Laravel helpers e.g.

<!-- This.... --->
@if ($errors->has('current-password'))
 <span class="help-block">
    <strong>{{ $errors->first('current-password') }}</strong>
</span>
@endif

<!-- Becomes This... --->
@error('current-password')
 <span class="help-block">
    <strong>{{ $message }}</strong>
</span>
@enderror