I want to dynamically hide/show widget like so:
Default:
|-------|
| |
| text |
| editor|
|-------|
With webkit preview:
|-------|-------|
| | |
| text | web |
| editor| widget|
|-------|-------|
With okular preview:
|-------|-------|
| | |
| text | okular|
| editor| widget|
|-------|-------|
Just add all your widgets into the layout and use QWidget::hide(), QWidget::show() when needed.
For more complex situations you can use The State Machine Framework.
Related
I have a TreeView and I am generating C++ model using QStandardItemModel class.
I want to get the click event when user clicks on every 2nd child in the tree.
Item-1
|
|
Item-1.1 <-- Detect click on this Item
| |
| Item-1.1.1
| Item-1.1.2
|
Item-1.2 <-- Detect click on this Item
| |
| Item-1.2.1
| Item-1.2.2
|
Item-2
|
|
Item-2.1 <-- Detect click on this Item
| |
| Item-2.1.1
| Item-2.1.2
|
I have tried below code to detect the click but it is generating click for 3rd level child also.
TreeView {
model: myCppModel
onClicked: {
if (index.parent.row >= 0) {
if (index.row > 0) {
console.log(myCppModel.data(index));
}
}
}
}
I have a situation like this:
+------------------------------------------------------------------------------+
| |
| +---------------------------------------------------+ |
| | | |
| <- fixed width -> | <- flexible width -> | |
| | | |
| +---------------------------------------------------+ |
| |
| <- flexible width -> |
| |
+------------------------------------------------------------------------------+
What this is supposed to represent is an outer DIV and its child (also a DIV) appearing in the browser. The outer div takes up, say, 90% of the viewable area (width: 90%). If the screen is resized it will resize. It's OK for it to have a minimum width.
The child div is meant to stay a fixed number of pixel from the left of the outer DIV (left: 200px).
I would like it to resize with its parent (i.e. childWidth = (parentWidth - 200) * .9).
Is it possible to do this with CSS / how?
Yes, just add right: 0px to the inner div in addition to left.
(also, try jsfiddle.net instead of ascii ;))
I have a page with a text and images inside it, with a style float:right.
I'd like to set max-width for the text, but let the images to go outside the text.
Is it possible to do it with a pure css, without javascript?
This is how I would like to see it on a normal screen and wide screen:
+----------------------+ +-------------------+--------------+
| | | | |
| TEXT TEXT | | | |
| +-------+ | | +-------+ |
| | | | | | | |
| | IMG | | TEXT | | IMG | |
| | | | | | | |
| +-------+ | | +-------+ |
| | | | |
| TEXT TEXT | | | |
| | | TEXT | BACKGROUND |
| | | | |
| +-------+ | | +-------+ |
| | | | | | | |
| | IMG | | | | IMG | |
| | | | TEXT | | | |
| +-------+ | | +-------+ |
| | | | |
| TEXT TEXT | | | |
| | | | |
+----------------------+ +-------------------+--------------+
<-----MAX-WIDTH----->
Use CSS3 media queries:
#media screen and (min-width: 600px) {
.aClass {}
.anotherClass {}
/* properties in here only apply when the viewport is wider than 600px */
}
Using this method you can have the text flow around the images by default, but if the viewport is wide then you override that CSS and position the images outside the container div using negative margins or absolute positioning.
More about responsive web design with CSS.
style="position:absolute;right:100px;" may give you what you want. Note that you might not need to specify float:right if you have position:absolute.
You should not have img that are inside a div appear outside of that div. The images should be maybe siblings of the div instead of children.
i have for example five divs, that has float:left and they are wrapped inside div, that has display:inline-block and width:auto. So result is one row with 5 divs and that row has width = sum of childs, because width:auto on div, that has display:inline-block results in width to fit content.
Then i have all wrapped inside div, that has width = width of one of that 5 divs and overflow:hidden, so only one of that 5 divs is visible.
But problem is, that 5 divs is not now in row, but is in column, because their parent is wrapped inside div with width = width of one of that 5 divs.
I need animate margin-left on first of that 5 divs, so the next div becomes visible. But when that divs are in column and not in row, the look and feel while animating is not what i want.
So how make something like this:
------1-------
| -----------|---------2----------
| | ----3--- | -----3-- --3----- |
| | | | | | | | | |
| | | | | | | | | |
| | -------- | -------- -------- |
| | | |
| -----------|--------------------
--------------
Only 1 must be visible.
1 has width = width of 3 and overflow: hidden, so only first of 3 is visible.
2 has display:inline-block and width:auto, so its width fit content.
3 has float left or display:inline-block.
Problem is when i wrap 2 into 1, then width of 2 is not to fit conent, but is width of 1 and becomes column and not row.
<div-1 style="overflow:hidden;width:64px;height:64px">
<div-2 style="display:inline-block;width:auto">
<div-3 style="width:64px;height:64px;float:left"></div>
<div-3 style="width:64px;height:64px;float:left"></div>
<div-3 style="width:64px;height:64px;float:left"></div>
</div>
</div>
Div-2 is row, but when i wrap it inside div-1, it becomes column and that is what is unexpected.
Sorry for my english.
First you should add clearfix to the div2 if you are floating its contents.
You could calculate the width with
var width = $('.div2').innerHeight();
$('.div2').css('width', width);
Here an example, set the .div1 { overflow: visible} to see the result:
http://jsfiddle.net/karameloso/Apz7B/
Have a look at the carouFredSel jQuery plugin, it automatically resizes the slider on the fly to fit the new slide's content.
I am new to CSS designing and not aware of most of the properties of CSS. I am creating a layout for a web page. I am using div in my layout.
My structure is somewhat like this
<div id="content1_bg">
<div>
<div class="content1_title_img_div"></div>
<div class="content1_title_txt_div"></div>
<div class="content1_dvider_div"></div>
<div class="content1_content_div"></div>
</div>
<div></div>
<div></div>
</div>
For this my CSS is
#content1_bg div{width:250px;height:220px;float:left;border:3px solid blue; margin:20px;}
.content1_title_img_div{width:50px;height:100px;}
.content1_title_txt_div{width:150px;height:100px;}
.content1_dvider_div{width:100%;height:10%;clear:both;}
.content1_content_div{width:100%;height:50%;clear:both;}
For this layout i was expecting my design to be like
----------------
|BOX1 BOX2 |
----------------
| BOX 3 |
----------------
| BOX 4 |
----------------
But on using my css layout is somewhat like this
--------------------
| | | | |
|BOX1| | BOX2| |
| | | | |
--------------------
| |
|BOX3|
| |
--------------------
| |
|BOX4|
| |
Basically i want my inner div's not to inherit the properties of outer div. How can i remove this inheritance relationship between parent div and child div
You have to override the properties in the child.
#content1_bg div
means that all the divs coming inside an element with id #content1_bg will have the said properties.
If you need to apply these properties only to a selected set of divs then you can assign a class to the selected divs and change your css definition as '#content1_bg div.some_class'.
Then assign the class some_class to the selected divs