Creating a user-friendly responsive design similar to Whatsapp web by utilizing Bootstrap 4 and Ember framework

I am currently in the process of creating a user interface similar to Whatsapp web. My tools include Bootstrap 4 and Ember 3.2. The foundation of my idea is set, with a message box positioned at the bottom of the screen using the fixed-bottom Bootstrap class. I have also successfully implemented a message list that automatically scrolls down within a custom component container.

export default Component.extend({
    didRender() {
        this.$().parents('html, body').scrollTop(this.$(document).height()); // Scroll immediately
    }
});

In regards to the styling of the list:

<div id="ember390" class="ember-view">
<div class="container-fluid pt-5" style="border: 1px solid red;margin-bottom: 32vh;">

I have added a margin-bottom: 32v which lifts the message list above the input box. This technique works well on full HD screens but poses challenges on smaller displays due to Bootstrap's responsive design.

My workaround involves calculating the margin-bottom value based on window size and the message box container. However, I am unsure if this approach is correct or if there is a pure CSS alternative.

Additionally, integrating jQuery with Ember.js introduces complexities such as limited access to the message input container within the message list component.

For reference, here is an example: https://www.bootply.com/QKVffslOIf

htmlcssember.jsbootstrap-4

Answer №1

If you're working on a chat application where the chat is positioned at the bottom, like in my project , then flexbox might be a more suitable option for you.

Believe it or not, achieving this layout can actually be done using just CSS! :)

Here's how I implement it:

In the chat/template.hbs file:

<div class='flex-grow flex-column align-items-stretch chat-container'>

  {{outlet}}

</div>

In the chat/privately-with/template.hbs file:

<ChatHistory class='flex-grow flex-column' @messages={{messages}}/>

<ChatEntry class='p-l-md p-r-md' @to={{model.targetIdentity}} />

I've utilized these techniques across multiple projects, and this is the essence of what's going on - I'm not certain if Bootstrap offers similar classes (I personally utilize Bulma SASS functions and variables):

@mixin flexUtils($modifier) {
  .flex-row#{$modifier} {
    display: flex !important;
    flex-direction: row;
  }

  .flex-column#{$modifier} {
    display: flex !important;
    flex-direction: column;
  }

  .flex-wrap#{$modifier} { flex-wrap: wrap; }
  .flex-grow#{$modifier} { flex-grow: 1; }
  .flex#{$modifier} { display: flex; }

  @for $i from 0 through 20 {
    .flex-width-#{$i * 5}#{$modifier} {
      flex-basis: #{$i * 5%};
    }
  }


  .align-items-start#{$modifier} { align-items: flex-start; }
  .align-items-end#{$modifier} { align-items: flex-end; }
  .align-items-center#{$modifier} { align-items: center; }
  .align-items-stretch#{$modifier} { align-items: stretch; }
  .align-items-baseline#{$modifier} { align-items: baseline; }
  .justify-content-start#{$modifier} { justify-content: flex-start; }
  .justify-content-end#{$modifier} { justify-content: flex-end; }
  .justify-content-center#{$modifier} { justify-content: center; }
  .justify-content-space-between#{$modifier} { justify-content: space-between; }
  .justify-content-space-around#{$modifier} { justify-content: space-around; }
  .justify-content-space-evenly#{$modifier} { justify-content: space-evenly; }
}



@include mobile {
  @include flexUtils('-mobile');
}

@include tablet {
  @include flexUtils('-tablet');
}

@include desktop {
  @include flexUtils('-desktop');
}

@include flexUtils('');

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

Confusion between Codeigniter's URL and base_url() function

$config['base_url'] = 'localhost/project'; <link href="<?= base_url(); ?>/css/bootstrap.min.css" rel="stylesheet"> An issue arises with the CSS not loading on the view due to a double '/' in the URL. This occur ...

phphtmlcsscodeigniter

What is the best way to customize Bootstrap 4 carousel indicators by removing the fill and only showing circular outlines?

I created a carousel and am trying to customize the indicators at the bottom to be white hollow circles with no or white fill. By default, they appear as long, rectangular, white shapes. I was able to transform them into circular, dark circles by adjusting ...

bootstrap-4

Is the custom CSS being overridden by the bootstrap.css.map file?

I am currently working with Bootstrap 4 and I am attempting to adjust the padding for the navigation links within the navbar using my own custom CSS file: .nav-link { padding: 0.15rem; } However, the styling that is being applied comes from the followin ...

cssbootstrap-4

Email Coding Problem

This email serves as a confirmation from a MailJet subscription widget. The issue at hand is that the body of the email appears too wide in Outlook, but the header is responsive and displays correctly. I have made several attempts such as setting fixed wid ...

htmlemail

Accessing and retrieving data from a designated cell in an HTML Table using Python with Selenium WebDriver

My main question is: How can I extract the Name of the candidate from an HTML Table and write it into a file? (the goal of my program is to enter a registration number on a website, submit it, retrieve the candidate's name, save the registration numb ...

htmlseleniumselenium-webdriver

Is there no sign of rails being utilized in production?

There are some classic image png files located in app/assets/images/... However, in production, after running rake assets:precompile The images do not appear! Upon inspecting the CSS source code, I noticed that .logo { background-image: url("/ass ...

cssimageruby-on-rails-4sassassets

Display the contents of a <div> tag from one HTML file onto another HTML file

Recently I embarked on learning HTML and came across a peculiar doubt. My goal is to create a section div on the first page that changes dynamically based on the menu item clicked, rather than redirecting to another HTML page. I've experimented with s ...

javascriptjqueryhtmlcss

Problem with sending a form using Ajax

I've set up a page that dynamically generates a list of items. Each item in the list includes a button to submit a form with data specific to that item (the sorting is working correctly). The form submission is handled by the following jQuery code: & ...

phpjqueryhtml

Why does the variable in throw new exception print instead of the variable value being printed?

<div style="text-align: left;"> <form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>"> Name:<input type="text" name="name"><br> Age:<input type="text" name="age"> <br> ...

phphtml

Displaying a loading indicator as content loads within the iframe

How to Display a Loading Indicator During Content Loading Within an iFrame: 1) When a postback or submit event occurs within a form inside the iFrame ...

asp.netjavascriptjqueryhtml

The challenges of positioning HTML li elements in a floating layout

Check out my website: . I'm having an issue with the layout where two <li> elements are stacked on top of each other and one is floating next to them, but it's only floating next to the second one. How can I make it float next to the first ...

htmlcss

What is the best way to include PHP code within an HTML tag?

I need help figuring out how to display the value of a variable called 'fname' inside an HTML tag. Below is a snippet of my code where I'm trying to get the input value and print it in a paragraph tag. <?php if (isset($_POST['submit ...

phphtml

I'm looking to design a navbar similar to the one in the provided link, and I'd like it to appear when scrolling

I'm struggling to figure out how this particular navbar was created. How can I add a navlist for Videos and make the navbar visible upon scrolling? Are there any resources, articles, or hints to help me get started with this? LINK - ...

javascripthtmlcss

What is the best way to position href text on the top of a rectangular div box?

Whenever I try to position the text above the rectangle, it disables the link. How can I resolve this issue? Additionally, when attempting to change the color of the "San Diego" text, I'm unable to adjust its position. Just a heads up, I am new to HT ...

htmlcsstextbox

My node.js code is not producing the expected result. Can anyone point out where I may be going wrong?

I've been working on a BMI calculator where I input two numbers, they get calculated on my server, and then the answer is displayed. However, I'm having trouble receiving the output. When I click submit, instead of getting the answer, I see a lis ...

javascripthtmlnode.jsexpress

Incorporating existing CSS styles into a new CSS file

I'm a little confused by the title, so let me clarify with an example. Let's say I have the following CSS code inside a file: #container_1 { width:50%; border:1px solid black; } #container_2 { background-color:red; padding:5px; ...

css

If the width is below 767, the previous code will not be effective in jQuery

Challenge: How can I ensure that the code within the if statement only executes when the screen width exceeds 767px, and does not work if it is less than 767px? Using jQuery: $(document).ready(function() { $(window).resize(function() { if ($( ...

javascriptjquerycss

dirpagination fails to display all rows in the dataset

I've been working on creating tables with 3 divs, as shown in the link below:- https://github.com/anirbanmishra/congress.php/blob/master/web_test Additionally, I have a javascript file available here:- https://github.com/anirbanmishra/congress.php/bl ...

javascripthtmlangularjsangularjs-ng-repeatdirpagination

What is the process for converting HTML to RTF using Java programming language?

When working with the basic API of JAVA using RTFEditorKit and HTMLEditorKit, I encountered a limitation where certain tags like <br/> and <table> were not recognized. In my search for better solutions to convert HTML to RTF, I came across two ...

javahtmlrtf

css3 animation keyframes timing function is exclusive to chrome

After creating a preloader animation using CSS3, I noticed that it only functions properly on Chrome. On all other browsers, the animation works, but the timing for the middle bar is delayed, throwing off the entire animation. I'm puzzled because all ...

cssgoogle-chromeanimationcross-browserkeyframe