Styjun

Park the computer

What can a novel do that film and TV cannot?

Boss has banned cycling to work because he thinks it's unsafe

Are there advantages in writing by hand over typing out a story?

Is it possible that Curiosity measured its own methane or failed doing the spectrometry?

In the Seventh Seal why does Death let the chess game happen?

Interview Question - Card betting

How can I define a very large matrix efficiently?

Was Wolfgang Unzicker the last Amateur GM?

Who pays for increased security measures on flights to the US?

Why do we need a bootloader separate than our application program in MCU's?

How to deal with a Murder Hobo Paladin?

Why do Klingons use cloaking devices?

Has there ever been a cold war other than between the U.S. and the U.S.S.R.?

Can mxd files be under version control?

How did Einstein know the speed of light was constant?

Speeding up thousands of string parses

Why no parachutes in the Orion AA2 abort test?

Why did C++11 make std::string::data() add a null terminating character?

CPA filed late returns, stating I would get money; IRS says they were filed too late

How come having a Deathly Hallow is not a big deal?

How might boat designs change in order to allow them to be pulled by dragons?

Taking advantage when the HR forgets to communicate the rules

Motorcyle Chain needs to be cleaned every time you lube it?

How to make a modal fullscreen?

How to use Bootstrap 4 with SASS in Angularngb Modal make background scrollableHow to write testcase for bootstrap-vue modal?Comparison between Bootstrap-Vue and Bootstrap 4bootstrap-vue modal not displayingBootstrap-vue: how to pass data to modal?Click outside a bootstrap-vue modal component generates onClick eventHow to create transition/animation on bootstrap-vue modal[b-modal]Can't get a fullscreen modal using NgbModal when passing content as a componentHow to attach a Vue Bootstrap Modal to a different parent?

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

0

I am trying to make a bootstrap vue modal fullscreen. Which css classes should I override, I want to do this in a scoped style in the component that will use this modal.

bootstrap-4 bootstrap-vue

share|improve this question

edited Mar 25 at 19:52

James A Mohler

7,6331212 gold badges3434 silver badges5555 bronze badges

asked Mar 25 at 19:12

ConfusedCoderConfusedCoder

4777 bronze badges

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  What have you tried so far?
  
  – Zim
  Mar 25 at 19:59
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I have tried overriding the classes by using emmanuels answer github.com/bootstrap-vue/bootstrap-vue/issues/1730, I have tried globally overriding the modal-body, modal-content, modal-dialog class and giving them 100% width and height (the height worked but the width wasn't working and I couldn't figure out why)
  
  – ConfusedCoder
  Mar 25 at 20:05
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  The width needs to be overridden using max-width: 100%. There is an additional media query that has the dialog set to 500px.
  
  – brooksrelyt
  Mar 25 at 20:09
  

  
  
  
  

add a comment | 

0

I am trying to make a bootstrap vue modal fullscreen. Which css classes should I override, I want to do this in a scoped style in the component that will use this modal.

bootstrap-4 bootstrap-vue

share|improve this question

edited Mar 25 at 19:52

James A Mohler

7,6331212 gold badges3434 silver badges5555 bronze badges

asked Mar 25 at 19:12

ConfusedCoderConfusedCoder

4777 bronze badges

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  What have you tried so far?
  
  – Zim
  Mar 25 at 19:59
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I have tried overriding the classes by using emmanuels answer github.com/bootstrap-vue/bootstrap-vue/issues/1730, I have tried globally overriding the modal-body, modal-content, modal-dialog class and giving them 100% width and height (the height worked but the width wasn't working and I couldn't figure out why)
  
  – ConfusedCoder
  Mar 25 at 20:05
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  The width needs to be overridden using max-width: 100%. There is an additional media query that has the dialog set to 500px.
  
  – brooksrelyt
  Mar 25 at 20:09
  

  
  
  
  

add a comment | 

I am trying to make a bootstrap vue modal fullscreen. Which css classes should I override, I want to do this in a scoped style in the component that will use this modal.

bootstrap-4 bootstrap-vue

share|improve this question

edited Mar 25 at 19:52

James A Mohler

7,6331212 gold badges3434 silver badges5555 bronze badges

asked Mar 25 at 19:12

ConfusedCoderConfusedCoder

4777 bronze badges

share|improve this question

edited Mar 25 at 19:52

James A Mohler

7,6331212 gold badges3434 silver badges5555 bronze badges

asked Mar 25 at 19:12

ConfusedCoderConfusedCoder

4777 bronze badges

share|improve this question

edited Mar 25 at 19:52

James A Mohler

7,6331212 gold badges3434 silver badges5555 bronze badges

asked Mar 25 at 19:12

ConfusedCoderConfusedCoder

4777 bronze badges

edited Mar 25 at 19:52

James A Mohler

7,6331212 gold badges3434 silver badges5555 bronze badges

edited Mar 25 at 19:52

James A Mohler

7,6331212 gold badges3434 silver badges5555 bronze badges

asked Mar 25 at 19:12

ConfusedCoderConfusedCoder

4777 bronze badges

asked Mar 25 at 19:12

ConfusedCoderConfusedCoder

4777 bronze badges

1 Answer
1

active

oldest

votes

1

You want to edit .modal-dialog and force the dimensions.

Example CSS:

.modal-dialog 
 max-width: 100%;
 margin: 0;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 height: 100vh;
 display: flex;

Additionally to get this working in vue. You can try adding a class to b-modal and trying something like this:

<div>
 <b-button v-b-modal.modal1>Launch demo modal</b-button>

 <!-- Modal Component -->
 <b-modal class="test-modal" id="modal1" title="BootstrapVue">
 <p class="my-4">Hello from modal!</p>
 </b-modal>
</div>

CSS:

.test-modal .modal-dialog 
 max-width: 100%;
 margin: 0;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 height: 100vh;
 display: flex;
 position: fixed;
 z-index: 100000;

share|improve this answer

edited Mar 25 at 20:23

answered Mar 25 at 20:07

brooksrelytbrooksrelyt

2,23744 gold badges1414 silver badges2727 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  This works globally but I only want to change this modal, how can I access .modal-dialog if i assign a class to b-modal?
  
  – ConfusedCoder
  Mar 25 at 20:16
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55344930%2fhow-to-make-a-modal-fullscreen%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

1

You want to edit .modal-dialog and force the dimensions.

Example CSS:

.modal-dialog 
 max-width: 100%;
 margin: 0;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 height: 100vh;
 display: flex;

Additionally to get this working in vue. You can try adding a class to b-modal and trying something like this:

<div>
 <b-button v-b-modal.modal1>Launch demo modal</b-button>

 <!-- Modal Component -->
 <b-modal class="test-modal" id="modal1" title="BootstrapVue">
 <p class="my-4">Hello from modal!</p>
 </b-modal>
</div>

CSS:

.test-modal .modal-dialog 
 max-width: 100%;
 margin: 0;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 height: 100vh;
 display: flex;
 position: fixed;
 z-index: 100000;

share|improve this answer

edited Mar 25 at 20:23

answered Mar 25 at 20:07

brooksrelytbrooksrelyt

2,23744 gold badges1414 silver badges2727 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  This works globally but I only want to change this modal, how can I access .modal-dialog if i assign a class to b-modal?
  
  – ConfusedCoder
  Mar 25 at 20:16
  

  
  
  
  

add a comment | 

1

You want to edit .modal-dialog and force the dimensions.

Example CSS:

.modal-dialog 
 max-width: 100%;
 margin: 0;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 height: 100vh;
 display: flex;

Additionally to get this working in vue. You can try adding a class to b-modal and trying something like this:

<div>
 <b-button v-b-modal.modal1>Launch demo modal</b-button>

 <!-- Modal Component -->
 <b-modal class="test-modal" id="modal1" title="BootstrapVue">
 <p class="my-4">Hello from modal!</p>
 </b-modal>
</div>

CSS:

.test-modal .modal-dialog 
 max-width: 100%;
 margin: 0;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 height: 100vh;
 display: flex;
 position: fixed;
 z-index: 100000;

share|improve this answer

edited Mar 25 at 20:23

answered Mar 25 at 20:07

brooksrelytbrooksrelyt

2,23744 gold badges1414 silver badges2727 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  This works globally but I only want to change this modal, how can I access .modal-dialog if i assign a class to b-modal?
  
  – ConfusedCoder
  Mar 25 at 20:16
  

  
  
  
  

add a comment | 

You want to edit .modal-dialog and force the dimensions.

Example CSS:

.modal-dialog 
 max-width: 100%;
 margin: 0;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 height: 100vh;
 display: flex;

Additionally to get this working in vue. You can try adding a class to b-modal and trying something like this:

<div>
 <b-button v-b-modal.modal1>Launch demo modal</b-button>

 <!-- Modal Component -->
 <b-modal class="test-modal" id="modal1" title="BootstrapVue">
 <p class="my-4">Hello from modal!</p>
 </b-modal>
</div>

CSS:

.test-modal .modal-dialog 
 max-width: 100%;
 margin: 0;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 height: 100vh;
 display: flex;
 position: fixed;
 z-index: 100000;

share|improve this answer

edited Mar 25 at 20:23

answered Mar 25 at 20:07

brooksrelytbrooksrelyt

2,23744 gold badges1414 silver badges2727 bronze badges

.modal-dialog 
 max-width: 100%;
 margin: 0;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 height: 100vh;
 display: flex;

<div>
 <b-button v-b-modal.modal1>Launch demo modal</b-button>

 <!-- Modal Component -->
 <b-modal class="test-modal" id="modal1" title="BootstrapVue">
 <p class="my-4">Hello from modal!</p>
 </b-modal>
</div>

.test-modal .modal-dialog 
 max-width: 100%;
 margin: 0;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 height: 100vh;
 display: flex;
 position: fixed;
 z-index: 100000;

share|improve this answer

edited Mar 25 at 20:23

answered Mar 25 at 20:07

brooksrelytbrooksrelyt

2,23744 gold badges1414 silver badges2727 bronze badges

answered Mar 25 at 20:07

brooksrelytbrooksrelyt

2,23744 gold badges1414 silver badges2727 bronze badges

answered Mar 25 at 20:07

brooksrelytbrooksrelyt

2,23744 gold badges1414 silver badges2727 bronze badges