How to make an alert take the width of its content?
This div will take all the available space while I would like it to be only as long as my text.
<div class="alert alert-info">
<span class="glyphicon icon-info"></span> My text.
</div>
Try this..
.alert {display:inline-block;}
Demo: http://www.bootply.com/124763
Note, that this approach will change behaviour of all alerts. If you don't need it, you can add class:
.alert-auto {display:inline-block;}
and use it only where you need auto-width alert.
You can also achieve it as below
<div class="alert alert-success" style="display:inline-block;"> Your Content </div>
.alert {display:inline-block;}
put on your .css to make the inline alert fit to your text
Related
I have something like this:
<div class="panel">
<div class="panel-body">
<div class="image-overlay">
<img class="img-responsive"> src="..."/>
</div>
</div>
</div>
and if I set manually height of "panel-body" to 400px. Its working as it should.
However once opening on small display height stays 400px but image is resized to smaller and half of panel is empty. How can I have responsive image in panel with also panel responsive?
can you try not to put any dimension? try to check this one
https://www.w3schools.com/bootstrap/bootstrap_ref_css_images.asp
I'm not sure I understand your question, but I think you're probably looking for this:
<img src="/mysrc.jpg" style="width:100%;max-height:400px;" />
I am using the first basic card example from http://materializecss.com/cards.html as a starting point. The card-action div contains two links that render beautifully.
Now I want to add a new card action that doesn't just open a link but performs an action. This could probably be done using a standard link with an tag as well but since I'm using Rails my standard way is that this action becomes a button with a form around it. It looks like this now:
<div class="row">
<div class="col s12 m6">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">Card Title</span>
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
This is a link
This is a link
<form>
<a class="waves-effect waves-light btn">button</a>
</form>
</div>
</div>
</div>
</div>
I would have expected that the button is nicely aligned with the two existing links, in one row at the bottom of the card. But what actually happens is that the button appears in the line below.
How can I align a button with a form together with standard HTML link tags in one row?
UPDATE: here is a JSFiddle with the code above: https://jsfiddle.net/hendrikbeck/zq1pv3y6/
You just need to add display: inline to your form tag.
See the updated JSFiddle : https://jsfiddle.net/zq1pv3y6/2/
How click button in webdriver without any id, values. Class of button is changing dynamically.
Sample:
<div class="d-k-l d-y-r-c g-h-f-Ck b-Qb" role="button" style="-moz-user-select: none;" tabindex="0" aria-haspopup="true">
<div class="d-k-l d-y-r-c-ha">
Мои круги
</div>
<div class="d-k-l d-y-r-c-Qa"></div>
</div>
Thx.
Show more HTML please. So that we can find something useful in the context.
Currently the only possible way is to use XPath' text()
.//*[#role='button']/*[contains(text(), 'Мои круги')]
If you are sure relevant elements are div, you can use
.//div[#role='button']/div[contains(text(), 'Мои круги')]
I'm attempting to create a button with Bootstrap and Font Awesome, the catch is I want to have descriptive text below the stacked icon itself. All of the examples are left and right is anyone putting text below?
I've begun playing with it at url below, but any jump start suggestions are appreciated.
http://www.bootply.com/86861
Didn't really any solution within the BS, Font awesome approach, so I went ahead and wrapped several parts with divs and did the styling that way.
<div class="ecGlobalNavStudentPanelBtnWrapper">
<div class="ecGlobalNavStudentPanelBtn"> <span class="icon-stack floatButton"> <i class="icon-check-empty icon-stack-base"></i> <i class="icon-archive"></i> </span> </div>
<div class="ecGlobalNavStudentPanelBtnTxt hidden-xs">
<p>library</p>
</div>
</div>
what happens if you try <i class="icon-book">book</i> ?
I have expandoPane which consists of some buttons.
When I perform other operations in the project and then expand this expandoPane, its contents goes hidden and those are visble after resizing it using splitter only.
I want to solve this.
Do you have any idea why the content goes invisible?
You need to call .startup and .resize() on the content pane when it's shown.
Something like:
expandoPane.connect(this, "onClick", function() {
that.createContent();
that.startup();
that.container.resize()
});
Post your code and I'll probably be able to give you something more specific.
Adding sample code:
<div id="expandableConsole" dojoType="dojox.layout.ExpandoPane" region="bottom" showTitle='true' maxHeight="250px" maxWidth="280px" style="height:200px; width:100%;" doLayout='true' startExpanded='false' splitter="true">
<div>
<input type="button" id="btnSubmit" style="width:88px;height:20px" onclick="update()">
</div>
<div dojoType="dijit.layout.ContentPane" id="infoBar" style="height:150px">
</div>
</div>
When I expand the expandopane after few operations,button and contentpane go invisible.