Bootstrap 4 класса d-print для формы - PullRequest
0 голосов
/ 04 мая 2018

Я создал форму, в которой я даю пользователю возможность отправить онлайн или распечатать и отправить по почте. Я использую простую команду печати javascript и отключаю все другие элементы для печати, кроме формы, используя класс .d-print-none. Вероятно, это действительно простая проблема, но когда я ее печатаю, она не выводит всю форму. Он заполняет одну страницу, а затем вторую пустую страницу. Хотите знать, поможет ли это добавить один из других классов d-print к элементу формы или, возможно, есть способ поднять форму на одну страницу. Это ошибка или я что-то упустил?

В коде ничего особенного нет, но я отобразил форму ниже.

<div class="col-lg-7 col-sm-12 d-print-inline-flex h-100 w-100" id="donationForm">
        <div class="card">
        <div class="card-header"><h4 class="text-center">Donation Request&nbsp;Form</h4>
        </div>
        <div class="card-body">
        <form name="donationRequest" id="donationRequest" novalidate>
        <h5>Event Information</h5>
        <div class="form-group">
        <label for="orgName">Name of Organization: </label>
        <input type="text" class="form-control" id="orgName" required placeholder="Name of Organization">
        </div>
        
        <div class="form-group">
        <label for="taxID">501(c)(3) Tax ID Number: </label>
        <input type="number" class="form-control" id="taxID" required placeholder="Tax ID Number">
        </div>
        
        <div class="form-group">
        <label for="eventName">Event Name: </label>
        <input type="text" class="form-control" id="eventName" required placeholder="Event Name">
        </div>
        
        <div class="form-group">
        <label for="eventDate">Date of Event: </label>
        <input type="date" class="form-control" id="eventDate" required placeholder="Event Date">
        </div>
        
        <div class="form-group">
        <label for="eventLoc">Event Location: </label>
        <input type="text" class="form-control" id="eventLoc" required placeholder="Event Location">
        </div>
        <hr>
        <h5>Contact Information</h5>
        <div class="form-group">
        <label for="contact">Contact Name: </label>
        <input type="text" class="form-control" id="contact" required placeholder="First &amp; Last Name of Contact Person">
        </div>
        
        <div class="form-group">
        <label for="address">Address: </label>
        <input type="text" class="form-control" id="address" required placeholder="Address of Organization">
        </div>
        
        <div class="form-group">
        <label for="city">City: </label>
        <input type="text" class="form-control" id="City" required placeholder="City of Organization">
        </div>
        
        <div class="form-group">
        <label for="state">State: </label>
        <input type="text" class="form-control" id="State" required placeholder="State of Organization">
        </div>
        
        <div class="form-group">
        <label for="zipcode">Zip Code: </label>
        <input type="number" class="form-control" id="zipcode" required placeholder="Zip Code of Organization">
        </div>
        
        <div class="form-group">
        <label for="phone">Phone: </label>
        <input type="number" class="form-control" id="phone" required placeholder="123-456-7890">
        </div>
        
        <div class="form-group">
        <label for="email">Email: </label>
        <input type="email" class="form-control" id="email" required placeholder="email@provider.com">
        </div>
       
        <hr>
        
        <h5>Type of Donation Request:</h5>
         <div class="form-group">
         <label class="form-check-inline"><input type="checkbox" value="">&nbsp;Financial Contribution</label>
<label class="form-check-inline"><input type="checkbox" value="">&nbsp;Auction/Drawing Item</label>
<label class="form-check-inline"><input type="checkbox" value="">&nbsp;Other</label>
		</div>

<div class="form-group">
<label for="description">Please briefly note how this event will benefit our community:</label>
 <textarea class="form-control" rows="7" id="comment"></textarea>
 </div>
 <hr>
 <div class="form-group">
  <div class="row">
 <div class="col-md-6"><button type="submit" class="btn btn-primary btn-block"><em class="fa fa-send"></em>&nbsp;Submit Request</button></div>
 <div class="col-md-6"><a href="#" onclick="window.print()" value="Print Form" class="hoverNoLine"><button class="btn btn-primary btn-block"><em class="fa fa-print"></em>&nbsp;Print Form</button></a></div>
 </div>
 </div>
 
 
 
        
        
        
        </form>
        </div>
        
        
        </div>
        </div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...