Increase size of Add Modal - grocery CRUD forum

GaryW

Member

Posted 02 October 2019 - 13:22 PM

Hi.

I have an Add Modal that only has one Relationship drop down in it, however the drop down menu is longer than the pop up window size. An outer scroll bar appears, but its not very pretty to see the drop down menu chopping off because the Modals height is not high enough.

In inspector I can manually over ride the min-height:250px to min-height: 500px and it looks beautiful, however I cant find what governs that code to have it change in the real code.

<div class="modal-body gc-modal-body" style="min-height: 250px; max-height: 953px;"><div>

Any help appreciated

Soreno

Member

Posted 02 October 2019 - 18:01 PM

Hi GaryW.

Try to rewrite that style from your view.php. Something like:

<style>
.gc-insert-modal .gc-modal-body {
   min-height: 500px;
   max-height: 953px;
}
</style>

GaryW

Member

Posted 02 October 2019 - 19:27 PM

Thank you Soreno, unfortunately that doesn't work. The Min-Height Css is inline so it gets over ridden.

Soreno

Member

Posted 02 October 2019 - 19:58 PM

Ok, then use "!important"

.gc-insert-modal .gc-modal-body {
   min-height: 500px !important;
   max-height: 953px !important;
}

GaryW

Member

Posted 02 October 2019 - 20:13 PM

You would think that would work but it doesnt

Ok, then use "!important"

.gc-insert-modal .gc-modal-body {
   min-height: 500px !important;
   max-height: 953px !important;
}

Soreno

Member

Posted 02 October 2019 - 20:34 PM

[attachment=1382:Screenshot_20191002_232514.png]

GaryW

Member

Posted 02 October 2019 - 21:22 PM

Screenshot_20191002_232514.png

Curious, where in your view are you coding?

Soreno

Member

Posted 03 October 2019 - 07:46 AM

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <?php foreach($css_files as $file): ?>
        <link type="text/css" rel="stylesheet" href="<?php echo $file; ?>" />
    <?php endforeach; ?>
    <style>
     .gc-insert-modal .gc-modal-body {
        min-height: 500px !important;
        max-height: 953px !important;
     }
    </style>
</head>
<body>
        <div style="padding: 20px 10px;">
            <?php echo $output; ?>
        </div>
        <?php foreach($js_files as $file): ?>
            <script src="<?php echo $file; ?>"></script>
        <?php endforeach; ?>
</body>
</html>

GaryW

Member

Posted 03 October 2019 - 15:03 PM

Thats where i am putting it, i can see it in my source code but its not showing up in the inspector window.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <?php foreach($css_files as $file): ?>
        <link type="text/css" rel="stylesheet" href="<?php echo $file; ?>" />
    <?php endforeach; ?>
    <style>
     .gc-insert-modal .gc-modal-body {
        min-height: 500px !important;
        max-height: 953px !important;
     }
    </style>
</head>
<body>
        <div style="padding: 20px 10px;">
            <?php echo $output; ?>
        </div>
        <?php foreach($js_files as $file): ?>
            <script src="<?php echo $file; ?>"></script>
        <?php endforeach; ?>
</body>
</html>

GaryW

Member

Posted 03 October 2019 - 15:15 PM

Fixed, thank you Sereno, slight correction:

        <style type="text/css">
           .gc-modal-body {
           min-height: 500px !important;
           max-height: 953px !important;
           }
      </style>