Search code examples
htmlcsstwitter-bootstrapsummernote

Summernote modal has no padding

I am using a package for my Laravel application called Ticketit.

This utilises Summernote for text editing, however when I want to add links, pictures etc, the modal window that opens up for this provides no padding around the inputs.

I'm not great with CSS and I'm not sure why this is happening or what I can do to fix this.

You can view an example of what I am facing via the Ticketit demo site; http://ticketit.kordy.info/tickets/create. You can log in with [email protected] and demo and it will take you to the ticket create page. On clicking to add a link you will see the below:

TicketIt create insert link modal

The modal body code looks like this:

<div class="modal-body">
    <div class="form-group note-group-select-from-files">
        <label>Select from files</label>
        <input class="note-image-input form-control" type="file" name="files" accept="image/*" multiple="multiple">
    </div>
    <div class="form-group" style="overflow:auto;">
        <label>Image URL</label>
        <input class="note-image-url form-control col-md-12" type="text">
    </div>
</div>

How can I provide some padding around the form labels and inputs so that they aren't touching the sides of the modal window?

Note, that the CSS for the Summernote inputs are provided via a CDN currently and so I can't edit the source for this directly - I am hoping there is a setting for Summernote I can change.

Otherwise I can just add some custom CSS in a seperate stylesheet.

Solution

  • You would need to change the padding on .modal-body:

    .modal-body {
  padding: 30px;
}

    Applying that rule will give you this:

    enter image description here