I'm new to boot strap so I may be thinking of this objective in an incorrect way, so I would appreciate any advice as well as a solution.
Say for example I have a left column
<div class="row">
<div class="col-md-3 col-xs-6">Some Data 0</div>
<div class="col-md-3 col-xs-6">Some Data 1</div>
<div class="col-md-3 col-xs-6">Some Data 2</div>
</div>
When the screen matches the XS I would like "Some Data 0" to be wrapped in a modal component. So that "Some Data 0" is now hidden in a modal window and a button is in it's place that when clicked will display the modal window with the content "Some Data 0"
How is this accomplished in Bootstrap. Is the only way to duplicate "Some Data 0" and just show and hide based on the screen breakpoints?
Thanks
Well you can achieve it in this way i guess :
<div class="row">
<div class="col-md-3 hidden-xs">Some Data 0</div>
<div class="col-xs-12 hidden-md visible-xs"> Handle your modal with Some Data 0 in this div</div>
<div class="col-md-3 hidden-xs">Some Data 1</div>
<div class="col-xs-12 hidden-md visible-xs">Handle your modal with Some Data 1 in this div</div>
<div class="col-md-3 hidden-xs">Some Data 2</div>
<div class="col-xs-12 hidden-md visible-xs">Handle your modal with Some Data 2 in this div</div>
</div>
Key feature here is to use hidden-{} and visible-{} classes.
Related
I have a collapsible panel working currently using the following HTML:
<div class="panel panel-entity panel-default>
<div class="panel-heading" onclick="{ $(event.target).siblings('.panel-body').slideToggle('slow'); }">
<span class="panel-heading-text">#Model.RoleName</span>
</div>
<div class="panel-body">
<div class="form-horizontal">
<div class="entity">
#*A bunch of form groups*#
</div>
</div>
</div>
</div>
However, this only allows the user to click on the panel header to collapse the panel, meaning that when they click on the text within the header, it will not collapse the panel.
Is there another approach I can take to allow the user to click anywhere within the header, including the text, to collapse the panel?
For any potential future readers, the way I solved this problem was by adding style="pointer-events: none;" to the span where the header text was stored.
If you are using a span element to add a class to the text within a collapsible panel header, this is the correct way to make the text click-through.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="panel panel-entity panel-default">
<div class="panel-heading" onclick="{ $(event.target).siblings('.panel-body').slideToggle('slow'); }">
<span class="panel-heading-text" style="pointer-events: none;">#Model.RoleName</span>
</div>
<div class="panel-body">
<div class="form-horizontal">
<div class="entity">
#*A bunch of form groups*#
</div>
</div>
</div>
</div>
You need to remove the <span class="panel-heading-text"> tag. Since that tag is there, when you click on the text, you are actually clicking on that element and not the .panel-heading element.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="panel panel-entity panel-default">
<div class="panel-heading" onclick="{ $(event.target).siblings('.panel-body').slideToggle('slow'); }">
#Model.RoleName
</div>
<div class="panel-body">
<div class="form-horizontal">
<div class="entity">
#*A bunch of form groups*#
</div>
</div>
</div>
</div>
I have an issue whereby due to the structure of my html, when one div is expanded the whole row moves down. I am having a bit of a hard time finding a fix for this. I have looked on here but could not find a resolution. Any ideas would be great. This is my structure (with div 1 expanded to show the nature of the issue):
expandable div 1 | expandable div 2
|
| expandable div 4
|
expandable div 3 |
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6">
<div class="panel panel-primary">
expandable div 1
</div>
</div>
<div class="col-xs-12 col-sm-6">
<div class="panel">
expandable div 2
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6">
<div class="panel">
expandable div 3
</div>
</div>
<div class="col-xs-12 col-sm-6">
<div class="panel">
expandable div 4
</div>
</div>
</div>
</div>
As you mentioned you don't want to use the bootstrap collapse I suggest to do this with jQuery (see below for an example).
Your HTML:
<div class="container">
<div class="header"><span>Expand</span>
</div>
<div class="content" style="display: none;"padding : 10px;>
Suprise!
</div>
</div>
Now the jQuery:
$(".header").click(function () {
$header = $(this);
$content = $header.next();
$content.slideToggle(300, function () {
$header.text(function () {
return $content.is(":visible") ? "Collapse" : "Expand";
});
});
});
Something like this will work.
Consider CSS for the style display.
I have a page that displays some fields from an object provided by a service using angular 2. I would like to display some of those fields only when the user hovers over some div. I thought the bootstrap popover would be ideal but I am not sure how to display those extra fields in the data-content element of the bootstrap popover. Here it is my attempt code.
div class="container">
<div class="row">
<div class="col-sm-4 col-lg-4 col-md-4" data-toggle="tooltip" title="Name">
{{data.name}}
</div>
<div class="col-sm-2 col-lg-2 col-md-2" data-toggle="tooltip" title="A Date">
{{data.aDate | date:'shortDate'}}
</div>
<div class="col-sm-2 col-lg-2 col-md-2" data-toggle="tooltip" title="other">
{{data.other}}
</div>
<div class="col-sm-4 col-lg-4 col-md-4" data-toggle="popover" title="More data" data-content="how to display data.field1, data.field2" >
Popover test
</div>
</div>
</div>
In the popover data-content I would like to display a multiple row that would look like
field1: {{data.field1}}
field2: {{data.field2}}
I am new to both bootstrap and angular, perhaps a popover is not even the best way to display this data?
I'm having an issue trying to get two divs that are side by side the same height when the content for each of the divs are generated using an ng-repeat.
Flex box stops the site being responsive and i can't work out when would be a suitable time to call a Jquery function as the views are nested and the page doesn't actually load when the new html is displayed. I have tried ng-repeat-start and end to no avail.
Ideally once the content has loaded i would the div on the right to be the same height as the div on the left.
Would really appreciate any help with the problem.
Cheers
EDIT - Code Included
<div class="row">
<div class="noSpacing col-xs-6">
<div class="col-xs-12 noSpacing rottnestGreen">
<div ng-repeat="bh in bikeHire" class="row">
<p class="col-xs-6">{{bh.type}}</p>
<select class="inline col-xs-3 noSpacing np" ng-model="bikeHire[$index].quantity" ng-options="ddl for ddl in ddlNumbers" ng-change="addOps(bh.type, bikeHire[$index].quantity, bh.price)"></select>
<p class="col-xs-3 blueText">{{bh.price | currency}}</p>
</div>
</div>
</div>
<div class="noSpacing col-xs-6">
<div class="col-xs-12 noSpacing np rottnestGreen">
<div ng-repeat="sf in sAndF" class="row">
<p class="col-xs-6">{{sf.type}}</p>
<select class="inline col-xs-3 noSpacing np" ng-model="sf.quantity" ng-options="ddl for ddl in ddlNumbers" ng-change="addOps(sf.type, sf.quantity, sf.price)"></select>
<p class="blueText col-xs-3">{{sf.price | currency}}</p>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
Is it something like this you are looking for? https://jsfiddle.net/yczgaLgm/2/
Wrapping everything in a container:
<div class="row container">
And then styling the container to use flexing is the way I usually do this
.container {
display: flex;
flex-wrap: wrap;
}
The biggest downside though is IE support, I dont hope you are supporting below IE10?
I have this sortable's structure (it's a portlet).
<div id="sortable">
<div class="row">
<div class="window"></div>
<div class="gripper_v"></div>
<div class="window"></div>
</div>
<div class="gripper_h"></div>
<div class="row">
<div class="window"></div>
<div class="gripper_v"></div>
<div class="window"></div>
</div>
<div class="gripper_h"></div>
<div class="row">
<div class="window"></div>
<div class="gripper_v"></div>
<div class="window"></div>
</div>
</div>
'window' elements are sortables. Grippers shouldn't be sortables. I've specified in the Sortable options:
{ items: '.window' }
But I'm seeing that windows are sorted over grippers while I drag, which I don't want to. I want grippers to be invisible to the Sortable.
EDIT: Grippers are used to resize windows in both X and Y axis. With the given html code i will get this portlet.
PORTLET IMAGE
The problem occurs when sorting between windows of the same row (".gripper_v")
I'm not sure exactly what you're trying to do here (a screenshot might help), is the "gripper" the part of the "window" where the user should click to drag?
If that's the case, try adding the gripper within the window element like this:
<div id="sortable">
<div class="window">
<div class="gripper"></div>
</div>
<div class="window">
<div class="gripper"></div>
</div>
</div>