CODEWITHSUNDEEP
htmlcss
A. L
A. L

Reputation: 12669

input and div displacing inline items

For some reason, when using div and input combined, the next inline item is displaced. See example below.

    div.inline-flex {
        display: inline-flex;
    }
<div>
        <header>Object control:</header>
        <div style="display: inline-block;">
            Snap to grid size: 
            <div style="font-size: 12px;">(default: 50)</div>
            <input 
                type="number" 
                value="50" 
                v-model="gridSize" 
                style="width: 50px;"
            /> 
            <button 
                :class="{active: store.state.DrawMap.shouldSnap}" 
                @click="store.commit('drawmap_toggle_snap')"
            >
                Snap
            </button>
        </div>
        <div class="inline-flex" style="flex-direction: column">
            <button 
   
                @click="remove_object"
            >   
                Remove
            </button>
       
        </div>
</div>

What it should look like

The remove button should be next to the Snap to grid size line.

div.inline-flex {
        display: inline-flex;
    }
<div>
        <header>Object control:</header>
        <div style="display: inline-block;">
            Snap to grid size:  
            <button 
                :class="{active: store.state.DrawMap.shouldSnap}" 
                @click="store.commit('drawmap_toggle_snap')"
            >
                Snap
            </button>
        </div>
        <div class="inline-flex" style="flex-direction: column">
            <button 
   
                @click="remove_object"
            >   
                Remove
            </button>
       
        </div>
</div>

input and div were removed

Upvotes: 0

Views: 58

Answers (3)

Guruling Kumbhar
Guruling Kumbhar

Reputation: 1049

You can do vertical-align:top to quick fix it.

  div.inline-flex {
    display: inline-flex;
    vertical-align:top;
}

Upvotes: 0

23nigam
23nigam

Reputation: 621

You are Setting the inline to "(default: 50)" rather than "Snap to Grid". If you move the declaration of "(default: 50)" to the end, then the buttons will be displayed inline to "Snap to Grid". 

    div.inline-flex {
        display: inline-flex;
    }
<div>
        <header>Object control:</header>
        <div style="display: inline-block;">
            Snap to grid size: 
            <input 
                type="number" 
                value="50" 
                v-model="gridSize" 
                style="width: 50px;"
            /> 
            <button 
                :class="{active: store.state.DrawMap.shouldSnap}" 
                @click="store.commit('drawmap_toggle_snap')"
            >
                Snap
            </button>
        </div>
        <div class="inline-flex" style="flex-direction: column">
            <button 
   
                @click="remove_object"
            >   
                Remove
            </button>
       
        </div>
      <div style="font-size: 12px;">(default: 50)</div>
</div>

---update----

    div.inline-flex {
        display: inline-flex;
    }
<div>
        <header>Object control:</header>
        <div style="display: inline-block;">
            Snap to grid size: 
            <div class="inline-flex" style="flex-direction: column">
            <button 
   
                @click="remove_object"
            >   
                Remove
            </button>
       
        </div>
        <div style="font-size: 12px;">(default: 50)</div>
            <input 
                type="number" 
                value="50" 
                v-model="gridSize" 
                style="width: 50px;"
            /> 
            <button 
                :class="{active: store.state.DrawMap.shouldSnap}" 
                @click="store.commit('drawmap_toggle_snap')"
            >
                Snap
            </button>
        </div>
        
      
</div>

Upvotes: 0

Uriel Chami
Uriel Chami

Reputation: 418

I'm not sure if I get your desired output, but i think is this.

div.inline-flex {
  display: inline-flex;
}
<div>
  <header>Object control:</header>
  <div style="display: inline-block; float:left;">
    Snap to grid size:
    <div style="font-size: 12px;">(default: 50)</div>
    <input type="number" value="50" v-model="gridSize" style="width: 50px;" />
    <button :class="{active: store.state.DrawMap.shouldSnap}" @click="store.commit('drawmap_toggle_snap')">
                Snap
            </button>
  </div>

</div>
<div class="inline-flex" style="flex-direction: column;">
      <button @click="remove_object">   
                Remove
            </button>

    </div>

Upvotes: 1

Related Questions