Skip to content
GitLab
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • B bootstrap
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 263
    • Issues 263
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 114
    • Merge requests 114
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Bootstrap
  • bootstrap
  • Merge requests
  • !7529

Fluid responsive modals 2.2.2

  • Review changes

  • Download
  • Email patches
  • Plain diff
Closed Administrator requested to merge github/fork/peterhil/fluid-responsive-modals-2.2.2 into master Apr 10, 2013
  • Overview 0
  • Commits 3
  • Pipelines 0
  • Changes 1

Created by: peterhil

Hi!

I made styles for fluid modals that always fit small viewports (mobile devices).

The first commit 9ce48eb5 shows the basic idea, and two later ones fix the modal height when content is short and override some default styles and some polishing touches (rounded corners on body when header or footer is missing).

Media queries could also be used to overflowflow-wrap text on narrow viewports:

@media (max-width: 600px) { .row-fluid { overflow-wrap: break-word; word-wrap: break-word; // IE hyphens: auto; -webkit-hyphens: auto; } }

Media query styles could also be used for a "page like" view on mobile devices, to that the modal fits the whole screen. I may do this later.

A big problem with bootstrap modals is that the modal is fixed positioned and outside modal-backdrop. This would be much easier to achieve, if the modal HTML element would be inside fixed modal-backdrop and be absolutely positioned. However, I didn't want to touch the Javascript yet.

Btw, what's with the strange coding convention of not using any semicolons and putting commas at the start of the lines?

Assignee
Assign to
Reviewers
Request review from
Time tracking
Source branch: github/fork/peterhil/fluid-responsive-modals-2.2.2