Εμφάνιση 1-1 από 1
  1. #1
    Εγγραφή
    24-09-2010
    Περιοχή
    Χαλκιδική
    Ηλικία
    24
    Μηνύματα
    684
    Downloads
    0
    Uploads
    0
    Τύπος
    ADSL
    Ταχύτητα
    24mbps
    ISP
    ΟΤΕ Conn-x
    Router
    ZTE ZXHN H108NS
    Πατήστε στην εικόνα για να τη δείτε σε μεγέθυνση. 

Όνομα:  DeepinScreenshot_select-area_20200306163402.png 
Εμφανίσεις:  2 
Μέγεθος:  5,2 KB 
ID: 212203

    Λύση[Edited]:
    Επειδή χρησιμοποιώ bootstrap, βάζει ένα έξτρα margin-bottom στα <label>. Έπρεπε να το αφαιρέσω.

    Υπάρχει ένα κενό στο ύψος του flexbox (κόκκινο χρώμα) μεταξύ των flex items (title και x) και του bottom border. Δοκίμασα να του δώσω padding 0 αλλά πάλι υπάρχει.
    Δεν μπορώ να βρω για ποιον λόγο συμβαίνει αυτό.

    [Edited]: Παρατήρησα ότι αυτό συμβαίνει επειδή χρησιμοποιώ bootstrap. Το θέμα είναι σε ποιο element προσθέτει η bootstrap
    κάποιο padding ή margin. Αν το βρω θα σας ενημερώσω.

    HTML:
    Κώδικας:
    <div class="alex-modal">
    
            <div class="alex-modal-content">
    
                <div class="alex-modal-titlebar">
                    <label class="alex-modal-title">Title</label>
                    <label [class]="m_env.icons.x" [ngClass]="{'alex-modal-x':true}"></label>
                </div>
                
                <input type="text" class="form-control">
                <input type="text" class="form-control">
                <input type="text" class="form-control">
                <input type="text" class="form-control">
            </div>
        </div>

    CSS:
    Κώδικας:
    *
    {
        box-sizing: border-box;
    }
    
    html, body
    {
        margin: 0;
    }
    
    
    .alex-modal
    {
        position: fixed;
        top     : 0;
        left    : 0;
        width   : 100%;
        height  : 100vh;
    }
    
    
    .alex-modal-content
    {
        position        : relative;
        max-width       : 80%;
        max-height      : 80vh;
        margin-left     : auto;
        margin-right    : auto;
        border-style    : solid;
        border-radius   : 1rem;
        padding         : 1rem;
        padding-top     : 0;
        top             : 50%;
        transform       : translateY(-50%);
        background-color: rgba(255, 255, 255, 0.8);
    }
    
    
    .alex-modal-titlebar
    {
        display      : -webkit-box;
        display      : -moz-box;
        display      : -ms-flexbox;
        display      : -webkit-flex;
        display      : flex;
        border-bottom: solid;
        margin-bottom: 1rem;
        background-color: red;
    }
    
    
    .alex-modal-title
    {
        flex-grow  : 2;
        font-size  : 1.5rem;
        font-weight: bold;
        font-style : italic;
        text-align : center;
        background-color: orange;
    }
    
    
    .alex-modal-x
    {
        flex-grow : 0;
        text-align: right;
        align-self: center;
        background-color: blue;
    }
    Τελευταία επεξεργασία από το μέλος babaliaris : 06-03-20 στις 17:50.

Bookmarks

Bookmarks

Δικαιώματα - Επιλογές

  • Δεν μπορείτε να δημοσιεύσετε νέα θέματα
  • Δεν μπορείτε να δημοσιεύσετε νέα μηνύματα
  • Δεν μπορείτε να αναρτήσετε συνημμένα
  • Δεν μπορείτε να επεξεργαστείτε τα μηνύματα σας
  •  
  • Τα BB code είναι σε λειτουργία
  • Τα Smilies είναι σε λειτουργία
  • Το [IMG] είναι σε λειτουργία
  • Το [VIDEO] είναι σε λειτουργία
  • Το HTML είναι εκτός λειτουργίας