In Bootstrap v3 I was able to create a multiline modal-header in dialogs, to place a little bit of user help at the top, such as:
<div class="modal fade" id="fileOpenModal" role="dialog" tabindex='-1'>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" style="margin-bottom:4px">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Open a File</h4>
<p style="font-family:Arial; font-size:12px; font-style:italic;margin-bottom:0px">Open an existing file for editing. Current open files will not be closed.</p>
</div>
<div class="modal-body">
.... etc.
I've tried all sorts of combinations in Bootstrap 5 but cannot seem to get the same functionality.
Any way to do this?
I was able to accomplish this by turning off the flexbox for the header and forcing display:block:
.modal-header {
display: block;
padding: 1rem 1rem;
border-bottom: 1px solid #dee2e6;
border-top-left-radius: calc(.3rem - 1px);
border-top-right-radius: calc(.3rem - 1px);
}
Related
I'm building a website for a friend's film production company using Foundation 6. I created a top-bar navigation bar with his logo image above the top-bar and made them both sticky. It seems to work fine on large screens and small screens but if viewed on anything in between the logo separates from the top-bar. This is most evident when you stretch and squish the page.
I've tried to include the image in the top-bar div but it aligns it to the left and I haven't been able to align it to the top as it is currently. This is the first time I've worked with the sticky function in Foundation. I've looked through the Foundation docs, Google, and StackOverflow but haven't found anything quite like this.
This is my top-bar section.
<div data-sticky-container>
<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
<button class="menu-icon" type="button" data-toggle="example-menu"></button>
<div class="title-bar-title">Menu</div>
</div>
<div class="grid-y">
<img src="images/safe_image.jpeg" style="width: 100%; height: auto"; data-sticky data-options="marginTop:0;">
<div class="top-bar" data-sticky data-options="marginTop:10.2;" style="width:100%; background-color: white; padding-top: 10px;" id="example-menu">
<!-- <div class="top-bar" style="width:100%; background-color: white; padding-top: 10px;" id="example-menu"> -->
<div class="top-bar-right" data-dropdown-menu style="display: table; margin: 0 auto;">
<ul class="dropdown vertical medium-horizontal menu" style="background-color: white;">
<li>Home</li>
<li>Current News</li>
<li>Film/Media</li>
<li>Photography</li>
<li>Publicity</li>
<li>Misc</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
I would like the logo image and the navigation bar to look the way they do at larger screen sizes but minimize together to the point where the data-toggle kicks in instead of separating, as they are doing currently.
I was doing the tutorial here: https://scotch.io/tutorials/get-to-know-the-flexbox-grid-in-foundation-6 and was trying the stretch here:
https://codepen.io/chrisoncode/pen/wMWEVE
<p class="text-center">Aligned Stretch (Columns are Equal Height)</p>
<div class="row align-stretch text-center">
<div class="columns">space</div>
<div class="columns">
<p>Look I'm a bunch of words. Spoiler alert for Star Wars: Jar Jar Binks is the new sith lord. He is Darth Darth Binks.</p>
</div>
</div>
body { padding-top:50px; }
.row { border:1px solid #FF556C; margin-bottom:20px; }
.columns { background:#048CB9; color:#FFF; padding:20px; }
.columns:first-child { background:#085A78;vertical-align:bottom }
.columns:last-child { background:#B3BBBB; }
On the 3rd example, using the stretch property, I am trying to get the text to vertically align middle and am having no luck. Can anyone tell me how to do it?
I tried adding .columns:first-child { background:#085A78;vertical-align:bottom } but that did not work.
HTML:
<p class="text-center">Aligned Stretch (Columns are Equal Height)</p>
<div class="row align-stretch text-center">
<div class="columns">
<div class="row align-center text-center"><p>space</p></div>
</div>
<div class="columns">
<p>Look I'm a bunch of words. Spoiler alert for Star Wars: Jar Jar Binks is the new sith lord. He is Darth Darth Binks.</p>
</div>
</div>
CSS:
div.row.align-stretch.text-center .columns {
display: flex;
justify-content: center;
align-items: center;
}
div.row.align-stretch.text-center .columns p {
margin: 0;
}
Flex children are equal height by default, unless you assign an align-items value other than stretch.
Therefor:
<div class="row align-stretch text-center">
Is the same as:
<div class="row text-center">
For your example, the simplest way is to use the .align-middle which will make the column the height of the content within and vertically center it to the taller column in the group.
Otherwise, you can make the column itself display: flex; and add align-items: center;
I have a web page with a left hand menu. It is made up of many div tags.
I have noticed when my Selenium Python script runs it is not clicking the text I want clicked from the left hand menu. It is clicking something else.
My Xpath is not correct.
I would like to locate the text "Statistics" (it is in a div\span tag) which has the parent div text "Analysis"
It is not clicking the correct text "Statistics" because there maybe another "Statistics" somewhere in the HTML source. If i start from the div tag which has the text "Analysis" and then find the text "Statistics" then I will get the correct element.
My Xpath is:
.//div//span[#title="Analysis"]/following::div[5]//span[text()="Statistics"]
The HTML is:
<div>
<span class="" title="Analysis"
style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;empty-cells:show;display:block;">Analysis</span>
</div>
</div>
</div>
</div>
</div>
<div style="overflow: hidden;">
<div>
<div>
<div aria-selected="false" role="treeitem" aria-setsize="3" aria-posinset="1" aria-expanded="false"
aria-level="2">
<div class="GJPPK2LBIF" style="padding-left: 16px;">
<div class="GJPPK2LBIF GJPPK2LBKF" style="padding-left: 16px;position:relative;" onclick="">
<div class="GJPPK2LBJF" style="left: 0px;width: 15px;height: 15px;position:absolute;">
<img border="0"
style="width:15px;height:15px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA7/HbnjJn53wAAAABJRU5ErkJggg==) no-repeat 0px 0px;"
src="http://test1:8080/clearcore/ClearCore/clear.cache.gif"
onload="this.__gwtLastUnhandledEvent=" load";"/>
</div>
<div class="GJPPK2LBLF">
<div style="padding-left: 22px;position:relative;zoom:1;">
<div style="left:0px;margin-top:-8px;position:absolute;top:50%;line-height:0px;">
<img border="0"
style="width:16px;height:16px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaekJggg==) no-repeat 0px 0px;"
src="http://test1:8080/clearcore/ClearCore/clear.cache.gif"
onload="this.__gwtLastUnhandledEvent=" load";"/>
</div>
<div>
<span class="" title="Statistics"
style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;empty-cells:show;display:block;">Statistics</span>
</div>
</div>
</div>
</div>
</div>
</div>
Thanks,
Riaz
If you have FireFox with FirePath you can test the xpath and see how many and which matches you get. For instance:
//span[text()="Statistics"]
This may result in 1 matching node but also in more. Let's assume there's two matches and the one you want is the second one. Then you'd choose:
//span[text()="Statistics"][2]
i am using iccube reporting.
i have a button of type Actions/Buttons placed on a dashboard, and a pivot table.
the button fires an iccube event upon click, the event refresh the pivot table.
how can i trigger a button click programmaticly, using java script ?
this is the html snippet (generated by iccube)
<div class="ic3t-elegant ic3-fixed-layout-box ic3w-action ic3w-buttonlist **buttonRefreshCls** ic3h-no-header ic3-box-unselectable" id="ic3-9" style="top: 10px; left: 400px; width: 130px; height: 30px; z-index: 4;"><div class="ic3-loading-div-back"></div><div class="ic3-loading-div"></div><span class="ic3-stop-loading fa fa-stop" title="Stop Loading"></span> <div class="ic3-fixed-layout-menu-container"> <div class="ic3-fixed-layout-edit ic3-jui-app"></div> </div> <div class="ic3-inner"> <div class="ic3-box-header"> <div class="ic3-box-nav-menu" style="display: none;"></div> <div class="ic3-inner" style=""></div> </div> <div class="ic3-box-content" style="width: 130px; height: 30px;"> <div class="ic3-inner" style=""><div id="ic3-17" class="ic3-widget"><div class="ic3-action-list ic3-item-container ic3-item-horizontal ic3-bt-blue"><div class="ic3-item" style="" ic3-idx="0" title="">Manual Refresh</div><div style="clear:both"></div></div></div><div class="ic3-widget-data"></div></div> </div> </div> <div class="ic3-chart-filter-info"> </div></div>
as you can see there's no input button that you can trigger with js.
document.getElementsByClassName('buttonRefreshCls')[0].click();
thanks in advance, assaf
I have a very simple code with Foundation CSS
<div class="row">
<div class="large-offset-1 large-6 columns">Content goes here</div>
<div class="large-4 end columns">Side goes here</div>
</div>
I want there to be margins between the columns. Currently, there is only padding. So if I add background-color to these columns, then they stick to each other.
Doesn't Foundation provide a solution for this?
try this (it makes a full width div inside the other, automatically adding margins)
<div class="large-4 medium-6 small-12 columns">
<div class="large-24 columns">
... content ...
</div>
</div>
You could try this:
<div class="row">
<div class="large-offset-1 large-6 columns padded-column">
<div class="column-content">Content goes here.</div>
</div>
<div class="large-4 end columns padded-column">
<div class="column-content">Side goes here</div>
</div>
</div>
Then, for styles:
.padded-column {
padding: 10px;
}
.column-content {
background: red;
}
I had a similar issue that couldn't be resolved with padding. Since Foundation 5 isn't IE8 compatible, I just used calc eg. width: calc(50% - 10px);