Menu
  • HOME
  • TAGS

Collapsed navbar is covering content behind it in bootstrap 3.3.4

twitter-bootstrap,navbar,transparent,collapse

Once bootstrap reaches 768 pixels the navigation bar collapses and shows an icon to the right of the navigation bar which allows a dropdown menu to display vertically. Now, to change the dropdown menu not to be opaque and see the background 50% transparent the following code can be added...

Bootstrap 3 - disable navbar collapse

css,twitter-bootstrap-3,navbar,collapse,preventdefault

After close examining, not 300k lines but there are around 3-4 CSS properties that you need to override: .navbar-collapse.collapse { display: block!important; } .navbar-nav>li, .navbar-nav { float: left !important; } .navbar-nav.navbar-right:last-child { margin-right: -15px !important; } .navbar-right { float: right!important; } And with this your menu won't collapse. DEMO (jsfiddle)...

Expand/collapse not working using java script in html

javascript,html,collapse,expand

This will show and hide your table $(document).ready(function() { $(".form-matrix-table").hide(); $(".form-label,form-label-top").click(function() { $(".form-matrix-table").toggle(); }); }); ...

Remove class on collapse (jquery)

javascript,jquery,toggle,collapse,removeclass

You need to use .toggleClass() instead of .addClass() for toggling classname: $(".open_div").click(function(){ $(this).toggleClass("selected").next(".desc_div").slideToggle("slow").siblings('.desc_div').slideUp().removeClass("selected").end(); }); Working Demo...

ExtJS collapse panel doesn't work

panel,extjs3,collapse

In a BorderLayout, the collapsable space is always filled by the mandatory 'center' region.

Disable collapse for link in a data-toggle element

javascript,twitter-bootstrap,collapse

You need to add a class for those elements that you don't want to fire the collapse event and then stop the event propagation via javascript. So... here is the correct answer. <div class="panel panel-default"> <div class="panel-heading"> <div class="panel-title" data-toggle="collapse" href="#collapseOne"> <a href="#">1) collapsing link</a> <a href="#" class="no-collapsable">2) not collapsing...

How to not select the tree node after collapsing

java,swing,jtree,collapse,selected

Since it seems like it is not possible to have a node selected unless it is visible, I came up with this solution. After debugging into the events, I found that the tree is always "invalid" when I collapse a node. So I override fireValueChange() in JTree. If the tree...

jQuery toggleClass not working with bootstrap collapse (change Icon/Class)

jquery,addclass,collapse,removeclass,toggleclass

You're close! I removed the script tags from your html and put it in the JavaScript section of the fiddle. Then I removed the extra script for the click toggle. Little confusing to say so here is the fiddle lemme know if this solves it! The code below is the...

Bootstrap Template - Keep Collapsible Panel Open

twitter-bootstrap,toggle,sidebar,collapse

use class='active' for active li tags

Create button to collapse header (javascript)

javascript,collapse,expand

Simple Example You can use the code for checking if a checkbox is selected or not. Try adding an else if logic for expanding the HEADER. else if(headerToggle.prop('checked')==false){ The above will get a bit messy though. Your best bet is writing a new function as well to fail-safe it and...

Bootstrap 3 Collapse in other section one per time

jquery,twitter-bootstrap,accordion,collapse

Add this script: $('.collapse').on('show.bs.collapse', function (e) { $('.collapse').not(e.target).removeClass('in'); }); That'll hide the other sections for you when a scection is shown See this Bootply...

Combining rows in a data.frame

r,data.frame,collapse

This is difficult to do with aggregate as the same function gets applied to each column in turn. Multiple calls to aggregate could accomplish this in pieces which are then merged. However, data.table allows for different aggregation functions in the same call: library(data.table) d <- data.table(df) d[,list(id=paste(id, collapse=','), start=min(start), end=max(end)),...

Bootstrap Collapse over an element

javascript,jquery,twitter-bootstrap,collapse

Since you are already using Bootstrap, I would suggest you to use default bootstrap dropdown . The problem with current code is that the div which shows the information is not absolutely positioned. So, whenever that div is displayed, it takes up the extra space and breaks the layout of...

Top padding is not working on table when using border-collapse

css,padding,collapse

Why not add an additional container for your <table> element between the outer container and style it to suit your needs? HTML <div class="border"> <div class="top-margin"> <table id="orderTabel"> <tr><th> Head </th><th> Head </th><tr> <tr><td> addaa </td><td> addaa </td></tr> <tr><td> addaa </td><td> addaa </td></tr> </table> </div> </table> CSS table, td, th...

Bootstrap panel-collapse event triggers more than once

bootstrap,collapse

I have solved this problem. I modified the js event function as below, even it doesnt need any $(this).hasClass("in") check. $(document).on('show.bs.collapse', function (e) { console.log('id:'+e.target.id); }) ...

collapse dataframe by similar rows

r,bioinformatics,collapse,reshape

You could try library(data.table) setDT(df)[,list(chr=chr[1], start=start[1], stop=stop[.N]) , by=list(gain, loss, pvalue_gain, pvalue_loss)] Or using dplyr library(dplyr) df %>% group_by(gain, loss, pvalue_gain, pvalue_loss) %>% summarise(chr=chr[1], start=start[1], stop=stop[n()]) Update Based on @Michael Lawrence's comments about non-overlapping matches, one way to correct this would be: setDT(df)[, .ind:= cumsum(c(TRUE,start[-1]!=stop[-.N])), list(gain, loss, pvalue_gain, pvalue_loss)][, list(chr=chr[1],...

Collapse current div expand next div on button click

jquery,twitter-bootstrap,accordion,collapse,expand

Why not just use this: $(".next-button").click(function () { nextQuestion($(this)); }); ...

Troubleshooting my Bootstrap collapse accordeon

jquery,twitter-bootstrap,collapse

I've just fixed your Fiddle. The adjustment was to add class="panel" to both fieldsets....

CSS fix for navbar collapsing

css,twitter-bootstrap,navbar,collapse

Add pull-left and pull-right to the <ul>'s. JSFiddle <div class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container-fluid header-top"> <ul class="navbar-nav navbar-left pull-left list-inline contact-links"> <li><a href="tel:180042762687"><span class="glyphicon glyphicon-earphone"> </span></a></li> <li><a href='****live chat**'><span class="glyphicon glyphicon-comment"></span></a></li> <li><a...

Collapsible header in Markdow to html

markdown,wiki,collapse,fold

Short Answer: No, Markdown does not offer a feature like that directly, but with some work you might be able to build something that works. For a feature like that to work you would need some CSS and/or JavaScript to control the animations, etc. While you might be able to...

jQuery Expand a tag not working correctly

javascript,jquery-ui,collapse,expand

You are appending a click to ALL .lnkRequest elements every single time you are looping. You are not adding event to the current one. So first one will have first click event, plus the next one, plus the third one, etc. You need to assign the events outside of the...

Collapse navigation bar issue in bootstrap 3

twitter-bootstrap-3,navbar,collapse

I think you are using old bootstrap/Jquery versions. Check this plunk. Ok I was able to reproduce the error in firefox. you are missing the 'navbar-header' div. That should fix it. <div class="navbar-header"> <a href="#" class="navbar-brand">Tech Site</a> <button class="navbar-toggle" data-toggle="collapse" data-target=".navbarHeaderCollapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> ...

Rally: Collapse rows of rallygridboard

row,rally,collapse

There is not currently a configuration property for controlling whether a row is expanded or collapsed on load (although they do remember their collapsed state once they are manually clicked on to collapse). However you should be able to collapse them on load using code very similar to what you...

How to collapse NA and merge multiple columns into one column

r,merge,collapse

1) Is there any way I can merge two datasets without producing V1.x V1.y? You can try this solution, which will act on all columns that are present both in df1 and df2: d1 <- df1[df1$V3 %in% df2$V3,] d2 <- df2[df2$V3 %in% df1$V3,] m <- match(d2$V3,d1$V3) z <- sapply(names(d1),function(s)...

How do I hide expander in Hierarchical Data Template when all children are collapsed or hidden?

c#,wpf,treeview,collapse

I was facing this issue and came across this question. I saw there were some answers where you needed to make this change in the treeview item style which required you to edit the default style. However, like the case above I too just needed the expander to be not...

how to use collapse plugin?

jquery,twitter-bootstrap,collapse

I tried your code (after deleting the repeated <body>) in a MVC application View and it worked fine, as well as in this jsfiddle . make sure that all the libraries needed are included and that jquery library is loaded before the bootstrap(js) library. hope this helps. check the Jsfiddle...

Expand/Collapse jQuery menu - selectors

jquery,menu,selector,collapse,expand

Try moving your submenu collapse logic into a separate function and calling it with the relevant elements in your click event function, like this: function collapse($elements) { $elements.removeClass("filter"); $elements.find("#arrow").css({"-webkit-transform": "rotate(90deg)", "transition": "transform 0.5s ease-out"}); $elements.css({"height": "50px", "transition": "height 0.5s ease-out"}); } $(".menuButtonIcon").click(function(){ if ($(this).hasClass("filter")){ collapse($(this)); } else { $(this).find("#arrow").css({"-webkit-transform":...

JavaFX TreeView: remove expand / collapse button (disclosure node) & functionallity

javafx,treeview,collapse,disabled-control,disclosure

I feel quite silly. I think this was mostly just a matter of not knowing what that darn arrow was called. Apparently it's a disclosureNode? Maybe that's common knowledge. In the custom defined TreeCell, all I did was add this line in the updateItem method: setDisclosureNode(null); ...

R paste string with collapse - How to keep string with quotes?

r,paste,collapse

Try this: queryq <- toString(shQuote(query)) which gives: > cat(queryq, "\n") "sql query", "port" ...

Floating elements causes the parent to collapse. HTML / CSS

html,css,css-float,collapse

Since you needed the reasons, I think this post explains it very well. Apart from reasons, it also has some solutions to tackle it. About float: when an element is floated it is taken out of the normal flow of the document. It is shifted to the left or right...

Automatically collapsing a Collapsible Block

javascript,jquery,if-statement,automation,collapse

This is a handler for the load event. Inside we define a change handler for #radio. Inside it I have used the code you have shared with us. Note, that $(this) is the radio element, as it is used inside the radio element's change handler. Also note that num1 needs...

Strange behaviour when collapsing lines in XML bound WPF Datagrid

c#,xml,wpf,datagrid,collapse

I guess it has something to do with how much of the list is actually visible and how much not because of the window size. I think that you are correct. In my opinion you should avoid using visibility any way and you're better off using ICollectionView for DataContext and...

Bootstrap mobile navigation

twitter-bootstrap,mobile,navigation,width,collapse

Bootstrap v3 is mobile-first. This means that by default the navbar is collapsed and will make the items visible when the screen is larger. On the documentation page under navbar it says: The navbar collapses into its vertical mobile view when the viewport is narrower than @grid-float-breakpoint, and expands into...

Building a html list of links with groups of sublists that are based on a common id

php,html,arrays,foreach,collapse

Wow, now THAT'S a confusing array! But everything is doable, right? It's just a matter of what you're willing to try. :) I think you need to create a new array that fits the listing purpose, then iterate through that for the list (The huge complex array will remain intact...

Javascript - Dynamic Expand/Collapse All

javascript,jquery,tree,collapse,expand

This is all wrong. Well, it's working against how jQuery works, in any case. jQuery's credo is: Select elements Do stuff to them Drop your loops. You don't need them. For example. To toggle the icon on all span.dtt_icon in your document, do var collapsed = true; $("#dtt_2597807651112537_table span.dtt_icon") //...

SAS : How to collapse observations, while making a total, with a condition

sas,collapse

/* Sort into ID order */ proc sort data=money out=money2 ; by id ; run ; data money_out ; set money2 ; by id ; retain total . ; if first.id then total = 0 ; /* If first ID then set total = 0 */ if condition =...

Bootstrap navbar won't work

bootstrap,collapse

This is works fine DEMO <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"> <nav class="navbar navbar-inverse" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse"...

How to collapse/expand all comment blocks in a file in PhpStorm?

php,comments,phpstorm,collapse,docblocks

In PhpStorm, what is a quick way to collapse or expand all the comment (doc) blocks in a file? Code | Folding | Collapse/Expand doc comments By default it has no shortcut, but it can easily be added in Settings (Preferences on Mac) | Appearance & Behaviour | Keymap...

Bootstrap and collapse without Accordian

twitter-bootstrap,collapse

I added 2 additional attributes for a tags: data-target and data-collapse-group (custom attribute that specifies which divs must be collapsed). jsFiddle exmpale HTML: <div class="container"> <div class="row mobile-options"> <ul> <li class="col-xs-2"><a href="#filtr" data-target="#filtr" class="mobile-options-item" data-collapse-group="myDivs" data-toggle="collapse"><span class="mr5"><i class="glyphicon glyphicon-filter"></i></span> Filtr</a> </li> <li...

collapsing/expanding compound node in cytoscape

javascript,collapse,expand,cytoscape.js

It's relatively straightforward using the API. Collapse: node1.descendants().addClass('collapsed-child') Expand: node1.descendants().removeClass('collapsed-child') ... where .collapsed-child { opacity: 0; } You may also want to change the positions of the descendants so the parent node is smaller. Alternatively, you could use display: none for .collapsed-child if you don't care about seeing edges of...

VB.Net - How to dynamicaly search for a string in all TreeView nodes expanding and collapsing nodes matching (or not) the search string?

vb.net,search,treeview,collapse,expand

Following my initial comments, try something like: Private Sub txtFiltroIDs_TextChanged(sender As Object, e As EventArgs) Handles txtFilterToolIDs.TextChanged tviewToolIDs.BeginUpdate() tviewToolIDs.CollapseAll() ClearBackColor() FindByText() tviewToolIDs.EndUpdate() tviewToolIDs.Refresh() End Sub ...

CSS border collapse different sizes in a div

html,css,border,collapse,edge

What about st. like that, using pseudoelement after? #bord{ height:200px; width:200px; border:3px solid grey; border-bottom: 0; /*border-bottom: 8px solid red;*/ position: relative; } #bord:after { display: block; background: red; height: 8px; width: 100%; content: ''; position: absolute; bottom: -8px; left: 0; margin: 0 -3px; padding: 0 3px; } http://jsfiddle.net/ztu267zp/4/...

Bootstrap 3.1.1 navbar wont collapse?

twitter-bootstrap,navbar,collapse

It works, but you need a toggle button.. <div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <a class="navbar-brand" href="#">My Project</a> <a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav...

Make accordion closed by default in Bootstrap

twitter-bootstrap,accordion,collapse

This line here seems to be the culprit: <div id="collapse${proposal.propID}" class="panel-collapse collapse in" ... If you get rid of in in the class, it should work as you have it structured. Take a look at this example to see the difference between the two panels: <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" /> <script...

collapse specific nodes on load in d3 tree

jquery,d3.js,tree,collapse,expand

You could hide children of the node as follows: function collapseSingle(node) { if (node.children) { node._children = node.children; node.children = null; } } Now, if you would like to show the childrens of node you could do this: function expandSingle(node) { if (node._children) { node.children = node._children; node._children = null;...

How to collapse/expand accordion in a Q&A form after input selection

javascript,jquery,twitter-bootstrap,accordion,collapse

You can surround each "accordion" with a div (i gave it a class accordion_main) add the check mark classes and remove the question class. The html will look like this: <div class="accordion_main"> <div class="accordion_head"><span class="updown">&#9660;</span> What type of sensors are required? <span class="glyphicon glyphicon-ok check-mark" aria-hidden="true"></span> </div> <div class="accordion_body" style="display:...

Toggle button to expand/collapse divs

jquery,css,toggle,collapse,expand

Try this HTML <input type="button" data-name="show" value="Toggle" id="toggle"> Script $(document).ready(function () { $("#toggle").click(function () { if ($(this).data('name') == 'show') { $("#sidebar").animate({ width: '0%' }).hide() $("#map").animate({ width: '100%' }); $(this).data('name', 'hide') } else { $("#sidebar").animate({ width: '19%' }).show() $("#map").animate({ width: '80%' }); $(this).data('name', 'show') } }); }); DEMO...

bootstrap jquery not collapsing

jquery,html,css,twitter-bootstrap,collapse

Codeply uses bootstrap 3.2.0. and jquery 2.1.0, make sure you use those aswell. *Edit: after checking your local code it seems you need to add this script aswell: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js...

Make Notepad++ collapse Python triple double content?

python,ide,notepad++,collapse

Notepad++ will allow you to collapse whatever it thinks are blocks of codes, which it decides based on indents. So the simple answer is to indent your doc strings """ This is a collapsible doc string """ """This is not""" """ Neither is this """ """ This one is, but...

Linking to a DIV inside a Bootstrap 3 accordion from another page

javascript,html,twitter-bootstrap,accordion,collapse

Actually you have that which is working correctly : $(document).ready(function () { location.hash && $(location.hash + '.collapse').collapse('show'); }); Show collapse of required information is not your problem right now. Just you need to capture when your URL hash is from a diferent tab and show it if hidden. You can...

How to use collapse in a directive?

angularjs,twitter-bootstrap,angularjs-directive,collapse

View in Plunker I hope it may help you:.. HTML: <div ng-app="myapp" ng-controller="myctrl" id="id01"> <table> <tbody ng-repeat="emp in Employees"> <tr> <td> <p>{{emp}}<input type="button" value="edit" ng-click="setshowindex($index)"/></p> </td> </tr> <tr ng-class="{'show':$index==showing,'hide':$index!==showing}"> <td> <employee-form></employee-form> </td> </tr> </tbody> </table> Script: angular.module('myapp',[])...

expand/collapse using jQuery / JavaScript

javascript,jquery,collapse,expand

collapsed is not an attribute. It is the value of the class attribute. function expandList(){ $("#samples").toggleClass("collappsed expanded"); } You fixed jsfiddle: http://jsfiddle.net/gaby/a7e9xrgb/2/...

Mobile bootstrap menu doesn't open

twitter-bootstrap,mobile,menu,collapse

It was a mistake from my browser, the problem is solved. Thank you @MikeStardust ! I just have uninstall and reinstall chrome and now it work.

bootstrap collapse linked toggle class jquery

jquery,twitter-bootstrap,selector,collapse

Ok, you want to click on the first 'a' and active the same duplicated in the 'ul' : Bootply : http://www.bootply.com/134054 JS : $( "a.toggle" ).click(function() { $(".linkto a.toggle[data-target=#collapsed1]").toggleClass( "active" ); }); or : $(".linkto a.toggle[data-target="+$(this).attr('data-target')+"]").toggleClass( "active" ); ...

ExtJS 4 Panel - text direction when collapsed

extjs4,panel,collapse

Ok I think I found a solution (the margin-left is not mandatory): .x-panel-header-body-default-collapsed-left span.x-header-text{ transform:rotate(180deg); position:relative; bottom:0; text-align:right; display:block; margin-left: 4px; } jsFiddle...

R. Remove Duplicated String in a Row

r,delete,collapse,duplicate-entry

You seem to have a rather complicated workflow. What about just creating a simple function that works on the rows reduce_row = function(i) { split = strsplit(i, split=", ")[[1]] paste(unique(split), collapse = ", ") } and then using apply data1$v2 = apply(data1, 1, reduce_row) to get R> data1 v1 v2...

R - Collapse By Row

r,paste,collapse

matrix(apply(seq, 1, paste, collapse=''), ncol=1) # [,1] #[1,] "hffl" #[2,] "dkdl" #[3,] "ssdd" #[4,] "ssdd" ...

Uncaught TypeError: Cannot read property 'documentElement' of null

jquery,twitter-bootstrap,collapse

You most likely have another tooltip library still in use (like JQueryUI/Tooltip) OR you're trying to attach a tooltip directly to the document element. Please look into your code for something like: $(document).tooltip or something like that, and remove it in order to make things work again. Be sure to...

Toggle icon on collapse events

jquery,twitter-bootstrap-3,toggle,accordion,collapse

Your callback syntax is incorrect for Bootstrap 3. $(document).ready(function(){ $('#accordion').on('shown.bs.collapse', function () { $(".accordion-down").removeClass("accordion-down").addClass("accordion-up"); }); $('#accordion').on('hidden.bs.collapse', function () { $(".accordion-up").removeClass("accordion-up").addClass("accordion-down"); }); }); http://getbootstrap.com/javascript/#collapse-usage Here's a simpler version combining events in a single function and toggling classes: $(function() { // shorthand for document.ready...

Xpages: ExtLib V12: Application Layout with Bootstrap Configuration. Collapsible left column

xpages,bootstrap,collapse,xpages-extlib

The 'collapsible left menu' feature will only work if you have a menu in the left column of your application layout that (in the generated HTML) contains a list of menu options using the <ul> tag (as is common in a Bootstrap layout). I just tried it with just this...

Collapse data with rules for a list of data frames

r,max,collapse,flatten

Here is the solution based on data.table: library(data.table) setDT(data)[,lapply(.SD,function(cl) {z<-table(cl);z.max<-which(z==max(z));ifelse(length(z.max)>1,"NA",names(z)[z.max])}),Group] # Group Loc1 Loc2 Loc3 Loc4 #1: Group1 NA A/A NA NA #2: Group2 B/B A/A C/C B/B #3: Group3 B/B B/B NA NA By modifying ifelse, you can set the desired rules for treating ties and NAs. PS: You...

Can't figure it out why my navbar isn't collapsing properly

twitter-bootstrap,navbar,collapse

Add a media query: @media (max-width: 990px) { ... } More info here....

Collapsing a tree to a string

c,string,parsing,tree,collapse

Assuming array points to a valid array of char pointers, you probably meant to dereference the pointer, to access the char pointer and assign n->txt to it. if (n->txt) { *array = n->txt; array++ ; } ...