What is the best way to keep the buttons neatly arranged when the page is minimized?

My page has a layout issue when minimized, causing the buttons to become disorganized

https://i.sstatic.net/6u6uZ.png

<tbody>
    <tr ng-if="PlacesOfInterest.length > 0" role="row" class="text-center" ng-repeat="row in PlacesOfInterest | filter: search  | limitTo: limit as filterPlaces " ng-cloak>
        <td style="vertical-align:middle"><span class="" ng-bind="row.PlaceName"></span></td>
        {{row.PlaceName}}
        <td><img ng-if="row.PlacePhotos.length > 0" src="{{row.PlacePhotos[0].URL}}" alt="No Image" style="height:150px; width:100%"/></td>
        <td>
            <span ng-init="max = 200" ng-bind="row.PlaceDescription.slice(0,max)"></span>
            <a ng-show="row.PlaceDescription.length > 200 && max == 200" ng-click="max = 10000">... <span class="more-less"> more</span></a>
            <a class="more-less" ng-show="max > 200" ng-click="max = 200"> less</a>
        </td>
        <td>
            <div>
                <a class="btn btn-sm btn-modify-places btn-min-width">Edit</a>
                <a class="btn btn-sm btn-default-places btn-min-width">Specialities</a>
                <a class="btn btn-sm btn-delete-places btn-min-width">Delete</a>
            </div>

        </td>
    </tr>
</tbody>

I want it to look the same as my page when it's fully maximized https://i.sstatic.net/iKAwb.png

htmlcss

Answer №1

To make your content responsive, you can utilize CSS "@media()" to apply specific styling based on the size of the page. The following code snippet demonstrates how CSS rules are applied when the viewport width is 800px or less:

@media (max-width: 800px){
    div a { width: 150px; clear:both;}
}

This is just an example - feel free to share your CSS and I'll demonstrate how it adjusts in your specific code. There are numerous possibilities with @media queries, explore more here.

Answer №2

To achieve this layout, utilize css flexbox. In case you are utilizing bootstrap, you can use the class d-flex.

.btn {
  background: green;
  color: #fff;
  padding: 1em;
  color: #fff;
  background-color: #28a745;
  border-color: #28a745;
  padding: .25rem .5rem;
  border-radius: .2rem;
}

.d-flex {
  display: flex;
}

.mr-1 {
  margin-right: 0.5em;
}
<table>
  <tbody>
    <tr ng-if="PlacesOfInterest.length > 0" role="row" class="text-center" ng-repeat="row in PlacesOfInterest | filter: search  | limitTo: limit as filterPlaces " ng-cloak>
      <td style="vertical-align:middle"><span class="" ng-bind="row.PlaceName"></span></td>
      {{row.PlaceName}}
      <td><img ng-if="row.PlacePhotos.length > 0" src="{{row.PlacePhotos[0].URL}}" alt="No Image" style="height:150px; width:100%" /></td>
      <td>
        <span ng-init="max = 200" ng-bind="row.PlaceDescription.slice(0,max)"></span>
        <a ng-show="row.PlaceDescription.length > 200 && max == 200" ng-click="max = 10000">... <span class="more-less"> more</span></a>
        <a class="more-less" ng-show="max > 200" ng-click="max = 200"> less</a>
      </td>
      <td>
        <div class="d-flex">
          <a class="btn btn-sm mr-1 btn-modify-places btn-min-width">Edit</a>
          <a class="btn btn-sm mr-1 btn-default-places btn-min-width">Specialties</a>
          <a class="btn btn-sm btn-delete-places btn-min-width">Delete</a>
        </div>
      </td>
    </tr>
  </tbody>
</table>

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

Combining Content, Attr, and Url in a single statement

I've been utilizing the content attribute for quite some time now, but today I decided to explore something different. Instead of relying on JS to show an image tooltip, I was curious if it could be done dynamically using CSS. So I attempted the foll ...

cssurlattrcss-content

What is the best way to center an image within its div, especially when the image size may vary and could be larger or smaller than the div wrapper?

Is there a way to horizontally center an image inside a div, regardless of the size difference between the image and its wrapper? I am aware of a Javascript solution, but I am specifically looking for a CSS-based solution. The following sample code does ...

css

Is the dropdown causing everything beneath it to shift?

A dropdown is in place to display certain content. <ul class="menus" style=""> <li>hey</li> </ul> Here is the corresponding CSS: .menus { width: 607px; background-color: white; border-bottom: solid 1px #9f9f9f; ...

css

Building a nested table within a parent table in bootstrap is a breeze

Can you provide guidance on nesting tables in Bootstrap-3? Whenever I attempt it, the second table ends up being displayed after the first one. ...

csstwitter-bootstrap-3

Rotating 3D cube with CSS, adjusting height during transition

I'm attempting to create a basic 2-sided cube rotation. Following the rotation, my goal is to click on one of the sides and have its height increase. However, I've run into an issue where the transition occurs from the middle instead of from the ...

javascriptjquerycss

Plugin for turning text into "leet speak" using jQuery and Javascript

Recently, I've been on the hunt for a 1337 translator that I can seamlessly integrate into a jQuery plugin. While I believe I'm making progress, I can't shake off the feeling that something's amiss. My gut tells me that what I currently ...

javascriptjqueryhtmljquery-plugins

Tips for deactivating dropdown values based on the selection of another dropdown

There are two dropdown menus known as minimum and maximum, each containing numbers from 1 to 25. If a value is selected from the minimum dropdown (e.g. 4), the maximum dropdown should only allow values that are equal to or greater than the selected value ...

javascriptjqueryhtmlhtml-select

Refreshing the Table to Update Data

I am working on a jquery application that includes a table with time and number fields. My goal is to increment the values every 3 seconds by creating a function to update the numbers automatically. Initially, the data in the table looks like this: Kobe ...

javascriptjqueryhtmldatatables

Exploring the process of implementing a dynamic background image feature in Vue

Looking to create a dynamic navbar and change its background image. I attempted the following: Here is my attempt: <b-navbar toggleable="lg" v-bind:style="headerStyle"> this.headerStyle = { backgroundImage: &a ...

javascriptcssvue.jsfrontend

Conceal CSS navigation bar with a single click

Is there a way to hide the dropdown menu after clicking on any item? How can I make it return to its initial state? Primarily, I want it hidden for mobile users. It currently works fine but remains open on mobile devices until another part of the page is c ...

javascriptjqueryhtmlcss

What steps can be taken to ensure that the content in column two does not impact the positioning of content in column one?

Is there a way for the input text container to remain in its original position within the layout even after submitting text? Usually, when the data displayed container's height increases, it pushes the input text container down. Despite trying absolu ...

htmlcssbootstrap-5

Is it advisable for postcss plugins to list postcss as a peer dependency?

I'm trying to incorporate the PostCSS Sass Color Function into my project. Unfortunately, I encountered this error: PostCSS plugin error: Your current version of PostCSS is 6.0.22, while postcss-sass-color-functions requires 5.2.18. This discrepa ...

javascriptcssnpmsasspostcss

Tips for attaching the Bootstrap 5 dropdown menu to a particular element, especially when the dropdown element is contained within another element that has an overflow property set to hidden

I am utilizing the Bootstrap 5 dropdown menu within an owl-carousel. However, the dropdown is getting clipped because the outer div has an 'overflow:hidden' style in the owl-carousel. https://i.sstatic.net/YD9l2.jpg For the complete code snippe ...

javascripthtmljquerytwitter-bootstrapbootstrap-5

Flexbox Table Exceeding Page Width

I am currently experiencing an issue where a table within a flexbox layout is extending beyond the parent flexbox, causing the page to become wider than the browser window. Here is a representation of the problem I am facing: #flex { display:flex; d ...

htmlcss

Implementing onMouseEnter and onMouseLeave functionalities for music player

Currently facing a challenge while developing a music player app. I am trying to implement a feature where: Upon hovering over a song, a "play" button should appear in place of the song number. The currently playing song should display a "pause" ...

javahtmlreactjsjsx

Should the .js file type be omitted in the <script> tag for semantic accuracy?

Upon reviewing some inherited code, I noticed that JavaScript files are being linked in the following format: <script src="/js/scriptfile" type="text/javascript"></script> However, I was expecting to see: <script src="/js/scriptfile.js" ...

javascripthtml

Set a div to have both absolute positioning and sticky behavior

Looking to create a div ("profilemenu") that pops out on the right side of the page triggered by a button (I'll handle this part). I want it to have a sticky attribute, but positioning has been tricky. Using position: absolute works for proper placeme ...

htmlcss

hover-triggered keyframe animation

Recently, I've been experimenting with CSS keyframe animation using the code below: .pulse-animation { margin: 50px; display: block; width: 52px; height: 52px; border-radius: 50%; background: #ff8717; cursor: pointer; animation: pul ...

htmlcsskeyframe

Concealing or revealing an image with jQuery when hovering

I currently have 3 <a> tags within my html, each containing 2 images. Specifically, the greyscale images are the ones that are visible while the colored ones are set to display:none. I am aiming to achieve a functionality where upon hovering over th ...

javascriptjqueryhtmlcss

Display the closing tag depending on specific conditions to simulate the behavior of a calendar

Is it possible to conditionally render a closing tag using v-if? If so, what is the correct way to do it? Initially, I tried the following: <template v-for="day in days"> <td class="days">{{day.number}}</td> <template v-if ...

javascriptcssvue.jsvuejs2vue-component