Getting Bootstrap columns to work well with Angular ng-show

I am working with three columns in Bootstrap, all set to col-md-4 width. The middle column has an ng-show attribute that may hide it at times. When the rightmost column becomes visible due to friend requests, it displaces the middle column if it's hidden. How can I make sure the middle chatWindow column still occupies space even when hidden?

<div class="row">

  <div class="col-md-4 friendListWindow" ng-init="getFriends()">
    Friends List
    <form ng-submit='addFriend(username)' name='addFriendForm'>
      <input type='text' name='username' ng-model='username' required/>
      <input type='submit' ng-disabled='!addFriendForm.$valid' value='Add Friend'>
    </form>
    Online Friends
    <ul>
      <span ng-repeat='friend in friends track by $index | orderBy:"name"' ng-click='startChat(friend)'>
        <li ng-if='friend.online'>
          <span class='friendService'>{{friend.service}}</span>
          <span class='friendName'>{{friend.name}}</span>
        </li>
      </span>
    </ul>
  </div>


  <div class="col-md-4 chatWindow" ng-show="activeFriend">
    <div class="activeFriendBox">Chat with {{activeFriend.name}}</div>

    <div class="messages">
      <div ng-repeat='message in activeFriend.messages track by $index | orderBy:"timeStamp"'>
        <span>{{message.from}}</span>
        <span>{{message.message}}</span>
        <span>{{message.timestamp}}</span>
      </div>
    </div>

    <div class="sendMessage">
      <form ng-submit='sendMessage(messageText)' name='messageForm'>
        <input type='text' name='message' ng-model='messageText' required/>
        <input ng-disabled='!messageForm.$valid' type='submit' value='send'/>
      </form>
    </div>
  </div>

  <div class="col-md-4 friendRequestsWindow">
    <div class="friendRequests">
      <ul>
        <li ng-repeat='friend in friendRequests track by $index'>
          <span>New friend Request from: {{friend}}</span>
          <button ng-click='acceptFriendRequest(friend)'>Accept</button>
          <button ng-click='ignoreFriendRequest(friend)'>Ignore</button>
        </li>
      </ul>
    </div>

    <div class="acceptedFriendRequests">
      <ul>
        <li ng-repeat='friend in acceptedfriendRequests track by $index'>
          <span>{{friend}} accepted your friend request</span>
          <button ng-click='acknowledgeFriendRequest($index)'>Acknowledge</button>
        </li>
      </ul>
    </div>
  </div>

</div>

Answer №1

Try utilizing ng-show within the content of the col instead of directly on the col itself

For example, instead of

<div class="col-md-4" ng-show="xxx">content</div>

Consider using

<div class="col-md-4">
    <div ng-show="xxx">content</div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way for me to locate the ownerID?

I have a simple task that I need to complete My goal is for the user to be identified using my token when creating a post This is how the create function looks like: exports.create = async (req, res) => { const user = req.token; const users = awai ...

Guide on sending a basic ID using jQuery AJAX to an Action method in ASP.NET MVC

I'm facing an issue with a category drop-down list where I have written the following code in its onchange event: function onChange() { $.ajax( { url: '/Home/GetProducts/', type: 'POST', data: JSON.stringify({ID:$("#Category").val ...

Error message: "Uncaught ReferenceError: $ is not defined in BackboneJS and RequireJS"

In my Backbone application, I am using RequireJS. However, I keep encountering the error message Uncaught ReferenceError: $ is not defined, indicating that my libraries may not be loading properly. This is what my RequireJS config looks like: require.con ...

Adding Proxy-Authorization Header to an ajax request

It's surprising that there isn't much information available online about this issue I'm facing. When attempting to include a proxy authorization in the header of my ajax call, I encounter some difficulties. If I send it as shown below, no er ...

Issues with margin and padding-top not functioning properly when using @media for printing

Is there a way to add some space between the top of my webpage and my logo? I've tried adjusting the padding in my CSS, but when I check the print preview in Chrome, no spacing is visible. Below is my HTML code: <div class="container"> < ...

Localization for Timeago JS Plugin

Currently, I have integrated the jQuery TimeAgo plugin into my project and included the following code snippet for localization in Portuguese: // Portuguese jQuery.timeago.settings.strings = { suffixAgo: "atrás", suffixFromNow: "a partir de agora", ...

Using Vue.js to bind labels and radio buttons in a form

My goal is to generate a dynamic list of form polls based on the data. However, using :for or v-bind:for does not result in any HTML markup appearing in the browser, causing the labels to not select the corresponding input when clicked. I have prepared a J ...

Is the callback function malfunctioning in AngularJS?

I recently started working with AngularJS and I am attempting to update a product using an Angular function. The product is successfully added, and within the success function, I call another function which works fine. However, in the second function, I en ...

Is there a way to send all the results of a Flask database query to a template in a way that jQuery can also access

I am currently exploring how to retrieve all data passed to a template from a jQuery function by accessing Flask's DB query. I have a database table with customer names and phone numbers, which I pass to the template using Flask's view method "db ...

ReactJS - run a JavaScript snippet once the Ajax call has successfully fetched and displayed the data

Where is the optimal placement for JavaScript code in order to execute a plugin after rendering is complete? <html> <head> <script src='https://cdnjs.cloudflare.com/ajax/libs/es6-promise/3.2.2/es6-promise.min.js'></script ...

Efficiently running multiple PHP pages with just one simple click

Below is the code fragment that I currently have: <html> <script type="text/javascript"> function Run() {var a=["ONE" ,"TWO" ,"THREE", "FOUR", "FIVE"]; window.location.href = "index.php?w1=" +a;} </script> <body> <input type="b ...

Ionic: Vertical scroll bars becoming unaligned when injecting views into a splitview

After experimenting with the split view feature and exploring routing, I wanted to create a "main layout" split view and dynamically inject different views into it at runtime. You can see an example of what I'm trying to achieve in this Plunk. In my ...

The select dropdown default choice is not appearing as expected

My template is not showing the default select option that I have set for one select element. I attempted to achieve this with the following code: <div class="select"> <select (change)="calculaMes(mesEscolhido)" [(ngModel)]="mesEscolhido" na ...

The CSS property object-fit: cover is unable to properly display JPEG images with EXIF orientation greater than 1

I'm having trouble with my Angular app and creating a gallery of photos from my Samsung Galaxy. I am using the "object-fit: cover" css attribute for a nice design, but it only seems to work correctly when the image has an EXIF "orientation" property e ...

Incorporate VLC player into a webpage without any visible control options

Is there a way to embed a flash video in a webpage without showing any controls? I managed to embed a flash video using VLC with the following code: <embed src="img/Wildlife.wmv" height="480" width="640"> However, I want the video to play without ...

A guide on transforming Jonatas Walker's TimePicker into a custom JavaScript class or a versatile jQuery plugin

I came across a timepicker solution on this Stack Overflow answer that I really liked. However, I encountered difficulties trying to implement it in a project where input elements are dynamically created. It seemed like the timepicker required specific han ...

How can we display the first letter of the last name and both initials in uppercase on the JavaScript console?

I'm a new student struggling with an exercise that requires writing multiple functions. The goal is to create a function that prompts the user for their first and last name, separates the names using a space, and then outputs specific initials in diff ...

JavaScript - undefined results when trying to map an array of objects

In the process of passing an object from a function containing an array named arrCombined, I encountered a challenge with converting strings into integers. The goal is to map and remove these strings from an object titled results so they can be converted i ...

Is there a way to retrieve a comprehensive list of all anchors that contain the data-ng-click attribute

I am currently working on a web application built with asp.net and angularjs. My goal is to specifically retrieve all anchor tags that have the attribute data-ng-click assigned to them. Is there a way to achieve this? If so, how can it be done? I a ...

When implementing the Dropdown Picker, it is important to avoid nesting VirtualizedLists inside plain ScrollViews for optimal

Currently, I am utilizing the RN library react-native-dropdown-picker. However, when I enclose this component within a ScrollView, it triggers a warning: "VirtualizedLists should never be nested inside plain ScrollViews with the same orientation because ...