I have a button group where I would like to keep the text inside the element. I don't write CSS much and would love to solve it using twitter bootstrap
My problem:
The buttons are the right size, I'd just like to keep the text inside.
The group is generated using angularjs. I'd like the <p> text to stay inside the parent div
<div class="btn-group-vertical col-md-3">
<div class='btn btn-default' ng-repeat="(route_id, route) in routes">
<h2>{{route.short_name}}</h2>
<p>{{ route.description }}</p>
</div>
</div>
use :- on your second div
style="overflow:hidden;height:30px;width:30px"
adjust height and width according to your needs the bootstrap class must be over riding the height and width
if above doesnt work try using style="clear:both"
You can try using word-wrap: break-word; that will help you if you give overflow:hidden it will work but it will chop
In my own case, i applied the following css to the button
style='display: table;white-space: pre-line;word-break: break-all;'
The above css rules will keep the button responsive. Thus the text about to be "overflown" would be moved to the next line of the button.
Related
I use JqueryUI Accordion, and it works great.
I have a structure like this:
<div id="accordionHolder">
<div id="accordionOne"> </div>
<div id="accordionTwo"> </div>
<div id="accordionThree"> </div>
<div id="accordionFour"> </div>
<div id="accordionFive"> </div>
<div id="accordionSix"> </div>
</div>
This is displayed verticaly. Accordions are not big in size. How can I display maybe two or three accordions in line?
Thing is this project is really big, and I am inserting a functionality. I do not dare to touch CSS (not an expert in any case).
I have my page, a container in it. I can define my own rules there.
I have tried setting the main div to float-left and also display: inline... but without much success.
How can I accomplish this?
When I use: float-left on the accordions, they are not displayed anymore. Like they vanish. As soon as I remove the float-left, they show up again.
Image shows what I am trying to achieve:
I tried rendering accordion on separate divs, but when making it: Float-left, same things happens. It "enters" the previous one.
I tried moving them around with padding, but with lmited results. Probelm with this approach is when one accordion is expanded other move down, even if they are stacked horizontally.
I am runinng out of ideas :(
The accordion divs accordionOne -> accordionSix should have css display:inline-block;
This will make them line up horizontally.
I have a on/off jquery switch on this page http://www.fospower.com/test that basically overlays the entire page in a dark color. However I need some help in trying to make the div below appear above the overlay. Any help is welcome.
I've tried changing z-index and overflow content but that doesnt seem to help any.
<div id="light">
<div id="itoggle">
<p style="text-align:center">Turn Off The Lights</p>
<label class="itoggle iToff" for="lightswitch"><span></span></label>
<input id="lightswitch" type="checkbox" class="iT_checkbox">
</div>
</div>
If you are adding the overlay via JS then just add the div after the overlay the same thing goes for if you are just using html then styling just add the div you want on top at the end and make it position absolute then it should appear on top of the overlay
I just installed Foobar on my blog but the customer support hasn't responded yet after a few weeks to my query.
I'm basically applying this custom modification offered by them (http://codecanyon.net/item/foobar-wordpress-notification-bars/full_screen_preview/411466) to add a Like button to the toolbar at the top.
What I'm struggling with is to align some Text before the <div id="social_target"></div>, so that the text and the Likebutton will be aligned to look like "Like Us On Facebook! LIKEBUTTON".
Right now when I add text before the <div id="social_target"></div>, the text appears but the Likebutton appears underneath the text so it isn't visible at all.
How would I do this?
I don't know exactly how wordpress works and if you have access to the html code, but if yes, try putting the text inside a div and applying some css to it, something like this should work:
<div style="width: 400px;">
<div style="float:left;">Like us on Facebook!</div>
<div id="social_target"></div>
</div>
The value of the width is just a guess, you can adjust it.
A few things to check:
Is the Div that your entire code (the text and the social_target div) being put into too small? If so, it'll push the Div onto the next line. You'll need to edit the size of the Div you're putting this stuff into.
Make sure you apply CSS to the Div so that it stays on the same line. Alternatively, you could use a span:
<span id="social_target"></span>
Otherwise, Divs will get pushed to a new line unless you specify something like:
#social_target { display:inline-block; }
or
#social_target { float:right (or left); }
Like Lucas has in his code above.
I am trying to create a div on my site that is supposed to work like the descriptions on Ebay where all the css styles of the main site are stripped off and then whatever styles are in the div are what style the div (if you can understand what I mean). I've been trying to use a reset stylesheet, but my problem is that the reset is also resetting anything I put into the div. For example the following:
<div class="reset_this_div">
<font color="red">This is reformatted</font>
</div>
should reset the css in the div, then make the text "This is reformatted" red with the font tag. However, the reset seems to be overriding the font tag and the text just stays black. Does anyone know how I can fix this?
Thanks!
Have you considered using one div inside another instead of using the tag?. Something like this:
<div class="reset_this_div">
<div style="color: red !important;">This is reformatted</div>
</div>
Regards
OK, DUE TO BEING NEW I WASNT ALLOWED TO POST IMAGES, SO I HAVE ATTACHED LINKS INSTEAD. (images should be inline with this question)
Im writing a webpage and have a div containing some text (inline) an then an image.
Now when one clicks on the image, a hidden div appears below with an input field.
The input field in this div is automatically aligned to the left edge of the div.
I want it aligned to the right of the div.
As pictures speak louder than words, see link below.
http://www.freeimagehosting.net/uploads/d827ecc330.png
Anyhow the closest I got to a solution was to apply direction: rtl to hidden div, but then my text in my input field also changes to rtl.
I just want the placing of the text field to be rtl, not the input.
I hope this isnt too confusing.
Im quite new to css but have searched arund a lot, and have yet to find a solution besides the depreciated align=right.
Any suggestions greatly appreciated.
<div id="container" style="width:500px;">
<div id="text" style="width:250px; float:left;">Text</div>
<div id="image" style="width:250px; float:left;">Image</div>
<div id="input" style="width:500px; float:left; text-align:right">Input</div>
</div>