today I encountered a strange behavior in bootstrap v5:
<button class="btn btn-primary">
<img
v-svg-inline
src="#/assets/icons/printer.svg"
width="20"
height="20"
/>
</button>
leads to:
So far so good.
However,
<button class="btn btn-primary ms-1">
<img
v-svg-inline
src="#/assets/icons/printer.svg"
width="20"
height="20"
/>
</button>
leads to
As you can see, now three dots next to the image appear . This happens only when I scroll in (100% and more). Furthermore with the Selector (F12) I cannot click it, cannot even find the dots in the DOM.
Question:
Has anyone of you ever experienced something similar? And why does ms-1 lead to the "three dots"?
I could narrow it down to the fact, that comes and goes with the "ms-1" class. This, however, does not really help me.
Any information is highly appreciated :)
Thank you very much and have a great day!
Related
I am using nightwatch.js to perform end-to-end testing and have to use a roundabout method for a waitForElementVisible command to work as expected. For example, my code below:
browser.waitForElementVisible(".profile label[for='Admin']") // works
browser.waitForElementVisible(".profile label[for='Admin'] input[id='Admin']") // breaks
For further clarification, I am testing to see if a radio button is visible. The radio button's DOM elements is as such:
<div class='profile'>
<div class='roleSelector'>
<label for="Admin">
<input type="radio" id="Admin" class="Admin">
</label>
</div>
</div>
As far as I know, there is no such specific case.
Did you try using '.profile input[id='Admin']' ?
Hope that serves your purpose at hand.
I am working on a pretty basic website and I have the search bar exactly how I want it to look. The problem is that I cannot get the search button to be responsive to different devices. On my iPhone 6, the button moves below the search bar and doesn't look right. Any thoughts on how I can get this better looking? I am new to responsive templates!
Try clear fix:
<div class="bg-info clearfix">
<button class="btn btn-secondary float-left">Example Button floated left</button>
<button class="btn btn-secondary float-right">Example Button floated right</button>
</div>
I'm trying to create an ionic app which has a left and right sidemenu, but I'm finding that the side-menu icons (and the ability to swipe left or right to open them) is disappearing when I try to navigate. I'm obviously doing something wrong, but I can't see what it is.
see here ... http://plnkr.co/NpqmVT ... for plunker which demonstrates the problem. To replicate the bug simply click on the 'click to view details' button.
My main user interface (I'm guessing this is where I'm doing something wrong) looks like this...
<ion-side-menu-content>
<ion-nav-bar class="bar-positive">
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button class="button button-icon button-clear ion-navicon" menu-toggle="right">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="centre-panel"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-dark">
<h1 class="title">Main Menu</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item ui-sref="ui.page1" nav-clear menu-close >Page 1</ion-item>
<ion-item ui-sref="ui.page2" nav-clear menu-close >Page 2</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
<ion-side-menu side="right">
<ion-header-bar class="bar-dark">
<h1 class="title">Right Menu</h1>
</ion-header-bar>
<ion-nav-view name="right-panel"></ion-nav-view>
</ion-side-menu>
</ion-side-menus>
All the routes, etc can be found in the plunkr (http://plnkr.co/NpqmVT)
Thanks for any help you can offer.
just faced the same problem and found a solution - add this directive to the ion-side menus:
<ion-side-menus enable-menu-with-back-views="true">
I have a site that was built and handed over to me, so I'm not as familiar with ModX as I'd like to be. That said, I've built my own templates, tpls and the like.
However, and existing MIGX using template is giving me fits. It used to display all the items in the list properly - one image, and three text fields. Now, it randomly will stop displaying one item.
When I say random, I don't mean that it switches around when you refresh the page - I mean right now item #4 isn't being displayed (even in source code, nothing appears). But if I were to delete any other item, that #4 might just show up again, and a different item start disappearing.
I'm at a loss here. I see no special characters in the text fields. Even if there were, that wouldn't explain how an item will work then not work then work again based on making changes to other items.
Please let me know what other information I can provide to assist in troubleshooting this.
Below is all the relevant code I can think of.
Template:
<div id="content">
[[!getImageList?
&tvname=`management`
&docid=`[[*id]]`
&tpl=`management_tpl`
&limit=`0`
]]
<div class="clear"></div>
</div><!-- #content -->
management_tpl:
<div class="management_box">
<div class="management_img">
<img src="[[+image:phpthumbof=`w=100&z=1`]]" alt="[[+pagetitle]]" />
</div>
<div class="management_content">
<h2>[[+name]]</h2>
<h3>[[+position]]</h3>
[[+descr]]
Show more
</div>
<div id="[[+name:stripString=` `]]" class="fulldescr">
<img src="[[+image:phpthumbof=`w=100&z=1`]]" alt="[[+pagetitle]]" />
<h2>[[+name]]</h2>
<h3>[[+position]]</h3>
[[+fulldescr]]
</div>
<div class="clear"></div>
</div>
Thanks,
Chris
For anyone who finds this in the future - my MIGX plugin was outdated and had some flaws that caused this. Updating the plugin fixed everything.
I've got a left rounded corner box -> textbox -> right rounded corner box which all make up part of a search box. All's well in FF, Chrome, IE8 but not IE7.
I've checked it using the debug tool and and I have tried a number of options, none of which want to work at the moment, so I am hoping someone might know what this issue (bug) might be please?
Here's a snippet of my code:
<div class="roundBox4">
<img src="../App_Themes/MyChoice2010/Images/reality-box-top.gif" width="228" height="8" /><img
src="../App_Themes/MyChoice2010/Images/reality-box-locate.gif" width="228" height="49" />
<asp:ContentPlaceHolder ID="Box4Content" runat="server">
</asp:ContentPlaceHolder>
<div class="locateABroker">
<img src="../App_Themes/MyChoice2010/Images/locate-broker-left.gif" class="locateBrokerLeft"
height="19" width="3" /><asp:TextBox ID="TextBox1" CssClass="locateBrokerCenter"
runat="server"></asp:TextBox><img src="../App_Themes/MyChoice2010/Images/locate-broker-right.gif"
height="19" width="3" class="locateBrokerRight" />
Submit<img src="../App_Themes/MyChoice2010/Images/box-arrow.gif"
class="linkArrow" width="8" height="14" />
</div>
The only thing that I can say about IE7 is that you almost literally need to declare everything in your CSS. Inheiretance is abysmal in IE7. I would make sure that you are a) using a good reset.css and b) try declaring any padding, etc. directly on the element that is giving you issues.