Concealing and Revealing Bootstrap Grid Elements

Exploring ways to streamline my development process, I am looking to apply bootstrap's best practices. However, I have a query regarding showing and hiding columns.

Here is the layout setup I am working with:

<div class="row" id="contactGrid">

<div class="col-sm-2">Sidebar</div>
<div class="col-sm-10">Content</div>

</div>

While utilizing AngularJS to toggle the Sidebar column, I anticipate the Content column stretching across the entire width of the container. However, it remains at 'col-10'. Should I manually adjust the class/width to col-sm-12 when hiding the sidebar?

Your assistance is greatly appreciated - this should be an easy fix!

cssangularjstwitter-bootstrap

Answer №1

When dealing with the element that has the col-sm-10 class, its width will always be 10/12 of its parent row's width. Therefore, it is important to update this dynamically when your sidebar toggles between hidden and visible states. Since you are already utilizing AngularJS, you can create a variable that dictates the visibility of your sidebar. This same variable can also be used to conditionally apply different classes to your content div based on whether the sidebar is visible or not.

<div class="row" id="contactGrid">
  <div class="col-sm-2" ng-show="booleanVariable">Sidebar</div>
  <div ng-class="{col-sm-10: booleanVariable, col-sm-12: !booleanVariable}">Content</div>
</div>

Answer №2

Hey Daniel!

I truly admire how you've embraced the BS/NG style of UI, a skill that I'm currently honing as well. The key lies in navigating those shortcuts seamlessly. As a finishing touch, I incorporated a ternary expression into the ng-class. My showFilterSidebar variable controls the hide/show function flawlessly. Thank you once more for your insights!

<div ng-class="showFilterSidebar ? 'col-sm-10' : 'col-sm-12'">

Answer №3

A simple solution is to switch the class from col-sm-2 to col-sm-12 in order to prevent any floating issues.

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

"Addressing the issue of an unrefreshed info-window in AngularJS and Google Maps

I've been facing some challenges with info-windows that display when clicking on custom markers. I managed to get them to show up, but the outcome is not quite right. What happens is, when I click on the first marker, the info box displays its content ...

javascriptangularjsgoogle-maps

An easy guide to animating multiple sections of progress bars individually in Bootstrap

My Bootstrap code successfully animates a section of progress bars when the user views it. However, it currently animates all progress bars on the page rather than just those in the viewed section. This means that when the user moves to another section, th ...

javascriptcsstwitter-bootstrap-3progress-barjquery-waypoints

Is there a way to create a menu using only CSS?

Is there a way to achieve this using only CSS without any JavaScript? For reference, here's the fiddle: http://jsfiddle.net/q646Ljg6/4/ This is the HTML: <div id="navigation" class="navigation"> <div id="dropmenu" class="dropmenu"> ...

javascriptjqueryhtmlcss

Selenium and AngularJS patiently wait before carrying out specific actions

I have been using selenium to test an AngularJS application and I am encountering an issue where I am unable to perform any actions on the page until it is fully loaded. Although I have considered using Thread.sleep(), I am aware that this is not the most ...

javascriptjavaangularjsseleniumselenium-webdriver

Exploring the possibility of utilizing jQuery for limited incremental scrolling

Is there a way to control the scrolling on a website so that users transition through slides sequentially? Take a look at this example: No matter how much you scroll, the website transitions to the next or previous slide one at a time (unless a specific ...

jquerycssscroll

What is the best way to check angular code that depends on global variables in karma tests?

Is there a way to effectively test angular code in karma that relies on a global variable? Despite the fact that using global vars is generally frowned upon, they may be necessary in certain situations due to existing code or dependencies. For example, if ...

angularjskarma-runner

Alignment with Angular 2 Material and Flex-Layout

I've been experimenting with angular 2 material and flex-layout in an attempt to create a responsive gallery of elements. Despite spending countless hours on it, I'm still unable to center my elements as desired: https://i.sstatic.net/Hsicy.png ...

cssangularflexboxangular-material2

The UI fails to refresh following the execution of an ng-click event within my AngularJS controller

After binding a button with an ng-click event that triggers a function in the controller, data is fetched using $http and everything works smoothly. However, when updating the model in the success-callback, the UI fails to update. Attempts to use $scope.$a ...

angularjsangularjs-scope

adding a new transformation to the current properties

Is it possible to add a new transform property to existing ones? For instance, let's say I have a div.animation with the following style: .animation { transform: translateX(-50%) translateY(-50%); } Now I want to include transform: scale(1) to ...

htmlcss

Changing the font family for Bootstrap Glyphicons on a button

I have recently started using Bootstraps Glyphicons and encountered an issue while trying to insert text inside a button with a glyphicon icon: <button type="button" class="btn btn-default pull-left" data-toggle="collapse" data-bind="attr:{'href&a ...

jqueryhtmlcsstwitter-bootstrapfonts

Using rewrite rules in web.config, ASP.NET can redirect any non-existing pages to the homepage

I am currently utilizing web.config in my ASP.NET SPA application to establish Rewrite Rules. This allows me to refresh pages without encountering errors, especially when working with AngularJS. However, I also want the ability to redirect users to the h ...

asp.netangularjsurl-rewriting

having difficulty implementing a horizontal scrollbar on my chart

Currently, I am in the process of utilizing angularjs google charts for my project. Specifically, I have integrated an angularjs google column chart to visually represent data using columns. However, a recurring issue arises when there is an abundance of d ...

javascripthtmlangularjs

Arranging my pictures through CSS styling

Upon examining my webpage, I've noticed that the images are not properly aligned. My goal is to have the icons perfectly lined up; however, it seems there's a discrepancy depending on another cell, based on the size of the container where the tim ...

htmlcss

Why isn't the data properly linked with ng-repeat in the radio input within AngularJS?

HTML: <div ng-app="myApp" ng-controller="myCtrl"> <label ng-repeat="x in list"> <input type="radio" ng-model="test" value="x" >{{x}} </label> <br> Exec type: {{test}} </div> JS: var app = ang ...

angularjs

Footer gets in the way of gallery div

As a coding novice, I recently downloaded the Galereya JQuery script to use on my website. While it works well, I encountered an issue where it overlaps with other content on the page. Despite trying to adjust the overflow and position properties, I have b ...

jqueryhtmlcss

The functionality of the jQuery addClass method is failing to work when implemented on

Hello, I'm currently attempting to implement a CSS Style on an <img> tag that does not have any assigned class or id. Below is my code snippet: ===CSS=== .tgll-navi { //custom class for navigation bar .navi-left { //.navi-left float:right; ...

javascriptjquerycssimagescroll

Tips for Implementing AngularJS Validation for Year Input

There is a single input text field to enter a Year value. I have set the pattern using ng-pattern="/^[0-9]{4}$/" to ensure it is entered as a 4-digit number. However, I am now trying to figure out how to validate that the input year falls within the rang ...

angularjsvalidation

Anchor tag images are not functioning as clickable links

I recently created a portfolio that showcases my work through a grid of images. My intention was for each image to link to another page providing more details about the project when clicked. However, I am encountering an issue where the anchor tags are no ...

htmlcssimagehyperlinkanchor

Experiencing a problem with generating nested elements using JavaScript

I'm looking to customize the default header of a div using a JavaScript function, but the final result of my code is displaying as [object HTMLDivElement]. Here's the code snippet I'm working with: function CustomizeHeader(){ va ...

javascripthtmlcss

Hide all the div elements on the web page and only display one when a button is clicked

I have successfully set up a few buttons that can show and hide divs on click. However, I am wondering if it is possible to hide all other divs when one is showing, and also have "divone" show up on load. Buttons: <button class="btn btn-outline-primar ...

javascriptcsshtml