I'm trying to have the right column in Bootstrap 4 grid system fixed using position: fixed.
Here's a demo and it's code.
I want the button group on the right to stick to the viewport when I scroll the document. I have tried adding position: fixed; this doesn't work as intended - it causes the button group to overlay on top of the window like this.
I have already seen this answer on making columns fixed in Bootstrap, but the solutions won't work when the position of the columns is interchanged. Few of the solutions there will cause the right column to overlay on top of the left column in small screens, which is undesirable. In such cases, when viewed on small screens, I want the columns to be stacked (with the sticky feature disabled).
I prefer CSS solutions but if possible, I'd also like to know how it's done in JS.
Bootstrap 4 has the position-fixed class for this...
<div class="container">
<div class="row">
<div class="col-md-9">
..
</div>
<div class="col-md-3" align="center">
<div class="position-fixed">
<button class="btn btn-success btn-custom">
<span>Button 1</span>
</button>
<br>
<button class="btn btn-warning btn-custom">
<span>Button 2</span>
</button>
<button class="btn btn-danger btn-custom">
<span>Button 3</span>
</button>
</div>
</div>
</div>
</div>
https://codeply.com/go/exOfOB2Igy
Place your buttons inside another div and then add a style of position: fixed to that div like so:
<div class="col-md-3" align="center" style="margin-bottom: 40px;/* position: fixed; */">
<div style="position: fixed;">
<button class="btn btn-success btn-custom">
<span>Button 1</span>
</button>
<br>
<button class="btn btn-warning btn-custom">
<span>Button 2</span>
</button>
<button class="btn btn-danger btn-custom">
<span>Button 3</span>
</button>
</div>
</div>
You can make the style a css class and make it show only on big screens
Related
I'm trying to implement bootstrap-wysiwyg editor in a project, but every time I click a button in the toolbar that has a dropdown the editor loses focus, meaning that, for example, it's impossible to add links because the text is not selected, and images are always added at the beginning of the content because the caret position in the editor was lost. This happens in Firefox and Chrome.
Here is the HTML code for the insert link button for example (quite similar to the editor documentation example, but not working)
<div class="panel panel-info">
<div class="panel-heading">
<div class="btn-toolbar" data-role="editor-toolbar" data-target="#editor">
<div class="btn-group">
<a class="btn btn-default dropdown-toggle" data-toggle="dropdown" title="Insert Link"><i class="fa fa-link text-primary"></i></a>
<div class="dropdown-menu input-append">
<input class="form-control" type="text" data-edit="createLink" placeholder="URL" />
<button class="btn btn-success" type="button"><i class="fa fa-link"></i></button>
</div>
</div>
</div>
</div>
<div class="panel-body">
<div id="editor">
</div>
</div>
</div>
The only JS code is the editor hook:
<script>
$(document).ready(function () {
$('#editor').wysiwyg();
});
</script>
I'm using jQuery v2.1.4, Bootstrap v3.3.6, and bootstrap-wysiwyg v1.0.4
Thank you for your help.
The version of the bootstrap-wysiwyg that you are using is out of date. This bug was fixed in the most recent version. You can download it here.
I need this time a help with this example:
DEMO
You can see that the css on example 1 goes good. When you click on the button the state of the button change (press)
On example 2 i can't do the same. on my app i need that the "radio button" appear on vertical line (i get it).
But when i press the button, when i click out i back to the first state (don't press)
<h4>Exmaple 2</h4>
<div class="btn-group" data-toggle="buttons-radio">
<div class="row" ng-repeat="company in vm_login.decimals">
<button type="button" class="btn btn-primary" ng-model="radioModel.id" btn-radio="company.id">
{{company.desc}}
</button>
</div>
</div>
Can anybody help me?
I got a final version and this is how i need
DEMO
Thanks for all
<div class="btn-group-vertical" >
<button ng-repeat="value in vm_login.options"
class="btn btn-primary"
type="button"
ng-model="vm_login.model"
btn-radio="value.id">
{{value.desc}}
</button>
</div>
<p>texto aqui: {{vm_login.model}}</p>
This worked for me try this approach in one line without using buttons:
<div class="btn-group">
<label class="btn btn-primary" ng-repeat="company in vm_login.decimals" ng-model="radioModel" ng-model="radioModel.id" btn-radio="company.id">{{company.desc}}</label>
</div>
The btn-group classed element expects it's children to be buttons (a btn classed element). Not a div element. Take out the div and move the ng-repeat to the actual button. Now if you want your button to align verticaly you'll need to use btn-group-vertical instead of btn-group as stated in the bootstrap documentation. Here's the update code:
<div class="btn-group-vertical" data-toggle="buttons-radio">
<button ng-repeat="company in vm_login.decimals" type="button" class="btn btn-primary" ng-model="radioModel.id" btn-radio="company.id">
{{company.desc}}
</button>
</div>
Updated Plunker: http://plnkr.co/edit/kVFqNAXisMgkMVqy0WAF?p=preview
I have a page that requires two Rich Text Editors, so I went with WYSIWYG (What You See Is What You Get). They work fine, except for one little annoying detail. When I click the buttons to bold, italicize or indent, it applies to BOTH RTEs, and focuses on the second input. I can't quite figure out how to separate the toolbars from each other.
HTML:
<div class="form-group">
<label for="definition" class="col-lg-3 control-label">Definition:</label>
<div class="col-lg-3">
<div class="btn-toolbar" data-role="editor-toolbar" data-target="##definition">
<div class="btn-group">
<a class="btn" data-edit="bold" title="Bold (Ctrl/Cmd+B)"><i class="icon-bold"></i></a>
<a class="btn" data-edit="italic" title="Italic (Ctrl/Cmd+I)"><i class="icon-italic"></i></a>
</div>
<div class="btn-group">
<a class="btn" data-edit="insertunorderedlist" title="Bullet list"><i class="icon-list-ul"></i></a>
<a class="btn" data-edit="insertorderedlist" title="Number list"><i class="icon-list-ol"></i></a>
<a class="btn" data-edit="outdent" title="Reduce indent (Shift+Tab)"><i class="icon-indent-left"></i></a>
<a class="btn" data-edit="indent" title="Indent (Tab)"><i class="icon-indent-right"></i></a>
</div>
</div>
<div id="definition"></div>
</div>
</div>
<div class="form-group">
<label for="consent" class="col-lg-3 control-label">Consent:</label>
<div class="col-lg-3">
<div class="btn-toolbar" data-role="editor-toolbar" data-target="##consent">
<div class="btn-group">
<a class="btn" data-edit="bold" title="Bold (Ctrl/Cmd+B)"><i class="icon-bold"></i></a>
<a class="btn" data-edit="italic" title="Italic (Ctrl/Cmd+I)"><i class="icon-italic"></i></a>
</div>
<div class="btn-group">
<a class="btn" data-edit="insertunorderedlist" title="Bullet list"><i class="icon-list-ul"></i></a>
<a class="btn" data-edit="insertorderedlist" title="Number list"><i class="icon-list-ol"></i></a>
<a class="btn" data-edit="outdent" title="Reduce indent (Shift+Tab)"><i class="icon-indent-left"></i></a>
<a class="btn" data-edit="indent" title="Indent (Tab)"><i class="icon-indent-right"></i></a>
</div>
</div>
<div id="consent"></div>
</div>
</div>
JS (not really needed, but just in case...)
$(function() {
$("#definition, #consent").wysiwyg();
})
After a while of research, the answer is quite simple. Read into the source code and you'll see that it has a toolbar selector:
toolbarSelector: '[data-role=editor-toolbar]',
So you have to override that with a unique data-role like so:
$("#consent").wysiwyg({ toolbarSelector: '[data-role=editor2-toolbar]'} );
Making sure to change the data-role to match the new selector.
Was going to just comment but it ran long.
If it's anything like my WYSIWYG editor, it's because the system is set up to work with one container. Even if you add 2 items, it will do the same to both. The only way you could get around this would be to create two separate pages and house them on the same page (via seamless Iframes, possibly AJAX).
Note that I don't know for sure how this particular editor works, but it looks like the backend works very similar (ie, those data- attributes are housing the related execCommand() arguments just as mine).
Haven't tried it but did you try separating the the WYSIWYG initialization.
$(function() {
$("#definition").wysiwyg();
$("#consent").wysiwyg();
})
Im trying to do this http://www.youtube.com/watch?v=dAUpiocVwMA where the content will cover an image when scrolling. The problem I'm having is that it is not a background image. It is an actual image tag. Here's what I have.
<section id="home" class="bgWrapper">
<img id="parallaxImg" class="bgImg" src="images/bg/bizlifter-design-bg.jpg">
<!--<div id="parallaxImg"></div>-->
<article id="signUp" class="areaMargin">
<h1>Business smart</h1>
<h3>One simple system for your business.</h3>
<div class="purple"></div>
<div id="signupRow">
<input type="text" placeholder=" name#company.com">
<a id="btn-start" class="btn btn-lg btn-primary btnWhite" href="#">Start</a>
<a id="btn-free" class="btn btn-lg btn-primary btnWhite" href="#">It's free!</a>
</div>
<p class="forwardSlash"><span class="purpleText">
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
</span></p>
<a class="btn btn-primary btn-lg googleBtn" href="#">Sign Up Using Google</a>
</article>
The image I'm trying to cover is on the second line with id="parallaxImg".
If you want to do it as shown in the video you can wrap your image into one div and wrap your content that is supposed to cover to image into another one. Having those two div's you can work with the CSS z-index. If you set the img-divs position to "fixed" it the text will be scroll to the top and the image will remain in its position.
http://www.w3schools.com/cssref/pr_pos_z-index.asp
<div >
<div>
<h3 style="display:inline-block;">Comments</h3>
<button id="add_button" style="display:inline-block;margin-left:240px;" type="button" class="btn btn-primary" onClick="$('#add_button').hide()" data-toggle="collapse" data-target="#comments">Add</button>
</div>
<div id="comments" class="collapse in">
<textarea style="resize:none;width:90%;" class="input xlarge" rows="4" id="comment-box" name="comment-box" placeholder="Type your comment here..."></textarea>
<button style="margin-right:30px;" id="submit_comment" class="btn btn-primary pull-right" name="submit_comment" type="submit" onClick="">Submit</button>
</div>
</div>
So this my code. I have a collapsable element from bootstrap and I am trying to have it start off collapsed in the page but trying multiple different methods I can't. I've used a couple of jQuery commands like hide() and collapse but none of them seem to work. Any ideas on how to get this to work?
Simply removing the in class from the id='comments' div as I've shown in this JSFiddle allows for the comments textarea to appear on clicking the add button:
http://jsfiddle.net/JHkHE/1/