I have a select in a dialog box. The text for the options is long. When the page is loaded the select box should be rendered with static width (i.e. 50px), but when the dialog box will resize, this select should also resize. When I put width:100% initial size of select is adjusted to text from it. When I put width:50px the initial size is ok, but it isn't resized. An example on plunker.
The main problem is that this select is generated by Primefaces and I can't use this example.
I hope that exists pure CSS answer without using jQuery or JS.
You may apply the following css change
.mySelect{
min-width:50px;
max-width:50px;
width:auto;
}
Related
I am using Bootstrap to create my user interface.
I have a navbar that is relatively tall; the default height of the navbar is 50px and my navbar is 100px. When I render a split button, the menu drop-down doesn't respect the navbar height (the link below illustrates the problem). How do I fix this so that the dropdown renders beneath the button (and not beneath the navbar)?
Also, if anyone has a suggestion on how to get rid of the gap in the middle of the button group, that'd be awesome too!
Clarification
I'm using SASS so I didn't realize that the link that I pasted didn't illustrate the problem. I compiled my CSS and put it in the JSFiddle link. Unfortunately, the CSS file there is huge.
If you're using BootStrap with LESS or SASS, I adjusted the $navbar-height variable to 100px (instead of 50px).
In any case, I'm hoping for some guidance on what the Bootstrap Way™ of adjusting things like the navbar height so this stuff works.
(Old link that doesn't illustrate the problem)
http://www.bootply.com/yOrqxaoM2t
(New link)
http://jsfiddle.net/marvery/VpL9N/1/
ok it looks like the issue is not with the navba height its with the margin you have set margin-bottom:33px on .navbar-btn- that needs to be removed.
.navbar-btn {
margin-bottom:0px;/* should be zero bootstrap default btn margin- remove yours */
}
that is moving the dropdown to be 33px lower than the default
fiddle link
I've looked all over google and to be honest there aren't that many articles to answer a question as specific as this one , and i've tried going through the interface.
So when you make a new page , you have a body , and by default , that body has some margin's between it and the browser window , now i've managed to take care of the top and bottom one so there's no padding on the browser window ( a.k.a. margin's on the body ) but there's still space between the browser and the body on the left and the right side.
So how can i make my body's width be 100% of the browser's window because there's no width setting for the body , but only the page ( the browser window area).
body {
margin: 0;
padding: 0;
}
Okay here is the best I can do...
Aside from going to Page > Page properties > metadata and adding your own css file. what you can do is go to the rectangle tool and expand it to whatever height you want, however you MUST make sure that you expand the width to the edges of the web canvas past the body border until the tooltip displays 100%. afterwards embed whatever you want in there. but bewarned, the more complex the object the more custom coding you need to add.
Hope this helps
There is a way to make an object 100% the width of a browser. It's not so obvious and it's hidden:
Draw a rectangular box and fill the box with photo (scale to fit), set color to none.
Resize the rectangular box to the same width of the canvas (page size).
The combination of the procedures above activates 100% width on the object.
Be sure you are using "browser fill" and not just "fill".
The fill one will fill in a box in the center....
Browser fill will literally fill the whole page. Got stuck on this for ages!
There is a simple one-click solution for 100% width, which I just came across in this awesome article after having trouble getting my footer to go all the way across on wide screen laptops...
In your top toolbar between the X/Y and W/H inuts, there is a little box with an arrow that points either way. Hover over it and you will see that it says '100%'.
click it and you're done!!!
:-)
http://www.designeasy.co/2014/07/5-very-cool-tips-for-adobe-muse-cc-2014.html
insert the following code into your header tags as follows (Where theme.css is the name of your css.)Now, go to you css and enter the css given to you by user255
Open your page in adobe muse Go to "Page properties" select "Metadata" From Page properties and add the following code to HTML for <head> area:
<style>
body {
overflow-x:hidden;
}
</style>
I've got the following JS Fiddle to demonstrate what I'm trying to accomplish:
http://jsfiddle.net/sVKU8/2/
1) I assume this first part is easy - Is there a way to update the parent label class to automatically have it's width set based on the total width of the two child <div>s so the border only wraps around the green and red <div>s? I thought setting width: auto was supposed to do that, but my CSS skills are apparently lacking.
2) What I'd like to accomplish next would be to remove the width attribute from my label-text class and have the width set (or grow automatically, if possible) whenever I apply text to that <div> via JavaScript without text wrapping (i.e. keeping the original height of the label class).
I wasn't sure if I needed to try to calculate the width based on the actual text, or if there is a way to just apply the text with a width setting that will allow it to grow.
Any input or suggestions would be greatly appreciated!
Add this property to your css :
.based-on-text{
display: inline-block;
}
This way, the div will act like a block but will have exactly the width it needs instead of taking the whole parent level width !
click here
CSS alternative without additional JS using traditional floating elements approach
This fiddle (Click HERE) shows using inline-block on the div text-label and a little JS to set the width on the outer box with the border.
This is the javascript. Pretty ugly. There's probably a better way:
$(".label").css("width",
parseFloat( $(".label-image").css("width"))
+ parseFloat( $(".label-text").css("width"))
);
I have a div content that has CSS:
height:700;
overflow:hidden;
What i want to do is i want to create a button that says: expand
so once expand is clicked i want the css for that div to change from:
overflow:hidden TO overflow:visible
so know the div will expand to the height spcified in the css and it would be great if the expand button turns into collapse and does the vise versa when clicked
jQuery is your friend. It is the perfect library for constructing basic DOM events like you've described. Your code might look like the following:
$('#expand-button').click(function(e) {
$('.my_div').css('overflow', 'visible');
});
You can use the jQuery .css function to modify the value of a CSS Property. http://api.jquery.com/css/.
You can also Use jQuery to replace on piece of HTML with another, eg. To change the button.
http://api.jquery.com/css/
I'm building a mobile webapp and looking for a solution for the following:
[searchbox [img]]
where searchbox should be of width 100%. and img inside the inputbox.
Tried three solutions of which none works well enough:
First, wrap with div for 'false' border+borderless inputbox.
[div[textbox][img]]
Problem looks ok but on focus of textbox the textbox gets and ugly border anyway.
--
Second, position image relative (left:-40px)
[textbox][img]
Problem Can't set textbox width to 100%, img wraps to next row, no respect to -40px;
--
Third,
Background-image in textbox, right-align
Problem: Image isn't clickable.
Hints here? Perhaps bg-img + relative img (0x0px) to catch the click, but it itches.
Your first solution should work fine, just add input:focus {outline:none} to your css:
http://jsfiddle.net/L9gyp/2/